@applicaster/zapp-react-native-utils 15.0.0-rc.9 → 15.0.0-rc.90

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../../logger";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import {
   findPluginByIdentifier,
+  loadFeedEntry,
   loadFeedAndPrefetchThumbnailImage,
   parseTimeToSeconds,
   retrieveFeedUrl,
@@ -26,6 +27,19 @@ type ChapterMarkerOriginal = {
   actions: ActionChapter[];
 };
 
+export type LiveMetadataEvent = {
+  programId: string;
+  assetId: string;
+  title: string;
+  programStartTime: string;
+  programEndTime: string;
+};
+
+export type LiveMetadataConfig = {
+  updateUrl: string;
+  updateInterval: number;
+};
+
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;
@@ -50,11 +64,13 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private liveMetadataSubject: BehaviorSubject<LiveMetadataEvent>;
   private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
   private feedUrl: string;
   private reloadData: () => void;
   private updateTitleAndDescription: (data: any) => void;
   private feedDataInterval: any;
+  private liveMetadataUpdateInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -66,13 +82,17 @@ export class OverlaysObserver {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
 
+    this.player = player;
+    this.entry = player.getEntry();
+
     this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
-      title: player.getEntry()?.title || "",
-      summary: player.getEntry()?.summary || "",
+      title: this.entry?.title || "",
+      summary: this.entry?.summary || "",
     });
 
-    this.entry = player.getEntry();
-    this.player = player;
+    this.liveMetadataSubject = new BehaviorSubject<LiveMetadataEvent>(
+      this.entry?.extensions?.liveMetadata || null
+    );
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
@@ -80,7 +100,9 @@ export class OverlaysObserver {
     this.reloadData = () => {};
     this.updateTitleAndDescription = () => {};
     this.feedDataInterval = null;
+    this.liveMetadataUpdateInterval = null;
     void this.preparePlayNext();
+    void this.prepareLiveMetadata();
   }
 
   private setupFeedDataInterval(interval: number) {
@@ -98,6 +120,13 @@ export class OverlaysObserver {
     }
   }
 
+  public clearLiveMetadataUpdateInterval() {
+    if (this.liveMetadataUpdateInterval) {
+      clearInterval(this.liveMetadataUpdateInterval);
+      this.liveMetadataUpdateInterval = null;
+    }
+  }
+
   public setFeedDataHandlers(
     feedUrl: string,
     reloadData: () => void,
@@ -197,6 +226,48 @@ export class OverlaysObserver {
     }
   };
 
+  prepareLiveMetadata = async () => {
+    if (!this.player?.isLive?.()) {
+      log_debug("prepareLiveMetadata: Player is not live. Skipping...");
+
+      return;
+    }
+
+    const config: LiveMetadataConfig =
+      this.entry?.extensions?.liveMetadataConfig;
+
+    if (!config?.updateUrl || !config?.updateInterval) {
+      log_debug(
+        "prepareLiveMetadata: Live metadata configuration is not available. Skipping...",
+        { config }
+      );
+
+      return;
+    }
+
+    const reloadData = async () => {
+      try {
+        const entry = await loadFeedEntry(config.updateUrl, this.entry);
+
+        this.onLiveMetadataUpdated(entry?.extensions?.liveMetadata || null);
+      } catch (error) {
+        log_error("prepareLiveMetadata: Metadata fetching failed", {
+          error,
+          config,
+        });
+      }
+    };
+
+    log_debug("prepareLiveMetadata: Setting up live metadata observer update", {
+      config,
+    });
+
+    const interval = Number(config?.updateInterval) || 60;
+
+    this.clearLiveMetadataUpdateInterval();
+    this.liveMetadataUpdateInterval = setInterval(reloadData, interval * 1000);
+  };
+
   // TODO: Hack for video end, will be replaced with playlist prev/next in the future
   getPlayNextEntry = () =>
     !this.isCanceledByUser ? this.playNextConfig?.entry : null;
@@ -317,9 +388,11 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.liveMetadataSubject.complete();
     this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
     this.clearFeedDataInterval();
+    this.clearLiveMetadataUpdateInterval();
     this.releasePlayerObserver = null;
   };
 
@@ -352,4 +425,21 @@ export class OverlaysObserver {
         (prev, curr) => prev?.triggerTime === curr?.triggerTime
       )
     );
