feat(series): reorganizing series hooks

src/components/VideoLayout/VideoLayout.module.scss

@@ -71,7 +71,6 @@
 
   @include responsive.desktop-only() {
     padding-left: 24px;
-    overflow-y: scroll;
   }
 }
 

src/components/VideoList/VideoList.module.scss

@@ -5,4 +5,16 @@
 
 .container {
   height: 100%;
+
+  @include responsive.desktop-only() {
+    overflow: hidden;
+  }
+}
+
+.content {
+  @include responsive.desktop-only() {
+    height: 100%;
+    padding-right: 24px;
+    overflow-y: scroll;
+  }
 }

src/components/VideoList/VideoList.tsx

@@ -50,21 +50,23 @@ function VideoList({
   return (
     <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
       {!!header && header}
-      <InfiniteScroll pageStart={0} loadMore={loadMore || defaultLoadMore} hasMore={hasLoadMore} loader={<InfiniteScrollLoader key="loader" />}>
-        {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
-          <VideoListItem
-            key={playlistItem.mediaid}
-            progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
-            onClick={() => onListItemClick && onListItemClick(playlistItem, playlistItem.feedid)}
-            onHover={() => onListItemHover && onListItemHover(playlistItem)}
-            loading={isLoading}
-            isActive={activeMediaId === playlistItem.mediaid}
-            activeLabel={activeLabel}
-            isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
-            item={playlistItem}
-          />
-        ))}
-      </InfiniteScroll>
+      <div className={styles.content}>
+        <InfiniteScroll pageStart={0} loadMore={loadMore || defaultLoadMore} hasMore={hasLoadMore} loader={<InfiniteScrollLoader key="loader" />}>
+          {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
+            <VideoListItem
+              key={playlistItem.mediaid}
+              progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
+              onClick={() => onListItemClick && onListItemClick(playlistItem, playlistItem.feedid)}
+              onHover={() => onListItemHover && onListItemHover(playlistItem)}
+              loading={isLoading}
+              isActive={activeMediaId === playlistItem.mediaid}
+              activeLabel={activeLabel}
+              isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
+              item={playlistItem}
+            />
+          ))}
+        </InfiniteScroll>
+      </div>
     </div>
   );
 }

src/config.ts

