feat(playlist): add virtualizedgrid to playlist

jwplayer · May 5, 2021 · 235c99c · 235c99c
1 parent 8f850f4
commit 235c99c
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 19 deletions.
diff --git a/src/screens/Playlist/Playlist.module.scss b/src/screens/Playlist/Playlist.module.scss
@@ -5,9 +5,7 @@
     margin-right: 12px;
     margin-left: 12px;
   }
-  margin-top: 20px;
-  margin-right: 56px;
-  margin-left: 56px;
+
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
   text-align: center;
@@ -22,7 +20,86 @@
   }
   display: flex;
   align-items: center;
+  margin-top: 20px;
+  margin-right: 56px;
+  margin-left: 56px;
   > h2 {
     font-size: 24px;
   }
 }
+
+.GridRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+}
+.GridColumn {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.LeftSideGridContainer {
+  flex: 0 0 50px;
+}
+
+.BodyGrid {
+  width: 100%;
+  border: 1px solid #e0e0e0;
+}
+
+.evenRow,
+.oddRow {
+  border-bottom: 1px solid #e0e0e0;
+}
+.oddRow {
+  background-color: #fafafa;
+}
+
+.cell,
+.headerCell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.5em;
+}
+.cell {
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
+}
+.headerCell {
+  font-weight: bold;
+  border-right: 1px solid #e0e0e0;
+}
+.centeredCell {
+  align-items: center;
+  text-align: center;
+}
+
+.letterCell {
+  color: #fff;
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.noCells {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #bdbdbd;
+  font-size: 1em;
+}
+
+.WindowScrollerWrapper {
+  flex: 1 1 auto;
+}
+
+.wrapper {
+  padding: 15px;
+}
diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
 import Layout from '../../components/Layout/Layout';
 import usePlaylist from '../../hooks/usePlaylist';
 import {
@@ -9,23 +11,61 @@ import {
 } from '../../utils/collection';
 import Card from '../../components/Card/Card';
 import Dropdown from '../../components/Filter/Filter';
-import CardGrid from '../../components/CardGrid/CardGrid';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './Playlist.module.scss';
 
+const cols = {
+  [Breakpoint.xs]: 2,
+  [Breakpoint.sm]: 2,
+  [Breakpoint.md]: 2,
+  [Breakpoint.lg]: 4,
+  [Breakpoint.xl]: 5,
+};
+
+const chunk = (input: any[], size: number) => {
+  return input.reduce((arr: any, item: any, idx: number) => {
+    return idx % size === 0
+      ? [...arr, [item]]
+      : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
+  }, []);
+};
+
 function Playlist() {
+  const breakpoint: Breakpoint = useBreakpoint();
   const { id: playlistId } = useParams<Record<string, string>>();
+  const [filter, setFilter] = useState<string>('');
   const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(
     playlistId,
   );
-  const [filter, setFilter] = useState<string>('');
 
   if (isLoading) return <p>Loading...</p>;
 
   if (error) return <p>No playlist found...</p>;
 
   const categories = getCategoriesFromPlaylist(playlist);
   const filteredPlaylist = filterPlaylistCategory(playlist, filter);
+  const twoDplaylist = chunk(filteredPlaylist, cols[breakpoint]);
+
+  const cellRenderer = ({ columnIndex, key, rowIndex, style }: any) => {
+    if (!twoDplaylist[rowIndex][columnIndex]) return;
+    const { mediaid: mediaId, title, duration, image, seriesId } = twoDplaylist[
+      rowIndex
+    ][columnIndex];
+    console.info(twoDplaylist);
+    return (
+      <div className={styles.wrapper} style={style} key={key}>
+        <Card
+          key={mediaId}
+          title={title}
+          duration={duration}
+          posterSource={image}
+          seriesId={seriesId}
+          onClick={() => ''}
+        />
+      </div>
+    );
+  };
 
   return (
     <Layout>
@@ -43,20 +83,10 @@ function Playlist() {
           )}
         </header>
         <main>
-          <CardGrid>
-            {filteredPlaylist.map(
-              ({ mediaid: mediaId, title, duration, image, seriesId }) => (
-                <Card
-                  key={mediaId}
-                  title={title}
-                  duration={duration}
-                  posterSource={image}
-                  seriesId={seriesId}
-                  onClick={() => ''}
-                />
-              ),
-            )}
-          </CardGrid>
+          <VirtualizedGrid
+            length={twoDplaylist.length}
+            cellRenderer={cellRenderer}
+          />
         </main>
       </div>
     </Layout>