fix(player): inlineplayer not supporting tvod

jwplayer · Jan 31, 2024 · bb593e9 · bb593e9
1 parent bcfb08b
commit bb593e9
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 18 deletions.
diff --git a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx
@@ -26,9 +26,10 @@ type Props = {
   liveFromBeginning?: boolean;
   startWatchingButton: React.ReactNode;
   isLoggedIn: boolean;
-  paywall: boolean;
+  isEntitled: boolean;
   playable?: boolean;
   autostart?: boolean;
+  hasMediaOffers?: boolean;
 };
 
 const InlinePlayer: React.FC<Props> = ({
@@ -43,9 +44,10 @@ const InlinePlayer: React.FC<Props> = ({
   liveFromBeginning,
   startWatchingButton,
   isLoggedIn,
-  paywall,
+  isEntitled,
   autostart,
   playable = true,
+  hasMediaOffers,
 }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation();
@@ -56,23 +58,25 @@ const InlinePlayer: React.FC<Props> = ({
     navigate(modalURLFromLocation(location, 'login'));
   };
 
+  const buyLabel = hasMediaOffers ? t('video:buy_to_start_watching') : t('video:sign_up_to_start_watching');
+
   return (
     <div className={styles.inlinePlayer}>
-      <Fade open={!playable || paywall}>
+      <Fade open={!playable || !isEntitled}>
         <div className={styles.paywall}>
           <Image className={styles.poster} image={item.backgroundImage} alt={item.title} width={1280} />
-          {paywall && (
+          {!isEntitled && (
             <>
               <Icon icon={Lock} className={styles.lock} />
-              <h2 className={styles.title}>{t('video:sign_up_to_start_watching')}</h2>
+              <h2 className={styles.title}>{buyLabel}</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 && playable && (
+      {isEntitled && playable && (
         <PlayerContainer
           item={item}
           seriesItem={seriesItem}

diff --git a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
@@ -7,7 +7,6 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatPlaylistMetaString, formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { legacySeriesURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement';
@@ -75,7 +74,8 @@ const LegacySeries = () => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const hasMediaOffers = !!mediaOffers.length;
   const isLoggedIn = !!user;
   const hasSubscription = !!subscription;
 
@@ -211,7 +211,8 @@ const LegacySeries = () => {
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episode || firstEpisode)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
@@ -7,7 +7,6 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatLiveEventMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
@@ -61,7 +60,8 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(media);
+  const { isEntitled, mediaOffers } = useEntitlement(media);
+  const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
   const goBack = () => media && navigate(mediaURL({ media, playlistId, play: false }));
@@ -168,7 +168,8 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
               onComplete={handleComplete}
               feedId={playlistId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, media)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={liveEvent.isPlayable && (play || undefined)}
               playable={liveEvent.isPlayable}
             />

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -6,7 +6,6 @@ import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
@@ -55,7 +54,8 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(data);
+  const { isEntitled, mediaOffers } = useEntitlement(data);
+  const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
   const goBack = () => data && navigate(mediaURL({ media: data, playlistId: feedId, play: false }));
@@ -152,7 +152,8 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, data)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -9,7 +9,6 @@ import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistorySto
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { generateEpisodeJSONLD } from '@jwp/ott-common/src/utils/structuredData';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { getEpisodesInSeason, getFiltersFromSeries } from '@jwp/ott-common/src/utils/series';
 import { formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { buildLegacySeriesUrlFromMediaItem, mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
@@ -106,7 +105,9 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const hasMediaOffers = !!mediaOffers.length;
+
   const isLoggedIn = !!user;
   const hasSubscription = !!subscription;
 
@@ -278,7 +279,8 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
               feedId={feedId ?? undefined}
               onPlay={handleInlinePlay}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episode || firstEpisode)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (

diff --git a/platforms/web/public/locales/en/video.json b/platforms/web/public/locales/en/video.json
@@ -2,6 +2,7 @@
   "add_to_favorites": "Add to favorites",
   "all_seasons": "All seasons",
   "buy": "Buy",
+  "buy_to_start_watching": "Buy to start watching!",
   "complete_your_subscription": "Complete your subscription",
   "continue_watching": "Continue watching",
   "copied_url": "Copied url",

diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
@@ -2,6 +2,7 @@
   "add_to_favorites": "Agregar a favoritos",
   "all_seasons": "Todas las temporadas",
   "buy": "Comprar",
+  "buy_to_start_watching": "Compra para empezar a mirar!",
   "complete_your_subscription": "Completa tu suscripción",
   "continue_watching": "Continuar viendo",
   "copied_url": "URL copiada",