@applicaster/zapp-react-native-utils 12.0.0-rc.12 → 12.0.0-rc.120

package/appUtils/platform/index.ts

@@ -0,0 +1,3 @@
+export * from "./platformUtils";
+
+export * from "./const";

package/appUtils/platform/platformUtils.ts

@@ -0,0 +1,217 @@
+import { BehaviorSubject } from "rxjs";
+
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  isLgPlatform,
+  isSamsungPlatform,
+} from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
+
+import { PLATFORM_KEYS, PLATFORMS } from "./const";
+import { createLogger, utilsLogger } from "../../logger";
+
+declare global {
+  interface Window {
+    VIZIO?: {
+      exitApplication: () => void;
+      Chromevox: {
+        play: (text: string) => void;
+      };
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+const { log_debug } = createLogger({
+  category: "General",
+  subsystem: "PlatformUtils",
+  parent: utilsLogger,
+});
+
+export const getUserAgent = () =>
+  window?.navigator?.userAgent || global?.navigator?.userAgent;
+
+/** VIZIO UTILS */
+
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};
+
+/**
+ * Manages device based closed captioning state
+ * Returns an observable that emits the current state and updates whenever it changes
+ */
+export class ClosedCaptioningManager {
+  private ccState$ = new BehaviorSubject<boolean>(false);
+  private static ccManagerInstance: ClosedCaptioningManager;
+
+  private constructor() {
+    this.initialize();
+  }
+
+  static getInstance(): ClosedCaptioningManager {
+    if (!ClosedCaptioningManager.ccManagerInstance) {
+      ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
+    }
+
+    return ClosedCaptioningManager.ccManagerInstance;
+  }
+
+  async initialize() {
+    const existingState = await sessionStorage.getItem(
+      PLATFORM_KEYS.deviceClosedCaptioningEnabled
+    );
+
+    log_debug("Initializing closed captioning manager", { existingState });
+
+    if (existingState !== null) {
+      this.ccState$.next(existingState === "true" || existingState === true);
+    }
+
+    if (hasVizioAPIs()) {
+      window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
+        log_debug("CC state changed", { isCCEnabled });
+
+        sessionStorage.setItem(
+          PLATFORM_KEYS.deviceClosedCaptioningEnabled,
+          isCCEnabled
+        );
+
+        this.ccState$.next(isCCEnabled);
+      });
+    }
+  }
+
+  getCurrentState(): boolean {
+    return this.ccState$.getValue();
+  }
+
+  getStateAsObservable() {
+    return this.ccState$.asObservable();
+  }
+}
+
+/**
+ * Subscribe to closed captioning state changes
+ * @returns Observable<boolean>
+ * @example
+ * const subscription = getClosedCaptionState().subscribe(
+ *   isEnabled => setClosedCaptionState(isEnabled)
+ * );
+ * subscription.unsubscribe(), []);
+ */
+export const getClosedCaptionState = () => {
+  const ccManager = ClosedCaptioningManager.getInstance();
+
+  return ccManager.getStateAsObservable();
+};
+
+/**
+ * Manages device based closed captioning state
+ * Returns an observable that emits the current state and updates whenever it changes
+ */
+export class TTSManager {
+  private ttsState$ = new BehaviorSubject<boolean>(false);
+  private static ttsManagerInstance: TTSManager;
+
+  private constructor() {
+    this.initialize();
+  }
+
+  static getInstance(): TTSManager {
+    if (!TTSManager.ttsManagerInstance) {
+      TTSManager.ttsManagerInstance = new TTSManager();
+    }
+
+    return TTSManager.ttsManagerInstance;
+  }
+
+  async initialize() {
+    if (!isVizioPlatform()) return;
+
+    document.addEventListener(
+      "VIZIO_TTS_ENABLED",
+      () => {
+        this.ttsState$.next(true);
+      },
+      false
+    );
+
+    document.addEventListener(
+      "VIZIO_TTS_DISABLED",
+      () => {
+        this.ttsState$.next(false);
+      },
+      false
+    );
+  }
+
+  getCurrentState(): boolean {
+    return this.ttsState$.getValue();
+  }
+
+  getStateAsObservable() {
+    return this.ttsState$.asObservable();
+  }
+
+  readText(text: string) {
+    if (isSamsungPlatform() && window.speechSynthesis) {
+      const utterance = new SpeechSynthesisUtterance(text);
+      window.speechSynthesis.speak(utterance);
+    }
+
+    if (isLgPlatform() && window.webOS?.service) {
+      try {
+        window.webOS.service.request("luna://com.webos.service.tts", {
+          method: "speak",
+          onFailure(error: any) {
+            log_debug("There was a failure setting up webOS TTS service", {
+              error,
+            });
+          },
+          onSuccess(response: any) {
+            log_debug("webOS TTS service is configured successfully", {
+              response,
+            });
+          },
+          parameters: {
+            text,
+          },
+        });
+      } catch (error) {
+        log_debug("webOS TTS service error", { error });
+      }
+    }
+
+    if (!window.VIZIO?.Chromevox) return;
+
+    window.VIZIO.Chromevox.play(text);
+  }
+}

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -41,6 +41,11 @@ export type ChapterMarkerEvent = {
   actions: ActionChapter[];
 };
 
