feat(playlist): add series tag

jwplayer · May 4, 2021 · 61fca28 · 61fca28
1 parent 6576771
commit 61fca28
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -6,29 +6,47 @@ import { formatDurationTag } from '../../utils/formatting';
 import styles from './Card.module.scss';
 
 type CardProps = {
-  onClick: (() => void);
+  onClick: () => void;
   title: string;
   duration: number;
   posterSource?: string;
-  posterAspect?: "1:1" | "2:1" | "2:3" | "4:3" | "5:3" | "16:9" | "9:16";
+  seriesId?: string;
+  posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
 };
 
 function Card({
   onClick,
   title,
   duration,
   posterSource,
-  posterAspect = "16:9",
+  seriesId,
+  posterAspect = '16:9',
 }: CardProps): JSX.Element {
-  const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`])
+  const posterClassNames = classNames(
+    styles.poster,
+    styles[`aspect${posterAspect.replace(':', '')}`],
+  );
+
+  const metaData = () => {
+    if (seriesId) {
+      return <div className={styles.tag}>Series</div>;
+    } else if (duration) {
+      return <div className={styles.tag}>{formatDurationTag(duration)}</div>;
+    }
+  };
 
   return (
-    <div className={styles.card} onClick={onClick} role="button" aria-label={`Play ${title}`}>
+    <div
+      className={styles.card}
+      onClick={onClick}
+      role="button"
+      aria-label={`Play ${title}`}
+    >
       <div
         className={posterClassNames}
         style={{ backgroundImage: `url(${posterSource})` }}
       >
-        {duration && <div className={styles.tag}>{formatDurationTag(duration)}</div>}
+        {metaData()}
       </div>
       <p className={styles.title}>{title}</p>
     </div>