@@ -5,6 +5,9 @@ export const VideoProgressMinMax = {
 
 export const PLAYLIST_LIMIT = 25;
 
+// 8 hours
+export const SERIES_CACHE_TIME = 60 * 1000 * 60 * 8;
+
 // The externalData attribute of Cleeng can contain max 5000 characters
 export const MAX_WATCHLIST_ITEMS_COUNT = 48;
 

src/hooks/series/useEpisodes.ts

@@ -3,9 +3,7 @@ import { useInfiniteQuery } from 'react-query';
 import { getEpisodes, getSeasonWithEpisodes } from '#src/services/api.service';
 import type { EpisodesWithPagination } from '#types/series';
 import type { Pagination } from '#types/pagination';
-
-// 1 hour
-const CACHE_TIME = 60 * 1000 * 60;
+import { SERIES_CACHE_TIME } from '#src/config';
 
 const getNextPageParam = (pagination: Pagination) => {
   const { page, page_limit, total } = pagination;
@@ -50,8 +48,8 @@ export const useEpisodes = (
     {
       getNextPageParam: (lastPage) => getNextPageParam(lastPage?.pagination),
       enabled: options.enabled,
-      staleTime: CACHE_TIME,
-      cacheTime: CACHE_TIME,
+      staleTime: SERIES_CACHE_TIME,
+      cacheTime: SERIES_CACHE_TIME,
     },
   );
 

src/hooks/series/useNextEpisode.ts

@@ -1,18 +1,30 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
 
-import type { PlaylistItem } from '#types/playlist';
 import type { EpisodeMetadata, Series } from '#types/series';
 import { getNextItem } from '#src/utils/series';
+import { SERIES_CACHE_TIME } from '#src/config';
 
-export const useNextEpisode = ({ series, episodeMetadata }: { series: Series | undefined; episodeMetadata: EpisodeMetadata | undefined }) => {
-  const [nextItem, setNextItem] = useState<PlaylistItem | undefined>(undefined);
-  useEffect(() => {
-    async function fetchData() {
+export const useNextEpisode = ({
+  series,
+  episodeMetadata,
+  episodeId,
+}: {
+  series: Series | undefined;
+  episodeMetadata: EpisodeMetadata | undefined;
+  episodeId: string | null;
+}) => {
+  const { isLoading, data } = useQuery(
+    ['next-episode', series?.series_id, episodeId],
+    async () => {
       const item = await getNextItem(series, episodeMetadata);
-      setNextItem(item);
-    }
-    fetchData();
-  }, [series, episodeMetadata]);
 
-  return nextItem;
+      return item;
+    },
+    { staleTime: SERIES_CACHE_TIME, cacheTime: SERIES_CACHE_TIME },
+  );
+
+  return {
+    isLoading,
+    data,
+  };
 };

src/hooks/series/useSeries.ts

@@ -0,0 +1,34 @@
+import { useQuery, UseQueryResult } from 'react-query';
+
+import type { Series } from '#types/series';
+import { getSeries } from '#src/services/api.service';
+import type { ApiError } from '#src/utils/api';
+import { SERIES_CACHE_TIME } from '#src/config';
+
+export const useSeries = (
+  seriesId: string | undefined,
+): {
+  data: Series | undefined;
+  error: ApiError | null;
+  isLoading: boolean;
+} => {
+  // Try to get new series flow data
+  const { data, isLoading, error }: UseQueryResult<Series, ApiError> = useQuery(
+    ['series', seriesId],
+    async () => {
+      const series = await getSeries(seriesId || '');
+
+      return series;
+    },
+    {
+      enabled: !!seriesId,
+      staleTime: SERIES_CACHE_TIME,
+      cacheTime: SERIES_CACHE_TIME,
+      // Don't retry when we got a not found error from either series or media item request (prevent unneeded requests)
+      // Both errors mean that old series flow should be used
+      retry: (failureCount, error: ApiError) => error.code !== 404 && failureCount < 2,
+    },
+  );
+
+  return { data, isLoading, error };
+};

src/hooks/series/useSeriesLookup.ts

@@ -0,0 +1,29 @@
+import { useQuery } from 'react-query';
+
+import { getSeriesByMediaIds } from '#src/services/api.service';
+import { SERIES_CACHE_TIME } from '#src/config';
+
+export const useSeriesLookup = (mediaId: string | undefined) => {
+  const { isLoading, data } = useQuery(
+    ['seriesLookup', mediaId],
+    async () => {
+      if (!mediaId) {
+        return;
+      }
+
+      // get all series for the given media id
+      const data = await getSeriesByMediaIds([mediaId]);
+      // get first series for the requested episode
+      const firstSeries = data?.[mediaId]?.[0];
+
+      return firstSeries;
+    },
+    // 8 hours
+    { staleTime: SERIES_CACHE_TIME, cacheTime: SERIES_CACHE_TIME, enabled: !!mediaId },
+  );
+
+  return {
+    isLoading,
+    data,
+  };
+};

src/pages/LegacySeries/LegacySeries.tsx

@@ -10,7 +10,7 @@ import VideoLayout from '#components/VideoLayout/VideoLayout';
 import InlinePlayer from '#src/containers/InlinePlayer/InlinePlayer';
 import { isLocked } from '#src/utils/entitlements';
 import useEntitlement from '#src/hooks/useEntitlement';
-import { formatSeriesMetaString, formatVideoMetaString, deprecatedSeriesURL, formatPlaylistMetaString } from '#src/utils/formatting';
+import { formatSeriesMetaString, formatVideoMetaString, legacySeriesURL, formatPlaylistMetaString } from '#src/utils/formatting';
 import useMedia from '#src/hooks/useMedia';
 import ErrorPage from '#components/ErrorPage/ErrorPage';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
@@ -46,6 +46,7 @@ const LegacySeries = () => {
   const { isLoading: isSeriesPlaylistLoading, data: seriesPlaylist, isError: isPlaylistError } = usePlaylist(seriesId, {}, true, false);
   const { isLoading: isEpisodeLoading, data: episode } = useMedia(episodeId || '');
   const { isLoading: isTrailerLoading, data: trailerItem } = useMedia(episode?.trailerId || '');
+
   const episodeMetadata = useMemo(() => ({ episodeNumber: episode?.episodeNumber || '0', seasonNumber: episode?.seasonNumber || '0' }), [episode]);
 
   // Whether we show series or episode information. For old series flow we only have access to the playlist
@@ -77,11 +78,11 @@ const LegacySeries = () => {
   const hasSubscription = !!subscription;
 
   // Handlers
-  const goBack = () => episode && navigate(deprecatedSeriesURL({ episodeId: episode.mediaid, seriesId, play: false, playlistId: feedId }));
+  const goBack = () => episode && navigate(legacySeriesURL({ episodeId: episode.mediaid, seriesId, play: false, playlistId: feedId }));
   const onCardClick = (toEpisode: PlaylistItem) =>
-    seriesPlaylist && navigate(deprecatedSeriesURL({ episodeId: toEpisode.mediaid, seriesId, play: false, playlistId: feedId }));
+    seriesPlaylist && navigate(legacySeriesURL({ episodeId: toEpisode.mediaid, seriesId, play: false, playlistId: feedId }));
   const handleComplete = useCallback(async () => {
-    navigate(deprecatedSeriesURL({ episodeId: nextItem?.mediaid, seriesId, play: !!nextItem, playlistId: feedId }));
+    navigate(legacySeriesURL({ episodeId: nextItem?.mediaid, seriesId, play: !!nextItem, playlistId: feedId }));
   }, [navigate, nextItem, seriesId, feedId]);
 
   // Effects
@@ -106,7 +107,7 @@ const LegacySeries = () => {
 
   const pageTitle = `${selectedItem.title} - ${siteName}`;
   const pageDescription = selectedItem?.description || '';
-  const canonicalUrl = `${window.location.origin}${deprecatedSeriesURL({ episodeId: episode?.mediaid, seriesId })}`;
+  const canonicalUrl = `${window.location.origin}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`;
   const backgroundImage = (selectedItem.backgroundImage as ImageData) || undefined;
 
   const primaryMetadata = episode
@@ -124,7 +125,7 @@ const LegacySeries = () => {
   const startWatchingButton = (
     <StartWatchingButton
       item={episode || firstEpisode}
-      playUrl={deprecatedSeriesURL({ episodeId: episode?.mediaid || firstEpisode?.mediaid, seriesId, play: true, playlistId: feedId })}
+      playUrl={legacySeriesURL({ episodeId: episode?.mediaid || firstEpisode?.mediaid, seriesId, play: true, playlistId: feedId })}
     />
   );
 

src/pages/LegacySeries/utils.ts

@@ -1,4 +1,4 @@
-import { deprecatedSeriesURL } from '#src/utils/formatting';
+import { legacySeriesURL } from '#src/utils/formatting';
 import { secondsToISO8601 } from '#src/utils/datetime';
 import type { Playlist, PlaylistItem } from '#types/playlist';
 import type { EpisodeMetadata } from '#types/series';
@@ -69,7 +69,7 @@ export const generateLegacyEpisodeJSONLD = (
   episodeMetadata: EpisodeMetadata | undefined,
   seriesId: string,
 ) => {
-  const episodeCanonical = `${window.location.origin}${deprecatedSeriesURL({ episodeId: episode?.mediaid, seriesId })}`;
+  const episodeCanonical = `${window.location.origin}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`;
   const seriesMetadata = generateLegacySeriesMetadata(seriesPlaylist, seriesId);
 
   if (!episode) {