diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js index 59607711e..d75080d01 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js +++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js @@ -46,9 +46,18 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => { }); } }, [onSelect]); + + const [prevDisabled, nextDisabled] = React.useMemo(() => { + const currentIndex = seasons.indexOf(season); + return [ + currentIndex === 0, + currentIndex === seasons.length - 1 + ]; + }, [season, seasons]); + return (
- @@ -60,7 +69,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => { selected={selected} onSelect={seasonOnSelect} /> - diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less index 7e58c7ec8..f030385b4 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less +++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less @@ -27,6 +27,11 @@ border-radius: 3rem; padding: 0.5rem; + &.disabled { + pointer-events: none; + opacity: 0.5; + } + &:hover, &:focus { background-color: var(--overlay-color); }