@applicaster/zapp-react-native-utils 12.0.0-alpha.4462655310 → 12.0.0-alpha.4484269996

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";
@@ -11,6 +9,9 @@ declare global {
   interface Window {
     VIZIO?: {
       exitApplication: () => void;
+      Chromevox: {
+        play: (text: string) => void;
+      };
       setClosedCaptionHandler: (
         callback: (isCCEnabled: boolean) => void
       ) => void;
@@ -18,7 +19,7 @@ declare global {
   }
 }
 
-const { log_debug, log_error } = createLogger({
+const { log_debug } = createLogger({
   category: "General",
   subsystem: "PlatformUtils",
   parent: utilsLogger,
@@ -63,7 +64,7 @@ export const hasVizioAPIs = () => {
  * Manages device based closed captioning state
  * Returns an observable that emits the current state and updates whenever it changes
  */
-class ClosedCaptioningManager {
+export class ClosedCaptioningManager {
   private ccState$ = new BehaviorSubject<boolean>(false);
   private static ccManagerInstance: ClosedCaptioningManager;
 
@@ -128,96 +129,57 @@ 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"
-      );
-    }
+/**
+ * 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;
 
-    this.controller = controller;
+  private constructor() {
+    this.initialize();
   }
 
-  async setTextTrackBasedOnCaptions(closedCaptionsState: boolean) {
-    if (!this.controller) {
-      log_error("Controller is not initialized");
-
-      return;
+  static getInstance(): TTSManager {
+    if (!TTSManager.ttsManagerInstance) {
+      TTSManager.ttsManagerInstance = new TTSManager();
     }
 
-    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);
-    }
+    return TTSManager.ttsManagerInstance;
   }
 
-  async getPreferredTextTrack(
-    textTracks: QuickBrickPlayer.TextTrack[]
-  ): Promise<QuickBrickPlayer.TextTrack | undefined> {
-    if (!this.controller) return;
-
-    const userPreferredTextLanguageLocalStorage = await localStorage.getItem(
-      "preferred_text_language",
-      "user_preferences"
+  async initialize() {
+    if (!isVizioPlatform()) return;
+
+    document.addEventListener(
+      "VIZIO_TTS_ENABLED",
+      () => {
+        this.ttsState$.next(true);
+      },
+      false
     );
 
-    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
-        );
+    document.addEventListener(
+      "VIZIO_TTS_DISABLED",
+      () => {
+        this.ttsState$.next(false);
+      },
+      false
+    );
+  }
 
-        if (chosenTextTrackBySystemLanguage?.id) {
-          return chosenTextTrackBySystemLanguage;
-        }
-      }
-    }
+  getCurrentState(): boolean {
+    return this.ttsState$.getValue();
+  }
 
-    return textTracks?.[0];
+  getStateAsObservable() {
+    return this.ttsState$.asObservable();
   }
 
-  isTextTrackEnabled(): boolean {
-    if (!this.controller) return false;
+  readText(text: string) {
+    if (!window.VIZIO?.Chromevox) return;
 
-    return this.controller.getTracksState().textTrackId !== null;
+    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

@@ -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

@@ -50,7 +50,7 @@ export const usePlayerControllerSetup = ({
     });
 
     setPlayerController(newPlayerController);
-  }, [playerId, entry?.id]);
+  }, [playerId, entry?.id, ref.current]);
 
   React.useEffect(() => {
     if (!playerController) {
@@ -72,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/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.4462655310",
+  "version": "12.0.0-alpha.4484269996",
   "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.4462655310",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4484269996",
     "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";