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;