diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index 01d6f1143..f1acddcc6 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -26,7 +26,15 @@ const MetaDetails = ({ urlParams, queryParams }) => { }, [metaDetails]); const streamsResourceRef = metaDetails.selected !== null ? metaDetails.selected.streams_resource_ref : null; const streamsResources = metaDetails.streams_resources; - const selectedSeason = queryParams.get('season'); + const seasonQueryParam = React.useMemo(() => { + return queryParams.has('season') && !isNaN(queryParams.get('season')) ? + parseInt(queryParams.get('season')) + : + null; + }, [queryParams]); + const onSeasonChanged = React.useCallback((season) => { + window.location.replace(`#/metadetails/${selectedMetaResource.request.path.type_name}/${selectedMetaResource.request.path.id}?season=${season.value}`); + }, [selectedMetaResource]); const selectedVideo = React.useMemo(() => { return streamsResourceRef !== null && selectedMetaResource !== null ? selectedMetaResource.content.content.videos.reduce((result, video) => { @@ -126,7 +134,8 @@ const MetaDetails = ({ urlParams, queryParams }) => { : null diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js index 259704999..a6a53ed35 100644 --- a/src/routes/MetaDetails/VideosList/VideosList.js +++ b/src/routes/MetaDetails/VideosList/VideosList.js @@ -3,31 +3,48 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); -const deepLinking = require('stremio/common/deepLinking'); const Image = require('stremio/common/Image'); const SearchBar = require('stremio/common/SearchBar'); const SeasonsBar = require('./SeasonsBar'); const Video = require('./Video'); -const useSelectableSeasons = require('./useSelectableSeasons'); const styles = require('./styles'); -const VideosList = ({ className, metaResource, season }) => { +const VideosList = ({ className, metaResource, season, seasonOnSelect }) => { const videos = React.useMemo(() => { return metaResource && metaResource.content.type === 'Ready' ? metaResource.content.content.videos : []; }, [metaResource]); - const [seasons, selectedSeason, videosForSeason, selectSeason] = useSelectableSeasons(videos); - const seasonOnSelect = React.useCallback((event) => { - const seasonDeepLink = deepLinking.withSeason({ - season: event.value, - type: metaResource.request.path.type_name, - id: metaResource.request.path.id - }); - selectSeason(event.value); - window.location.replace(seasonDeepLink.meta_details_videos_season); - }, [metaResource]); + const seasons = React.useMemo(() => { + return videos + .map(({ season }) => season) + .filter((season, index, seasons) => { + return season !== null && + !isNaN(season) && + typeof season === 'number' && + seasons.indexOf(season) === index; + }) + .sort((a, b) => a - b); + }, [videos]); + const selectedSeason = React.useMemo(() => { + return seasons.includes(season) ? + season + : + seasons.length > 0 ? + seasons[seasons.length - 1] + : + null; + }, [seasons, season]); + const videosForSeason = React.useMemo(() => { + return videos + .filter((video) => { + return selectedSeason === null || video.season === selectedSeason; + }) + .sort((a, b) => { + return a.episode - b.episode; + }); + }, [videos, selectedSeason]); const [search, setSearch] = React.useState(''); const searchInputOnChange = React.useCallback((event) => { setSearch(event.currentTarget.value); @@ -59,7 +76,7 @@ const VideosList = ({ className, metaResource, season }) => { seasons.length > 1 ? @@ -96,7 +113,8 @@ const VideosList = ({ className, metaResource, season }) => { VideosList.propTypes = { className: PropTypes.string, metaResource: PropTypes.object, - season: PropTypes.number + season: PropTypes.number, + seasonOnSelect: PropTypes.func }; module.exports = VideosList;