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) ? (