feat(project): add live and episode tag to card

src/components/Card/Card.module.scss

@@ -170,6 +170,10 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   border-radius: 4px;
 }
 
+.live {
+  background-color: variables.$red;
+}
+
 .progressContainer {
   position: absolute;
   right: 0;

src/components/Card/Card.tsx

@@ -13,6 +13,8 @@ type CardProps = {
   duration: number;
   posterSource?: string;
   seriesId?: string;
+  seasonNumber?: string;
+  episodeNumber?: string;
   progress?: number;
   posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
   featured?: boolean;
@@ -29,6 +31,8 @@ function Card({
   duration,
   posterSource,
   seriesId,
+  seasonNumber,
+  episodeNumber,
   progress,
   posterAspect = '16:9',
   featured = false,
@@ -45,11 +49,18 @@ function Card({
   const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`], {
     [styles.current]: isCurrent,
   });
-  const metaData = () => {
+
+  const renderTag = () => {
+    if (loading || disabled || !title) return null;
+
     if (seriesId) {
       return <div className={styles.tag}>Series</div>;
+    } else if (seasonNumber && episodeNumber) {
+      return <div className={styles.tag}>S{seasonNumber}:E{episodeNumber}</div>
     } else if (duration) {
       return <div className={styles.tag}>{formatDurationTag(duration)}</div>;
+    } else if (duration === 0) {
+      return <div className={classNames(styles.tag, styles.live)}>{t('live')}</div>;
     }
   };
 
@@ -71,7 +82,7 @@ function Card({
             {featured && !disabled && (
               <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
             )}
-            {!disabled && metaData()}
+            {renderTag()}
           </div>
         )}
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}

src/components/CardGrid/CardGrid.tsx

@@ -45,7 +45,7 @@ function CardGrid({
     if (!rows[rowIndex][columnIndex]) return;
 
     const playlistItem: PlaylistItem = rows[rowIndex][columnIndex];
-    const { mediaid, title, duration, seriesId } = playlistItem;
+    const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber } = playlistItem;
 
     return (
       <div className={styles.cell} style={style} key={mediaid} role="row">
@@ -56,6 +56,8 @@ function CardGrid({
             duration={duration}
             posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
             seriesId={seriesId}
+            episodeNumber={episodeNumber}
+            seasonNumber={seasonNumber}
             onClick={() => onCardClick(playlistItem)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}

src/components/Shelf/Shelf.tsx

@@ -113,6 +113,8 @@ const Shelf: React.FC<ShelfProps> = ({
             progress={watchHistory ? watchHistory[item.mediaid] : undefined}
             posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
             seriesId={item.seriesId}
+            seasonNumber={item.seasonNumber}
+            episodeNumber={item.episodeNumber}
             onClick={isInView ? () => onCardClick(item) : undefined}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(item) : undefined}
             featured={featured}

src/i18n/locales/en_US/common.json

@@ -4,6 +4,7 @@
   "close_modal": "Close",
   "filter_videos_by_genre": "Filter videos by genre",
   "home": "Home",
+  "live": "LIVE",
   "play_item": "Play {{ title }}",
   "settings": "Settings",
   "slide_left": "Slide left",

src/i18n/locales/en_US/video.json

@@ -1,15 +1,14 @@
 {
   "add_to_favorites": "Add to favorites",
   "copied_url": "Copied url",
+  "current_episode": "Current episode",
+  "currently_playing": "Currently playing",
+  "episodes": "Episodes",
   "favorite": "Favorite",
   "remove_from_favorites": "Remove from favorites",
   "share": "Share",
   "start_watching": "Start watching",
   "trailer": "Trailer",
-  "share_video": "Share this video",
-  "copied_url": "Copied url",
   "watch_trailer": "Watch the trailer",
-  "currently_playing": "Currently playing",
-  "current_episode": "Current episode",
-  "episodes": "Episodes"
+  "share_video": "Share this video"
 }

src/i18n/locales/nl_NL/common.json

@@ -4,6 +4,7 @@
   "close_modal": "",
   "filter_videos_by_genre": "",
   "home": "",
+  "live": "",
   "play_item": "",
   "settings": "",
   "slide_left": "",

src/i18n/locales/nl_NL/video.json

@@ -1,15 +1,14 @@
 {
   "add_to_favorites": "",
   "copied_url": "",
+  "current_episode": "",
+  "currently_playing": "",
+  "episodes": "",
   "favorite": "",
   "remove_from_favorites": "",
   "share": "",
   "start_watching": "",
   "trailer": "",
-  "share_video": "",
-  "copied_url": "",
-  "watch_trailer": "", 
-  "currently_playing": "",
-  "current_episode": "",
-  "episodes": ""
+  "watch_trailer": "",
+  "share_video": ""
 }