feat(playlist): add layout component

src/screens/Playlist/Playlist.module.scss

@@ -1,24 +1,28 @@
 @use "../../styles/mixins/responsive";
 
 .playlist {
-  color: var(--primary-color);
-  font-family: var(--body-alt-font-family);
+  @include responsive.mobile-only {
+    margin-right: 12px;
+    margin-left: 12px;
+  }
   margin-top: 20px;
-  margin-left: 56px;
   margin-right: 56px;
+  margin-left: 56px;
+  color: var(--primary-color);
+  font-family: var(--body-alt-font-family);
   text-align: center;
-
-  @include responsive.mobile-only {
-    margin-left: 12px;
-    margin-right: 12px;
+  > main {
+    margin-top: 16px;
   }
 }
 
 .header {
+  @include responsive.mobile-and-tablet {
+    justify-content: space-between;
+  }
   display: flex;
   align-items: center;
-
-  > * + * {
-    margin-left: 24px;
+  > h2 {
+    font-size: 24px;
   }
 }

src/screens/Playlist/Playlist.tsx

@@ -1,62 +1,66 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
 
+import Layout from '../../components/Layout/Layout';
 import usePlaylist from '../../hooks/usePlaylist';
-import { getCategoriesFromPlaylist, filterPlaylistCategory } from '../../utils/collection';
-import Card from '../../components/Card/Card'
-import Dropdown from '../../components/Dropdown/Dropdown'
-import CardGrid from '../../components/CardGrid/CardGrid'
+import {
+  getCategoriesFromPlaylist,
+  filterPlaylistCategory,
+} from '../../utils/collection';
+import Card from '../../components/Card/Card';
+import Dropdown from '../../components/DropDown/Dropdown';
+import CardGrid from '../../components/CardGrid/CardGrid';
 
 import styles from './Playlist.module.scss';
 
-// TEMP DATA
-const playlistId = "sR5VypYk";
+function Playlist() {
+  const { id: playlistId } = useParams();
+  const { isLoading, error, data: { title, playlist } = {} } = usePlaylist(
+    playlistId,
+  );
+  const [filter, setFilter] = useState<string>('');
 
-type PlaylistDestructuredArguments = {
-    mediaid: string;
-    title: string;
-    duration: number;
-    image: string;
-};
+  if (isLoading) return <p>Loading...</p>;
 
-function Playlist() {
-    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)
-
-    return (
-        <div className={styles.playlist}>
-            <header className={styles.header}>
-                <h2>{title}</h2>
-                {categories.length && (
-                    <Dropdown
-                        name="categories"
-                        value={filter}
-                        defaultLabel="All"
-                        options={categories}
-                        setValue={setFilter}
-                    />)}
-            </header>
-            <main>
-                <CardGrid>
-                    {filteredPlaylist.map(({ mediaid: mediaId, title, duration, image }: PlaylistDestructuredArguments) =>
-                    (
-                        <Card
-                            key={mediaId}
-                            title={title}
-                            duration={duration}
-                            posterSource={image}
-                            onClick={(() => '')}
-                        />))}
-                </CardGrid>
-            </main>
-        </div>
-    );
+  if (error) return <p>No playlist found...</p>;
+
+  const categories = getCategoriesFromPlaylist(playlist);
+  const filteredPlaylist = filterPlaylistCategory(playlist, filter);
+
+  return (
+    <Layout>
+      <div className={styles.playlist}>
+        <header className={styles.header}>
+          <h2>{title}</h2>
+          {categories.length && (
+            <Dropdown
+              name="categories"
+              value={filter}
+              defaultLabel="All"
+              options={categories}
+              setValue={setFilter}
+            />
+          )}
+        </header>
+        <main>
+          <CardGrid>
+            {filteredPlaylist.map(
+              ({ mediaid: mediaId, title, duration, image, seriesId }) => (
+                <Card
+                  key={mediaId}
+                  title={title}
+                  duration={duration}
+                  posterSource={image}
+                  seriesId={seriesId}
+                  onClick={() => ''}
+                />
+              ),
+            )}
+          </CardGrid>
+        </main>
+      </div>
+    </Layout>
+  );
 }
 
 export default Playlist;

types/playlist.d.ts

@@ -26,6 +26,7 @@ export type PlaylistItem = {
     pubdate: number;
     rating: string;
     sources: Source[];
+    seriesId: string | undefined;
     tags: string;
     title: string;
     tracks: Track[];