feat(project): add playlist container

src/components/CardGrid/CardGrid.tsx

@@ -19,13 +19,13 @@ const defaultCols: Breakpoints = {
 
 type CardGridProps = {
   playlist: PlaylistItem[];
-  onCardHover: (item: PlaylistItem) => void;
+  onCardHover?: (item: PlaylistItem) => void;
   onCardClick: (item: PlaylistItem) => void;
   isLoading: boolean;
   cols?: Breakpoints;
 };
 
-function CardGrid ({ playlist, onCardClick, onCardHover, isLoading = false, cols = defaultCols }: CardGridProps) {
+function CardGrid({ playlist, onCardClick, onCardHover, isLoading = false, cols = defaultCols }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const imageSourceWidth = 320 * (window.devicePixelRatio > 1 || isLargeScreen ? 2 : 1);
@@ -46,16 +46,14 @@ function CardGrid ({ playlist, onCardClick, onCardHover, isLoading = false, cols
           posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
           seriesId={seriesId}
           onClick={() => onCardClick(playlistItem)}
-          onHover={() => onCardHover(playlistItem)}
+          onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
           loading={isLoading}
         />
       </div>
     );
   };
 
-  return (
-    <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />
-  );
+  return <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />;
 }
 
 export default CardGrid;

src/components/Video/Video.tsx

@@ -37,7 +37,7 @@ type Props = {
   playTrailer: boolean;
   onTrailerClick: () => void;
   onTrailerClose: () => void;
-  relatedShelf?: JSX.Element;
+  children?: JSX.Element;
 };
 
 const Video: React.FC<Props> = ({
@@ -52,7 +52,8 @@ const Video: React.FC<Props> = ({
   onShareClick,
   isFavorited,
   onFavoriteButtonClick,
-  relatedShelf,
+
+  children,
   playTrailer,
   onTrailerClick,
   onTrailerClose,
@@ -136,7 +137,7 @@ const Video: React.FC<Props> = ({
           style={{ backgroundImage: `url('${posterImage}')` }}
         />
       </div>
-      {!!relatedShelf && <div className={classNames(styles.related, styles.mainPadding)}>{relatedShelf}</div>}
+      {!!children && <div className={classNames(styles.related, styles.mainPadding)}>{children}</div>}
       {play && (
         <div className={styles.playerContainer} onMouseMove={mouseActivity} onClick={mouseActivity}>
           <div className={styles.player}>

src/containers/Playlist/PlaylistContainer.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Playlist } from 'types/playlist';
+
+import { PersonalShelf, PersonalShelves } from '../../enum/PersonalShelf';
+import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
+import { useFavorites } from '../../stores/FavoritesStore';
+import { useWatchHistory } from '../../stores/WatchHistoryStore';
+
+type ChildrenParams = {
+  playlist: Playlist;
+  error: unknown;
+};
+
+type Props = {
+  playlistId: string;
+  children: (childrenParams: ChildrenParams) => JSX.Element;
+  relatedMediaId?: string;
+};
+
+const PlaylistContainer = ({ playlistId, children, relatedMediaId }: Props): JSX.Element | null => {
+  const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
+  const { isLoading, error, data: playlist = { title: '', playlist: [] } }: UsePlaylistResult = usePlaylist(
+    playlistId,
+    relatedMediaId,
+    !isAlternativeShelf,
+  );
+  const { getPlaylist: getFavoritesPlayist } = useFavorites();
+  const favoritesPlaylist = getFavoritesPlayist();
+  const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
+  const watchHistoryPlayist = getWatchHistoryPlayist();
+
+  // if (isLoading || error || !playlist || !children) return null;
+
+  let shelfPlaylist = playlist;
+  if (playlistId === PersonalShelf.Favorites) shelfPlaylist = favoritesPlaylist;
+  if (playlistId === PersonalShelf.ContinueWatching) shelfPlaylist = watchHistoryPlayist;
+
+  if (!playlistId) return <p>No playlist id</p>;
+  if (!isLoading && !shelfPlaylist?.playlist.length) return null;
+
+  return children({ playlist, error });
+};
+
+export default PlaylistContainer;

src/screens/Home/Home.tsx

@@ -7,12 +7,12 @@ import type { Config, Content } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 
+import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { favoritesStore } from '../../stores/FavoritesStore';
 import { PersonalShelf } from '../../enum/PersonalShelf';
 import { watchHistoryStore } from '../../stores/WatchHistoryStore';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
-import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
-import Shelf from '../../containers/Shelf/Shelf';
+import ShelfComponent, { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import usePlaylist from '../../hooks/usePlaylist';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
@@ -62,13 +62,19 @@ const Home = (): JSX.Element => {
         style={style}
         className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
       >
-        <Shelf
-          key={contentItem.playlistId}
-          playlistId={contentItem.playlistId}
-          onCardClick={onCardClick}
-          onCardHover={onCardHover}
-          featured={contentItem.featured === true}
-        />
+        <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId}>
+          {({ playlist, error }) => (
+            <ShelfComponent
+              loading={false}
+              error={error}
+              playlist={playlist}
+              onCardClick={onCardClick}
+              onCardHover={onCardHover}
+              title={playlist.title}
+              featured={contentItem.featured === true}
+            />
+          )}
+        </PlaylistContainer>
       </div>
     );
   };

src/screens/Movie/Movie.tsx

@@ -3,13 +3,14 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 
+import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { cardUrl, videoUrl } from '../../utils/formatting';
 import type { PlaylistItem } from '../../../types/playlist';
 import VideoComponent from '../../components/Video/Video';
-import Shelf from '../../containers/Shelf/Shelf';
+import CardGrid from '../../components/CardGrid/CardGrid';
 import useMedia from '../../hooks/useMedia';
 import { copyToClipboard } from '../../utils/dom';
 
@@ -103,16 +104,15 @@ const Movie = ({
         onTrailerClose={() => setPlayTrailer(false)}
         isFavorited={isFavorited}
         onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
-        relatedShelf={
-          config.recommendationsPlaylist ? (
-            <Shelf
-              playlistId={config.recommendationsPlaylist}
-              onCardClick={onCardClick}
-              relatedMediaId={item.mediaid}
-            />
-          ) : undefined
-        }
-      />
+      >
+        {config.recommendationsPlaylist ? (
+          <PlaylistContainer playlistId={config.recommendationsPlaylist} relatedMediaId={item.mediaid}>
+            {({ playlist }) => (
+              <CardGrid playlist={playlist.playlist} onCardClick={onCardClick} isLoading={isLoading} />
+            )}
+          </PlaylistContainer>
+        ) : undefined}
+      </VideoComponent>
     </React.Fragment>
   );
 };

src/screens/Playlist/Playlist.tsx

@@ -44,7 +44,9 @@ function Playlist({
   return (
     <div className={styles.playlist}>
       <Helmet>
-        <title>{title} - {config.siteName}</title>
+        <title>
+          {title} - {config.siteName}
+        </title>
       </Helmet>
       <header className={styles.header}>
         <h2>{title}</h2>

src/screens/Series/Series.tsx

@@ -3,13 +3,14 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 
+import CardGrid from '../../components/CardGrid/CardGrid';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { cardUrl, episodeURL, videoUrl } from '../../utils/formatting';
 import type { PlaylistItem } from '../../../types/playlist';
 import VideoComponent from '../../components/Video/Video';
-import Shelf from '../../containers/Shelf/Shelf';
+import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import useMedia from '../../hooks/useMedia';
 import usePlaylist from '../../hooks/usePlaylist';
 import { copyToClipboard } from '../../utils/dom';
@@ -116,8 +117,11 @@ const Series = ({
         onTrailerClose={() => setPlayTrailer(false)}
         isFavorited={isFavorited}
         onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
-        relatedShelf={<Shelf playlistId={id} title="Episodes" onCardClick={onCardClick} />}
-      />
+      >
+        <PlaylistContainer playlistId={id}>
+          {({ playlist }) => <CardGrid playlist={playlist.playlist} onCardClick={onCardClick} isLoading={false} />}
+        </PlaylistContainer>
+      </VideoComponent>
     </React.Fragment>
   );
 };