@applicaster/zapp-react-native-utils 12.0.0-alpha.4043183114 → 12.0.0-alpha.4081044014

package/appUtils/RiverFocusManager/index.js

@@ -26,7 +26,7 @@ export const riverFocusManager = (function () {
   /**
    * Retrieve screen focus data by id
    *
-   * @param {{screenFocusableGroupId: string}} screenFocusableGroupId Unique Id of the screen from layout.json
+   * @param {String}  screenFocusableGroupId Id that was used to save screen data.
    *
    */
   function screenFocusableData({ screenFocusableGroupId }) {
@@ -36,9 +36,8 @@ export const riverFocusManager = (function () {
   /**
    * Clear screen data for specific screen
    *
-   * @param {{ screenId: string, isInsideContainer: boolean }}
-   * screenId Unique Id of the screen from layout.json
-   * isInsideContainer If this screen a screen picker child
+   * @param {String}  screenId Unique Id of the screen from layout.json
+   * @param {boolean} isInsideContainer If this screen a screen picker child
    *
    */
   function clearScreenData({ screenId, isInsideContainer }) {
@@ -61,13 +60,9 @@ export const riverFocusManager = (function () {
   /**
    * Focus on selected items
    *
-   * @param {{
-   * screenFocusableGroupId: string,
-   * screenFocusedOnItem: () => void,
-   * previousAction: QuickBrickNavigationActionType,
-   * isDeepLink: boolean }} object contains data for focus
-   * - `screenFocusedOnItem` focusable item to focus
-   * - `previousActionhistory` navigator history object
+   * @param {String}  screenFocusableGroupId Top group id that was saved as screenn
+   * @param {String} screenFocusedOnItem focusable item to focus
+   * @param {object} history navigator history object
    *
    */
   function focusOnSelectedItem({
@@ -120,15 +115,15 @@ export const riverFocusManager = (function () {
 
   /**
    * Create unique key that will be used for save focused group data inside specific screen
-   * @param {{ screenId: string, isInsideContainer: boolean }}
-   * screenId Unique Id of the screen from layout.json
-   * isInsideContainer If this screen a screen picker child
+   *
+   * @param {String}  screenId Unique Id of the screen from layout.json
+   * @param {boolean} isInsideContainer If this screen a screen picker child
    *
    */
   function screenFocusableGroupId({ screenId, isInsideContainer }) {
-    return `RiverFocusableGroup-${screenId}${
-      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
-    }`;
+    return R.isNil(isInsideContainer)
+      ? `RiverFocusableGroup-${screenId}`
+      : `RiverFocusableGroup-${screenId}-isInsideContainer`;
   }
 
   return {

package/appUtils/accessibilityManager/hooks.ts

@@ -1,18 +1,27 @@
 import { useEffect, useMemo } from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { AccessibilityManager } from "./index";
 
-export const useAccessibilityManager = () => {
-  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
-  const { localizations } = remoteConfigurations;
-
+/**
+ * This hook is used to instantiate the accessibility manager and update localizations used by the class.
+ * If the plugin config is not provided or it does not contain any localizations, the accessibility manager will not be updated.
+ * We use the plugin configuration because it offers a flattened structure where we can easily access the accessibility labels and hints
+ * i.e. pluginConfiguration = {
+ *   accessibility_close_label: "Close",
+ *   accessibility_close_hint: "Press here to close",
+ * }
+ */
+export const useAccessibilityManager = (
+  pluginConfiguration: Record<string, any> = {}
+) => {
   const accessibilityManager = useMemo(() => {
     return AccessibilityManager.getInstance();
   }, []);
 
   useEffect(() => {
-    accessibilityManager.updateLocalizations(localizations);
-  }, [localizations]);
+    if (pluginConfiguration) {
+      accessibilityManager.updateLocalizations(pluginConfiguration);
+    }
+  }, [pluginConfiguration, accessibilityManager]);
 
   useEffect(() => {
     const subscription = accessibilityManager.getStateAsObservable().subscribe({

package/appUtils/accessibilityManager/index.ts

@@ -1,21 +1,8 @@
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform/platformUtils";
-import { getLocalizations } from "../../localizationUtils";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
-
-export interface AccessibilityState {
-  screenReaderEnabled: boolean;
-  reduceMotionEnabled: boolean;
-  boldTextEnabled: boolean;
-}
-
-export interface AccessibilityProps {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  "aria-label"?: string;
-  "aria-description"?: string;
-}
+import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
@@ -32,13 +19,9 @@ export class AccessibilityManager {
   } | null>(null);
 
   private ttsManager = TTSManager.getInstance();
-  private localizations: { [key: string]: string };
+  private localizations: { [key: string]: string } = {};
 
-  private constructor(localizations?: { [key: string]: string }) {
-    if (localizations) {
-      this.localizations = getLocalizations({ localizations });
-    }
-  }
+  private constructor() {}
 
   public static getInstance(): AccessibilityManager {
     if (!AccessibilityManager._instance) {
@@ -48,8 +31,17 @@ export class AccessibilityManager {
     return AccessibilityManager._instance;
   }
 
+  /**
+   * The method now accepts any object with localizations using a flattened structure
+   *
+   * i.e. { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" }
+   *
+   * No longer accepts:
+   *
+   * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
+   */
   public updateLocalizations(localizations: { [key: string]: string }) {
-    this.localizations = getLocalizations({ localizations });
+    this.localizations = localizations;
   }
 
   public getState(): AccessibilityState {
@@ -71,7 +63,7 @@ export class AccessibilityManager {
     text: string;
     keyOfLocalizedText?: string;
   }) {
-    logger.debug("Reading text", { text, keyOfLocalizedText });
+    let textToRead = text;
 
     if (keyOfLocalizedText) {
       if (!this.localizations) {
@@ -90,16 +82,14 @@ export class AccessibilityManager {
         return;
       }
 
-      text = localizedMessage;
+      textToRead = localizedMessage;
     }
 
-    if (this.ttsManager) {
-      this.ttsManager.readText(text);
-    }
+    this.ttsManager && this.ttsManager.readText(textToRead);
 
     this.announcements$.next({
-      message: text,
-      localizedMessage: keyOfLocalizedText ? text : undefined,
+      message: textToRead,
+      localizedMessage: keyOfLocalizedText ? textToRead : undefined,
       timestamp: Date.now(),
     });
   }
@@ -113,6 +103,8 @@ export class AccessibilityManager {
         accessibilityHint: `Press button to perform action on ${buttonName}`,
         "aria-label": buttonName,
         "aria-description": `Press button to perform action on ${buttonName}`,
+        accessibilityRole: "button" as AccessibilityRole,
+        "aria-role": "button",
       };
     }
 
@@ -130,6 +122,19 @@ export class AccessibilityManager {
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
+      accessibilityRole: "button" as AccessibilityRole,
+      "aria-role": "button",
+    };
+  }
+
+  public getInputAccessibilityProps(inputName: string): AccessibilityProps {
+    return {
+      accessibilityLabel: inputName,
+      accessibilityHint: `Enter text into ${inputName}`,
+      "aria-label": inputName,
+      "aria-description": `Enter text into ${inputName}`,
+      accessibilityRole: "textbox" as AccessibilityRole,
+      "aria-role": "textbox",
     };
   }
 

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -59,7 +59,7 @@ export class Tree {
   /**
    * Update node with provided data from newNode
    * @private
-   * @param {Object} currentNode to update
+   * @param {Object} node to update
    * @param {Object} newNode node to take data from
    */
   updateNode(currentNode, newNode) {
@@ -175,6 +175,7 @@ export class Tree {
    * @private
    * @param {Object} node to check
    * @returns True if node has defined groupID
+   * @returns False if node has NOT defined groupID
    */
   hasGroupID(node) {
     return node.component && node.component.props.groupId;
@@ -190,7 +191,7 @@ export class Tree {
       const findChildNode = this.findInTree(node.component.props.groupId);
 
       if (findChildNode) {
-        this.root.children.pop();
+        this.root.children.pop(findChildNode);
         node.children.push(findChildNode);
       }
     }

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -191,6 +191,7 @@ const toDistance = ({ target, direction, comparisonRect }) => {
  * Get target in shortest distance in specified direction
  * @private
  * @param {Object} direction of the navigation, which led to this focus change
+ * @param {Object} excludedNode node which should be excluded from target group
  * @param {Array} targetNodes array of input target nodes
  * @param {Object} comparisonRect rectangle to compare sides in direction.
  * @returns {Object} target in direction.
@@ -299,7 +300,8 @@ export function findFocusableNode(direction, currentFocusNode) {
  * @public
  * @param {Object} direction of the navigation, which led to this focus change
  * @param {Object} component - object to check props.prioritiseFocusOn
- * @returns {Boolean} TRUE if object has priority in direction. FALSE if object has NO priority in direction.
+ * @returns {Boolean} TRUE if object has priority in direction.
+ * @returns {Boolean} FALSE if object has NO priority in direction.
  */
 export function hasPriorityInDirection(direction, component) {
   const { prioritiseFocusOn = 0 } = component.props;

package/appUtils/{index.ts → index.js}

@@ -9,7 +9,7 @@ export { KEYS, ARROW_KEYS } from "./keyCodes/keys";
 
 export { playerManager } from "./playerManager";
 
-export { AccessibilityManager } from "./accessibilityManager";
+export { accessibilityManager } from "./accessibilityManager";
 
 export function deprecationMessage(fn, replacement) {
   if (__DEV__ && process.env.NODE_ENV !== "test") {

package/appUtils/keyCodes/{index.ts → index.js}

@@ -6,8 +6,6 @@ import * as R from "ramda";
 import { directionHelper } from "../directionHelper";
 import { KEYS, ARROW_KEYS } from "./keys";
 
-export { KEYS, ARROW_KEYS, keyEventMapper } from "./keys";
-
 /**
  * @typedef KeyCode
  * @property {Object} value of the Key

package/appUtils/keyCodes/{keys/keyEventMapper.ts → keys.android.js}

@@ -1,3 +1,22 @@
+export const KEYS = {
+  Enter: { code: "Enter", keyCode: 13 },
+  EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
+  Back: { code: "Back", keyCode: 8 },
+  Space: { code: "Space", keyCode: 32 },
+  m: { code: "m", keyCode: 77 },
+  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
+  ArrowUp: { code: "ArrowUp", keyCode: 38 },
+  ArrowRight: { code: "ArrowRight", keyCode: 39 },
+  ArrowDown: { code: "ArrowDown", keyCode: 40 },
+};
+
+export const ARROW_KEYS = [
+  KEYS.ArrowUp,
+  KEYS.ArrowLeft,
+  KEYS.ArrowDown,
+  KEYS.ArrowRight,
+];
+
 export function keyEventMapper(keyCode) {
   switch (keyCode) {
     case 19: // ArrowUp

package/appUtils/keyCodes/keys.ios.js

@@ -0,0 +1,46 @@
+/* global tizen */
+const isTizen = typeof tizen !== "undefined";
+
+export const KEYS = {
+  Enter: { code: "Enter", keyCode: 13 },
+  Space: { code: "Space", keyCode: 32 },
+  m: { code: "m", keyCode: 77 },
+  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
+  ArrowUp: { code: "ArrowUp", keyCode: 38 },
+  ArrowRight: { code: "ArrowRight", keyCode: 39 },
+  ArrowDown: { code: "ArrowDown", keyCode: 40 },
+  Back: isTizen
+    ? { code: "Back", keyCode: 10009 }
+    : { code: "Backspace", keyCode: 8 },
+  Play: isTizen
+    ? { code: "MediaPlay", keyCode: 10252 }
+    : { code: "PlayPause", keyCode: 179 },
+  Pause: isTizen
+    ? { code: "MediaPause", keyCode: 19 }
+    : { code: "Pause", keyCode: 179 },
+  Forward: isTizen
+    ? { code: "MediaFastForward", keyCode: 417 }
+    : { code: "Forward", keyCode: 176 },
+  Rewind: isTizen
+    ? { code: "MediaRewind", keyCode: 412 }
+    : { code: "Rewind", keyCode: 177 },
+  VolumeUp: isTizen
+    ? { code: "VolumeUp", keyCode: 447 }
+    : { code: "VolumeUp", keyCode: 175 },
+  VolumeDown: isTizen
+    ? { code: "VolumeDown", keyCode: 448 }
+    : { code: "VolumeDown", keyCode: 174 },
+  ToggleMute: isTizen
+    ? { code: "VolumeMute", keyCode: 449 }
+    : { code: "VolumeMute", keyCode: 173 },
+  Stop: isTizen
+    ? { code: "MediaStop", keyCode: 413 }
+    : { code: "Q", keyCode: 81 },
+};
+
+export const ARROW_KEYS = [
+  KEYS.ArrowUp,
+  KEYS.ArrowLeft,
+  KEYS.ArrowDown,
+  KEYS.ArrowRight,
+];

package/appUtils/platform/platformUtils.ts

@@ -1,18 +1,35 @@
 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;
+export const getUserAgent = () => window?.navigator?.userAgent;
 
 /** VIZIO UTILS */
 
@@ -25,6 +42,8 @@ export const getUserAgent = () =>
 export const isVizioPlatform = () => {
   const userAgent = getUserAgent();
 
+  if (!userAgent) return false;
+
   const isVizioAgent =
     userAgent.includes(PLATFORMS.vizio) ||
     userAgent.includes(PLATFORMS.smartcast) ||
@@ -164,6 +183,34 @@ export class TTSManager {
   }
 
   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/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/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

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

@@ -58,7 +58,7 @@ export const usePlayerControllerSetup = ({
     }
 
     if (!playerManager) {
-      return null;
+      return;
     }
 
     if (playerManager.isPlayerRegistered(playerId)) {

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

@@ -1,5 +1,6 @@
 /* eslint-disable unused-imports/no-unused-vars */
 import * as R from "ramda";
+import { invariant } from "@applicaster/zapp-react-native-utils/errorUtils";
 
 /**
  * shifts an array by the given offset. a negative offset will take items
@@ -100,3 +101,13 @@ export const makeListOf = (value: unknown, size: number): number[] => {
 export function isFilledArray(value: unknown): boolean {
   return R.is(Array, value) && R.length(value) > 0;
 }
+
+// get random item from the list
+export const sample = (xs: unknown[]): unknown => {
+  invariant(R.is(Array, xs), `input value is not a array: ${xs}`);
+  invariant(isFilledArray(xs), `input array is empty: ${xs}`);
+
+  const index = Math.floor(Math.random() * xs.length);
+
+  return xs[index];
+};