feat(project): fetch ads in PlayerContainer

jwplayer · Nov 8, 2023 · b0eb27a · b0eb27a
1 parent 71dc1b8
commit b0eb27a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
@@ -9,7 +9,7 @@ import type { PlaylistItem } from '#types/playlist';
 import useEventCallback from '#src/hooks/useEventCallback';
 import useOttAnalytics from '#src/hooks/useOttAnalytics';
 import { logDev, testId } from '#src/utils/common';
-import { useAds } from '#src/hooks/useAds';
+import type { AdSchedule } from '#types/ad-schedule';
 
 type Props = {
   playerId: string;
@@ -18,6 +18,7 @@ type Props = {
   item: PlaylistItem;
   startTime?: number;
   autostart?: boolean;
+  adsData?: AdSchedule;
   onReady?: (player?: JWPlayer) => void;
   onPlay?: () => void;
   onPause?: () => void;
@@ -36,6 +37,7 @@ const Player: React.FC<Props> = ({
   playerId,
   playerLicenseKey,
   item,
+  adsData,
   onReady,
   onPlay,
   onPause,
@@ -59,8 +61,6 @@ const Player: React.FC<Props> = ({
   const startTimeRef = useRef(startTime);
   const setPlayer = useOttAnalytics(item, feedId);
 
-  const { data: adsData = {}, isLoading: isAdsLoading } = useAds({ mediaId: item?.mediaid });
-
   const handleBeforePlay = useEventCallback(onBeforePlay);
   const handlePlay = useEventCallback(onPlay);
   const handlePause = useEventCallback(onPause);
@@ -208,10 +208,10 @@ const Player: React.FC<Props> = ({
       return loadPlaylist();
     }
 
-    if (libLoaded && !isAdsLoading) {
+    if (libLoaded) {
       initializePlayer();
     }
-  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer, autostart, adsData, playerLicenseKey, feedId, isAdsLoading]);
+  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer, autostart, adsData, playerLicenseKey, feedId]);
 
   useEffect(() => {
     return () => {

diff --git a/src/containers/PlayerContainer/PlayerContainer.tsx b/src/containers/PlayerContainer/PlayerContainer.tsx
@@ -9,6 +9,7 @@ import useContentProtection from '#src/hooks/useContentProtection';
 import { getMediaById } from '#src/services/api.service';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import { useSettingsStore } from '#src/stores/SettingsStore';
+import { useAds } from '#src/hooks/useAds';
 
 type Props = {
   item: PlaylistItem;
@@ -45,6 +46,7 @@ const PlayerContainer: React.FC<Props> = ({
   // data
   const { data: playableItem, isLoading } = useContentProtection('media', item.mediaid, (token, drmPolicyId) => getMediaById(item.mediaid, token, drmPolicyId));
   const { playerId, playerLicenseKey } = useSettingsStore((s) => s);
+  const { data: adsData, isLoading: isAdsLoading } = useAds({ mediaId: item?.mediaid });
 
   // state
   const [playerInstance, setPlayerInstance] = useState<JWPlayer>();
@@ -68,7 +70,7 @@ const PlayerContainer: React.FC<Props> = ({
 
   const handlePlaylistItemCallback = usePlaylistItemCallback(liveStartDateTime, liveEndDateTime);
 
-  if (!playableItem || isLoading) {
+  if (!playableItem || isLoading || isAdsLoading) {
     return <LoadingOverlay inline />;
   }
 
@@ -78,6 +80,7 @@ const PlayerContainer: React.FC<Props> = ({
       playerLicenseKey={playerLicenseKey}
       feedId={feedId}
       item={playableItem}
+      adsData={adsData}
       onReady={handleReady}
       onFirstFrame={handleFirstFrame}
       onPlay={onPlay}