feat: adds scheduled start to card component

jwplayer · Jun 1, 2023 · dc3bf41 · dc3bf41
1 parent e9e0f18
commit dc3bf41
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 6 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -164,6 +164,16 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
   }
 }
 
+.scheduledStart {
+  font-size: 0.88em;
+  line-height: 1em;
+
+  @include responsive.mobile-only {
+    font-size: 12px;
+  }
+}
+
+
 .meta {
   position: absolute;
   bottom: 0;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './Card.module.scss';
 
-import { formatDurationTag, formatSeriesMetaString } from '#src/utils/formatting';
+import { formatDurationTag, formatLocalizedDateTime, formatSeriesMetaString } from '#src/utils/formatting';
 import Lock from '#src/icons/Lock';
 import Image from '#components/Image/Image';
 import type { ImageData } from '#types/playlist';
@@ -19,6 +19,7 @@ type CardProps = {
   onHover?: () => void;
   title: string;
   duration: number;
+  scheduledStart?: Date;
   image?: ImageData;
   seriesId?: string;
   seasonNumber?: string;
@@ -42,6 +43,7 @@ function Card({
   duration,
   image,
   seriesId,
+  scheduledStart,
   seasonNumber,
   episodeNumber,
   progress,
@@ -55,7 +57,10 @@ function Card({
   isLive = false,
   isScheduled = false,
 }: CardProps): JSX.Element {
-  const { t } = useTranslation(['common', 'video']);
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation(['common', 'video']);
   const [imageLoaded, setImageLoaded] = useState(false);
   const cardClassName = classNames(styles.card, {
     [styles.featured]: featured,
@@ -123,6 +128,9 @@ function Card({
       </div>
       {!featured && !disabled && (
         <div className={styles.titleContainer}>
+          {!!scheduledStart && (
+            <div className={classNames(styles.scheduledStart, { [styles.loading]: loading })}>{formatLocalizedDateTime(scheduledStart, language)}</div>
+          )}
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>
       )}

diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -11,6 +11,8 @@ import type { AccessModel } from '#types/Config';
 import type { Playlist, PlaylistItem } from '#types/playlist';
 import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection';
 import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrollLoader';
+import { MediaStatus } from '#src/utils/liveEvent';
+import { isLiveChannel } from '#src/utils/media';
 
 const INITIAL_ROW_COUNT = 6;
 const LOAD_ROWS_COUNT = 4;
@@ -61,14 +63,15 @@ function CardGrid({
   }, [playlist.feedid]);
 
   const renderTile = (playlistItem: PlaylistItem) => {
-    const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber, shelfImage } = playlistItem;
+    const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber, shelfImage, mediaStatus, scheduledStart } = playlistItem;
 
     return (
       <div className={styles.cell} key={mediaid} role="row">
         <div role="cell">
           <Card
             title={title}
             duration={duration}
+            scheduledStart={scheduledStart}
             image={shelfImage}
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             seriesId={seriesId}
@@ -81,6 +84,8 @@ function CardGrid({
             currentLabel={currentCardLabel}
             isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
             posterAspect={posterAspect}
+            isLive={mediaStatus === MediaStatus.LIVE || isLiveChannel(playlistItem)}
+            isScheduled={mediaStatus === MediaStatus.SCHEDULED}
           />
         </div>
       </div>

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -76,6 +76,7 @@ const Shelf = ({
       <Card
         key={item.mediaid}
         title={item.title}
+        scheduledStart={item.scheduledStart}
         duration={item.duration}
         progress={watchHistory ? watchHistory[item.mediaid] : undefined}
         image={item.shelfImage}

diff --git a/src/components/VideoList/VideoList.tsx b/src/components/VideoList/VideoList.tsx
@@ -51,6 +51,7 @@ function VideoList({
             <VideoListItem
               key={mediaid}
               title={title}
+              scheduledStart={playlistItem.scheduledStart}
               duration={duration}
               image={shelfImage}
               progress={watchHistory ? watchHistory[mediaid] : undefined}

diff --git a/src/components/VideoListItem/VideoListItem.module.scss b/src/components/VideoListItem/VideoListItem.module.scss
@@ -90,6 +90,21 @@
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 
+.metadata {
+  flex: 1;
+  overflow: hidden;
+}
+
+.scheduledStart {
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 1.2em;
+
+  @include responsive.mobile-only {
+    font-size: 12px;
+  }
+}
+
 .tags {
   position: absolute;
   right: 8px;

diff --git a/src/components/VideoListItem/VideoListItem.tsx b/src/components/VideoListItem/VideoListItem.tsx
@@ -8,13 +8,14 @@ import type { ImageData } from '#types/playlist';
 import Image from '#components/Image/Image';
 import Lock from '#src/icons/Lock';
 import Tag from '#components/Tag/Tag';
-import { formatDurationTag, formatSeriesMetaString } from '#src/utils/formatting';
+import { formatDurationTag, formatLocalizedDateTime, formatSeriesMetaString } from '#src/utils/formatting';
 import Today from '#src/icons/Today';
 
 type VideoListItemProps = {
   onClick?: () => void;
   onHover?: () => void;
   title: string;
+  scheduledStart?: Date;
   duration: number;
   image?: ImageData;
   seriesId?: string;
@@ -45,8 +46,12 @@ function VideoListItem({
   image,
   isLive = false,
   isScheduled = false,
+  scheduledStart,
 }: VideoListItemProps): JSX.Element {
-  const { t } = useTranslation('common');
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation('common');
   const [imageLoaded, setImageLoaded] = useState(false);
   const posterImageClassNames = classNames(styles.posterImage, {
     [styles.visible]: imageLoaded,
@@ -99,7 +104,10 @@ function VideoListItem({
           </div>
         ) : null}
       </div>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.metadata}>
+        {!!scheduledStart && <div className={styles.scheduledStart}>{formatLocalizedDateTime(scheduledStart, language)}</div>}
+        <div className={styles.title}>{title}</div>
+      </div>
     </div>
   );
 }