Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(EpisodePicker): unify styles with install addons button

Browse source
This commit is contained in:
Botzy 2025-02-11 16:41:36 +02:00
parent f7494d6e97
commit 6ca94a2124
2 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.less
View file

@ -1,19 +1,29 @@
// Copyright (C) 2017-2025 Smart code 203358507
.button-container {
flex: none;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2.625rem;
margin: 2rem 0;
border: var(--focus-outline-size) solid var(--primary-accent-color);
background-color: var(--primary-accent-color);
transition: 0.3s all ease-in-out;
border-radius: 2.625rem;
color: var(--primary-foreground-color);
border: 2px solid transparent;
height: 4rem;
padding: 0 2rem;
margin: 1rem auto;
border-radius: 2rem;
&:hover, &:focus {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
&:hover {
background-color: transparent;
}
.label {
flex: 0 1 auto;
font-size: 1rem;
font-weight: 700;
max-height: 3.6em;
text-align: center;
color: var(--primary-foreground-color);
margin-bottom: 0;
}
}

25
src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx
View file

@ -14,15 +14,22 @@ export const EpisodePicker = ({ className, onSubmit }: Props) => {
const { t } = useTranslation();
const splitPath = window.location.hash.split('/');
const videoId = decodeURIComponent(splitPath[splitPath.length - 1]);
const [initialSeason, initialEpisode] = React.useMemo(() => {
const [, pathSeason, pathEpisode] = videoId ? videoId.split(':') : [];
const [, pathSeason, pathEpisode] = videoId ? videoId.split(':') : [];
const [season, setSeason] = React.useState(() => {
const initialSeason = isNaN(parseInt(pathSeason)) ? 1 : parseInt(pathSeason);
return initialSeason;
});
const [episode, setEpisode] = React.useState(() => {
const initialEpisode = isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode);
return [initialSeason, initialEpisode];
}, [videoId]);
return initialEpisode;
});
const seasonRef = useRef<HTMLInputElement>(null);
const episodeRef = useRef<HTMLInputElement>(null);
const handleSeasonChange = (value?: number) => setSeason(value !== undefined ? value : 1);
const handleEpisodeChange = (value?: number) => setEpisode(value !== undefined ? value : 1);
const handleSubmit = React.useCallback(() => {
const season = parseInt(seasonRef.current?.value || '1');
const episode = parseInt(episodeRef.current?.value || '1');
@ -31,10 +38,14 @@ export const EpisodePicker = ({ className, onSubmit }: Props) => {
}
}, [onSubmit, seasonRef, episodeRef]);
const disabled = React.useMemo(() => season === parseInt(pathSeason) && episode === parseInt(pathEpisode), [pathSeason, pathEpisode, season, episode]);
return <div className={className}>
<NumberInput ref={seasonRef} min={0} label={t('SEASON')} defaultValue={initialSeason} showButtons />
<NumberInput ref={episodeRef} min={1} label={t('EPISODE')} defaultValue={initialEpisode} showButtons />
<Button className={styles['button-container']} onClick={handleSubmit}>{t('SIDEBAR_SHOW_STREAMS')}</Button>
<NumberInput ref={seasonRef} min={0} label={t('SEASON')} defaultValue={season} onUpdate={handleSeasonChange} showButtons />
<NumberInput ref={episodeRef} min={1} label={t('EPISODE')} defaultValue={episode} onUpdate={handleEpisodeChange} showButtons />
<Button className={styles['button-container']} onClick={handleSubmit} disabled={disabled}>
<div className={styles['label']}>{t('SIDEBAR_SHOW_STREAMS')}</div>
</Button>
</div>;
};