@applicaster/zapp-react-native-utils 12.0.0-alpha.9262886003 → 12.0.0-alpha.9417984401

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

@@ -359,6 +359,13 @@ export class Player {
     });
   };
 
+  onVideoError = (error: Error) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnVideoError,
+      event: error,
+    });
+  };
+
   onError = (error: Error) => {
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
@@ -414,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 = {},
@@ -624,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,
@@ -634,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,
@@ -652,9 +692,6 @@ export class Player {
   play = () => {};
   pause = () => {};
   disableBufferAnimation = (): boolean => true;
-  setLanguage = (
-    _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
-  ) => {};
 
   setPlaybackRate = (_rate) => {};
   startSleepTimer = (_timestamp) => {};
@@ -693,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

@@ -9,21 +9,23 @@ type PlayerFactoryItem = {
 };
 
 type PlayerFactoryProps = {
-  player: any,
-  playerId: string,
-  autoplay: boolean,
-  entry: ZappEntry,
-  muted: boolean,
-  playerPluginId: string,
-  screenConfig: Record<string, any>,
-  playerRole: PlayerRole,
-}
+  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: PlayerFactoryProps): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {
@@ -44,7 +46,7 @@ export const playerFactory = (config: PlayerFactoryProps): PlayerFactoryItem | n
 
   // TODO: Fix type:
   const playerProtocol: PlayerConstructor =
-    playerPlugin?.module?.playerProtocol(config?.screenConfig);
+    playerPlugin?.module?.playerProtocol(config?.screenConfig, config?.entry);
 
   const playerView = (playerProtocol as any)?.Component || null;
 

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,18 +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";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -69,7 +61,7 @@ export class PlayerNative extends Player {
   currentPlayerComponent = (): ReactComponent<PlayerProps> =>
     this.playerComponent?.current;
 
-  getState = () => this.currentPlayerComponent()?.["getState"]?.() ?? {};
+  getState = () => this.playerState;
 
   // TODO: Try to add module interface
   invokeNativeFunction = (funcName: string, ...params: any[]): boolean => {
@@ -110,7 +102,7 @@ export class PlayerNative extends Player {
       return;
     }
 
-    const newPosition = R.clamp(0, position, this.playerState.seekableDuration);
+    const newPosition = R.clamp(0, this.playerState.seekableDuration, position);
 
     if (
       !this.invokeNativeFunction(
@@ -196,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) => {
@@ -291,4 +283,12 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+
+  supportNativeCast = (): boolean =>
+    toBooleanWithDefaultFalse(
+      this.playerPluginId === "quick-brick-player-brightcove"
+    );
 }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,10 +35,14 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
     const newPlayerController = new ControllerType({
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,
@@ -45,7 +50,7 @@ export const usePlayerControllerSetup = ({
     });
 
     setPlayerController(newPlayerController);
-  }, [playerId, entry?.id]);
+  }, [playerId, entry?.id, ref.current]);
 
   React.useEffect(() => {
     if (!playerController) {
@@ -67,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;
+}

package/booleanUtils/index.ts

@@ -1,7 +1,7 @@
-import * as R from "ramda";
+import { is, toLower } from "ramda";
 
 export const toBoolean = (value: any): boolean | undefined => {
-  if (R.is(Boolean, value)) {
+  if (is(Boolean, value)) {
     return value;
   }
 
@@ -17,12 +17,12 @@ export const toBooleanWithDefaultTrue = toBooleanWithDefault(true);
 
 export const toBooleanWithDefaultFalse = toBooleanWithDefault(false);
 
-export const isTrue = (value: any): boolean => {
+export const isTrue = (value: unknown): boolean => {
   if (value === true) {
     return true;
   }
 
-  if (R.is(String, value) && value.toLowerCase() === "true") {
+  if (is(String, value) && toLower(value) === "true") {
     return true;
   }
 

package/cellUtils/__tests__/cellUtils.test.ts

@@ -24,7 +24,6 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
-  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -395,9 +394,7 @@ describe("getColorFromData", () => {
   it("should return value directly if valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: "background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "#123456",
     });
 
     expect(result).toBe("#123456");
@@ -406,9 +403,7 @@ describe("getColorFromData", () => {
   it("should return valid rgba color name", () => {
     const result = getColorFromData({
       data: entry,
-      key: "component_background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "rgba(255, 255, 255, 0)",
     });
 
     expect(result).toBe("rgba(255, 255, 255, 0)");
@@ -417,33 +412,27 @@ describe("getColorFromData", () => {
   it("should return path value if path value is set and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.colorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "background_color",
     });
 
     expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if key value and path value are invalid", () => {
+  it("should return path value if path value is set, nested and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKey,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "extensions.background_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if path does not exist", () => {
+  it("should return valueFromLayout if path does not exist", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "invalid_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("invalid_color");
   });
 });