feat(project): use ternanry operator to get ads

jwplayer · Nov 6, 2023 · 53c3e00 · 53c3e00
1 parent 97d43e7
commit 53c3e00
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
@@ -9,7 +9,6 @@ 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 { useConfigStore } from '#src/stores/ConfigStore';
 import { useAds } from '#src/hooks/useAds';
 
 type Props = {
@@ -60,8 +59,7 @@ const Player: React.FC<Props> = ({
   const startTimeRef = useRef(startTime);
   const setPlayer = useOttAnalytics(item, feedId);
 
-  const { adSchedule, adScheduleUrls } = useConfigStore((s) => s.config);
-  const { data: adsData, isLoading: isAdsLoading } = useAds(adSchedule, adScheduleUrls, item?.mediaid);
+  const { data: adsData, isLoading: isAdsLoading } = useAds({ mediaId: item?.mediaid });
 
   const handleBeforePlay = useEventCallback(onBeforePlay);
   const handlePlay = useEventCallback(onPlay);

diff --git a/src/hooks/useAds.ts b/src/hooks/useAds.ts
@@ -1,19 +1,19 @@
 import { useQuery } from 'react-query';
 
 import { getMediaAds, getAdSchedule } from '#src/services/api.service';
-import type { AdScheduleUrls } from '#types/ad-schedule';
+import { useConfigStore } from '#src/stores/ConfigStore';
 
 const CACHE_TIME = 60 * 1000 * 20;
 
-const useAdSchedule = (adScheduleId: string | null | undefined, enabled: boolean) => {
+const useAdSchedule = ({ adScheduleId, enabled }: { adScheduleId: string | null | undefined; enabled: boolean }) => {
   const { isLoading, data } = useQuery(
     ['ad-schedule', adScheduleId],
     async () => {
       const adSchedule = await getAdSchedule(adScheduleId);
 
       return adSchedule;
     },
-    { enabled, cacheTime: CACHE_TIME, staleTime: CACHE_TIME },
+    { enabled: enabled && !!adScheduleId, cacheTime: CACHE_TIME, staleTime: CACHE_TIME },
   );
 
   return {
@@ -22,7 +22,7 @@ const useAdSchedule = (adScheduleId: string | null | undefined, enabled: boolean
   };
 };
 
-const useMediaAds = (jsonUrl: string | null | undefined, mediaId: string, enabled: boolean) => {
+const useMediaAds = ({ jsonUrl, mediaId, enabled }: { jsonUrl: string | null | undefined; mediaId: string; enabled: boolean }) => {
   const { isLoading, data } = useQuery(
     ['media-ads', mediaId],
     async () => {
@@ -31,7 +31,7 @@ const useMediaAds = (jsonUrl: string | null | undefined, mediaId: string, enable
 
       return mediaAds;
     },
-    { enabled, cacheTime: CACHE_TIME, staleTime: CACHE_TIME },
+    { enabled: enabled && !!mediaId, cacheTime: CACHE_TIME, staleTime: CACHE_TIME },
   );
 
   return {
@@ -40,16 +40,17 @@ const useMediaAds = (jsonUrl: string | null | undefined, mediaId: string, enable
   };
 };
 
-export const useAds = (adScheduleId: string | null | undefined, urls: AdScheduleUrls | undefined, mediaId: string) => {
-  const hasAdConfig = !!urls?.json;
+export const useAds = ({ mediaId }: { mediaId: string }) => {
+  const { adSchedule: adScheduleId, adScheduleUrls } = useConfigStore((s) => s.config);
 
-  // Fetch ad-schedule only when ad-config is not set (`adScheduleUrls.json` prop is not set) + adScheduleId is present
-  const { data: adSchedule, isLoading: isAdScheduleLoading } = useAdSchedule(adScheduleId, !!(adScheduleId && hasAdConfig));
   // adScheduleUrls.json prop exists when ad-config is attached to the App Config
-  const { isLoading: isMediaAdsLoading, data: mediaAds } = useMediaAds(urls?.json, mediaId, hasAdConfig);
+  const usePerMediaAds = !!adScheduleUrls?.json;
+
+  const { data: mediaAds, isLoading: isMediaAdsLoading } = useMediaAds({ jsonUrl: adScheduleUrls?.json, mediaId, enabled: usePerMediaAds });
+  const { data: adSchedule, isLoading: isAdScheduleLoading } = useAdSchedule({ adScheduleId, enabled: !usePerMediaAds });
 
   return {
-    isLoading: isAdScheduleLoading || isMediaAdsLoading,
-    data: mediaAds || adSchedule,
+    isLoading: usePerMediaAds ? isMediaAdsLoading : isAdScheduleLoading,
+    data: usePerMediaAds ? mediaAds : adSchedule,
   };
 };
diff --git a/test-e2e/tests/live_channel_test.ts b/test-e2e/tests/live_channel_test.ts
@@ -78,6 +78,7 @@ Scenario('I can navigate to live channels from the header', ({ I }) => {
   I.see('On Channel 1', locate('div').inside(videoDetailsLocator));
 });
 
+// TODO: add BCL SaaS stream
 // eslint-disable-next-line codeceptjs/no-skipped-tests
 Scenario.skip('I can watch the current live program on the live channel screen', async ({ I }) => {
   await I.openVideoCard('Channel 1');