@applicaster/zapp-react-native-utils 14.0.0-alpha.6391068513 → 14.0.0-alpha.6893149866

package/actionsExecutor/ActionExecutorContext.tsx

@@ -120,7 +120,6 @@ const prepareDefaultActions = (actionExecutor) => {
         loadPipesData(dataSource, {
           silentRefresh: false,
           clearCache: true,
-          callback: (_data) => {},
           riverId: context?.screenData?.id,
         })
       );

package/actionsExecutor/ScreenActions.ts

@@ -7,10 +7,11 @@ import { get } from "lodash";
 import { onMaxTagsReached } from "./StorageActions";
 import { ScreenMultiSelectProvider } from "../storage/ScreenStateMultiSelectProvider";
 import { ScreenSingleValueProvider } from "../storage/ScreenSingleValueProvider";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
 
 export const screenSetVariable = async (
   screenRoute: string,
-  screenStateStore: ScreenStateStore,
+  screenStateStore: ReturnType<typeof useScreenStateStore>,
   context: Record<string, any>,
   action: ActionType
 ): Promise<ActionResult> => {
@@ -34,11 +35,11 @@ export const screenSetVariable = async (
     ? get(entry, action.options.selector)
     : (entry.extensions?.tag ?? entry.id);
 
-  const keyNamespace = action.options?.key;
+  const key = action.options?.key;
 
-  if (!keyNamespace) {
-    log_error("handleAction: screenSetVariable action missing key namespace", {
-      keyNamespace,
+  if (!key) {
+    log_error("handleAction: screenSetVariable action missing argument 'key'", {
+      key,
     });
 
     return ActionResult.Error;
@@ -55,7 +56,7 @@ export const screenSetVariable = async (
 
   try {
     const singleValueProvider = ScreenSingleValueProvider.getProvider(
-      keyNamespace,
+      key,
       screenRoute,
       screenStateStore
     );
@@ -63,19 +64,19 @@ export const screenSetVariable = async (
     const currentValue = await singleValueProvider.getValueAsync();
 
     log_info(
-      `handleAction: screenSetVariable setting value: ${tag} for keyNamespace: ${keyNamespace}, previous value: ${currentValue}`
+      `handleAction: screenSetVariable setting value: ${tag} for key: ${key}, previous value: ${currentValue}`
     );
 
     await singleValueProvider.setValue(String(tag));
 
     log_info(
-      `handleAction: screenSetVariable successfully set value: ${tag} for keyNamespace: ${keyNamespace}`
+      `handleAction: screenSetVariable successfully set value: ${tag} for key: ${key}`
     );
 
     return ActionResult.Success;
   } catch (error) {
     log_error("handleAction: screenSetVariable failed to set value", {
-      keyNamespace,
+      key,
       tag,
       error,
     });
@@ -86,7 +87,7 @@ export const screenSetVariable = async (
 
 export const screenToggleFlag = async (
   screenRoute: string,
-  screenStateStore: ScreenStateStore,
+  screenStateStore: ReturnType<typeof useScreenStateStore>,
   context: Record<string, any>,
   action: ActionType
 ) => {
@@ -110,11 +111,11 @@ export const screenToggleFlag = async (
     ? get(entry, action.options.selector)
     : (entry.extensions?.tag ?? entry.id);
 
-  const keyNamespace = action.options?.key;
+  const key = action.options?.key;
 
-  if (keyNamespace && tag) {
+  if (key && tag) {
     const multiSelectProvider = ScreenMultiSelectProvider.getProvider(
-      keyNamespace,
+      key,
       screenRoute,
       screenStateStore
     );
@@ -125,7 +126,7 @@ export const screenToggleFlag = async (
     log_info(
       `handleAction: screenToggleFlag event will ${
         isTagInSelectedItems ? "remove" : "add"
-      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+      } tag: ${tag} for key: ${key}, current selectedItems: ${selectedItems}`
     );
 
     if (selectedItems.includes(tag)) {
@@ -142,7 +143,7 @@ export const screenToggleFlag = async (
           selectedItems,
           maxItems,
           tag,
-          keyNamespace,
+          keyNamespace: key,
         });
 
         return ActionResult.Cancel;
@@ -151,10 +152,10 @@ export const screenToggleFlag = async (
       await multiSelectProvider.addItem(tag);
     }
   } else {
-    log_error(
-      "handleAction: screenToggleFlag event missing keyNamespace or tag",
-      { keyNamespace, tag }
-    );
+    log_error("handleAction: screenToggleFlag event missing key or tag", {
+      key,
+      tag,
+    });
 
     return ActionResult.Error;
   }

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

@@ -105,7 +105,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
       return this.getDateTimestamp();
     }
 
-    this.mediaTime = this.playerState?.currentTime || eventData?.currentTime;
+    this.mediaTime =
+      this.playerState?.contentPosition || eventData?.currentTime;
 
     return this.mediaTime;
   }

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 { 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",
+        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",
+      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,5 +1,7 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import * as _ from "lodash";
+import { useScreenStateStore } from "../../reactHooks/navigation/useScreenStateStore";
 
 export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
@@ -25,11 +27,21 @@ export class EntryResolver implements IResolver {
 // TODO: Move to proper place
 
 export class ScreenStateResolver implements IResolver {
-  constructor(private screenStateStore: ScreenStateStore) {}
+  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];
   }
 }
@@ -77,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,
   };
 })();