feat(series): review fixes

jwplayer · May 22, 2023 · d9b997e · d9b997e
1 parent 2d1667a
commit d9b997e
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 38 deletions.
diff --git a/src/components/VideoList/VideoList.tsx b/src/components/VideoList/VideoList.tsx
@@ -44,39 +44,43 @@ function VideoList({
   hasLoadMore,
   loadMore,
 }: Props) {
-  const List = () => {
-    return (
-      <>
-        {playlist?.playlist?.map((playlistItem: PlaylistItem) => {
-          const { mediaid } = playlistItem;
-
-          return (
+  return (
+    <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
+      {!!header && header}
+      {loadMore ? (
+        <InfiniteScroll pageStart={0} loadMore={loadMore} 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>
+      ) : (
+        <>
+          {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
             <VideoListItem
-              key={mediaid}
-              progress={watchHistory ? watchHistory[mediaid] : undefined}
+              key={playlistItem.mediaid}
+              progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
               onClick={() => onListItemClick && onListItemClick(playlistItem, playlistItem.feedid)}
               onHover={() => onListItemHover && onListItemHover(playlistItem)}
               loading={isLoading}
-              isActive={activeMediaId === mediaid}
+              isActive={activeMediaId === playlistItem.mediaid}
               activeLabel={activeLabel}
               isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
               item={playlistItem}
             />
-          );
-        })}
-      </>
-    );
-  };
-
-  return (
-    <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
-      {!!header && header}
-      {loadMore ? (
-        <InfiniteScroll pageStart={0} loadMore={loadMore} hasMore={hasLoadMore} loader={<InfiniteScrollLoader key="loader" />}>
-          <List />
-        </InfiniteScroll>
-      ) : (
-        <List />
+          ))}
+        </>
       )}
     </div>
   );

diff --git a/src/containers/ShelfList/ShelfList.tsx b/src/containers/ShelfList/ShelfList.tsx
@@ -29,7 +29,7 @@ const ShelfList = ({ rows }: Props) => {
   const { accessModel } = useConfigStore(({ accessModel }) => ({ accessModel }), shallow);
   const [rowCount, setRowCount] = useState(INITIAL_ROW_COUNT);
 
-  const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionary(true));
+  const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionaryWithSeries());
 
   // User
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);

diff --git a/src/pages/ScreenRouting/ScreenMap.ts b/src/pages/ScreenRouting/ScreenMap.ts
@@ -13,7 +13,7 @@ export class ScreenMap<T extends Playlist | PlaylistItem> {
   private definitions: ScreenDefinition<T>[] = [];
 
   register(component: ScreenComponent<T>, predicate: ScreenPredicate<T>) {
-    this.definitions.unshift({ component, predicate });
+    this.definitions.push({ component, predicate });
   }
 
   registerByContentType(component: ScreenComponent<T>, contentType: string) {

diff --git a/src/pages/Series/Series.tsx b/src/pages/Series/Series.tsx
@@ -78,7 +78,7 @@ const Series = () => {
   const nextItem = useNextEpisode({ episode, seriesPlaylist, series, episodeMetadata });
 
   // Watch history
-  const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionary());
+  const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionaryWithEpisodes());
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);

diff --git a/src/stores/WatchHistoryStore.ts b/src/stores/WatchHistoryStore.ts
@@ -10,7 +10,8 @@ type WatchHistoryState = {
   playlistItemsLoaded: boolean;
   getItem: (item: PlaylistItem) => WatchHistoryItem | undefined;
   getPlaylist: () => Playlist;
-  getDictionary: (useSeries?: boolean) => { [key: string]: number };
+  getDictionaryWithEpisodes: () => { [key: string]: number };
+  getDictionaryWithSeries: () => { [key: string]: number };
 };
 
 export const useWatchHistoryStore = createStore<WatchHistoryState>('WatchHistoryStore', (_, get) => ({
@@ -28,9 +29,17 @@ export const useWatchHistoryStore = createStore<WatchHistoryState>('WatchHistory
         .watchHistory.filter(({ playlistItem, progress }) => !!playlistItem && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max)
         .map(({ playlistItem }) => playlistItem),
     } as Playlist),
-  getDictionary: (useSeries: boolean = false) =>
+  getDictionaryWithEpisodes: () =>
     get().watchHistory.reduce((dict: { [key: string]: number }, item) => {
-      const key = useSeries ? item.seriesId || item.mediaid : item.mediaid;
+      const key = item.mediaid;
+
+      dict[key] = item.progress;
+
+      return dict;
+    }, {}),
+  getDictionaryWithSeries: () =>
+    get().watchHistory.reduce((dict: { [key: string]: number }, item) => {
+      const key = item.seriesId || item.mediaid;
 
       dict[key] = item.progress;
 

diff --git a/test-e2e/tests/seo_test.ts b/test-e2e/tests/seo_test.ts
@@ -81,10 +81,14 @@ Scenario('It renders the correct structured metadata for the series screen', asy
   await I.openVideoCard(constants.primitiveAnimalsTitle);
   I.see('Primitive Animals');
 
+  const rawURL = await I.grabCurrentUrl();
+  const url = removeQueryParams(rawURL, ['r', 'app-config']);
+  const mediaId = url.split('/')[2];
+
   I.seeTextEquals(
     JSON.stringify({
       '@type': 'TVSeries',
-      '@id': `${constants.baseUrl}s/${constants.primitiveAnimalsId}`,
+      '@id': `${constants.baseUrl}s/${mediaId}`,
       name: 'Primitive Animals',
       numberOfEpisodes: '4',
       numberOfSeasons: '0',
@@ -101,6 +105,7 @@ Scenario('It renders the correct structured metadata for the episode screen', as
 
   const rawURL = await I.grabCurrentUrl();
   const url = removeQueryParams(rawURL, ['r', 'app-config']);
+  const mediaId = url.split('/')[2];
 
   I.seeTextEquals(
     JSON.stringify({
@@ -113,7 +118,7 @@ Scenario('It renders the correct structured metadata for the episode screen', as
       uploadDate: '2021-03-10T10:00:00.000Z',
       partOfSeries: {
         '@type': 'TVSeries',
-        '@id': `${constants.baseUrl}s/${constants.primitiveAnimalsId}`,
+        '@id': `${constants.baseUrl}s/${mediaId}`,
         name: 'Primitive Animals',
         numberOfEpisodes: '4',
         numberOfSeasons: '0',

diff --git a/test-e2e/tests/series_test.ts b/test-e2e/tests/series_test.ts
@@ -46,9 +46,7 @@ Scenario('I can see series with seasons', async ({ I }) => {
   I.see('17 episodes');
   I.see('Beginner');
   I.see('CC-BY');
-  I.see(
-    'Ever wanted to learn how to make Minecraft Animation? Dillon walks you through the step by step process he used to create this Trident Animation. This includes everything from importing your Minecraft world to rendering and posting on YouTube. Enjoy!',
-  );
+  I.see(constants.minecraftAnimationWorkshopDescription);
   I.see(constants.startWatchingButton);
   I.see('Favorite');
   I.see('Share');

diff --git a/types/series.d.ts b/types/series.d.ts
@@ -11,14 +11,13 @@ export type Episode = {
   media_item: PlaylistItem;
 };
 
-export type Season<T> = {
+export type Season = {
   season_id: string;
   season_number: number;
   season_title: string;
   season_description: string;
   episode_count: number;
   total_duration: number;
-  episodes: T[];
 };
 
 export type EpisodesRes = Pagination & { episodes: Episode[] };