+
+  private onLiveMetadataUpdated = (liveMetadataEvent: LiveMetadataEvent) => {
+    this.liveMetadataSubject.next(liveMetadataEvent);
+  };
+
+  public getLiveMetadataObservable = (): Observable<LiveMetadataEvent> => {
+    return this.liveMetadataSubject.pipe(
+      distinctUntilChanged(
+        (prev, curr) =>
+          prev?.programId === curr?.programId && prev?.assetId === curr?.assetId
+      )
+    );
+  };
+
+  public getLiveMetadataValue = (): LiveMetadataEvent => {
+    return this.liveMetadataSubject.value;
+  };
 }

package/appUtils/playerManager/OverlayObserver/utils.ts

@@ -92,22 +92,26 @@ export const prefetchImage = (playableItem: ZappEntry, config: any = {}) => {
   }
 };
 
-export const loadFeedAndPrefetchThumbnailImage = async (
-  playNextFeedUrl: string,
-  entry: ZappEntry,
-  playNextPlugin
-) => {
+/**
+ * Loads a feed entry from the given feed URL using the provided Zapp entry as context.
+ *
+ * @param {string} feedUrl - The URL of the feed to load the entry from.
+ * @param {ZappEntry} entry - The Zapp entry to use as context for the request.
+ * @returns {Promise<ZappEntry>} A promise that resolves to the loaded Zapp entry.
+ * @throws {Error} If the feed loading fails or no entry is found in the response.
+ */
+export const loadFeedEntry = async (feedUrl: string, entry: ZappEntry) => {
   const requestBuilder = new RequestBuilder()
     .setEntryContext(entry)
     .setScreenContext({} as ZappRiver)
-    .setUrl(playNextFeedUrl);
+    .setUrl(feedUrl);
 
   const responseObject = await requestBuilder.call<ZappEntry>();
   const responseHelper = new PipesClientResponseHelper(responseObject);
 
   if (responseHelper.error) {
     log_error(
-      `loadFeedAndPrefetchThumbnailImage: loading failed with error: ${responseHelper.error.message}. Play next observer, will not be executed`,
+      `loadFeedEntry: loading failed with error: ${responseHelper.error.message}. Observer will not be executed`,
       {
         response: responseHelper.getLogsData(),
       }
@@ -116,29 +120,37 @@ export const loadFeedAndPrefetchThumbnailImage = async (
     throw responseHelper.error;
   } else {
     log_info(
-      `loadFeedAndPrefetchThumbnailImage: Play next url was successfully loaded for url: ${playNextFeedUrl}. Prefetching image`,
+      `loadFeedEntry: Feed was successfully loaded for url: ${feedUrl}`,
       responseHelper.getLogsData()
     );
 
-    const playNextEntry = responseHelper.responseData?.entry[0];
+    const entry = responseHelper.responseData?.entry[0];
 
-    if (!playNextEntry) {
-      log_error(
-        "loadFeedAndPrefetchThumbnailImage: Can not retrieve play next entry, feed was loaded but no entry was found",
-        responseHelper.getLogsData()
-      );
+    if (!entry) {
+      const error =
+        "loadFeedEntry: Can not retrieve entry, feed was loaded but no entry was found";
 
-      throw new Error(
-        "Can not retrieve play next entry, feed was loaded but no entry was found"
-      );
-    }
+      log_error(error, responseHelper.getLogsData());
 
-    prefetchImage(playNextEntry, playNextPlugin?.configuration);
+      throw new Error(error);
+    }
 
-    return playNextEntry;
+    return entry;
   }
 };
 
+export const loadFeedAndPrefetchThumbnailImage = async (
+  playNextFeedUrl: string,
+  entry: ZappEntry,
+  playNextPlugin
+) => {
+  const playNextEntry = await loadFeedEntry(playNextFeedUrl, entry);
+
+  prefetchImage(playNextEntry, playNextPlugin?.configuration);
+
+  return playNextEntry;
+};
+
 export const findPluginByIdentifier = (
   identifier: string,
   plugins: ZappPlugin[]

package/appUtils/playerManager/player.ts

@@ -250,6 +250,10 @@ export class Player {
       return false;
     }
 
+    if (!Number.isFinite(duration)) {
+      return this.getSeekableDuration() > 0;
+    }
+
     return duration > 0;
   };
 

package/appUtils/playerManager/playerNative.ts

@@ -15,6 +15,22 @@ const logger = createLogger({
 
 const { log_warning } = logger;
 
+interface PlayerMethods {
+  seeking?: (position: number) => void;
+  forward?: (deltaTime: number) => void;
+  rewind?: (deltaTime: number) => void;
+  startSleepTimer?: (sleepTimestamp: number) => void;
+  selectTrack?: (
+    selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
+  ) => void;
+  setPlaybackRate?: (rate: number) => void;
+  appStateChange?: (appState: string, previousAppState: string) => void;
+  closeNativePlayer?: () => void;
+  togglePlayPause?: () => void;
+}
+
+type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
+
 type PlayerPlugnId = "QuickBrickPlayerPlugin" | "KalturaPlayerPlugin";
 
 type Props = {
@@ -62,7 +78,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
+  currentPlayerComponent = (): PlayerComponent | null =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -121,7 +137,7 @@ export class PlayerNative extends Player {
 
       this.playerState.seekPosition = newPosition;
 
-      this.currentPlayerComponent()?.["seeking"](this.playerState.seekPosition);
+      this.currentPlayerComponent()?.seeking?.(this.playerState.seekPosition);
     }
 
     this.logState(PlayerModuleFuncNames.seekTo, { position });
@@ -135,7 +151,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.forward, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["forward"](deltaTime);
+      this.currentPlayerComponent()?.forward?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -151,7 +167,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.rewind, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["rewind"](deltaTime);
+      this.currentPlayerComponent()?.rewind?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -178,7 +194,7 @@ export class PlayerNative extends Player {
         sleepTimestamp
       )
     ) {
-      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+      this.currentPlayerComponent()?.startSleepTimer?.(sleepTimestamp);
     }
   };
 
@@ -195,11 +211,11 @@ export class PlayerNative extends Player {
   selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
+    this.currentPlayerComponent()?.selectTrack?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
-    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+    this.currentPlayerComponent()?.setPlaybackRate?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -209,19 +225,16 @@ export class PlayerNative extends Player {
   getProps = () => (this.currentPlayerComponent() as any)?.props;
 
   appStateChange = (appState, previousAppState) => {
-    this.currentPlayerComponent()?.["appStateChange"]?.(
-      appState,
-      previousAppState
-    );
+    this.currentPlayerComponent()?.appStateChange?.(appState, previousAppState);
   };
 
   closeNativePlayer = () => {
     // TODO: Delete does not work
-    this.currentPlayerComponent()?.["closeNativePlayer"]?.();
+    this.currentPlayerComponent()?.closeNativePlayer?.();
   };
 
   togglePlayPause = () => {
-    this.currentPlayerComponent()?.["togglePlayPause"]?.();
+    this.currentPlayerComponent()?.togglePlayPause?.();
   };
 
   onVideoLoad = (event) => {
@@ -289,19 +302,19 @@ export class PlayerNative extends Player {
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();
 
-    const disableFullScreen = config?.["disable_fullscreen"];
+    const disableFullScreen = config?.disable_fullscreen;
 
     if (disableFullScreen) {
       return false;
     }
 
-    const isFullScreenAudioPlayer = config?.["full_screen_audio_player"];
+    const isFullScreenAudioPlayer = config?.full_screen_audio_player;
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
 
   supportsNativeControls = (): boolean =>
-    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+    toBooleanWithDefaultFalse(this.getConfig()?.supports_native_controls);
 
   supportNativeCast = (): boolean =>
     toBooleanWithDefaultFalse(

package/appUtils/playerManager/usePlayerState.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Player } from "./player";
 import { usePlayer } from "./usePlayer";
 
-type PlayerState = {
+export type PlayerState = {
   currentTime: number;
   duration: number;
   seekableDuration: number;
@@ -10,6 +10,8 @@ type PlayerState = {
   isPaused: boolean;
   isBuffering: boolean;
   isReadyToPlay: boolean;
+  trackState?: QuickBrickPlayer.TracksState;
+  isAd: boolean;
 };
 
 export const usePlayerState = (
@@ -24,6 +26,8 @@ export const usePlayerState = (
     isPaused: null,
     isBuffering: false,
     isReadyToPlay: false,
+    trackState: null,
+    isAd: false,
   });
 
   const player: Player = usePlayer(playerId);
@@ -37,6 +41,8 @@ export const usePlayerState = (
       isPaused: player.isPaused(),
       isBuffering: player.isBuffering(),
       isReadyToPlay: player.isReadyToPlay(),
+      trackState: player.getTracksState(),
+      isAd: player.isAd(),
     });
   }, [player]);
 
@@ -54,10 +60,16 @@ export const usePlayerState = (
           onPlayerPause: onPlayerChangeState,
           onPlayerResume: onPlayerChangeState,
           onPlayerSeekComplete: onPlayerChangeState,
+          onTracksChanged: onPlayerChangeState,
+          onAdBreakBegin: onPlayerChangeState,
+          onAdBreakEnd: onPlayerChangeState,
+          onAdBegin: onPlayerChangeState,
+          onAdEnd: onPlayerChangeState,
+          onAdError: onPlayerChangeState,
         },
       });
     }
-  }, [player]);
+  }, [listenerId, onPlayerChangeState, player]);
 
   return state;
 };

