@applicaster/zapp-react-native-utils 12.0.0-alpha.5895113034 → 12.0.0-alpha.5933014273

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/conts.ts

@@ -7,6 +7,7 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerPause = "onPlayerPause",
   OnLoad = "onLoad",
   OnError = "onError",
+  OnVideoError = "onVideoError",
   OnVideoEnd = "onVideoEnd",
   OnPlaybackRateChange = "onPlaybackRateChange",
   OnVideoLoad = "onVideoLoad",

package/appUtils/playerManager/index.ts

@@ -10,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",
@@ -168,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: {
@@ -343,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) {
@@ -353,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) {
@@ -418,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() {
@@ -443,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

@@ -91,8 +91,6 @@ export class Player {
     this.onVideoProgress = this.onVideoProgress.bind(this);
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
-    this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
-
     this.entryObservable = null;
   }
 
@@ -323,7 +321,7 @@ export class Player {
    * You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
    * This allows you to use one method for everything.
    */
-  onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
+  onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -338,11 +336,10 @@ export class Player {
     });
   };
 
-  onPlayerSeekComplete(event: QuickBrickPlayer.OnSeekCompleteEvent) {
+  onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
-
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -353,7 +350,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnPlayerSeekComplete,
       event,
     });
-  }
+  };
 
   onVideoEnd = (event) => {
     this.invokeListenersUpdate({
@@ -362,6 +359,13 @@ export class Player {
     });
   };
 
+  onVideoError = (error: Error) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnVideoError,
+      event: error,
+    });
+  };
+
   onError = (error: Error) => {
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
@@ -649,10 +653,11 @@ export class Player {
   };
 
   public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
-    onPlayerSeekStart: this.onPlayerSeekStart,
-    onPlayerSeekComplete: this.onPlayerSeekComplete,
+    onPlayerSeekStart: this.onSeekStart,
+    onPlayerSeekComplete: this.onSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
+    onVideoError: this.onVideoError,
     onLoad: this.onLoad,
     onPlayerPause: this.onPlayerPause,
     onPlayerResume: this.onPlayerResume,
@@ -687,9 +692,6 @@ export class Player {
   play = () => {};
   pause = () => {};
   disableBufferAnimation = (): boolean => true;
-  setLanguage = (
-    _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
-  ) => {};
 
   setPlaybackRate = (_rate) => {};
   startSleepTimer = (_timestamp) => {};
@@ -731,9 +733,5 @@ export class Player {
 
   public supportsNativeControls = (): boolean => false;
   public supportNativeCast = (): boolean => false;
-
-  public isInDelayedSeek = (): boolean => false;
-  public enterDelayedSeek() {}
-
-  public exitDelayedSeek() {}
+  public destroy = () => {};
 }

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;
+};

package/appUtils/playerManager/playerNative.ts

@@ -2,19 +2,10 @@ import * as R from "ramda";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
-import { findNodeHandle, NativeModules } from "react-native";
-import { isApplePlatform } from "../../reactUtils";
+import { findNodeHandle } from "react-native";
 import { PlayerRole } from "./conts";
 import { toBooleanWithDefaultFalse } from "../../booleanUtils";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -197,10 +188,10 @@ export class PlayerNative extends Player {
 
   disableBufferAnimation = (): boolean => false;
 
-  setLanguage = (
+  selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["setLanguage"]?.(selected);
+    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
@@ -231,10 +222,9 @@ export class PlayerNative extends Player {
 
   onVideoLoad = (event) => {
     if (this.startPosition) {
+      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
       this.seekTo(this.startPosition);
       this.startPosition = null;
-
-      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
     } else {
       super.onVideoLoad(event);
     }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -5,8 +5,6 @@ import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
-import { isTV } from "../../reactUtils";
-import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -41,7 +39,7 @@ export const usePlayerControllerSetup = ({
       ? { supports_native_controls: true, ...config }
       : config;
 
-    const combinedProps = {
+    const newPlayerController = new ControllerType({
       player: ref,
       listener: props as any,
       config: newConfig,
@@ -49,22 +47,10 @@ export const usePlayerControllerSetup = ({
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
-    };
-
-    if (isTV()) {
-      const wrappedPlayerController = new ControllerType({
-        ...combinedProps,
-        playerRole: PlayerRole.Unspecified,
-        playerId: playerId + "." + "wrapped",
-      });
+    });
 
-      setPlayerController(
-        new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
-      );
-    } else {
-      setPlayerController(new ControllerType(combinedProps));
-    }
-  }, [playerId, entry?.id]);
+    setPlayerController(newPlayerController);
+  }, [playerId, entry?.id, ref.current]);
 
   React.useEffect(() => {
     if (!playerController) {
@@ -86,6 +72,7 @@ export const usePlayerControllerSetup = ({
 
     return () => {
       playerManager.unregisterPlayer(playerId);
+      playerController.destroy?.();
     };
   }, [playerId, playerController]);
 

package/appUtils/playerManager/usePlayerState.tsx

@@ -16,24 +16,28 @@ export const usePlayerState = (
   listenerId: string,
   playerId?: string
 ): PlayerState => {
-  const [currentTime, setCurrentTime] = React.useState<number>(null);
-  const [duration, setDuration] = React.useState<number>(null);
-  const [seekableDuration, setSeekableDuration] = React.useState<number>(null);
-  const [isLive, setIsLive] = React.useState<boolean>(null);
-  const [isBuffering, setIsBuffering] = React.useState<boolean>(false);
-  const [isReadyToPlay, setIsReadyToPlay] = React.useState<boolean>(false);
-  const [isPaused, setIsPaused] = React.useState<boolean>(false);
+  const [state, setState] = React.useState<PlayerState>({
+    currentTime: null,
+    duration: null,
+    seekableDuration: null,
+    isLive: null,
+    isPaused: null,
+    isBuffering: false,
+    isReadyToPlay: false,
+  });
 
   const player: Player = usePlayer(playerId);
 
   const onPlayerChangeState = React.useCallback(() => {
-    setIsBuffering(player.isBuffering());
-    setIsReadyToPlay(player.isReadyToPlay);
-    setCurrentTime(player.getContentPosition());
-    setDuration(player.getDuration());
-    setSeekableDuration(player.getSeekableDuration());
-    setIsLive(player.isLive());
-    setIsPaused(player.isPaused());
+    setState({
+      currentTime: player.getContentPosition(),
+      duration: player.getDuration(),
+      seekableDuration: player.getSeekableDuration(),
+      isLive: player.isLive(),
+      isPaused: player.isPaused(),
+      isBuffering: player.isBuffering(),
+      isReadyToPlay: player.isReadyToPlay(),
+    });
   }, [player]);
 
   React.useEffect(() => {
@@ -55,24 +59,5 @@ export const usePlayerState = (
     }
   }, [player]);
 
-  return React.useMemo(
-    () => ({
-      currentTime,
-      duration,
-      seekableDuration,
-      isLive,
-      isPaused,
-      isBuffering,
-      isReadyToPlay,
-    }),
-    [
-      currentTime,
-      duration,
-      seekableDuration,
-      isLive,
-      isPaused,
-      isBuffering,
-      isReadyToPlay,
-    ]
-  );
+  return state;
 };

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -0,0 +1,63 @@
+import { isFilledArray } from "..";
+
+describe("isFilledArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isFilledArray(value)).toBe(true);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -95,3 +95,8 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
+
+/** Checks if a value is a non-empty array */
+export function isFilledArray(value: unknown): boolean {
+  return R.is(Array, value) && R.length(value) > 0;
+}