@applicaster/zapp-react-native-utils 14.0.0-alpha.3471443312 → 14.0.0-alpha.3514550494

package/analyticsUtils/__tests__/analyticsUtils.test.js

@@ -8,17 +8,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   ),
 }));
 
-jest.mock(
-  "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider",
-  () => ({
-    StorageMultiSelectProvider: {
-      getProvider: jest.fn(() => ({
-        getSelectedItems: jest.fn(() => []),
-      })),
-    },
-  })
-);
-
 const mock_postAnalyticEvent = jest.fn();
 const mock_startAnalyticsTimedEvent = jest.fn();
 const mock_endAnalyticsTimedEvent = jest.fn();

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/appUtils/HooksManager/Hook.ts

@@ -65,10 +65,6 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
-    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
-      return;
-    }
-
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }
@@ -198,4 +194,8 @@ export class Hook implements HookInterface {
       R.eqProps("weight", nextHook, this)
     );
   }
+
+  isCancelled(): boolean {
+    return this.state === hookState(HOOKS_EVENTS.CANCEL);
+  }
 }

package/appUtils/HooksManager/index.ts

@@ -255,7 +255,7 @@ export function HooksManager({
    * @param {Array<Hook>} restOfHooks to run
    * @returns {function} callback function
    */
-  function hookCallback(hookPlugin, restOfHooks, initialPayload) {
+  function hookCallback(hookPlugin: Hook, restOfHooks: Hook[], initialPayload) {
     /**
      * callback invoked after a hook is executed
      * @param {object} options
@@ -273,6 +273,16 @@ export function HooksManager({
     }) {
       let callback = callbackArg;
 
+      if (hookPlugin.isCancelled()) {
+        logHookEvent(
+          hooksManagerLogger.info,
+          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          {}
+        );
+
+        return;
+      }
+
       if (error) {
         logHookEvent(
           hooksManagerLogger.error,

package/appUtils/accessibilityManager/const.ts

@@ -65,4 +65,17 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
     label: "accessibility_menu_item_label",
     hint: "accessibility_menu_item_hint",
   },
+  skip_intro: {
+    label: "accessibility_skip_intro_label",
+    hint: "accessibility_skip_intro_hint",
+  },
+  // Top Menu Bar-specific buttons
+  top_menu_bar_item_selected: {
+    label: "accessibility_top_menu_bar_item_selected_label",
+    hint: "accessibility_top_menu_bar_item_selected_hint",
+  },
+  top_menu_title: {
+    label: "accessibility_top_menu_title_label",
+    hint: "accessibility_top_menu_hint",
+  },
 } as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AccessibilityManager } from "./index";
 
 /**
@@ -38,3 +38,37 @@ export const useAccessibilityManager = (
 
   return accessibilityManager;
 };
+
+export const useInitialAnnouncementReady = (
+  accessibilityManager: AccessibilityManager
+) => {
+  const [isReady, setIsReady] = useState(
+    accessibilityManager.isInitialPlayerAnnouncementReady
+  );
+
+  useEffect(() => {
+    const subscription = accessibilityManager
+      .getInitialAnnouncementReadyObservable()
+      .subscribe(setIsReady);
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return isReady;
+};
+
+export const useAnnouncementActive = (
+  accessibilityManager: AccessibilityManager
+) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const subscription = accessibilityManager
+      .getTTSStateObservable()
+      .subscribe(setIsActive);
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return isActive;
+};

package/appUtils/accessibilityManager/index.ts

@@ -1,15 +1,19 @@
+import * as R from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
-import { AccessibilityRole } from "react-native";
 import { toString } from "../../utils";
+import { calculateReadingTime } from "./utils";
+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 announcementDelayTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 140;
   private MINIMUM_PAUSE = 500;
+  private ANNOUNCEMENT_DELAY = 700;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -25,6 +29,12 @@ export class AccessibilityManager {
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
   private headingQueue: string[] = [];
+  private currentFocusId: string | null = null;
+  private headingFocusMap: Map<string, string> = new Map();
+  private pendingFocusId: string | null = null;
+  private isInitialPlayerAnnouncementReady$ = new BehaviorSubject<boolean>(
+    false
+  );
 
   private constructor() {}
 
@@ -36,6 +46,26 @@ export class AccessibilityManager {
     return AccessibilityManager._instance;
   }
 
+  public get isInitialPlayerAnnouncementReady(): boolean {
+    return this.isInitialPlayerAnnouncementReady$.getValue();
+  }
+
+  public setInitialPlayerAnnouncementReady(): void {
+    this.isInitialPlayerAnnouncementReady$.next(true);
+  }
+
+  public resetInitialPlayerAnnouncementReady(): void {
+    this.isInitialPlayerAnnouncementReady$.next(false);
+  }
+
+  public getInitialAnnouncementReadyObservable() {
+    return this.isInitialPlayerAnnouncementReady$.asObservable();
+  }
+
+  public getTTSStateObservable() {
+    return this.ttsManager.getStateAsObservable();
+  }
+
   /**
    * The method now accepts any object with localizations using a flattened structure
    *
@@ -46,7 +76,9 @@ export class AccessibilityManager {
    * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
    */
   public updateLocalizations(localizations: { [key: string]: string }) {
-    this.localizations = localizations;
+    if (!R.isEmpty(localizations)) {
+      this.localizations = localizations;
+    }
   }
 
   public getState(): AccessibilityState {
@@ -57,31 +89,25 @@ 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) {
+    if (!this.pendingFocusId) {
+      this.pendingFocusId = Date.now().toString();
+    }
+
+    this.headingFocusMap.set(heading, this.pendingFocusId);
     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
+   *
+   * Implements a delay mechanism to reduce noise during rapid navigation.
+   * Only the most recent announcement will be read after the delay period.
    */
   public readText({
     text,
@@ -112,19 +138,27 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    if (this.headingQueue.length > 0) {
-      const heading = this.headingQueue.shift()!;
-      this.ttsManager?.readText(heading);
+    const focusId = this.pendingFocusId || Date.now().toString();
+    this.currentFocusId = focusId;
+    this.pendingFocusId = null;
 
-      if (this.headingTimeout) {
-        clearTimeout(this.headingTimeout);
-      }
+    this.clearAnnouncement();
 
-      const pauseTime = this.calculateReadingTime(heading);
+    this.announcementDelayTimeout = setTimeout(() => {
+      this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
+    }, this.ANNOUNCEMENT_DELAY);
+  }
 
-      this.headingTimeout = setTimeout(() => {
-        this.ttsManager?.readText(textToRead);
-      }, pauseTime);
+  /**
+   * Internal method to execute the actual announcement after the delay
+   */
+  private executeAnnouncement(
+    textToRead: string,
+    keyOfLocalizedText?: string,
+    focusId?: string
+  ) {
+    if (this.headingQueue.length > 0) {
+      this.processHeadingQueue(textToRead, focusId);
     } else {
       this.ttsManager?.readText(textToRead);
     }
@@ -136,6 +170,54 @@ export class AccessibilityManager {
     });
   }
 
+  /**
+   * Recursively processes all headings in the queue, reading them one by one
+   */
+  private processHeadingQueue(textToRead: string, focusId?: string) {
+    // If focus has changed, abort this announcement
+    if (focusId && this.currentFocusId !== focusId) {
+      return;
+    }
+
+    if (this.headingQueue.length === 0) {
+      if (focusId && this.currentFocusId === focusId) {
+        this.ttsManager?.readText(textToRead);
+      }
+
+      return;
+    }
+
+    const heading = this.headingQueue.shift()!;
+
+    const headingFocusId = this.headingFocusMap.get(heading);
+
+    if (headingFocusId && headingFocusId !== focusId) {
+      // This heading belongs to a previous focus, skip it
+      this.headingFocusMap.delete(heading);
+      this.processHeadingQueue(textToRead, focusId);
+
+      return;
+    }
+
+    this.ttsManager?.readText(heading);
+    this.headingFocusMap.delete(heading); // Clean up after reading
+
+    if (this.headingTimeout) {
+      clearTimeout(this.headingTimeout);
+    }
+
+    const pauseTime = calculateReadingTime(
+      heading,
+      this.WORDS_PER_MINUTE,
+      this.MINIMUM_PAUSE,
+      this.ANNOUNCEMENT_DELAY
+    );
+
+    this.headingTimeout = setTimeout(() => {
+      this.processHeadingQueue(textToRead, focusId);
+    }, pauseTime);
+  }
+
   public getButtonAccessibilityProps(name: string): AccessibilityProps {
     const buttonName = toString(name);
 
@@ -143,12 +225,15 @@ export class AccessibilityManager {
 
     if (!buttonConfig) {
       return {
+        accessible: true,
         accessibilityLabel: buttonName,
         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",
+        role: "button",
+        tabindex: 0,
       };
     }
 
@@ -162,23 +247,52 @@ export class AccessibilityManager {
       `Press button to perform action on ${buttonName}`;
 
     return {
+      accessible: true,
       accessibilityLabel: label,
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
       accessibilityRole: "button" as AccessibilityRole,
       "aria-role": "button",
+      role: "button",
+      tabindex: 0,
     };
   }
 
   public getInputAccessibilityProps(inputName: string): AccessibilityProps {
     return {
+      accessible: true,
       accessibilityLabel: inputName,
       accessibilityHint: `Enter text into ${inputName}`,
       "aria-label": inputName,
       "aria-description": `Enter text into ${inputName}`,
-      accessibilityRole: "textbox" as AccessibilityRole,
-      "aria-role": "textbox",
+      accessibilityRole: "searchbox" as AccessibilityRole,
+      "aria-role": "searchbox",
+      role: "searchbox",
+      tabindex: 0,
+    };
+  }
+
+  /**
+   * Extracts accessibility props from component props and returns them as HTML attributes
+   * @param props - Component props containing accessibility properties
+   * @returns Object with accessibility HTML attributes
+   */
+  public getWebAccessibilityProps(props: any): AccessibilityProps {
+    const {
+      "aria-label": ariaLabel,
+      "aria-description": ariaDescription,
+      "aria-role": ariaRole,
+      role,
+      tabindex,
+    } = props;
+
+    return {
+      "aria-label": ariaLabel,
+      "aria-description": ariaDescription,
+      "aria-role": ariaRole,
+      role: role || ariaRole,
+      tabindex,
     };
   }
 
@@ -196,4 +310,11 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
+
+  private clearAnnouncement() {
+    if (this.announcementDelayTimeout) {
+      clearTimeout(this.announcementDelayTimeout);
+      this.announcementDelayTimeout = null;
+    }
+  }
 }

package/appUtils/accessibilityManager/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Calculates the reading time for a given text based on word count
+ * @param text - The text to calculate the reading time for
+ * @param wordsPerMinute - Words per minute reading speed (default: 160)
+ * @param minimumPause - Minimum pause time in milliseconds (default: 500)
+ * @param announcementDelay - Additional delay for announcement in milliseconds (default: 700)
+ * @returns The reading time in milliseconds
+ */
+export function calculateReadingTime(
+  text: string,
+  wordsPerMinute: number = 140,
+  minimumPause: number = 500,
+  announcementDelay: number = 700
+): number {
+  const words = text
+    .trim()
+    .split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
+    .filter(Boolean).length;
+
+  return (
+    Math.max(minimumPause, (words / wordsPerMinute) * 60 * 1000) +
+    announcementDelay
+  );
+}

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,10 +1,13 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import * as _ from "lodash";
+import { useScreenStateStore } from "../../reactHooks/navigation/useScreenStateStore";
 
-interface IResolver {
+export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
+// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -21,6 +24,28 @@ export class EntryResolver implements IResolver {
   }
 }
 
+// TODO: Move to proper place
+
+export class ScreenStateResolver implements IResolver {
+  constructor(
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
+  ) {}
+
+  async resolve(key: string) {
+    const screenState = this.screenStateStore.getState().data;
+
+    if (!key || key.length === 0) {
+      return screenState;
+    }
+
+    if (key.includes(".")) {
+      return R.view(R.lensPath(key.split(".")), screenState);
+    }
+
+    return screenState?.[key];
+  }
+}
+
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);
@@ -64,3 +89,19 @@ export const resolveObjectValues = async (
 
   return Object.fromEntries(resolvedEntries);
 };
+
+export const extractAtValues = _.memoize((input: any): string[] => {
+  return _.flatMapDeep(input, (value: any) => {
+    if (_.isString(value)) {
+      const matches = value.match(/@\{([^}]*)\}/g);
+
+      return matches ? matches.map((match) => match.slice(2, -1)) : [];
+    }
+
+    if (_.isObject(value)) {
+      return extractAtValues(_.values(value));
+    }
+
+    return [];
+  });
+});

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

@@ -6,6 +6,7 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
+  "focusTopNavigation": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -24,6 +25,9 @@ exports[`focusManager should be defined 1`] = `
   "invokeHandler": [Function],
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
+  "isFocusOn": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
@@ -63,6 +67,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getGroupRootById": [Function],
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
+  "isFocusOn": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

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

@@ -33,7 +33,7 @@ describe("focusManager", () => {
 
     expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
-    expect(mockSetFocus).toBeCalledWith(null);
+    expect(mockSetFocus).toBeCalledWith(null, undefined);
   });
 
   describe("register", () => {});

package/appUtils/focusManager/index.ios.ts

@@ -1,6 +1,7 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
+import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -391,6 +392,14 @@ export const focusManager = (function () {
     return node;
   }
 
+  function isFocusOn(id): boolean {
+    const currentFocusNode = focusableTree.findInTree(
+      getCurrentFocus()?.props?.id
+    );
+
+    return id && isCurrentFocusOn(id, currentFocusNode);
+  }
+
   return {
     on,
     invokeHandler,
@@ -412,5 +421,6 @@ export const focusManager = (function () {
     getGroupRootById,
     isGroupItemFocused,
     getPreferredFocusChild,
+    isFocusOn,
   };
 })();