feat: remove virtualized and add aspect ratio support

package.json

@@ -54,6 +54,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.10.0",
+    "react-infinite-scroller": "^1.2.6",
     "react-markdown": "^8.0.3",
     "react-query": "^3.13.10",
     "react-router-dom": "^6.4.0",
@@ -77,7 +78,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-virtualized": "^9.21.12",
+    "@types/react-infinite-scroller": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^1.0.7",
@@ -129,7 +130,6 @@
     "lighthouse": "^9.6.7"
   },
   "resolutions": {
-    "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3",
     "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1"
   }

src/components/Card/Card.module.scss

@@ -127,7 +127,7 @@
   line-height: 20px;
 }
 
-$aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
+$aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
 @each $base, $modifier in $aspects {
   .aspect#{$base}#{$modifier} {
     padding-top: math.percentage(math.div($modifier, $base));

src/components/Card/Card.tsx

@@ -9,6 +9,10 @@ import Lock from '#src/icons/Lock';
 import Image from '#src/components/Image/Image';
 import type { ImageData } from '#types/playlist';
 
+export const cardAspectRatios = ['2:1', '16:9', '5:3', '4:3', '1:1', '9:13', '2:3', '9:16'] as const;
+
+export type PosterAspectRatio = typeof cardAspectRatios[number];
+
 type CardProps = {
   onClick?: () => void;
   onHover?: () => void;
@@ -19,7 +23,7 @@ type CardProps = {
   seasonNumber?: string;
   episodeNumber?: string;
   progress?: number;
-  posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
+  posterAspect?: PosterAspectRatio;
   featured?: boolean;
   disabled?: boolean;
   loading?: boolean;

src/components/CardGrid/CardGrid.module.scss

@@ -1,6 +1,17 @@
 .cell {
+  display: inline-block;
   padding: 4px;
 }
+
 .container {
   margin: 0 -4px;
+  text-align: left;
+
+  @for $i from 1 through 10 {
+    &.cols-#{$i} {
+      > .cell {
+        width: calc(100% / $i);
+      }
+    }
+  }
 }

src/components/CardGrid/CardGrid.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
-import type { GridCellProps } from 'react-virtualized';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import InfiniteScroll from 'react-infinite-scroller';
 
 import styles from './CardGrid.module.scss';
 
 import useBreakpoint, { Breakpoint, Breakpoints } from '#src/hooks/useBreakpoint';
-import { chunk } from '#src/utils/collection';
 import { isLocked } from '#src/utils/entitlements';
 import Card from '#src/components/Card/Card';
-import VirtualizedGrid from '#src/components/VirtualizedGrid/VirtualizedGrid';
 import type { AccessModel } from '#types/Config';
 import type { Playlist, PlaylistItem } from '#types/playlist';
+import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection';
+import InfiniteScrollLoader from '#src/components/InfiniteScrollLoader/InfiniteScrollLoader';
+
+const INITIAL_ROW_COUNT = 6;
+const LOAD_ROWS_COUNT = 4;
 
 const defaultCols: Breakpoints = {
   [Breakpoint.xs]: 2,
@@ -49,19 +53,22 @@ function CardGrid({
   hasSubscription,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
-  const rows = chunk<PlaylistItem>(playlist.playlist, cols[breakpoint]);
+  const posterAspect = parseAspectRatio(playlist.shelfImageAspectRatio);
+  const visibleTiles = cols[breakpoint] + parseTilesDelta(posterAspect);
+  const [rowCount, setRowCount] = useState(INITIAL_ROW_COUNT);
 
-  const cellRenderer = ({ columnIndex, rowIndex, style }: GridCellProps) => {
-    if (!rows[rowIndex][columnIndex]) return;
+  useEffect(() => {
+    // reset row count when the page changes
+    setRowCount(INITIAL_ROW_COUNT);
+  }, [playlist.feedid]);
 
-    const playlistItem: PlaylistItem = rows[rowIndex][columnIndex];
+  const renderTile = (playlistItem: PlaylistItem) => {
     const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber, shelfImage } = playlistItem;
 
     return (
-      <div className={styles.cell} style={style} key={mediaid} role="row">
+      <div className={styles.cell} key={mediaid} role="row">
         <div role="cell">
           <Card
-            key={mediaid}
             title={title}
             enableTitle={enableCardTitles}
             duration={duration}
@@ -76,16 +83,22 @@ function CardGrid({
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
             currentLabel={currentCardLabel}
             isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
+            posterAspect={posterAspect}
           />
         </div>
       </div>
     );
   };
 
   return (
-    <div className={styles.container}>
-      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={enableCardTitles ? 50 : 4} />
-    </div>
+    <InfiniteScroll
+      pageStart={0}
+      loadMore={() => setRowCount((current) => current + LOAD_ROWS_COUNT)}
+      hasMore={rowCount * LOAD_ROWS_COUNT < playlist.playlist.length - 1}
+      loader={<InfiniteScrollLoader key="loader" />}
+    >
+      <div className={classNames(styles.container, styles[`cols-${visibleTiles}`])}>{playlist.playlist.slice(0, rowCount * visibleTiles).map(renderTile)}</div>
+    </InfiniteScroll>
   );
 }