diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx index af5b62e72..643c5a151 100644 --- 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 ( - }> + }>
- {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)}
); diff --git a/src/components/VideoLayout/VideoLayout.tsx b/src/components/VideoLayout/VideoLayout.tsx index 724904c11..d3cbad0a3 100644 --- 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 = ({ defaultFilterLabel = '', children, // load more - hasLoadMore, + hasMore, loadMore, getURL, }) => { @@ -131,7 +131,7 @@ const VideoLayout: React.FC = ({ currentCardItem={item} currentCardLabel={activeLabel} hasSubscription={hasSubscription} - hasLoadMore={hasLoadMore} + hasMore={hasMore} loadMore={loadMore} getUrl={getURL} /> @@ -154,7 +154,7 @@ const VideoLayout: React.FC = ({ 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 index 62a265648..441179a5a 100644 --- 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,7 +43,7 @@ function VideoList({ accessModel, isLoggedIn, hasSubscription, - hasLoadMore, + hasMore, loadMore = defaultLoadMore, getUrl, }: Props) { @@ -51,7 +51,7 @@ function VideoList({
{!!header && header}
- }> + }> {playlist?.playlist?.map((playlistItem: 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 = ({ data: seriesMedia }) => { watchHistory={watchHistoryDictionary} filterMetadata={filterMetadata} filters={filters} - hasLoadMore={hasNextEpisodesPage} + hasMore={hasNextEpisodesPage} loadMore={fetchNextEpisodes} player={ inlineLayout && (episode || firstEpisode) ? (