callback func when season is changed added; useSelectableSeason hook not used anymore

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 }) => {
                             <VideosList
                                 className={styles['videos-list']}
                                 metaResource={selectedMetaResource}
-                                season={parseInt(selectedSeason, 10)}
+                                season={seasonQueryParam}
+                                seasonOnSelect={onSeasonChanged}
                             />
                             :
                             null

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 ?
                                     <SeasonsBar
                                         className={styles['seasons-bar']}
-                                        season={season !== null && !isNaN(season) && typeof season === 'number' && seasons.includes(season) ? season : selectedSeason}
+                                        season={selectedSeason}
                                         seasons={seasons}
                                         onSelect={seasonOnSelect}
                                     />
@@ -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;