feat(videodetail): add series metadata

jwplayer · Jun 17, 2021 · 0c2ffaf · 0c2ffaf
1 parent b6ea99e
commit 0c2ffaf
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 21 deletions.
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -5,7 +5,11 @@ import Modal from './Modal';
 
 describe('<Modal>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<Modal />);
+    const { container } = render(
+      <Modal onClose={jest.fn()}>
+        <p>Test modal</p>
+      </Modal>,
+    );
 
     expect(container).toMatchSnapshot();
   });

diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -38,6 +38,9 @@ exports[`<Modal> renders and matches snapshot 1`] = `
             </g>
           </svg>
         </div>
+        <p>
+          Test modal
+        </p>
       </div>
     </div>
   </div>

diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -46,12 +46,35 @@
   line-height: 36px;
   letter-spacing: 0.25px;
   margin: 8px 0px;
+  @include responsive.mobile-only() {
+    margin: 0px;
+  }
+}
+.metaContainer {
+  display: flex;
+  flex-direction: column;
 }
 .meta {
   line-height: 18px;
   font-size: 16px;
   letter-spacing: 0.15px;
   margin-bottom: 8px;
+  @include responsive.mobile-only() {
+    font-size: 14px;
+    order: 2;
+  }
+}
+.seriesMeta {
+  font-size: 20px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  margin-top: 24px;
+  @include responsive.mobile-only() {
+    font-size: 18px;
+    margin: 4px 0px;
+    order: 1;
+  }
 }
 .description {
   font-size: 18px;

diff --git a/src/components/Video/Video.test.tsx b/src/components/Video/Video.test.tsx
@@ -25,16 +25,20 @@ describe('<Video>', () => {
     } as PlaylistItem;
     const { container } = render(
       <Video
+        title="Test video"
+        play
         item={item}
         startPlay={jest.fn()}
         goBack={jest.fn()}
         poster="fading"
-        play
         hasShared={false}
         onShareClick={jest.fn()}
         enableSharing
         isFavorited={false}
         onFavoriteButtonClick={jest.fn()}
+        playTrailer={false}
+        onTrailerClick={jest.fn()}
+        onTrailerClose={jest.fn()}
       />,
     );
 

diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -23,6 +23,7 @@ import styles from './Video.module.scss';
 type Poster = 'fading' | 'normal';
 
 type Props = {
+  title: string;
   item: PlaylistItem;
   trailerItem?: PlaylistItem;
   play: boolean;
@@ -37,10 +38,12 @@ type Props = {
   playTrailer: boolean;
   onTrailerClick: () => void;
   onTrailerClose: () => void;
+  isSeries?: boolean;
   children?: JSX.Element;
 };
 
 const Video: React.FC<Props> = ({
+  title,
   item,
   trailerItem,
   play,
@@ -52,11 +55,11 @@ const Video: React.FC<Props> = ({
   onShareClick,
   isFavorited,
   onFavoriteButtonClick,
-
   children,
   playTrailer,
   onTrailerClick,
   onTrailerClose,
+  isSeries = false,
 }: Props) => {
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [mouseActive, setMouseActive] = useState(false);
@@ -74,13 +77,32 @@ const Video: React.FC<Props> = ({
   if (item.rating) metaData.push(item.rating);
   const metaString = metaData.join(' • ');
 
+  const seriesMeta = isSeries ? `S${item.seasonNumber}:E${item.episodeNumber}` : null;
+
   let timeout: NodeJS.Timeout;
   const mouseActivity = () => {
     setMouseActive(true);
     clearTimeout(timeout);
     timeout = setTimeout(() => setMouseActive(false), 2000);
   };
 
+  const metaContent = (
+    <>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.metaContainer}>
+        <div className={styles.meta}>{metaString}</div>
+        {isSeries && (
+          <div className={styles.seriesMeta}>
+            <strong>{seriesMeta}</strong>
+            {' - '}
+            {item.title}
+          </div>
+        )}
+      </div>
+      <CollapsibleText text={item.description} className={styles.description} maxHeight={isMobile ? 50 : 'none'} />
+    </>
+  );
+
   return (
     <div className={styles.video}>
       <div
@@ -90,9 +112,7 @@ const Video: React.FC<Props> = ({
         })}
       >
         <div className={styles.info}>
-          <h2 className={styles.title}>{item.title}</h2>
-          <div className={styles.meta}>{metaString}</div>
-          <CollapsibleText text={item.description} className={styles.description} maxHeight={isMobile ? 50 : 'none'} />
+          {metaContent}
           <div className={styles.playButton}>
             <Button
               color="primary"
@@ -147,11 +167,7 @@ const Video: React.FC<Props> = ({
             <IconButton aria-label={t('common:back')} onClick={goBack}>
               <ArrowLeft />
             </IconButton>
-            <div className={styles.playerInfo}>
-              <h2 className={styles.title}>{item.title}</h2>
-              <div className={styles.meta}>{metaString}</div>
-              <div className={styles.description}>{item.description}</div>
-            </div>
+            <div className={styles.playerInfo}>{metaContent}</div>
           </div>
         </div>
       )}
@@ -161,7 +177,7 @@ const Video: React.FC<Props> = ({
             <Cinema item={trailerItem} onComplete={onTrailerClose} isTrailer />
             <div
               className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: !mouseActive })}
-            >{`${item.title} - Trailer`}</div>
+            >{`${title} - Trailer`}</div>
           </div>
         </Modal>
       )}

diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -14,12 +14,16 @@ exports[`<Video> renders and matches snapshot 1`] = `
         <h2
           class="title"
         >
