Refactor / sync ott changes

packages/common/types/playlist.ts

@@ -17,6 +17,7 @@ export type DRM = {
   };
   fairplay?: {
     processSpcUrl: string;
+    certificateUrl: string;
   };
 };
 

packages/hooks-react/src/useWatchHistory.ts

@@ -6,20 +6,20 @@ import { VideoProgressMinMax } from '@jwp/ott-common/src/constants';
 
 import { useWatchHistoryListener } from './useWatchHistoryListener';
 
-export const useWatchHistory = (player: jwplayer.JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
+export const useWatchHistory = (item: PlaylistItem, seriesItem?: PlaylistItem) => {
   // config
   const { features } = useConfigStore((s) => s.config);
   const continueWatchingList = features?.continueWatchingList;
   const watchHistoryEnabled = !!continueWatchingList;
 
   // watch history listener
-  useWatchHistoryListener(player, item, seriesItem);
+  const { saveWatchProgress, handleTimeUpdate } = useWatchHistoryListener(item, seriesItem);
 
   // watch History
   const watchHistoryItem = useWatchHistoryStore((state) => (!!item && watchHistoryEnabled ? state.getItem(item) : undefined));
 
   // calculate the `startTime` of the current item based on the watch progress
-  return useMemo(() => {
+  const startTime = useMemo(() => {
     const videoProgress = watchHistoryItem?.progress;
 
     if (videoProgress && videoProgress > VideoProgressMinMax.Min && videoProgress < VideoProgressMinMax.Max) {
@@ -29,4 +29,6 @@ export const useWatchHistory = (player: jwplayer.JWPlayer | undefined, item: Pla
     // start at the beginning of the video (only for VOD content)
     return 0;
   }, [item.duration, watchHistoryItem?.progress]);
+
+  return { startTime, saveWatchProgress, handleTimeUpdate, watchHistoryEnabled };
 };

packages/hooks-react/src/useWatchHistoryListener.ts

@@ -30,7 +30,7 @@ const PROGRESSIVE_SAVE_INTERVAL = 300_000; // 5 minutes
  * item. When this needs to be saved, the queue is used to look up the last progress and item and save it when
  * necessary. The queue is then cleared to prevent duplicate saves and API calls.
  */
-export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
+export const useWatchHistoryListener = (item: PlaylistItem, seriesItem?: PlaylistItem) => {
   const queuedWatchProgress = useRef<QueuedProgress | null>(null);
   const watchHistoryController = getModule(WatchHistoryController);
 
@@ -40,7 +40,7 @@ export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, i
   const watchHistoryEnabled = !!continueWatchingList;
 
   // maybe store the watch progress when we have a queued watch progress
-  const maybeSaveWatchProgress = useCallback(() => {
+  const saveWatchProgress = useCallback(() => {
     if (!watchHistoryEnabled || !queuedWatchProgress.current) return;
 
     const { item, seriesItem, progress } = queuedWatchProgress.current;
@@ -53,11 +53,11 @@ export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, i
   }, [watchHistoryEnabled, watchHistoryController]);
 
   // update the queued watch progress on each time update event
-  const handleTimeUpdate = useEventCallback((event: jwplayer.TimeParam) => {
+  const handleTimeUpdate = useEventCallback(({ position, duration }: { position: number; duration: number }) => {
     // live streams have a negative duration, we ignore these for now
-    if (event.duration < 0) return;
+    if (duration < 0) return;
 
-    const progress = Number((event.position / event.duration).toFixed(5));
+    const progress = Number((position / duration).toFixed(5));
 
     if (!isNaN(progress) && isFinite(progress)) {
       queuedWatchProgress.current = {
@@ -69,45 +69,33 @@ export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, i
 
       // save the progress when we haven't done so in the last X minutes
       if (Date.now() - queuedWatchProgress.current.timestamp > PROGRESSIVE_SAVE_INTERVAL) {
-        maybeSaveWatchProgress();
+        saveWatchProgress();
       }
     }
   });
 
-  // listen for certain player events
-  useEffect(() => {
-    if (!player || !watchHistoryEnabled) return;
-
-    player.on('time', handleTimeUpdate);
-    player.on('pause', maybeSaveWatchProgress);
-    player.on('complete', maybeSaveWatchProgress);
-    player.on('remove', maybeSaveWatchProgress);
-
-    return () => {
-      player.off('time', handleTimeUpdate);
-      player.off('pause', maybeSaveWatchProgress);
-      player.off('complete', maybeSaveWatchProgress);
-      player.off('remove', maybeSaveWatchProgress);
-    };
-  }, [player, watchHistoryEnabled, maybeSaveWatchProgress, handleTimeUpdate]);
-
   useEffect(() => {
     return () => {
       // store watch progress on unmount and when the media item changes
-      maybeSaveWatchProgress();
+      saveWatchProgress();
     };
-  }, [item?.mediaid, maybeSaveWatchProgress]);
+  }, [item?.mediaid, saveWatchProgress]);
 
   // add event listeners for unload and visibility change to ensure the latest watch progress is saved
   useLayoutEffect(() => {
-    const visibilityListener = () => document.visibilityState === 'hidden' && maybeSaveWatchProgress();
+    const visibilityListener = () => document.visibilityState === 'hidden' && saveWatchProgress();
 
-    window.addEventListener('pagehide', maybeSaveWatchProgress);
+    window.addEventListener('pagehide', saveWatchProgress);
     window.addEventListener('visibilitychange', visibilityListener);
 
     return () => {
-      window.removeEventListener('pagehide', maybeSaveWatchProgress);
+      window.removeEventListener('pagehide', saveWatchProgress);
       window.removeEventListener('visibilitychange', visibilityListener);
     };
-  }, [maybeSaveWatchProgress]);
+  }, [saveWatchProgress]);
+
+  return {
+    saveWatchProgress,
+    handleTimeUpdate,
+  };
 };

packages/ui-react/src/components/Player/Player.tsx

@@ -23,6 +23,9 @@ type Props = {
   onReady?: (player?: JWPlayer) => void;
   onPlay?: () => void;
   onPause?: () => void;
+  onTime?: (params: { position: number; duration: number }) => void;
+  onSeek?: (params: { offset: number; position: number; duration: number }) => void;
+  onSeeked?: () => void;
   onComplete?: () => void;
   onUserActive?: () => void;
   onUserInActive?: () => void;
@@ -33,6 +36,7 @@ type Props = {
   onBackClick?: () => void;
   onPlaylistItem?: () => void;
   onPlaylistItemCallback?: (item: PlaylistItem) => Promise<undefined | PlaylistItem>;
+  onAdImpression?: () => void;
 };
 
 const Player: React.FC<Props> = ({
@@ -41,6 +45,9 @@ const Player: React.FC<Props> = ({
   onReady,
   onPlay,
   onPause,
+  onTime,
+  onSeek,
+  onSeeked,
   onComplete,
   onUserActive,
   onUserInActive,
@@ -50,6 +57,7 @@ const Player: React.FC<Props> = ({
   onPlaylistItem,
   onPlaylistItemCallback,
   onNext,
+  onAdImpression,
   onBackClick,
   feedId,
   startTime = 0,
@@ -71,7 +79,11 @@ const Player: React.FC<Props> = ({
   const handleBeforePlay = useEventCallback(onBeforePlay);
   const handlePlay = useEventCallback(onPlay);
   const handlePause = useEventCallback(onPause);
+  const handleTime = useEventCallback(onTime);
   const handleComplete = useEventCallback(onComplete);
+  const handleSeek = useEventCallback(onSeek);
+  const handleSeeked = useEventCallback(onSeeked);
+  const handleAdImpression = useEventCallback(onAdImpression);
   const handleUserActive = useEventCallback(onUserActive);
   const handleUserInactive = useEventCallback(onUserInActive);
   const handleFirstFrame = useEventCallback(() => {
@@ -100,6 +112,10 @@ const Player: React.FC<Props> = ({
     playerRef.current?.on('complete', handleComplete);
     playerRef.current?.on('play', handlePlay);
     playerRef.current?.on('pause', handlePause);
+    playerRef.current?.on('time', handleTime);
+    playerRef.current?.on('seek', handleSeek);
+    playerRef.current?.on('seeked', handleSeeked);
+    playerRef.current?.on('adImpression', handleAdImpression);
     playerRef.current?.on('userActive', handleUserActive);
     playerRef.current?.on('userInactive', handleUserInactive);
     playerRef.current?.on('firstFrame', handleFirstFrame);
@@ -114,6 +130,10 @@ const Player: React.FC<Props> = ({
     handleComplete,
     handlePlay,
     handlePause,
+    handleTime,
+    handleSeek,
+    handleSeeked,
+    handleAdImpression,
     handleUserActive,
     handleUserInactive,
     handleFirstFrame,
@@ -243,6 +263,7 @@ const Player: React.FC<Props> = ({
           return;
         }
         playerRef.current.remove();
+        playerRef.current = undefined;
       }
     };
   }, [detachEvents, backClickRef]);

packages/ui-react/src/components/Shelf/Shelf.module.scss

@@ -32,6 +32,10 @@
   font-size: 24px;
   white-space: nowrap;
   text-overflow: ellipsis;
+
+  @include responsive.mobile-only() {
+    font-size: 20px;
+  }
 }
 
 .slider {

packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useWatchHistory } from '@jwp/ott-hooks-react/src/useWatchHistory';
 import { usePlaylistItemCallback } from '@jwp/ott-hooks-react/src/usePlaylistItemCallback';
@@ -51,22 +51,43 @@ const PlayerContainer: React.FC<Props> = ({
   // state
   const [playerInstance, setPlayerInstance] = useState<JWPlayer>();
 
-  // watch history
-  const startTime = useWatchHistory(playerInstance, item, seriesItem);
+  const watchHistory = useWatchHistory(item, seriesItem);
 
   // player events
-  const handleReady = useCallback((player?: JWPlayer) => {
+  const handleReady = (player?: JWPlayer) => {
     setPlayerInstance(player);
-  }, []);
+  };
 
-  const handleFirstFrame = useCallback(() => {
+  const handleFirstFrame = () => {
     // when playing a livestream, the first moment we can seek to the beginning of the DVR range is after the
     // firstFrame event.
     // @todo this doesn't seem to work 100% out of the times. Confirm with player team if this is the best approach.
     if (liveFromBeginning) {
       playerInstance?.seek(0);
     }
-  }, [liveFromBeginning, playerInstance]);
+  };
+
+  const handleTimeEvent = (params: { position: number; duration: number }) => {
+    watchHistory.handleTimeUpdate(params);
+  };
+
+  const handlePlay = () => {
+    watchHistory.saveWatchProgress();
+    onPlay?.();
+  };
+
+  const handlePause = () => {
+    watchHistory.saveWatchProgress();
+    onPause?.();
+  };
+
+  const handleComplete = () => {
+    onComplete?.();
+  };
+
+  const handleRemove = () => {
+    watchHistory.saveWatchProgress();
+  };
 
   const handlePlaylistItemCallback = usePlaylistItemCallback(liveStartDateTime, liveEndDateTime);
 
@@ -92,15 +113,17 @@ const PlayerContainer: React.FC<Props> = ({
       adsData={adsData}
       onReady={handleReady}
       onFirstFrame={handleFirstFrame}
-      onPlay={onPlay}
-      onPause={onPause}
-      onComplete={onComplete}
+      onPlay={handlePlay}
+      onPause={handlePause}
+      onTime={handleTimeEvent}
+      onComplete={handleComplete}
       onUserActive={onUserActive}
       onUserInActive={onUserInActive}
+      onRemove={handleRemove}
       onNext={onNext}
       onBackClick={onBackClick}
       onPlaylistItemCallback={handlePlaylistItemCallback}
-      startTime={startTime}
+      startTime={watchHistory.startTime}
       autostart={autostart}
     />
   );