diff --git a/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.less b/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.less index 879cff167..f5e1f509c 100644 --- a/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.less +++ b/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.less @@ -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; + } } \ No newline at end of file diff --git a/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx b/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx index aa70d021e..44da39bfa 100644 --- a/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx +++ b/src/routes/MetaDetails/StreamsList/EpisodePicker/EpisodePicker.tsx @@ -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(null); const episodeRef = useRef(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
- - - + + +
; };