package/arrayUtils/__tests__/allTruthy.test.ts

@@ -0,0 +1,24 @@
+import { allTruthy } from "..";
+
+describe("allTruthy", () => {
+  it("should return true when all values are true", () => {
+    expect(allTruthy([true, true, true])).toBe(true);
+  });
+
+  it("should return false when at least one value is false", () => {
+    expect(allTruthy([true, false, true])).toBe(false);
+  });
+
+  it("should return false when all values are false", () => {
+    expect(allTruthy([false, false, false])).toBe(false);
+  });
+
+  it("should return false for an empty array", () => {
+    expect(allTruthy([])).toBe(false);
+  });
+
+  it("should handle single-element arrays correctly", () => {
+    expect(allTruthy([true])).toBe(true);
+    expect(allTruthy([false])).toBe(false);
+  });
+});

package/arrayUtils/__tests__/anyThruthy.test.ts

@@ -0,0 +1,24 @@
+import { anyTruthy } from "..";
+
+describe("anyTruthy", () => {
+  it("should return true when at least one value is true", () => {
+    expect(anyTruthy([false, true, false])).toBe(true);
+  });
+
+  it("should return false when all values are false", () => {
+    expect(anyTruthy([false, false, false])).toBe(false);
+  });
+
+  it("should return true when all values are true", () => {
+    expect(anyTruthy([true, true, true])).toBe(true);
+  });
+
+  it("should return false for an empty array", () => {
+    expect(anyTruthy([])).toBe(false);
+  });
+
+  it("should handle single-element arrays correctly", () => {
+    expect(anyTruthy([true])).toBe(true);
+    expect(anyTruthy([false])).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -116,3 +116,8 @@ export const sample = (xs: unknown[]): unknown => {
 
   return xs[index];
 };
+
+export const allTruthy = (xs: boolean[]) =>
+  isFilledArray(xs) && xs.every(Boolean);
+
+export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);

package/cellUtils/index.ts

@@ -505,3 +505,35 @@ export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
     marginRight: value("image_margin_right"),
   };
 };
+
+export const isTextLabel = (key: string): boolean =>
+  key.includes("text_label_") && key.endsWith("_switch");
+
+export const hasTextLabelsEnabled = (
+  configuration: Record<string, any>
+): boolean => {
+  const textLabelsKeys = Object.keys(configuration).filter(isTextLabel);
+
+  const picked = textLabelsKeys.reduce(
+    (acc, key) => {
+      acc[key] = configuration[key];
+
+      return acc;
+    },
+    {} as Record<string, any>
+  );
+
+  const pickedValues = Object.values(picked);
+
+  return pickedValues.some((value) => {
+    if (typeof value === "boolean") {
+      return value === true;
+    }
+
+    if (typeof value === "string") {
+      return value !== "" && value.toLowerCase() !== "false";
+    }
+
+    return Boolean(value);
+  });
+};

package/configurationUtils/__tests__/imageSrcFromMediaItem.test.ts

@@ -31,4 +31,42 @@ describe("imageSrcFromMediaItem", () => {
 
     expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
   });
+
+  it("returns undefined when fallback is false and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      false,
+    ]);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns src when fallback is false and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      false,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
+
+  it("returns image_base as fallback when fallback is explicitly true and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      true,
+    ]);
+
+    const fallback = entry.media_group[0].media_item[0];
+    expect(result).toEqual(fallback.src);
+    expect(fallback.key).toBe("image_base");
+  });
+
+  it("returns src when fallback is explicitly true and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      true,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
 });