@applicaster/zapp-react-native-utils 12.0.0-alpha.4054240460 → 12.0.0-alpha.4155487673

package/appUtils/platform/platformUtils.ts

@@ -1,8 +1,6 @@
 import { BehaviorSubject } from "rxjs";
 
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import { PlayerWebController } from "@applicaster/zapp-react-native-default-player/src/playerFactory/players/playerWebController";
 
 import { PLATFORM_KEYS, PLATFORMS } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
@@ -21,7 +19,7 @@ declare global {
   }
 }
 
-const { log_debug, log_error } = createLogger({
+const { log_debug } = createLogger({
   category: "General",
   subsystem: "PlatformUtils",
   parent: utilsLogger,
@@ -131,100 +129,6 @@ export const getClosedCaptionState = () => {
   return ccManager.getStateAsObservable();
 };
 
-export class TextTrackManager {
-  private controller?: PlayerWebController;
-  private static instance: TextTrackManager;
-
-  private constructor() {}
-
-  static getInstance(): TextTrackManager {
-    if (!TextTrackManager.instance) {
-      TextTrackManager.instance = new TextTrackManager();
-    }
-
-    return TextTrackManager.instance;
-  }
-
-  initialize(controller: PlayerWebController) {
-    if (!controller) {
-      throw new Error(
-        "Controller is required for TextTrackManager initialization"
-      );
-    }
-
-    this.controller = controller;
-  }
-
-  async setTextTrackBasedOnCaptions(closedCaptionsState: boolean) {
-    if (!this.controller) {
-      log_error("Controller is not initialized");
-
-      return;
-    }
-
-    if (closedCaptionsState) {
-      const textTracks = this.controller.getTracksState().textTracks;
-      const preferredTextTrack = await this.getPreferredTextTrack(textTracks);
-
-      if (preferredTextTrack) {
-        this.controller.selectTrack(preferredTextTrack);
-      }
-    } else {
-      this.controller.selectTrack(null);
-    }
-  }
-
-  async getPreferredTextTrack(
-    textTracks: QuickBrickPlayer.TextTrack[]
-  ): Promise<QuickBrickPlayer.TextTrack | undefined> {
-    if (!this.controller) return;
-
-    const userPreferredTextLanguageLocalStorage = await localStorage.getItem(
-      "preferred_text_language",
-      "user_preferences"
-    );
-
-    let userPreferredTextLanguage;
-
-    if (userPreferredTextLanguageLocalStorage) {
-      userPreferredTextLanguage = textTracks.find(
-        (track) => track.language === userPreferredTextLanguageLocalStorage
-      );
-    }
-
-    if (userPreferredTextLanguage?.id) {
-      return userPreferredTextLanguage;
-    }
-
-    const enableAutoTextTrackSelection =
-      this.controller.getPluginConfiguration()
-        ?.enable_auto_text_track_selection ||
-      this.controller.getTracksState().textTracks.length > 0;
-
-    if (enableAutoTextTrackSelection) {
-      const languageCode = await sessionStorage.getItem("languageCode");
-
-      if (languageCode) {
-        const chosenTextTrackBySystemLanguage = textTracks.find(
-          (track) => track.language === languageCode
-        );
-
-        if (chosenTextTrackBySystemLanguage?.id) {
-          return chosenTextTrackBySystemLanguage;
-        }
-      }
-    }
-
-    return textTracks?.[0];
-  }
-
-  isTextTrackEnabled(): boolean {
-    if (!this.controller) return false;
-
-    return this.controller.getTracksState().textTrackId !== null;
-  }
-}
-
 /**
  * Manages device based closed captioning state
  * Returns an observable that emits the current state and updates whenever it changes
@@ -246,9 +150,11 @@ export class TTSManager {
   }
 
   async initialize() {
+    if (!isVizioPlatform()) return;
+
     document.addEventListener(
       "VIZIO_TTS_ENABLED",
-      function () {
+      () => {
         this.ttsState$.next(true);
       },
       false
@@ -256,7 +162,7 @@ export class TTSManager {
 
     document.addEventListener(
       "VIZIO_TTS_DISABLED",
-      function () {
+      () => {
         this.ttsState$.next(false);
       },
       false

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

@@ -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,
@@ -37,7 +36,10 @@ export interface PlayerLifecycleListener {
 }
 
 type PlayersMap = {
-  [id: string]: { player: Player; isInViewport: boolean };
+  [id: string]: {
+    player: Player;
+    isInViewport: boolean;
+  };
 };
 
 export class PlayerManager {
@@ -46,7 +48,6 @@ export class PlayerManager {
   private playersMap: PlayersMap = {};
   private manager = subscriber();
   private castingReceiver: Player;
-  private analyticsTracker: AnalyticsTracker;
   private lifecycleListeners: PlayerLifecycleListener[] = [];
 
   public static getInstance() {
@@ -57,7 +58,7 @@ export class PlayerManager {
     return PlayerManager.instance;
   }
 
-  public getActivePlayerId = (): String | null => {
+  public getActivePlayerId = (): string | null => {
     return this.activePlayerId;
   };
 
@@ -102,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];
@@ -251,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

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,
@@ -650,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,
@@ -725,4 +733,5 @@ export class Player {
 
   public supportsNativeControls = (): boolean => false;
   public supportNativeCast = (): boolean => false;
+  public destroy = () => {};
 }

package/appUtils/playerManager/playerNative.ts

@@ -61,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 => {

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -72,6 +72,7 @@ export const usePlayerControllerSetup = ({
 
     return () => {
       playerManager.unregisterPlayer(playerId);
+      playerController.destroy?.();
     };
   }, [playerId, playerController]);
 

package/cellUtils/index.ts

@@ -31,13 +31,12 @@ export const getKeyForLabel = (dataKey, customKey) => {
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition
  * i.e. - NaN, null, {}, "", [], should all return true
- * @param {*} argument - argument passed to it could be any type
  * @returns {Boolean} returns true if empty or nil
+ * @param value
  */
-export const isEmptyOrNil = R.either(
-  R.equals(NaN),
-  R.either(R.isEmpty, R.isNil)
-);
+
+export const isEmptyOrNil = (value: any): boolean =>
+  Number.isNaN(value) || value == null || R.isEmpty(value);
 
 /**
  * This method is used to find the appropriate label for any given text field.
@@ -320,6 +319,7 @@ export const ifElseFocusedSelected = (
  * @param {Object} stylesObj styles object with keys from zapp { button_icon_width: "10" }
  * @returns {*} value, returns any type that can be used as styles
  */
+
 export const getValue = (stylesObj) => (key) => {
   return R.propOr(null, key, stylesObj);
 };
@@ -468,3 +468,36 @@ export const getColorFromData = ({
 
   return valueFromLayout;
 };
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
+};

package/index.d.ts

@@ -143,3 +143,18 @@ declare type BuilderData = {
   river?: ZappRiver;
   method?: string;
 };
+
+declare type AccessibilityState = {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+};
+
+declare type AccessibilityProps = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+  accessibilityRole?: string;
+  "aria-role"?: string;
+};

package/navigationUtils/index.ts

@@ -592,3 +592,51 @@ export function isMenuDisabled(
 export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
+
+export const getNavBarProps =
+  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  };
+
+export const findMenuPlugin = (
+  navigations: ZappNavigation[],
+  plugins
+): QuickBrickPlugin => {
+  return resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+};
+
+export const shouldNavBarDisplayMenu = (currentRiver: ZappRiver, plugins) =>
+  findMenuPlugin(currentRiver.navigations, plugins)?.identifier ===
+    "quick_brick_side_menu" ||
+  currentRiver?.navigations.findIndex(
+    (nav) => nav.category === "nav_bar" && nav.general?.override_menu_target
+  ) > -1;
+
+export const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};

package/numberUtils/__tests__/toNumber.test.ts

@@ -2,7 +2,7 @@ import { toNumber } from "..";
 
 describe("toNumber", () => {
   it("return number if input is number", () => {
-    const inputs = [-1, 0, 1, 100];
+    const inputs = [-1, 0, 1, 100, 0.2];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -12,7 +12,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is string as number", () => {
-    const inputs = ["-1", "0", "1", "100"];
+    const inputs = ["-1", "0", "1", "100", "0.2"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4054240460",
+  "version": "12.0.0-alpha.4155487673",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4054240460",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4155487673",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/imaScriptDom.ts

@@ -0,0 +1,59 @@
+import { createLogger } from "../logger";
+
+export const logger = createLogger({
+  category: "ImaDomUtils",
+  subsystem: "Player/ImaDomUtils",
+});
+
+const { log_debug, log_error, log_verbose } = logger;
+
+const removeElement = (node) => {
+  if (node) {
+    const parentNode = node.parentNode;
+
+    if (parentNode) {
+      parentNode.removeChild(node);
+    }
+  }
+};
+
+// TODO: This should probably be loaded to root of project before player init
+export const loadIMAScript = async () => {
+  return new Promise((resolve) => {
+    // If ima script is already loaded, resolve
+    const imaScript = document.getElementById("ima-script");
+
+    if (imaScript) {
+      log_verbose("loadIMAScript: IMA script already loaded");
+
+      return resolve(true);
+    }
+
+    const script = document.createElement("script");
+
+    if (__DEV__) {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3_debug.js";
+    } else {
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+    }
+
+    script.async = true;
+    script.id = "ima-script";
+
+    script.onload = () => {
+      removeElement(script);
+      log_debug("loadIMAScript: Loaded ima script", script.src);
+      resolve(true);
+    };
+
+    script.onerror = (_e) => {
+      removeElement(script);
+      log_error("loadIMAScript: Failed to load ima script", script.src);
+      resolve(false);
+    };
+
+    if (document.head) {
+      document.head.appendChild(script);
+    }
+  });
+};

package/pluginUtils/index.ts

@@ -245,3 +245,12 @@ export function generateManifest({ manifestConfig, version }) {
 
   return manifestConfig({ platform, version });
 }
+
+const getPluginType = R.pathOr("unknown_plugin_type", [
+  "state",
+  "screen",
+  "plugin_type",
+]);
+
+export const isPlayerPlugin = (routeState): boolean =>
+  getPluginType(routeState) === "player";

package/reactHooks/debugging/__tests__/index.test.js

@@ -4,38 +4,77 @@ import {
   timers,
 } from "@applicaster/zapp-react-native-utils/reactHooks/debugging";
 
-jest.useFakeTimers();
-
 describe("Debug utils", () => {
+  let performanceNowMock;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // Clear the timers object
+    Object.keys(timers).forEach((key) => delete timers[key]);
+
+    // Mock performance.now()
+    // eslint-disable-next-line no-undef
+    performanceNowMock = jest.spyOn(performance, "now");
+    performanceNowMock.mockReturnValue(0); // Initial value
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    performanceNowMock.mockRestore();
+  });
+
   describe("Unit Test: time", () => {
     it("should create new timer if timer with a label does not exist", () => {
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
       expect(timers["timer1"]).toBeDefined();
+      expect(timers["timer1"].startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
+      // First call to time()
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
       const previousStartTime = timers["timer1"].startTime;
-      jest.advanceTimersByTime(1000);
+
+      // Second call to time()
+      performanceNowMock.mockReturnValue(2000);
       time("timer1");
       const currentStartTime = timers["timer1"].startTime;
-      expect(previousStartTime).not.toEqual(currentStartTime);
+
+      expect(previousStartTime).toBe(1000);
+      expect(currentStartTime).toBe(2000);
     });
   });
 
   describe("Unit Test: timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
 
-      expect(logSpy).toHaveBeenCalled();
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.any(Object)
+      );
     });
 
     it("should not log elapsed time if accumulative: true in settings", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1", { accumulative: true });
 
       expect(logSpy).not.toHaveBeenCalled();
@@ -43,21 +82,52 @@ describe("Debug utils", () => {
   });
 
   describe("Integration Test: time and timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time on timeEnd call", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
-      expect(logSpy).toHaveBeenCalled();
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.objectContaining({
+          label: "timer1",
+          settings: undefined,
+        })
+      );
     });
 
-    it("should log total and average time on timeEnd call without accumulative option", () => {
+    it("should log total and average time when accumulative timing is complete", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      // First timing
+      performanceNowMock.mockReturnValue(1000);
       time("timer2");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer2", { accumulative: true });
-      timeEnd("timer2");
-      expect(logSpy).toHaveBeenCalled();
+
+      // Second timing
+      performanceNowMock.mockReturnValue(3000);
+      time("timer2");
+
+      performanceNowMock.mockReturnValue(5000);
+      timeEnd("timer2"); // This will log because timer is accumulative (callCount > 1)
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer2: 2000.000ms 2",
+        expect.objectContaining({
+          label: "timer2",
+          settings: undefined,
+        })
+      );
     });
   });
 });

package/reactHooks/navigation/index.ts

@@ -78,6 +78,10 @@ export function isNavBarVisible(
     return false;
   }
 
+  if (screenData?.plugin_type === "login" && isTV()) {
+    return false;
+  }
+
   /* Match if screen is Hook */
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;

package/reactHooks/resolvers/useCellResolver.ts

@@ -48,7 +48,11 @@ export function useCellResolver({
   ...cellResolverOptions
 }: Props) {
   let _component = Object.assign({}, component);
-  const { width, height } = useDimensions("screen");
+
+  const { width, height } = useDimensions("screen", {
+    updateForInactiveScreens: false,
+  });
+
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
   const isRTL = useIsRTL();