+export type TitleSummaryEvent = {
+  title: string | number;
+  summary: string | number;
+};
+
 type ChapterMarkersObserverProps = {
   player: Player;
 };
@@ -60,6 +65,11 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
+  private feedUrl: string;
+  private reloadData: () => void;
+  private updateTitleAndDescription: (data: any) => void;
+  private feedDataInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -70,14 +80,55 @@ export class OverlaysObserver {
   constructor({ player }: ChapterMarkersObserverProps) {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
+
+    this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
+      title: player.getEntry()?.title || "",
+      summary: player.getEntry()?.summary || "",
+    });
+
     this.entry = player.getEntry();
     this.player = player;
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
+    this.feedUrl = "";
+    this.reloadData = () => {};
+    this.updateTitleAndDescription = () => {};
+    this.feedDataInterval = null;
     void this.preparePlayNext();
   }
 
+  private setupFeedDataInterval(interval: number) {
+    if (this.feedUrl && this.reloadData && this.updateTitleAndDescription) {
+      this.feedDataInterval = setInterval(() => {
+        this.reloadData();
+      }, interval * 1000);
+    }
+  }
+
+  public clearFeedDataInterval() {
+    if (this.feedDataInterval) {
+      clearInterval(this.feedDataInterval);
+      this.feedDataInterval = null;
+    }
+  }
+
+  public setFeedDataHandlers(
+    feedUrl: string,
+    reloadData: () => void,
+    interval: number,
+    updateTitleAndDescription: (data: any) => void
+  ) {
+    this.feedUrl = feedUrl;
+    this.reloadData = reloadData;
+    this.updateTitleAndDescription = updateTitleAndDescription;
+    this.setupFeedDataInterval(interval);
+  }
+
+  public getTitleSummaryObservable(): Observable<TitleSummaryEvent> {
+    return this.titleSummarySubject.asObservable().pipe(distinctUntilChanged());
+  }
+
   handleUserCancelPlayNext = () => {
     this.isCanceledByUser = true;
     this.playNextSubject.next(null);
@@ -281,7 +332,9 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
+    this.clearFeedDataInterval();
     this.releasePlayerObserver = null;
   };
 

package/appUtils/playerManager/conts.ts

@@ -7,6 +7,7 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerPause = "onPlayerPause",
   OnLoad = "onLoad",
   OnError = "onError",
+  OnVideoError = "onVideoError",
   OnVideoEnd = "onVideoEnd",
   OnPlaybackRateChange = "onPlaybackRateChange",
   OnVideoLoad = "onVideoLoad",
@@ -20,6 +21,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/index.ts

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import { subscriber } from "../../functionUtils";
 import { utilsLogger, createLogger } from "../../logger";
 import { Player } from "./player";
