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

package/analyticsUtils/AnalyticsEvents/helper.ts

@@ -4,9 +4,12 @@ import {
   ANALYTICS_COMPONENT_EVENTS,
   ANALYTICS_CORE_EVENTS,
   ANALYTICS_ENTRY_EVENTS,
+  ANALYTICS_PREFERENCES_EVENTS,
   DOWNLOADS_EVENTS,
 } from "../events";
 import { isEmptyOrNil } from "../../cellUtils";
+import { get } from "lodash";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 
 export enum OfflineItemState {
   notExist = "NOT_EXISTS",
@@ -102,6 +105,84 @@ export function eventForComponent(
   return analyticsProps;
 }
 
+/**
+ * Checks if an item is currently selected in localStorage based on its actions
+ * @param item - The item to check
+ * @returns boolean indicating if the item is currently selected
+ */
+function isItemPreviouslySelected(item: any): boolean {
+  const actions = item?.extensions?.tap_actions?.actions;
+
+  if (!actions) {
+    return false;
+  }
+
+  const localStorageAction = actions.find(
+    (action) => action?.type === "localStorageToggleFlag"
+  );
+
+  if (!localStorageAction?.options?.key) {
+    return false;
+  }
+
+  const keyNamespace = localStorageAction.options.key;
+
+  const tag = localStorageAction.options?.selector
+    ? get(item, localStorageAction.options.selector)
+    : (item.extensions?.tag ?? item.id);
+
+  if (!tag) {
+    return false;
+  }
+
+  try {
+    const multiSelectProvider =
+      StorageMultiSelectProvider.getProvider(keyNamespace);
+
+    const selectedItems = multiSelectProvider.getSelectedItems();
+
+    return selectedItems.includes(tag);
+  } catch (error) {
+    return false;
+  }
+}
+
+export function getLocalStorageSetPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageSetAction = item?.extensions?.tap_actions?.actions?.some(
+    (action) => action?.type === "localStorageSet"
+  );
+
+  if (!hasLocalStorageSetAction) {
+    return null;
+  }
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: true,
+  };
+}
+
+export function getLocalStorageToggleFlagPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageToggleAction =
+    item?.extensions?.tap_actions?.actions?.some(
+      (action) => action?.type === "localStorageToggleFlag"
+    );
+
+  if (!hasLocalStorageToggleAction) {
+    return null;
+  }
+
+  const previouslySelected = isItemPreviouslySelected(item);
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: !previouslySelected,
+    [ANALYTICS_PREFERENCES_EVENTS.PREVIOUS_SELECTED_STATE]: previouslySelected,
+  };
+}
+
 export function playEventForType(item) {
   const itemType = item?.type && item.type?.value;
 

package/analyticsUtils/AnalyticsEvents/sendOnClickEvent.ts

@@ -1,13 +1,13 @@
 import { log_error, log_debug } from "../logger";
-
-import { ANALYTICS_CORE_EVENTS } from "../events";
-
+import { ANALYTICS_CORE_EVENTS, ACTION_TYPE } from "../events";
 import { postAnalyticEvent } from "../manager";
 import {
   replaceAnalyticsPropsNils,
   eventForEntry,
   eventForComponent,
   extensionsEvents,
+  getLocalStorageSetPayload,
+  getLocalStorageToggleFlagPayload,
 } from "./helper";
 
 declare type AnalyticsDefaultHelperProperties = {
@@ -26,7 +26,16 @@ export const sendOnClickEvent = ({
   const castedExtraProps: ExtraProps = extraProps;
   const componentData = component || extraProps.component;
   const data = zappPipesData || extraProps.zappPipesData;
-  const eventName = ANALYTICS_CORE_EVENTS.TAP_CELL;
+
+  const actionCellPayload =
+    extraProps?.item?.type?.value === ACTION_TYPE
+      ? getLocalStorageSetPayload(extraProps) ||
+        getLocalStorageToggleFlagPayload(extraProps)
+      : null;
+
+  const eventName = actionCellPayload
+    ? ANALYTICS_CORE_EVENTS.TAP_SELECTABLE_CELL
+    : ANALYTICS_CORE_EVENTS.TAP_CELL;
 
   if (!analyticsScreenData) {
     log_error(
@@ -44,6 +53,7 @@ export const sendOnClickEvent = ({
     ...replaceAnalyticsPropsNils({
       ...analyticsScreenData,
     }),
+    ...actionCellPayload,
   };
 
   if (analyticsCustomProperties) {

package/analyticsUtils/__tests__/analyticsUtils.test.js

@@ -3,6 +3,9 @@ import { ANALYTICS_CORE_EVENTS } from "../events";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isWeb: jest.fn(),
+  platformSelect: jest.fn(
+    (options) => options.android || options.ios || options.web
+  ),
 }));
 
 const mock_postAnalyticEvent = jest.fn();

package/analyticsUtils/events.ts

@@ -17,8 +17,11 @@ export const SCREEN_VIEW_EVENTS = {
   TIME_ON_SCREEN: "time_on_screen",
 };
 
+export const ACTION_TYPE = "action";
+
 export const TAPPING_EVENTS = {
   TAP_CELL: "tap_cell",
+  TAP_SELECTABLE_CELL: "tap_selectable_cell",
   TAP_MENU: "tap_menu",
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
@@ -99,6 +102,11 @@ export const ANALYTICS_COMPONENT_EVENTS = {
   COMPONENT_SOURCE: "component_source",
 };
 
+export const ANALYTICS_PREFERENCES_EVENTS = {
+  ITEM_SELECTED_STATUS: "item_selected_status",
+  PREVIOUS_SELECTED_STATE: "previous_selected_state",
+};
+
 // ---------------- EVENTS ---------------------
 export const AD_EVENT = {
   ad_break_start: "player_ad_break_start",

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/platformUtils";
+import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
+import { toString } from "../../utils";
+import { calculateReadingTime } from "./utils";
 import { AccessibilityRole } from "react-native";
-import _ from "lodash";
 
 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,19 +170,70 @@ 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);
+    const buttonName = toString(name);
 
     const buttonConfig = BUTTON_ACCESSIBILITY_KEYS[buttonName];
 
     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", () => {});