@applicaster/zapp-react-native-utils 13.0.0-alpha.5428512514 → 13.0.0-alpha.5771418585

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

package/actionsExecutor/ActionExecutor.ts

@@ -17,9 +17,10 @@ class ActionExecutor {
 
   handleAction = async (
     action: ActionType,
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     const handler = this.registeredActions[action.type];
+    const entry = context?.entry as ZappEntry;
 
     if (!handler) {
       log_error(
@@ -38,11 +39,11 @@ class ActionExecutor {
     );
 
     try {
-      return handler(action, entry);
+      return handler(action, context);
     } catch (error) {
       log_error(
         `handleAction: error handling action type: ${action.type}, message: ${error.message}`,
-        { action, entry, error }
+        { action, context, error }
       );
 
       throw error;
@@ -51,11 +52,11 @@ class ActionExecutor {
 
   handleActions = async (
     actionTypes: ActionType[],
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     for (const action of actionTypes) {
       // TODO: Handle action result error
-      const result = await this.handleAction(action, entry);
+      const result = await this.handleAction(action, context);
 
       if (result === ActionResult.Cancel) {
         log_info(`handleActions: action: ${action.type} canceled`);
@@ -67,7 +68,10 @@ class ActionExecutor {
     return ActionResult.Success;
   };
 
-  handleEntryActions = async (entry: ZappEntry): Promise<ActionResult> => {
+  handleEntryActions = async (
+    entry: ZappEntry,
+    context?: Record<string, any>
+  ): Promise<ActionResult> => {
     const tapActions = entry.extensions?.tap_actions?.actions;
 
     if (!tapActions) {
@@ -77,7 +81,7 @@ class ActionExecutor {
     if (!Array.isArray(tapActions)) {
       log_error(
         `handleEntryActions: tapActions is not an array for id: ${entry.id} title: ${entry.title}`,
-        { entry }
+        { context, entry }
       );
 
       return;
@@ -87,7 +91,7 @@ class ActionExecutor {
       return;
     }
 
-    await this.handleActions(tapActions, entry);
+    await this.handleActions(tapActions, { ...context, entry });
   };
 
   unregisterAction = (actionType: string) => {
@@ -96,7 +100,10 @@ class ActionExecutor {
 
   registerAction = (
     type: string,
-    handler: (action: ActionType, entry?: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => {
     if (this.registeredActions[type]) {
       log_error(`registerAction: action type: ${type} already registered`);

package/actionsExecutor/ActionExecutorContext.tsx

@@ -13,6 +13,8 @@ import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import {
   EntryResolver,
   resolveObjectValues,
@@ -26,15 +28,24 @@ const { log_error, log_info } = createLogger({
 type ActionExecutorContextType = {
   registerAction: (
     type: string,
-    handler: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => void;
   unregisterAction: (type: string) => void;
-  handleAction: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>;
+  handleAction: (
+    action: ActionType,
+    context?: Record<string, any>
+  ) => Promise<ActionResult>;
   handleActions: (
     actions: ActionType[],
-    entry: ZappEntry
+    context: Record<string, any>
+  ) => Promise<ActionResult>;
+  handleEntryActions: (
+    entry: ZappEntry,
+    context?: Record<string, any>
   ) => Promise<ActionResult>;
-  handleEntryActions: (entry: ZappEntry) => Promise<ActionResult>;
 };
 type Props = {
   children: React.ReactNode;
@@ -49,6 +60,31 @@ const prepareDefaultActions = (actionExecutor) => {
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction(
+    "refreshComponent",
+    async (_action, context) => {
+      const dispatch = appStore.getDispatch();
+
+      log_info("handleAction: refreshComponent event");
+
+      const dataSource = context?.component?.data?.source;
+
+      // TODO: Later we can pass component ids to do refresh instead of current one
+      // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
+      // TODO: handle focused item removal
+      dispatch(
+        loadPipesData(dataSource, {
+          silentRefresh: false,
+          clearCache: true,
+          callback: (_data) => {},
+          riverId: context?.screenData?.id,
+        })
+      );
+
+      return ActionResult.Success;
+    }
+  );
+
   actionExecutor.registerAction("switchLayout", async (action) => {
     log_info("handleAction: switchLayout event");
 
@@ -84,10 +120,11 @@ const prepareDefaultActions = (actionExecutor) => {
     return confirmationPromise;
   });
 
-  actionExecutor.registerAction("sendCloudEvent", async (action, entry) => {
+  actionExecutor.registerAction("sendCloudEvent", async (action, context) => {
     try {
       const options = action.options;
 
+      const entry = context?.entry || {};
       const entryResolver = new EntryResolver(entry);
 
       const data =
@@ -128,9 +165,12 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction(
     "localStorageToggleFlag",
-    async (action: ActionType, entry?: ZappEntry): Promise<ActionResult> => {
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
       const keyNamespace = action.options?.key;
-      const tag = entry?.extensions?.tag;
+      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =

package/appUtils/HooksManager/Hook.ts

@@ -16,7 +16,7 @@ const BASE_HOOK_PROPERTIES = ["screen_id", "identifier", "weight"];
  * @returns {number} index
  */
 const hookState: (
-  arg0: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS]
+  arg0: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS]
 ) => number = R.indexOf(R.__, R.values(HOOKS_EVENTS));
 
 /**
@@ -62,7 +62,7 @@ export class Hook implements HookInterface {
    * @param {Array<Any>} args variadic arguments to invoke the handler with
    */
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
     this.state = hookState(event);

package/appUtils/HooksManager/types.ts

@@ -4,6 +4,8 @@ import { HOOKS_EVENTS } from "./constants";
 export interface HookConfiguration {}
 
 /* existing Hook Plugn props: sample */
+
+/*
 interface _HookModulePlugin {
   Component:
     | React.FC<HookPluginProps>
@@ -23,6 +25,7 @@ interface _HookModulePlugin {
     presentUI: (payload?: HookPluginProps["payload"]) => void
   ) => any;
 }
+*/
 
 //* Derived from usage */
 export interface HookModule {
@@ -100,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
   identifier: string;
   configuration: T["configuration"];
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     opts: {
       error?: typeof Error;
       route?: string;
@@ -109,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
     }
   );
   general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
     allow_screen_plugin_presentation: boolean;
     is_flow_blocker: boolean;
   };

package/appUtils/accessibilityManager/index.ts

@@ -6,6 +6,9 @@ import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
+  private headingTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 160;
+  private MINIMUM_PAUSE = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -20,6 +23,7 @@ export class AccessibilityManager {
 
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
+  private headingQueue: string[] = [];
 
   private constructor() {}
 
@@ -52,6 +56,28 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
+  /** Calculates the reading time for a given text
+   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
+   * @param text - The text to calculate the reading time for
+   * @returns The reading time in milliseconds
+   */
+  private calculateReadingTime(text: string): number {
+    const words = text.trim().split(/\s+/).length;
+
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
+    );
+  }
+
+  /**
+   * Adds a heading to the queue, headings will be read before the next text
+   * Each heading will be read once and removed from the queue
+   */
+  public addHeading(heading: string) {
+    this.headingQueue.push(heading);
+  }
+
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
@@ -85,7 +111,22 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    this.ttsManager && this.ttsManager.readText(textToRead);
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
+
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
+
+      const pauseTime = this.calculateReadingTime(heading);
+
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
+    } else {
+      this.ttsManager?.readText(textToRead);
+    }
 
     this.announcements$.next({
       message: textToRead,

package/appUtils/contextKeysManager/contextResolver.ts

@@ -42,12 +42,16 @@ export const resolveObjectValues = async (
 
   const resolvedEntries = await Promise.all(
     entries.map(async ([key, value]) => {
-      const regex = /@{([^/]+)\/([^}]*)}/;
-
       if (typeof value !== "string") {
         return [key, value];
       }
 
+      if (!value.startsWith("@")) {
+        return [key, value];
+      }
+
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
       const match = (value as string).match(regex);
 
       if (match) {

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],

package/appUtils/focusManager/index.ts

@@ -13,6 +13,7 @@ import {
 import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -325,8 +326,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -346,6 +345,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -477,7 +484,7 @@ export const focusManager = (function () {
   function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (routes.length <= 1) {
+    if (currentFocusNode && routes.length <= 1) {
       // there is only one or zero routes
       return true;
     }
@@ -553,6 +560,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,8 +1,8 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith, pathOr } from "ramda";
+import { find, last, pathOr, startsWith } from "ramda";
 import {
-  QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
@@ -66,7 +66,8 @@ export const getContentNode = (focusableTree) => {
   const content = find(
     (child) =>
       startsWith(QUICK_BRICK_CONTENT, child.id) ||
-      startsWith("player", child.id),
+      startsWith("player", child.id) ||
+      startsWith("/hooks", child?.parent?.id), // For startup hooks case
     getActiveScreenChildren(focusableTree)
   );
 

package/appUtils/platform/const.ts

@@ -23,3 +23,17 @@ export const PLATFORMS = {
 export const PLATFORM_KEYS = {
   deviceClosedCaptioningEnabled: "device_closed_captioning_enabled",
 };
+
+export enum ZappPlatform {
+  Android = "android",
+  AndroidTV = "android_tv",
+  AmazonFireTV = "amazon",
+  iOS = "ios",
+  tvOS = "tvos",
+  Roku = "roku",
+  Tizen = "tizen",
+  Web = "web",
+  WebOS = "webos",
+  Vizio = "vizio",
+  Unknown = "unknown",
+}

package/appUtils/platform/platformUtils.ts

@@ -6,8 +6,10 @@ import {
   isSamsungPlatform,
 } from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
 
-import { PLATFORM_KEYS, PLATFORMS } from "./const";
+import { PLATFORM_KEYS, PLATFORMS, ZappPlatform } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
+import { getPlatform } from "../../reactUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 const { log_debug } = createLogger({
   category: "General",
@@ -15,6 +17,20 @@ const { log_debug } = createLogger({
   parent: utilsLogger,
 });
 
+export const getZappPlatform = (): ZappPlatform => {
+  const platform = appStore.get("appData")?.platform;
+
+  switch (platform) {
+    case "amazon_fire_tv":
+      return ZappPlatform.AmazonFireTV;
+    case ZappPlatform.Vizio:
+      return ZappPlatform.Vizio;
+    default:
+      // TODO: Use only ZappPlatform enum
+      return getPlatform() as ZappPlatform;
+  }
+};
+
 export const getUserAgent = () => window?.navigator?.userAgent;
 
 /** VIZIO UTILS */
@@ -61,13 +77,22 @@ export class ClosedCaptioningManager {
 
   private constructor() {
     this.initialize();
+
+    window["vizioDebug"] = {
+      setCCEnabled: (isCCEnabled: boolean) => {
+        this.ccState$.next(isCCEnabled);
+      },
+    };
   }
 
   static getInstance(): ClosedCaptioningManager {
     if (!ClosedCaptioningManager.ccManagerInstance) {
+      log_debug("ClosedCaptioningManager: Creating new instance");
       ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
     }
 
+    log_debug("ClosedCaptioningManager: Returning existing instance");
+
     return ClosedCaptioningManager.ccManagerInstance;
   }
 
@@ -76,23 +101,41 @@ export class ClosedCaptioningManager {
       PLATFORM_KEYS.deviceClosedCaptioningEnabled
     );
 
-    log_debug("Initializing closed captioning manager", { existingState });
-
     if (existingState !== null) {
+      log_debug(
+        `ClosedCaptioningManager: Setting initial state to ${existingState}`
+      );
+
       this.ccState$.next(existingState === "true" || existingState === true);
+    } else {
+      log_debug("ClosedCaptioningManager: No existing state found");
     }
 
     if (hasVizioAPIs()) {
+      log_debug("ClosedCaptioningManager: Setting closed captioning handler");
+
       window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
-        log_debug("CC state changed", { isCCEnabled });
+        log_debug(
+          "ClosedCaptioningManager: There was a change in the CC state",
+          { isCCEnabled }
+        );
 
         sessionStorage.setItem(
           PLATFORM_KEYS.deviceClosedCaptioningEnabled,
           isCCEnabled
         );
 
+        log_debug(
+          "ClosedCaptioningManager: Saved CC state to session storage",
+          { isCCEnabled }
+        );
+
         this.ccState$.next(isCCEnabled);
       });
+    } else {
+      log_debug(
+        "ClosedCaptioningManager: Vizio APIs are not available, skipping setup"
+      );
     }
   }
 

package/appUtils/playerManager/player.ts

@@ -98,6 +98,7 @@ export class Player {
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
 
+    this.isPaused = this.isPaused.bind(this);
     this.entryObservable = null;
   }
 
@@ -154,8 +155,8 @@ export class Player {
     this.isSeeking()
       ? this.playerState.seekPosition
       : this.playerState.adState
-      ? this.playerState.adState.adPosition
-      : this.playerState.contentPosition;
+        ? this.playerState.adState.adPosition
+        : this.playerState.contentPosition;
 
   getEntry = (): ZappEntry | null => this.entry;
 
@@ -253,9 +254,9 @@ export class Player {
     return this.playerState.seekPosition !== null;
   };
 
-  isPaused = () => {
+  isPaused() {
     return !!this.playerState.isPaused;
-  };
+  }
 
   isPlaying = () => {
     return !!this.playerState.isPaused === false;
@@ -290,11 +291,11 @@ export class Player {
   };
 
   // Methods to call actions on the player
-  seekTo = (_position: number) => {};
+  seekTo = async (_position: number) => {};
 
-  forward = (_deltaTime: number) => {};
+  forward = async (_deltaTime: number) => {};
 
-  rewind = (_deltaTime: number) => {};
+  rewind = async (_deltaTime: number) => {};
 
   /**
    * Determine whether content is live using three checks
@@ -701,8 +702,8 @@ export class Player {
     onPlayerAttached: this.onPlayerAttached,
   });
 
-  play = () => {};
-  pause = () => {};
+  play = async () => {};
+  pause = async () => {};
   disableBufferAnimation = (): boolean => true;
 
   setPlaybackRate = (_rate) => {};

package/appUtils/playerManager/playerNative.ts

@@ -95,7 +95,7 @@ export class PlayerNative extends Player {
   };
 
   // Methods to call actions on the player
-  seekTo = (position: number) => {
+  seekTo = async (position: number) => {
     if (!this.playerState.seekableDuration) {
       log_warning("seekTo: Can not seek, video is not seekable");
 
@@ -123,7 +123,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.seekTo, { position });
   };
 
-  forward = (deltaTime: number) => {
+  forward = async (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -139,7 +139,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.forward, { deltaTime });
   };
 
-  rewind = (deltaTime: number) => {
+  rewind = async (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -155,13 +155,13 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.rewind, { deltaTime });
   };
 
-  play = () => {
+  play = async () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.play)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.play]?.();
     }
   };
 
-  pause = () => {
+  pause = async () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.pause)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.pause]?.();
     }

package/equalUtils/index.ts

@@ -49,9 +49,16 @@ export const isEqual =
     }
 
     if (compareRemainingKeysBySameValue) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
+
+      const undeclaredKeys = Array.from(allKeys).filter(
+        (key) => !declaredKeys.has(key)
       );
 
       const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>