Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42: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 // Copyright (C) 2017-2025 Smart code 203358507
.button-container { .button-container {
flex: none;
align-self: stretch;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem 2.625rem; border: var(--focus-outline-size) solid var(--primary-accent-color);
margin: 2rem 0;
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
transition: 0.3s all ease-in-out; height: 4rem;
border-radius: 2.625rem; padding: 0 2rem;
color: var(--primary-foreground-color); margin: 1rem auto;
border: 2px solid transparent; border-radius: 2rem;
&:hover, &:focus { &:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
background-color: transparent; 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 { t } = useTranslation();
const splitPath = window.location.hash.split('/'); const splitPath = window.location.hash.split('/');
const videoId = decodeURIComponent(splitPath[splitPath.length - 1]); 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); const initialSeason = isNaN(parseInt(pathSeason)) ? 1 : parseInt(pathSeason);
return initialSeason;
});
const [episode, setEpisode] = React.useState(() => {
const initialEpisode = isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode); const initialEpisode = isNaN(parseInt(pathEpisode)) ? 1 : parseInt(pathEpisode);
return [initialSeason, initialEpisode]; return initialEpisode;
}, [videoId]); });
const seasonRef = useRef<HTMLInputElement>(null); const seasonRef = useRef<HTMLInputElement>(null);
const episodeRef = 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 handleSubmit = React.useCallback(() => {
const season = parseInt(seasonRef.current?.value || '1'); const season = parseInt(seasonRef.current?.value || '1');
const episode = parseInt(episodeRef.current?.value || '1'); const episode = parseInt(episodeRef.current?.value || '1');
@ -31,10 +38,14 @@ export const EpisodePicker = ({ className, onSubmit }: Props) => {
} }
}, [onSubmit, seasonRef, episodeRef]); }, [onSubmit, seasonRef, episodeRef]);
const disabled = React.useMemo(() => season === parseInt(pathSeason) && episode === parseInt(pathEpisode), [pathSeason, pathEpisode, season, episode]);
return <div className={className}> return <div className={className}>
<NumberInput ref={seasonRef} min={0} label={t('SEASON')} defaultValue={initialSeason} showButtons /> <NumberInput ref={seasonRef} min={0} label={t('SEASON')} defaultValue={season} onUpdate={handleSeasonChange} showButtons />
<NumberInput ref={episodeRef} min={1} label={t('EPISODE')} defaultValue={initialEpisode} showButtons /> <NumberInput ref={episodeRef} min={1} label={t('EPISODE')} defaultValue={episode} onUpdate={handleEpisodeChange} showButtons />
<Button className={styles['button-container']} onClick={handleSubmit}>{t('SIDEBAR_SHOW_STREAMS')}</Button> <Button className={styles['button-container']} onClick={handleSubmit} disabled={disabled}>
<div className={styles['label']}>{t('SIDEBAR_SHOW_STREAMS')}</div>
</Button>
</div>; </div>;
}; };