feat(project): add playlist placeholderdata for skeletons

jwplayer · Jun 7, 2021 · b6c8e7a · b6c8e7a
1 parent c010592
commit b6c8e7a
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 35 deletions.
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -53,3 +53,7 @@
     }
   }
 }
+.error {
+  color: var(--card-color);
+  font-family: var(--body-alt-font-family);
+}
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -28,21 +28,21 @@ export const featuredTileBreakpoints: Breakpoints = {
 };
 
 export type ShelfProps = {
-  playlist: Playlist | undefined;
+  playlist: Playlist;
   onCardClick: (playlistItem: PlaylistItem) => void;
   onCardHover: (playlistItem: PlaylistItem) => void;
   featured?: boolean;
   loading?: boolean;
+  error?: unknown;
 };
 
-const placeholderItems = new Array(15).fill({});
-
 const Shelf: React.FC<ShelfProps> = ({
   playlist,
   onCardClick,
   onCardHover,
   featured = false,
   loading = false,
+  error = null,
 }: ShelfProps) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const [didSlideBefore, setDidSlideBefore] = useState(false);
@@ -55,19 +55,17 @@ const Shelf: React.FC<ShelfProps> = ({
     doSlide();
   };
 
-  if (!playlist) return null;
+  if (error) return <h2 className={styles.error}>Could not load items</h2>;
 
   return (
     <div className={classNames(styles.shelf, { [styles.featured]: featured })}>
-      {!featured && (
-        <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{loading ? ' ' : playlist.title}</h2>
-      )}
-      <TileDock<PlaylistItem | number>
-        items={loading ? placeholderItems : playlist.playlist}
+      {!featured && <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{playlist.title}</h2>}
+      <TileDock<PlaylistItem>
+        items={playlist.playlist}
         tilesToShow={tilesToShow}
         cycleMode={'restart'}
         showControls={!matchMedia('(hover: none)').matches}
-        transitionTime={loading ? '0.3s' : '0.3s'}
+        transitionTime={'0.3s'}
         spacing={8}
         renderLeftControl={(doSlide) => (
           <div
@@ -99,24 +97,19 @@ const Shelf: React.FC<ShelfProps> = ({
             <ChevronRight />
           </div>
         )}
-        renderTile={(item, isInView) => {
-          if (loading || typeof item === 'number') {
-            return <Card title={' '} duration={0} featured={featured} loading />;
-          }
-
-          return (
-            <Card
-              title={item.title}
-              duration={item.duration}
-              posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
-              seriesId={item.seriesId}
-              onClick={() => (isInView ? onCardClick(item) : null)}
-              onHover={() => onCardHover(item)}
-              featured={featured}
-              disabled={!isInView}
-            />
-          );
-        }}
+        renderTile={(item, isInView) => (
+          <Card
+            title={item.title}
+            duration={item.duration}
+            posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
+            seriesId={item.seriesId}
+            onClick={() => (isInView ? onCardClick(item) : null)}
+            onHover={() => onCardHover(item)}
+            featured={featured}
+            disabled={!isInView}
+            loading={loading}
+          />
+        )}
       />
     </div>
   );

diff --git a/src/containers/Shelf/Shelf.tsx b/src/containers/Shelf/Shelf.tsx
@@ -13,14 +13,17 @@ type ShelfProps = {
 };
 
 const Shelf = ({ playlistId, onCardClick, onCardHover, relatedMediaId, featured = false }: ShelfProps): JSX.Element => {
-  const { isLoading, error, data: playlist }: UsePlaylistResult = usePlaylist(playlistId, relatedMediaId);
+  const { isLoading, error, data: playlist = { title: '', playlist: [] } }: UsePlaylistResult = usePlaylist(
+    playlistId,
+    relatedMediaId,
+  );
 
-  if (!playlistId) return <p>No playlist</p>;
-  if (error) return <p>Error here {error}</p>;
+  if (!playlistId) return <p>No playlist id</p>;
 
   return (
     <ShelfComponent
       loading={isLoading}
+      error={error}
       playlist={playlist}
       onCardClick={onCardClick}
       onCardHover={onCardHover}

diff --git a/src/hooks/usePlaylist.ts b/src/hooks/usePlaylist.ts
@@ -1,7 +1,27 @@
 import { UseBaseQueryResult, useQuery } from 'react-query';
-import type { Playlist } from 'types/playlist';
+import type { Playlist, PlaylistItem } from 'types/playlist';
 
-const baseUrl = 'https://content.jwplatform.com'; // temp data, till config arrives
+const baseUrl = 'https://content.jwplatform.com';
+
+const placeholderData: Playlist = {
+  title: '',
+  playlist: new Array(30).fill({
+    description: '',
+    duration: 0,
+    feedid: '',
+    image: '',
+    images: [],
+    link: '',
+    genre: '',
+    mediaid: '',
+    pubdate: 0,
+    rating: '',
+    sources: [],
+    tags: '',
+    title: '',
+    tracks: [],
+  } as PlaylistItem),
+};
 
 const getPlaylistById = (playlistId: string, relatedMediaId?: string) => {
   const relatedQuery = relatedMediaId ? `?related_media_id=${relatedMediaId}` : '';
@@ -14,5 +34,6 @@ export type UsePlaylistResult<TData = Playlist, TError = unknown> = UseBaseQuery
 export default function usePlaylist(playlistId: string, relatedMediaId?: string): UsePlaylistResult {
   return useQuery(['playlist', playlistId, relatedMediaId], () => getPlaylistById(playlistId, relatedMediaId), {
     enabled: !!playlistId,
+    placeholderData,
   });
 }
diff --git a/src/screens/Playlist/Playlist.module.scss b/src/screens/Playlist/Playlist.module.scss
@@ -44,3 +44,8 @@
 .cell {
   padding: 8px;
 }
+
+.error {
+  color: var(--primary-color);
+  margin: 20px;
+}
diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
@@ -39,6 +39,7 @@ function Playlist({
   const history = useHistory();
   const { updateBlurImage } = useContext(UIStateContext);
   const { isLoading, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
+
   const [filter, setFilter] = useState<string>('');
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
@@ -55,8 +56,7 @@ function Playlist({
     if (filteredPlaylist.length) updateBlurImage(filteredPlaylist[0].image);
   }, [filter, filteredPlaylist, updateBlurImage]);
 
-  if (isLoading) return <p>Loading...</p>;
-  if (error || !playlist) return <p>No playlist found...</p>;
+  if (error || !playlist) return <h2 className={styles.error}>Could not load items</h2>;
 
   const cellRenderer = ({ columnIndex, rowIndex, style }: GridCellProps) => {
     if (!playlistRows[rowIndex][columnIndex]) return;
@@ -74,6 +74,7 @@ function Playlist({
           seriesId={seriesId}
           onClick={() => onCardClick(playlistItem)}
           onHover={() => onCardHover(playlistItem)}
+          loading={isLoading}
         />
       </div>
     );