@applicaster/zapp-react-native-utils 13.0.9-alpha.1792119437 → 13.0.9-alpha.8722424302

package/appUtils/accessibilityManager/const.ts

@@ -65,17 +65,4 @@ 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, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { AccessibilityManager } from "./index";
 
 /**
@@ -38,37 +38,3 @@ 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,19 +1,15 @@
-import * as R from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform/platformUtils";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
-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 announcementDelayTimeout: NodeJS.Timeout | null = null;
-  private WORDS_PER_MINUTE = 140;
+  private WORDS_PER_MINUTE = 160;
   private MINIMUM_PAUSE = 500;
-  private ANNOUNCEMENT_DELAY = 700;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -29,12 +25,6 @@ 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() {}
 
@@ -46,26 +36,6 @@ 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
    *
@@ -76,9 +46,7 @@ export class AccessibilityManager {
    * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
    */
   public updateLocalizations(localizations: { [key: string]: string }) {
-    if (!R.isEmpty(localizations)) {
-      this.localizations = localizations;
-    }
+    this.localizations = localizations;
   }
 
   public getState(): AccessibilityState {
@@ -89,25 +57,31 @@ 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,
@@ -138,27 +112,19 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    const focusId = this.pendingFocusId || Date.now().toString();
-    this.currentFocusId = focusId;
-    this.pendingFocusId = null;
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
 
-    this.clearAnnouncement();
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
 
-    this.announcementDelayTimeout = setTimeout(() => {
-      this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
-    }, this.ANNOUNCEMENT_DELAY);
-  }
+      const pauseTime = this.calculateReadingTime(heading);
 
-  /**
-   * 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);
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
     } else {
       this.ttsManager?.readText(textToRead);
     }
@@ -170,54 +136,6 @@ 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);
 
@@ -225,15 +143,12 @@ 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,
       };
     }
 
@@ -247,52 +162,23 @@ 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: "text" as AccessibilityRole,
-      "aria-role": "text",
-      role: "text",
-      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,
+      accessibilityRole: "textbox" as AccessibilityRole,
+      "aria-role": "textbox",
     };
   }
 
@@ -310,11 +196,4 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
-
-  private clearAnnouncement() {
-    if (this.announcementDelayTimeout) {
-      clearTimeout(this.announcementDelayTimeout);
-      this.announcementDelayTimeout = null;
-    }
-  }
 }

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/platform/platformUtils.ts

@@ -10,7 +10,6 @@ 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";
-import { calculateReadingTime } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/utils";
 
 const { log_debug } = createLogger({
   category: "General",
@@ -213,16 +212,9 @@ export class TTSManager {
   }
 
   readText(text: string) {
-    this.ttsState$.next(true);
-
     if (isSamsungPlatform() && window.speechSynthesis) {
       const utterance = new SpeechSynthesisUtterance(text);
-
-      window.speechSynthesis.cancel(); // Cancel previous speech before speaking new text
       window.speechSynthesis.speak(utterance);
-
-      // Estimate reading time and set inactive when done
-      this.scheduleTTSComplete(text);
     }
 
     if (isLgPlatform() && window.webOS?.service) {
@@ -233,45 +225,23 @@ export class TTSManager {
             log_debug("There was a failure setting up webOS TTS service", {
               error,
             });
-
-            this.ttsState$.next(false);
           },
           onSuccess(response: any) {
             log_debug("webOS TTS service is configured successfully", {
               response,
             });
-
-            // Estimate reading time and set inactive when done
-            this.scheduleTTSComplete(text);
           },
           parameters: {
             text,
-            clear: true, // Clear any previous speech before speaking new text
           },
         });
       } catch (error) {
         log_debug("webOS TTS service error", { error });
-        this.ttsState$.next(false);
       }
     }
 
-    if (!window.VIZIO?.Chromevox) {
-      // For platforms without TTS, estimate reading time
-      this.scheduleTTSComplete(text);
-
-      return;
-    }
+    if (!window.VIZIO?.Chromevox) return;
 
     window.VIZIO.Chromevox.play(text);
-    // Estimate reading time and set inactive when done
-    this.scheduleTTSComplete(text);
-  }
-
-  private scheduleTTSComplete(text: string) {
-    const readingTime = calculateReadingTime(text);
-
-    setTimeout(() => {
-      this.ttsState$.next(false);
-    }, readingTime);
   }
 }

package/index.d.ts

@@ -139,13 +139,10 @@ declare type AccessibilityState = {
 };
 
 declare type AccessibilityProps = {
-  accessible?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   "aria-label"?: string;
   "aria-description"?: string;
   accessibilityRole?: string;
   "aria-role"?: string;
-  role?: string;
-  tabindex?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.9-alpha.1792119437",
+  "version": "13.0.9-alpha.8722424302",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.9-alpha.1792119437",
+    "@applicaster/applicaster-types": "13.0.9-alpha.8722424302",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -26,6 +26,9 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/screen"
+  ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
 }));

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,8 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
 
 /**
  * If onCellTap is defined execute the function and
@@ -42,10 +43,12 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +86,9 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
+          screenStateStore,
         });
       }
 
@@ -117,6 +123,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -9,6 +9,9 @@ jest.mock("../../navigation");
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
   () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
     useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
   })
 );