-import { AnalyticsTracker } from "../../analyticsUtils/analyticsTracker";
 import {
   hasTizenAPIs,
   subscribeToDeviceNetworkChanges,
@@ -11,6 +10,7 @@ import {
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
 import { PlayerRole } from "./conts";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "General",
@@ -36,7 +36,10 @@ export interface PlayerLifecycleListener {
 }
 
 type PlayersMap = {
-  [id: string]: { player: Player; isInViewport: boolean };
+  [id: string]: {
+    player: Player;
+    isInViewport: boolean;
+  };
 };
 
 export class PlayerManager {
@@ -45,7 +48,6 @@ export class PlayerManager {
   private playersMap: PlayersMap = {};
   private manager = subscriber();
   private castingReceiver: Player;
-  private analyticsTracker: AnalyticsTracker;
   private lifecycleListeners: PlayerLifecycleListener[] = [];
 
   public static getInstance() {
@@ -56,7 +58,7 @@ export class PlayerManager {
     return PlayerManager.instance;
   }
 
-  public getActivePlayerId = (): String | null => {
+  public getActivePlayerId = (): string | null => {
     return this.activePlayerId;
   };
 
@@ -101,7 +103,10 @@ export class PlayerManager {
   }
 
   private addPlayer = (id: string, player: Player) => {
-    this.playersMap[id] = { player: player, isInViewport: false };
+    this.playersMap[id] = {
+      player: player,
+      isInViewport: false,
+    };
   };
 
   public isPlayerRegistered = (id: string) => !!this.playersMap[id];
@@ -164,6 +169,10 @@ export class PlayerManager {
     this.addPlayer(id, playerController);
 
     if (playerController.playerRole === PlayerRole.Primary) {
+      if (playerController.playerPluginId !== "QuickBrickPlayerPlugin") {
+        RNPlayerManager?.["QuickBrickPlayerPlugin"]?.stopBackgroundPlayback?.();
+      }
+
       playerController.addListener({
         id: this.getPlayerListenerId(id),
         listener: {
@@ -246,28 +255,6 @@ export class PlayerManager {
     this.castingReceiver = null;
   }
 
-  /**
-   * Handles analytic events, generates a new analytics tracker and transmits events
-   * Passes entry data, and playerState to the tracker for additional context
-   * The end result is an event formatted and passed to AnalyticsBridge.postEvent
-   * When we get the synthetic event we need to pull the data in the e object
-   * e contains the return value from native
-   */
-  public handleAnalyticEvent(event, data = {}, entry: ZappEntry) {
-    const playerState = this.getActivePlayer()?.getState();
-
-    if (!this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker = new AnalyticsTracker(entry);
-    }
-
-    this.analyticsTracker?.handleAnalyticEvent?.(
-      event,
-      data,
-      entry,
-      playerState
-    );
-  }
-
   /**
    * Method retrieves the instantiated player instance controller
    * Instance controller exposes methods like getContentDuration, getContentPosision
@@ -361,9 +348,9 @@ export class PlayerManager {
     // TODO: Remove
     if (this.castingReceiver) {
       this.castingReceiver.rewind(deltaTime);
+    } else {
+      this.getActivePlayer()?.rewind(deltaTime);
     }
-
-    this.getActivePlayer()?.rewind(deltaTime);
   }
 
   public forward(deltaTime = null) {
@@ -371,9 +358,9 @@ export class PlayerManager {
 
     if (this.castingReceiver) {
       this.castingReceiver.forward(deltaTime);
+    } else {
+      this.getActivePlayer()?.forward(deltaTime);
     }
-
-    this.getActivePlayer()?.forward(deltaTime);
   }
 
   public seeking(time) {
@@ -436,7 +423,7 @@ export class PlayerManager {
     }
 
     // Call method on player just in case
-    return this.getActivePlayer()?.setLanguage(track);
+    return this.getActivePlayer()?.selectTrack(track);
   }
 
   public isRegistered() {
@@ -461,6 +448,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
+      this.getActivePlayer().closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/nativePlayerManager.ts

@@ -0,0 +1,12 @@
+import { NativeModules } from "react-native";
+import { isApplePlatform } from "../../reactUtils";
+
+export const RNPlayerManager = {
+  QuickBrickPlayerPlugin: isApplePlatform()
+    ? NativeModules.PlayerModule
+    : NativeModules.QuickBrickDefaultPlayerModule,
+  KalturaPlayerPlugin: isApplePlatform()
+    ? NativeModules.KalturaPlayerModule
+    : NativeModules.QBKalturaPlayerModule,
+  "quick-brick-player-brightcove": NativeModules.BrightcovePlayerModule,
+};

package/appUtils/playerManager/player.ts

@@ -42,7 +42,7 @@ export class Player {
 
   protected startPosition?: number | null;
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
-  private chaptersObserver?: OverlaysObserver | null;
+  private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
 
   protected listeners: {
@@ -95,11 +95,11 @@ export class Player {
   }
 
   getOverlayObservable = () => {
-    if (!this.chaptersObserver) {
-      this.chaptersObserver = new OverlaysObserver({ player: this });
+    if (!this.overlaysObserver) {
+      this.overlaysObserver = new OverlaysObserver({ player: this });
     }
 
-    return this.chaptersObserver;
+    return this.overlaysObserver;
   };
 
   getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
@@ -278,6 +278,10 @@ export class Player {
     return this.playerState.isBuffering;
   };
 
+  isReadyToPlay = (): boolean => {
+    return this.playerState.isReadyToPlay;
+  };
+
   // Methods to call actions on the player
   seekTo = (_position: number) => {};
 
@@ -355,6 +359,13 @@ export class Player {
     });
   };
 
+  onVideoError = (error: Error) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnVideoError,
+      event: error,
+    });
+  };
+
   onError = (error: Error) => {
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
@@ -410,6 +421,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -620,6 +657,7 @@ export class Player {
     onPlayerSeekComplete: this.onSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
+    onVideoError: this.onVideoError,
     onLoad: this.onLoad,
     onPlayerPause: this.onPlayerPause,
     onPlayerResume: this.onPlayerResume,
@@ -630,6 +668,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -648,9 +692,10 @@ export class Player {
   play = () => {};
   pause = () => {};
   disableBufferAnimation = (): boolean => true;
-  setLanguage = (
-    _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
-  ) => {};
+
+  setPlaybackRate = (_rate) => {};
+  startSleepTimer = (_timestamp) => {};
+  cancelSleepTimer = () => {};
 
   getPluginConfiguration = () => null;
   appStateChange = (_appState, _previousAppState) => {};
@@ -685,4 +730,8 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
+  public destroy = () => {};
 }

package/appUtils/playerManager/playerFactory.ts

@@ -1,17 +1,31 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
+import { PlayerRole } from "./conts";
 
 type PlayerFactoryItem = {
   Component: any;
   controller: Player;
 };
 
+type PlayerFactoryProps = {
+  player: any;
+  playerId: string;
+  autoplay: boolean;
+  entry: ZappEntry;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  playerRole: PlayerRole;
+};
+
 interface PlayerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (config: any): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "react";
+import { Player } from "../player";
+import { usePlayer } from "../usePlayer";
+import { useThrottle } from "../../../functionUtils";
+
+/**
+ *
+ * @param listenerId - A unique identifier for the listener.
+ * @param playerId - (Optional) The ID of the player to observe.
+ * @returns The current playback time in seconds.
+ */
+export const usePlayerCurrentTime = (
+  listenerId: string,
+  playerId?: string
+): number | null => {
+  const [currentTime, setCurrentTime] = useState<number | null>(null);
+  const player: Player = usePlayer(playerId);
+
+  const updateCurrentTime = useCallback(() => {
+    if (player) {
+      const newCurrentTime = player.getContentPosition();
+
+      setCurrentTime((prevTime) =>
+        prevTime !== newCurrentTime ? newCurrentTime : prevTime
+      );
+    }
+  }, [player]);
+
+  const { throttledFunction: throttledUpdate, cancel } = useThrottle(
+    updateCurrentTime,
+    1000
+  );
+
+  useEffect(() => {
+    if (player) {
+      throttledUpdate();
+
+      const listeners = {
+        onVideoProgress: throttledUpdate,
+      };
+
+      const id = `${listenerId}_player_current_time`;
+
+      player.addListener({
+        id: id,
+        listener: listeners,
+      });
+
+      return () => {
+        player.removeListener(id);
+        cancel();
+      };
+    }
+  }, [player, listenerId, throttledUpdate, cancel]);
+
+  return currentTime;
+};