fix(series): first episode switching per season

packages/hooks-react/src/series/useFirstEpisode.ts

@@ -0,0 +1,24 @@
+import { useQuery } from 'react-query';
+import type { Series } from '@jwp/ott-common/types/series';
+import ApiService from '@jwp/ott-common/src/services/ApiService';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import { CACHE_TIME, STALE_TIME } from '@jwp/ott-common/src/constants';
+
+export const useFirstEpisode = ({ series }: { series: Series | undefined }) => {
+  const apiService = getModule(ApiService);
+
+  const { isLoading, data } = useQuery(
+    ['first-episode', series?.series_id],
+    async () => {
+      const item = await apiService.getEpisodes({ seriesId: series?.series_id, pageLimit: 1 });
+
+      return item?.episodes?.[0];
+    },
+    { staleTime: STALE_TIME, cacheTime: CACHE_TIME, enabled: !!series?.series_id },
+  );
+
+  return {
+    isLoading,
+    data,
+  };
+};

packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx

@@ -22,6 +22,7 @@ import { useSeriesLookup } from '@jwp/ott-hooks-react/src/series/useSeriesLookup
 import { useNextEpisode } from '@jwp/ott-hooks-react/src/series/useNextEpisode';
 import PlayTrailer from '@jwp/ott-theme/assets/icons/play_trailer.svg?react';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
+import { useFirstEpisode } from '@jwp/ott-hooks-react/src/series/useFirstEpisode';
 
 import type { ScreenComponent } from '../../../../../types/screens';
 import ErrorPage from '../../../../components/ErrorPage/ErrorPage';
@@ -54,7 +55,8 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
   const { isLoading: isSeriesDataLoading, data: series, error: seriesError } = useSeries(seriesId);
   const { isLoading: isEpisodeLoading, data: episode } = useMedia(episodeId || '');
   const { isLoading: isTrailerLoading, data: trailerItem } = useMedia(episode?.trailerId || '');
-  const { data: episodeInSeries, isLoading: isSeriesDictionaryLoading } = useSeriesLookup(episode?.mediaid);
+  const { isLoading: isSeriesDictionaryLoading, data: episodeInSeries } = useSeriesLookup(episodeId || undefined);
+  const { isLoading: isFirstEpisodeLoading, data: firstEpisode } = useFirstEpisode({ series });
 
   // Whether we show series or episode information
   const selectedItem = (episode || seriesMedia) as PlaylistItem;
@@ -76,7 +78,6 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
     hasNextPage: hasNextEpisodesPage,
   } = useEpisodes(seriesId, seasonFilter, { enabled: seasonFilter !== undefined && !!series });
 
-  const firstEpisode = useMemo(() => episodes?.[0]?.episodes?.[0], [episodes]);
   const episodeMetadata = useMemo(
     () =>
       episodeInSeries && {
@@ -162,22 +163,24 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
     }
   }, [episodeMetadata, seasonFilter, isSeriesDataLoading, isEpisodeLoading, isSeriesDictionaryLoading, filters, episodeId]);
 
+  // UI
+  const playEpisode = episode || firstEpisode;
+  const isLoading = isSeriesDataLoading || isSeriesDictionaryLoading || isEpisodeLoading || isFirstEpisodeLoading;
+
   const startWatchingButton = useMemo(
-    () => (
-      <StartWatchingButton
-        key={episodeId} // necessary to fix autofocus on TalkBack
-        item={episode || firstEpisode}
-        onClick={() => {
-          setSearchParams({ ...searchParams, e: (episode || firstEpisode).mediaid, r: feedId || '', play: '1' }, { replace: true });
-        }}
-      />
-    ),
-    [episodeId, episode, firstEpisode, setSearchParams, searchParams, feedId],
+    () =>
+      playEpisode && (
+        <StartWatchingButton
+          key={episodeId} // necessary to fix autofocus on TalkBack
+          item={playEpisode}
+          onClick={() => {
+            setSearchParams({ ...searchParams, e: playEpisode.mediaid, r: feedId || '', play: '1' }, { replace: true });
+          }}
+        />
+      ),
+    [episodeId, playEpisode, setSearchParams, searchParams, feedId],
   );
 
-  // UI
-  const isLoading = isSeriesDataLoading || isSeriesDictionaryLoading || isEpisodeLoading;
-
   if (isLoading) return <Loading />;
 
   // Legacy series is used
@@ -187,7 +190,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
     return <Navigate to={url} replace />;
   }
 
-  if (!seriesMedia || !series) return <ErrorPage title={t('series_error')} />;
+  if (!seriesMedia || !series || !playEpisode) return <ErrorPage title={t('series_error')} />;
 
   const pageTitle = `${selectedItem.title} - ${siteName}`;
   const canonicalUrl = `${window.location.origin}${mediaURL({ media: seriesMedia, episodeId: episode?.mediaid })}`;
@@ -274,10 +277,10 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
         hasMore={hasNextEpisodesPage}
         loadMore={fetchNextEpisodes}
         player={
-          inlineLayout && (episode || firstEpisode) ? (
+          inlineLayout ? (
             <InlinePlayer
               isLoggedIn={isLoggedIn}
-              item={episode || firstEpisode}
+              item={playEpisode}
               seriesItem={seriesMedia}
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
@@ -291,7 +294,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
             <Cinema
               open={play && isEntitled}
               onClose={goBack}
-              item={episode || firstEpisode}
+              item={playEpisode}
               seriesItem={seriesMedia}
               title={seriesMedia.title}
               primaryMetadata={primaryMetadata}