diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index 370eb6665..a325185c1 100644 --- 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 = ({ playerId, playerLicenseKey, item, + adsData, onReady, onPlay, onPause, @@ -59,8 +61,6 @@ const Player: React.FC = ({ 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 = ({ 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 index 65c00b298..4a7cc726e 100644 --- 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 = ({ // 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(); @@ -68,7 +70,7 @@ const PlayerContainer: React.FC = ({ const handlePlaylistItemCallback = usePlaylistItemCallback(liveStartDateTime, liveEndDateTime); - if (!playableItem || isLoading) { + if (!playableItem || isLoading || isAdsLoading) { return ; } @@ -78,6 +80,7 @@ const PlayerContainer: React.FC = ({ playerLicenseKey={playerLicenseKey} feedId={feedId} item={playableItem} + adsData={adsData} onReady={handleReady} onFirstFrame={handleFirstFrame} onPlay={onPlay}