fix(series): fix 'hasMore' param (#416)

* fix(series): fix 'hasMore' param and items shown
jwplayer · Dec 8, 2023 · 111fcfb · 111fcfb
1 parent de4ff48
commit 111fcfb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -33,7 +33,7 @@ type CardGridProps = {
   accessModel: AccessModel;
   isLoggedIn: boolean;
   hasSubscription: boolean;
-  hasLoadMore?: boolean;
+  hasMore?: boolean;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
   getUrl: (item: PlaylistItem) => string;
@@ -49,7 +49,7 @@ function CardGrid({
   accessModel,
   isLoggedIn,
   hasSubscription,
-  hasLoadMore,
+  hasMore,
   getUrl,
   loadMore,
   onCardHover,
@@ -90,9 +90,11 @@ function CardGrid({
   };
 
   return (
-    <InfiniteScroll pageStart={0} loadMore={loadMore || defaultLoadMore} hasMore={hasLoadMore || defaultHasMore} loader={<InfiniteScrollLoader key="loader" />}>
+    <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? defaultHasMore} loader={<InfiniteScrollLoader key="loader" />}>
       <div className={classNames(styles.container, styles[`cols-${visibleTiles}`])} role="grid">
-        {playlist.playlist.slice(0, rowCount * visibleTiles).map(renderTile)}
+        {/* When loadMore is present -> we get accumulated data (playlist.playlist) from the outside (we do it for series) 
+            When not -> we hide some cards visually to save some computing resources spent on rendering */}
+        {(loadMore ? playlist.playlist : playlist.playlist.slice(0, rowCount * visibleTiles)).map(renderTile)}
       </div>
     </InfiniteScroll>
   );

diff --git a/src/components/VideoLayout/VideoLayout.tsx b/src/components/VideoLayout/VideoLayout.tsx
@@ -22,7 +22,7 @@ type FilterProps = {
 };
 
 type LoadMoreProps = {
-  hasLoadMore?: boolean;
+  hasMore?: boolean;
   loadMore?: () => void;
 };
 
@@ -94,7 +94,7 @@ const VideoLayout: React.FC<Props> = ({
   defaultFilterLabel = '',
   children,
   // load more
-  hasLoadMore,
+  hasMore,
   loadMore,
   getURL,
 }) => {
@@ -131,7 +131,7 @@ const VideoLayout: React.FC<Props> = ({
           currentCardItem={item}
           currentCardLabel={activeLabel}
           hasSubscription={hasSubscription}
-          hasLoadMore={hasLoadMore}
+          hasMore={hasMore}
           loadMore={loadMore}
           getUrl={getURL}
         />
@@ -154,7 +154,7 @@ const VideoLayout: React.FC<Props> = ({
           accessModel={accessModel}
           isLoggedIn={isLoggedIn}
           hasSubscription={hasSubscription}
-          hasLoadMore={hasLoadMore}
+          hasMore={hasMore}
           loadMore={loadMore}
           getUrl={getURL}
         />

diff --git a/src/components/VideoList/VideoList.tsx b/src/components/VideoList/VideoList.tsx
@@ -14,7 +14,6 @@ import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrol
 type Props = {
   playlist?: Playlist;
   header?: React.ReactNode;
-  onListItemHover?: (item: PlaylistItem) => void;
   watchHistory?: { [key: string]: number };
   isLoading: boolean;
   activeMediaId?: string;
@@ -23,8 +22,9 @@ type Props = {
   accessModel: AccessModel;
   isLoggedIn: boolean;
   hasSubscription: boolean;
-  hasLoadMore?: boolean;
+  hasMore?: boolean;
   loadMore?: () => void;
+  onListItemHover?: (item: PlaylistItem) => void;
   getUrl: (item: PlaylistItem) => string;
 };
 
@@ -43,15 +43,15 @@ function VideoList({
   accessModel,
   isLoggedIn,
   hasSubscription,
-  hasLoadMore,
+  hasMore,
   loadMore = defaultLoadMore,
   getUrl,
 }: Props) {
   return (
     <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
       {!!header && header}
       <div className={styles.content}>
-        <InfiniteScroll pageStart={0} loadMore={loadMore || defaultLoadMore} hasMore={hasLoadMore} loader={<InfiniteScrollLoader key="loader" />}>
+        <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? false} loader={<InfiniteScrollLoader key="loader" />}>
           {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
             <VideoListItem
               url={getUrl(playlistItem)}

diff --git a/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -91,6 +91,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
     }),
     [seriesMedia, series, episodes],
   );
+
   const episodesInSeason = getEpisodesInSeason(episodeMetadata, series);
   const { data: nextItem } = useNextEpisode({ series, episodeId: episode?.mediaid || firstEpisode?.mediaid });
 
@@ -261,7 +262,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
         watchHistory={watchHistoryDictionary}
         filterMetadata={filterMetadata}
         filters={filters}
-        hasLoadMore={hasNextEpisodesPage}
+        hasMore={hasNextEpisodesPage}
         loadMore={fetchNextEpisodes}
         player={
           inlineLayout && (episode || firstEpisode) ? (