feat(project): add bcl live events

* feat: add bcl live events * chore: fix failing tests * chore: pr rework * chore: pr feedback
jwplayer · May 30, 2023 · 0c53b06 · 0c53b06
1 parent 8237d96
commit 0c53b06
Show file tree

Hide file tree

Showing 22 changed files with 450 additions and 39 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -210,6 +210,12 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
   background-color: variables.$red;
 }
 
+svg.scheduled {
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+}
+
 .progressContainer {
   position: absolute;
   right: 0;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -8,6 +8,7 @@ import { formatDurationTag, formatSeriesMetaString } from '#src/utils/formatting
 import Lock from '#src/icons/Lock';
 import Image from '#components/Image/Image';
 import type { ImageData } from '#types/playlist';
+import Today from '#src/icons/Today';
 
 export const cardAspectRatios = ['2:1', '16:9', '5:3', '4:3', '1:1', '9:13', '2:3', '9:16'] as const;
 
@@ -30,6 +31,8 @@ type CardProps = {
   isCurrent?: boolean;
   isLocked?: boolean;
   currentLabel?: string;
+  isLive?: boolean;
+  isScheduled?: boolean;
 };
 
 function Card({
@@ -49,8 +52,10 @@ function Card({
   isCurrent = false,
   isLocked = true,
   currentLabel,
+  isLive = false,
+  isScheduled = false,
 }: CardProps): JSX.Element {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation(['common', 'video']);
   const [imageLoaded, setImageLoaded] = useState(false);
   const cardClassName = classNames(styles.card, {
     [styles.featured]: featured,
@@ -72,8 +77,15 @@ function Card({
       return <div className={styles.tag}>{formatSeriesMetaString(seasonNumber, episodeNumber)}</div>;
     } else if (duration) {
       return <div className={styles.tag}>{formatDurationTag(duration)}</div>;
-    } else if (duration === 0) {
+    } else if (isLive) {
       return <div className={classNames(styles.tag, styles.live)}>{t('live')}</div>;
+    } else if (isScheduled) {
+      return (
+        <div className={styles.tag}>
+          <Today className={styles.scheduled} />
+          {t('scheduled')}
+        </div>
+      );
     }
   };
 

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -12,6 +12,8 @@ import { isLocked } from '#src/utils/entitlements';
 import TileDock from '#components/TileDock/TileDock';
 import Card, { type PosterAspectRatio } from '#components/Card/Card';
 import type { Playlist, PlaylistItem } from '#types/playlist';
+import { isLiveChannel } from '#src/utils/media';
+import { MediaStatus } from '#src/utils/liveEvent';
 
 export const tileBreakpoints: Breakpoints = {
   [Breakpoint.xs]: 1,
@@ -87,6 +89,8 @@ const Shelf = ({
         loading={loading}
         isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, item)}
         posterAspect={posterAspect}
+        isLive={item.mediaStatus === MediaStatus.LIVE || isLiveChannel(item)}
+        isScheduled={item.mediaStatus === MediaStatus.SCHEDULED}
       />
     ),
     [watchHistory, onCardHover, featured, loading, accessModel, isLoggedIn, hasSubscription, posterAspect, onCardClick, playlist.feedid, type],

diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+import Tag from '#components/Tag/Tag';
+import Today from '#src/icons/Today';
+import { MediaStatus } from '#src/utils/liveEvent';
+
+type Props = {
+  mediaStatus?: MediaStatus;
+};
+
+export default function StatusIcon({ mediaStatus }: Props) {
+  const { t } = useTranslation('video');
+
+  if (mediaStatus === MediaStatus.SCHEDULED) {
+    return <Today />;
+  } else if (mediaStatus === MediaStatus.LIVE) {
+    return <Tag isLive>{t('live')}</Tag>;
+  }
+
+  return null;
+}
diff --git a/src/components/VideoDetails/VideoDetails.module.scss b/src/components/VideoDetails/VideoDetails.module.scss
@@ -68,10 +68,16 @@
 }
 
 .primaryMetadata {
+  display: flex;
+  align-items: center;
   margin-bottom: 8px;
   font-size: 16px;
   line-height: 18px;
   letter-spacing: 0.15px;
+
+  > :first-child {
+    margin-right: 8px;
+  }
 
   @include responsive.mobile-only() {
     order: 2;

diff --git a/src/components/VideoDetailsInline/VideoDetailsInline.module.scss b/src/components/VideoDetailsInline/VideoDetailsInline.module.scss
@@ -69,15 +69,17 @@ div.title {
 }
 
 .primaryMetadata {
+  display: flex;
   flex: 1;
   flex-basis: 100%;
+  align-items: center;
   margin-right: auto;
   margin-bottom: 0;
   font-size: 16px;
   line-height: 18px;
   letter-spacing: 0.15px;
 
-  > div.live {
+  > :first-child {
     display: inline-block;
     margin-right: 8px;
 

diff --git a/src/components/VideoDetailsInline/VideoDetailsInline.tsx b/src/components/VideoDetailsInline/VideoDetailsInline.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import styles from './VideoDetailsInline.module.scss';
 
-import Tag from '#components/Tag/Tag';
 import CollapsibleText from '#components/CollapsibleText/CollapsibleText';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 import { testId } from '#src/utils/common';
@@ -18,8 +16,7 @@ type Props = {
   live?: boolean;
 };
 
-const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetadata, shareButton, favoriteButton, trailerButton, live }) => {
-  const { t } = useTranslation('common');
+const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetadata, shareButton, favoriteButton, trailerButton }) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
@@ -29,14 +26,7 @@ const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetada
     <div className={styles.details} data-testid={testId('video-details-inline')}>
       <TitleComponent className={styles.title}>{title}</TitleComponent>
       <div className={styles.inlinePlayerMetadata}>
-        <div className={styles.primaryMetadata}>
-          {live && (
-            <Tag className={styles.live} isLive>
-              {t('live')}
-            </Tag>
-          )}
-          {primaryMetadata}
-        </div>
+        <div className={styles.primaryMetadata}>{primaryMetadata}</div>
         {trailerButton}
         {favoriteButton}
         {shareButton}

diff --git a/src/components/VideoList/VideoList.tsx b/src/components/VideoList/VideoList.tsx
@@ -8,6 +8,8 @@ import { isLocked } from '#src/utils/entitlements';
 import { testId } from '#src/utils/common';
 import type { AccessModel } from '#types/Config';
 import type { Playlist, PlaylistItem } from '#types/playlist';
+import { isLiveChannel } from '#src/utils/media';
+import { MediaStatus } from '#src/utils/liveEvent';
 
 type Props = {
   playlist?: Playlist;
@@ -43,7 +45,7 @@ function VideoList({
       {!!header && header}
       {playlist &&
         playlist.playlist.map((playlistItem: PlaylistItem) => {
-          const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber, shelfImage } = playlistItem;
+          const { mediaid, title, duration, seriesId, episodeNumber, seasonNumber, shelfImage, mediaStatus } = playlistItem;
 
           return (
             <VideoListItem
@@ -61,6 +63,8 @@ function VideoList({
               isActive={activeMediaId === mediaid}
               activeLabel={activeLabel}
               isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
+              isLive={mediaStatus === MediaStatus.LIVE || isLiveChannel(playlistItem)}
+              isScheduled={mediaStatus === MediaStatus.SCHEDULED}
             />
           );
         })}

diff --git a/src/components/VideoListItem/VideoListItem.module.scss b/src/components/VideoListItem/VideoListItem.module.scss
@@ -106,6 +106,12 @@ svg.lock {
   border-radius: 4px;
 }
 
+svg.scheduled {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+}
+
 .tag {
   margin-left: 4px;
   padding: 2px 6px;
@@ -116,6 +122,8 @@ svg.lock {
   background-color: variables.$red;
 }
 
+
+
 .progressContainer {
   position: absolute;
   right: 0;

diff --git a/src/components/VideoListItem/VideoListItem.tsx b/src/components/VideoListItem/VideoListItem.tsx
@@ -9,6 +9,7 @@ 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 Today from '#src/icons/Today';
 
 type VideoListItemProps = {
   onClick?: () => void;
@@ -24,6 +25,8 @@ type VideoListItemProps = {
   isActive?: boolean;
   activeLabel?: string;
   isLocked?: boolean;
+  isLive?: boolean;
+  isScheduled?: boolean;
 };
 
 function VideoListItem({
@@ -40,6 +43,8 @@ function VideoListItem({
   activeLabel,
   isLocked = true,
   image,
+  isLive = false,
+  isScheduled = false,
 }: VideoListItemProps): JSX.Element {
   const { t } = useTranslation('common');
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -56,8 +61,15 @@ function VideoListItem({
       return formatSeriesMetaString(seasonNumber, episodeNumber);
     } else if (duration) {
       return formatDurationTag(duration);
-    } else if (duration === 0) {
+    } else if (isLive) {
       return t('live');
+    } else if (isScheduled) {
+      return (
+        <>
+          <Today className={styles.scheduled} />
+          {t('scheduled')}
+        </>
+      );
     }
   };
 
@@ -78,7 +90,7 @@ function VideoListItem({
         {isActive && <div className={styles.activeLabel}>{activeLabel}</div>}
         <div className={styles.tags}>
           {isLocked && <Lock className={styles.lock} />}
-          <Tag className={classNames(styles.tag, { [styles.live]: duration === 0 })}>{renderTagLabel()}</Tag>
+          <Tag className={classNames(styles.tag, { [styles.live]: isLive })}>{renderTagLabel()}</Tag>
         </div>
 
         {progress ? (

diff --git a/src/containers/InlinePlayer/InlinePlayer.tsx b/src/containers/InlinePlayer/InlinePlayer.tsx
@@ -25,6 +25,7 @@ type Props = {
   startWatchingButton: React.ReactNode;
   isLoggedIn: boolean;
   paywall: boolean;
+  playable?: boolean;
   autostart?: boolean;
 };
 
@@ -41,6 +42,7 @@ const InlinePlayer: React.FC<Props> = ({
   isLoggedIn,
   paywall,
   autostart,
+  playable = true,
 }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation();
@@ -53,17 +55,21 @@ const InlinePlayer: React.FC<Props> = ({
 
   return (
     <div className={styles.inlinePlayer}>
-      <Fade open={paywall}>
+      <Fade open={!playable || paywall}>
         <div className={styles.paywall}>
           <Image className={styles.poster} image={item.backgroundImage} alt={item.title} width={1280} />
-          <Lock className={styles.lock} />
-          <h2 className={styles.title}>{t('video:sign_up_to_start_watching')}</h2>
-          <span className={styles.text}>{t('account:choose_offer.watch_this_on_platform', { siteName })}</span>
-          {startWatchingButton}
-          {!isLoggedIn && <Button onClick={loginButtonClickHandler} label={t('common:sign_in')} />}
+          {paywall && (
+            <>
+              <Lock className={styles.lock} />
+              <h2 className={styles.title}>{t('video:sign_up_to_start_watching')}</h2>
+              <span className={styles.text}>{t('account:choose_offer.watch_this_on_platform', { siteName })}</span>
+              {startWatchingButton}
+              {!isLoggedIn && <Button onClick={loginButtonClickHandler} label={t('common:sign_in')} />}
+            </>
+          )}
         </div>
       </Fade>
-      {!paywall && (
+      {!paywall && playable && (
         <PlayerContainer
           item={item}
           feedId={feedId}

diff --git a/src/hooks/useLiveEvent.ts b/src/hooks/useLiveEvent.ts
@@ -0,0 +1,9 @@
+import type { PlaylistItem } from '../../types/playlist';
+import { isLiveEvent, isPlayable } from '../utils/liveEvent';
+
+export function useLiveEvent(media: PlaylistItem) {
+  return {
+    isLiveEvent: isLiveEvent(media),
+    isPlayable: isPlayable(media),
+  };
+}
diff --git a/src/hooks/usePlaylist.ts b/src/hooks/usePlaylist.ts
@@ -4,6 +4,7 @@ import { generatePlaylistPlaceholder } from '#src/utils/collection';
 import type { GetPlaylistParams } from '#types/playlist';
 import { getPlaylistById } from '#src/services/api.service';
 import { queryClient } from '#src/containers/QueryProvider/QueryProvider';
+import { isScheduledOrLiveMedia } from '#src/utils/liveEvent';
 
 const placeholderData = generatePlaylistPlaceholder(30);
 
@@ -25,7 +26,19 @@ export default function usePlaylist(playlistId?: string, params: GetPlaylistPara
   return useQuery(queryKey, () => callback(playlistId, params), {
     enabled: isEnabled,
     placeholderData: usePlaceholderData && isEnabled ? placeholderData : undefined,
-    refetchInterval: (data, _) => (data?.refetch ? 1000 * 30 : false),
+    refetchInterval: (data, _) => {
+      if (!data) return false;
+
+      let shouldRefetchPlaylist = data.refetch;
+
+      for (const media of data.playlist) {
+        if (shouldRefetchPlaylist) break;
+
+        shouldRefetchPlaylist = isScheduledOrLiveMedia(media);
+      }
+
+      return shouldRefetchPlaylist ? 1000 * 30 : false;
+    },
     retry: false,
   });
 }
diff --git a/src/icons/Today.tsx b/src/icons/Today.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <g>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" />
+  </g>,
+);