-          Test item title
+          Test video
         </h2>
         <div
-          class="meta"
+          class="metaContainer"
         >
-          1970 • 6m  • Tester • CC_CC
+          <div
+            class="meta"
+          >
+            1970 • 6m  • Tester • CC_CC
+          </div>
         </div>
         <div
           class="collapsibleText"
@@ -158,17 +162,26 @@ exports[`<Video> renders and matches snapshot 1`] = `
           <h2
             class="title"
           >
-            Test item title
+            Test video
           </h2>
           <div
-            class="meta"
+            class="metaContainer"
           >
-            1970 • 6m  • Tester • CC_CC
+            <div
+              class="meta"
+            >
+              1970 • 6m  • Tester • CC_CC
+            </div>
           </div>
           <div
-            class="description"
+            class="collapsibleText"
           >
-            Test item description
+            <div
+              class="textContainer description"
+              style="max-height: none;"
+            >
+              Test item description
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -92,6 +92,7 @@ const Movie = ({
         ))}
       </Helmet>
       <VideoComponent
+        title={item.title}
         item={item}
         trailerItem={trailerItem}
         play={play}

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -105,6 +105,7 @@ const Series = ({
         ))}
       </Helmet>
       <VideoComponent
+        title={seriesPlaylist.title}
         item={item}
         trailerItem={trailerItem}
         play={play}
@@ -119,6 +120,7 @@ const Series = ({
         onTrailerClose={() => setPlayTrailer(false)}
         isFavorited={isFavorited}
         onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
+        isSeries
       >
         <PlaylistContainer playlistId={id}>
           {() => (

diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts
@@ -55,8 +55,9 @@ const cardUrl = (item: PlaylistItem, playlistId?: string | null) =>
 
 const videoUrl = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) => {
   const url = item.seriesId ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+  const playParam = play ? `${playlistId ? '&' : '?'}play=1` : '';
 
-  return `${url}${play ? '&play=1' : ''}`;
+  return `${url}${playParam}`;
 };
 
 export { formatDurationTag, formatDuration, cardUrl, movieURL, seriesURL, videoUrl, episodeURL };
diff --git a/types/playlist.d.ts b/types/playlist.d.ts
@@ -18,6 +18,7 @@ export type Track = {
 export type PlaylistItem = {
   description: string;
   duration: number;
+  episodeNumber?: string;
   feedid: string;
   image: string;
   images: Image[];
@@ -26,6 +27,7 @@ export type PlaylistItem = {
   mediaid: string;
   pubdate: number;
   rating: string;
+  seasonNumber?: string;
   sources: Source[];
   seriesId?: string;
   tags: string;
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,9 @@ exports[`<Modal> renders and matches snapshot 1`] = ` @@
                 </g>
               </svg>
             </div>
+            <p>
+              Test modal
+            </p>
           </div>
         </div>
       </div>
@@ Expand Down @@