feat(videodetail): add season filters

src/i18n/locales/en_US/video.json

@@ -9,5 +9,6 @@
   "copied_url": "Copied url",
   "watch_trailer": "Watch the trailer",
   "currently_playing": "Currently playing",
-  "current_episode": "Current episode"
+  "current_episode": "Current episode",
+  "episodes": "Episodes"
 }

src/i18n/locales/nl_NL/video.json

@@ -9,5 +9,6 @@
   "copied_url": "",
   "watch_trailer": "", 
   "currently_playing": "",
-  "current_episode": ""
+  "current_episode": "",
+  "episodes": ""
 }

src/screens/Movie/Movie.module.scss

@@ -1,2 +1,15 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+
+.related {
+  display: flex;
+  align-items: center;
+  margin: 16px 0px;
+  > h3 {
+    font-family: var(--body-alt-font-family);
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 26px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
+  }
+}

src/screens/Movie/Movie.tsx

@@ -15,6 +15,8 @@ import CardGrid from '../../components/CardGrid/CardGrid';
 import useMedia from '../../hooks/useMedia';
 import { copyToClipboard } from '../../utils/dom';
 
+import styles from './Movie.module.scss';
+
 type MovieRouteParams = {
   id: string;
 };
@@ -111,13 +113,18 @@ const Movie = ({
         {config.recommendationsPlaylist ? (
           <PlaylistContainer playlistId={config.recommendationsPlaylist} relatedMediaId={item.mediaid}>
             {({ playlist, isLoading }) => (
-              <CardGrid
-                playlist={playlist.playlist}
-                onCardClick={onCardClick}
-                isLoading={isLoading}
-                currentCardItem={item}
-                currentCardLabel={t('currently_playing')}
-              />
+              <>
+                <div className={styles.related}>
+                  <h3>{playlist.title}</h3>
+                </div>
+                <CardGrid
+                  playlist={playlist.playlist}
+                  onCardClick={onCardClick}
+                  isLoading={isLoading}
+                  currentCardItem={item}
+                  currentCardLabel={t('currently_playing')}
+                />
+              </>
             )}
           </PlaylistContainer>
         ) : undefined}

src/screens/Series/Series.module.scss

@@ -1,2 +1,19 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+
+.episodes {
+  display: flex;
+  align-items: center;
+  margin: 16px 0px;
+  @include responsive.mobile-and-tablet() {
+    justify-content: space-between;
+  }
+  > h3 {
+    font-family: var(--body-alt-font-family);
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 26px;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
+  }
+}

src/screens/Series/Series.tsx

@@ -9,12 +9,15 @@ import { useFavorites } from '../../stores/FavoritesStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { episodeURL } from '../../utils/formatting';
+import Filter from '../../components/Filter/Filter';
 import type { PlaylistItem } from '../../../types/playlist';
 import VideoComponent from '../../components/Video/Video';
-import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import useMedia from '../../hooks/useMedia';
 import usePlaylist from '../../hooks/usePlaylist';
 import { copyToClipboard } from '../../utils/dom';
+import { filterSeries, getFiltersFromSeries } from '../../utils/collection';
+
+import styles from './Series.module.scss';
 
 type SeriesRouteParams = {
   id: string;
@@ -30,15 +33,21 @@ const Series = ({
   const history = useHistory();
   const { t } = useTranslation('video');
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
-  const { isLoading: playlistIsLoading, error: playlistError, data: seriesPlaylist } = usePlaylist(
-    id,
-    undefined,
-    true,
-    false,
-  );
+  const {
+    isLoading: playlistIsLoading,
+    error: playlistError,
+    data: seriesPlaylist = { title: '', playlist: [] },
+  } = usePlaylist(id, undefined, true, false);
   const { isLoading, error, data: item } = useMedia(searchParams.get('e') || '');
   const { data: trailerItem } = useMedia(item?.trailerId || '');
 
+  const [seasonFilter, setSeasonFilter] = useState<string>('');
+  const filters = getFiltersFromSeries(seriesPlaylist.playlist);
+  const filteredPlaylist = useMemo(() => filterSeries(seriesPlaylist.playlist, seasonFilter), [
+    seriesPlaylist,
+    seasonFilter,
+  ]);
+
   const { hasItem, saveItem, removeItem } = useFavorites();
   const play = searchParams.get('play') === '1';
   const posterFading: boolean = config ? config.options.posterFading === true : false;
@@ -122,17 +131,25 @@ const Series = ({
         onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
         isSeries
       >
-        <PlaylistContainer playlistId={id}>
-          {() => (
-            <CardGrid
-              playlist={seriesPlaylist.playlist}
-              onCardClick={onCardClick}
-              isLoading={isLoading}
-              currentCardItem={item}
-              currentCardLabel={t('current_episode')}
+        <>
+          <div className={styles.episodes}>
+            <h3>{t('episodes')}</h3>
+            <Filter
+              name="categories"
+              value={seasonFilter}
+              defaultLabel="All"
+              options={filters}
+              setValue={setSeasonFilter}
             />
-          )}
-        </PlaylistContainer>
+          </div>
+          <CardGrid
+            playlist={filteredPlaylist}
+            onCardClick={onCardClick}
+            isLoading={isLoading}
+            currentCardItem={item}
+            currentCardLabel={t('current_episode')}
+          />
+        </>
       </VideoComponent>
     </React.Fragment>
   );

src/utils/collection.ts

@@ -14,6 +14,19 @@ const filterPlaylist = (playlist: PlaylistItem[], filter: string) => {
   return playlist.filter(({ genre }) => genre === filter);
 };
 
+const getFiltersFromSeries = (series: PlaylistItem[]): string[] =>
+  series.reduce(
+    (filters: string[], item) =>
+      item.seasonNumber && filters.includes(item.seasonNumber) ? filters : filters.concat(item.seasonNumber || ''),
+    [],
+  );
+
+const filterSeries = (playlist: PlaylistItem[], filter: string) => {
+  if (!filter) return playlist;
+
+  return playlist.filter(({ seasonNumber }) => seasonNumber === filter);
+};
+
 const chunk = <T>(input: T[], size: number) => {
   return input?.reduce((arr: T[][], item, idx: number) => {
     return idx % size === 0 ? [...arr, [item]] : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
@@ -46,4 +59,12 @@ const generatePlaylistPlaceholder = (playlistLength: number = 15): Playlist => (
   ),
 });
 
-export { getFiltersFromConfig, filterPlaylist, chunk, findPlaylistImageForWidth, generatePlaylistPlaceholder };
+export {
+  getFiltersFromConfig,
+  getFiltersFromSeries,
+  filterPlaylist,
+  filterSeries,
+  chunk,
+  findPlaylistImageForWidth,
+  generatePlaylistPlaceholder,
+};