@applicaster/zapp-react-native-utils 15.0.0-alpha.2239032089 → 15.0.0-alpha.2292107474

package/appUtils/accessibilityManager/utils.ts

@@ -1,24 +1,75 @@
+import { createLogger } from "../../logger";
+
+const { log_error } = createLogger({
+  category: "AccessibilityManager",
+  subsystem: "AppUtils",
+});
+
 /**
  * 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 text - The text to calculate the reading time for (string or number)
+ * @param wordsPerMinute - Words per minute reading speed (default: 140)
  * @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,
+  text: string | number,
   wordsPerMinute: number = 140,
   minimumPause: number = 500,
   announcementDelay: number = 700
 ): number {
-  const words = text
-    .trim()
+  if (typeof text !== "string" && typeof text !== "number") {
+    log_error(
+      `Invalid text input for reading time calculation got: ${
+        typeof text === "symbol" ? String(text) : text
+      }`
+    );
+
+    return 0;
+  }
+
+  const trimmed = typeof text === "number" ? String(text) : text.trim();
+
+  if (!trimmed) {
+    return 0;
+  }
+
+  const words = trimmed
     .split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
     .filter(Boolean).length;
 
-  return (
-    Math.max(minimumPause, (words / wordsPerMinute) * 60 * 1000) +
-    announcementDelay
+  // Count spaces - multiple consecutive spaces add extra pause time
+  const spaceMatches: string[] = trimmed.match(/\s+/g) || [];
+
+  const totalSpaces = spaceMatches.reduce(
+    (sum: number, match: string) => sum + match.length,
+    0
   );
+
+  const extraSpaces = Math.max(0, totalSpaces - (words - 1)); // words-1 is normal spacing
+
+  // Heuristic: punctuation increases TTS duration beyond word-based WPM.
+  // Commas typically introduce short pauses, sentence terminators longer ones.
+  const commaCount = (trimmed.match(/,/g) || []).length;
+  const semicolonCount = (trimmed.match(/;/g) || []).length;
+  const colonCount = (trimmed.match(/:/g) || []).length;
+  const dashCount = (trimmed.match(/\u2013|\u2014|-/g) || []).length; // – — -
+  const sentenceEndCount = (trimmed.match(/[.!?](?!\d)/g) || []).length;
+
+  const commaPauseMs = 220; // short prosody pause for ","
+  const midPauseMs = 260; // for ";", ":", dashes
+  const sentenceEndPauseMs = 420; // for ".", "!", "?"
+  const extraSpacePauseMs = 50; // per extra space beyond normal spacing
+
+  const punctuationPause =
+    commaCount * commaPauseMs +
+    (semicolonCount + colonCount + dashCount) * midPauseMs +
+    sentenceEndCount * sentenceEndPauseMs +
+    extraSpaces * extraSpacePauseMs;
+
+  const baseByWordsMs = (words / wordsPerMinute) * 60 * 1000;
+  const estimatedMs = Math.max(minimumPause, baseByWordsMs + punctuationPause);
+
+  return estimatedMs + announcementDelay;
 }

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

@@ -69,6 +69,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getGroupRootById": [Function],
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
+  "isChildOf": [Function],
   "isFocusOn": [Function],
   "isFocusOnContent": [Function],
   "isFocusOnMenu": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,18 +1,24 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
-import { Tree } from "./treeDataStructure/Tree";
-import { findFocusableNode } from "./treeDataStructure/Utils";
-import { subscriber } from "../../functionUtils";
-import { findChild } from "./utils";
-
 import {
   isCurrentFocusOn,
+  isChildOf as isChildOfUtils,
   isPartOfMenu,
   isPartOfContent,
   isPartOfTabsScreenContent,
 } from "../focusManagerAux/utils/index.ios";
 
+import { Tree } from "./treeDataStructure/Tree";
+import { findFocusableNode } from "./treeDataStructure/Utils";
+import { subscriber } from "../../functionUtils";
+import { findChild } from "./utils";
+
+import {
+  emitRegistered,
+  emitUnregistered,
+} from "../focusManagerAux/utils/utils.ios";
+
 const { FocusableManagerModule } = NativeModules;
 
 /**
@@ -186,10 +192,20 @@ export const focusManager = (function () {
   function register({ id, component }) {
     const { isGroup = false } = component;
 
-    return isGroup ? registerGroup(id, component) : registerItem(id, component);
+    if (isGroup) {
+      registerGroup(id, component);
+    } else {
+      registerItem(id, component);
+    }
+
+    const groupId = component?.props?.groupId;
+
+    emitRegistered({ id, groupId, isGroup });
   }
 
   function unregister(id, { group = false } = {}) {
+    emitUnregistered(id);
+
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
@@ -432,6 +448,10 @@ export const focusManager = (function () {
     );
   }
 
+  function isChildOf(childId, parentId): boolean {
+    return isChildOfUtils(focusableTree, childId, parentId);
+  }
+
   return {
     on,
     invokeHandler,
@@ -457,5 +477,6 @@ export const focusManager = (function () {
     isFocusOnMenu,
     isFocusOnContent,
     isFocusOnTabsScreenContent,
+    isChildOf,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ios.ts

@@ -62,7 +62,7 @@ export const isPartOfMenu = (focusableTree, id): boolean => {
     return false;
   }
 
-  return isPartOfMenu(focusableTree, node.parent.id);
+  return isPartOfMenu(focusableTree, node.parent?.id);
 };
 
 export const isPartOfContent = (focusableTree, id) => {
@@ -102,3 +102,21 @@ export const isCurrentFocusOn = (id, node) => {
 
   return isCurrentFocusOn(id, node.parent);
 };
+
+export const isChildOf = (focusableTree, childId, parentId) => {
+  if (isNil(childId) || isNil(parentId)) {
+    return false;
+  }
+
+  const childNode = focusableTree.findInTree(childId);
+
+  if (isNil(childNode)) {
+    return false;
+  }
+
+  if (childNode.parent?.id === parentId) {
+    return true;
+  }
+
+  return isChildOf(focusableTree, childNode.parent?.id, parentId);
+};

package/appUtils/focusManagerAux/utils/index.ts

@@ -102,7 +102,7 @@ export const getNavbarNode = (focusableTree) => {
 
 export const waitForContent = (focusableTree) => {
   const contentHasAnyChildren = (): boolean => {
-    const countOfChildren = pathOr(
+    const countOfChildren = pathOr<number>(
       0,
       ["children", "length"],
       getContentNode(focusableTree)
@@ -190,3 +190,21 @@ export const isCurrentFocusOn = (id, node) => {
 
   return isCurrentFocusOn(id, node.parent);
 };
+
+export const isChildOf = (focusableTree, childId, parentId) => {
+  if (isNil(childId) || isNil(parentId)) {
+    return false;
+  }
+
+  const childNode = focusableTree.findInTree(childId);
+
+  if (isNil(childNode)) {
+    return false;
+  }
+
+  if (childNode.parent?.id === parentId) {
+    return true;
+  }
+
+  return isChildOf(focusableTree, childNode.parent?.id, parentId);
+};

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -1,11 +1,185 @@
-import { Subject, ReplaySubject, withLatestFrom } from "rxjs";
-import { filter } from "rxjs/operators";
+import { ReplaySubject, Subject } from "rxjs";
+import { filter, switchMap, take, withLatestFrom, map } from "rxjs/operators";
 
+import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { isPartOfMenu, isPartOfContent } from "./index.ios";
 
-import { focusManager } from "../../focusManager/index.ios";
-
 type FocusableID = string;
+type RegistrationEvent = {
+  id: FocusableID;
+  registered: boolean;
+};
+
+let focusableViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
+let focusableGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+}>();
+
+let focusableNativeViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
+let focusableNativeGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
+const isFocusableButton = (id: Option<FocusableID>): boolean =>
+  id && id.includes?.(BUTTON_PREFIX);
+
+const registeredSubject$ = new ReplaySubject<RegistrationEvent>(1);
+
+export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
+  registeredSubject$.pipe(
+    filter(
+      (value) =>
+        value.registered && focusManager.isChildOf(value.id, focusableGroupId)
+    )
+  );
+
+export const resetFocusableRegistration = () => {
+  // complete the old subject so subscribers are notified and resources are freed
+  if (!focusableViewRegistrationSubject$.closed) {
+    focusableViewRegistrationSubject$.complete();
+  }
+
+  if (!focusableGroupRegistrationSubject$.closed) {
+    focusableGroupRegistrationSubject$.complete();
+  }
+
+  if (!focusableNativeViewRegistrationSubject$.closed) {
+    focusableNativeViewRegistrationSubject$.complete();
+  }
+
+  if (!focusableNativeGroupRegistrationSubject$.closed) {
+    focusableNativeGroupRegistrationSubject$.complete();
+  }
+
+  focusableViewRegistrationSubject$ = new Subject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+
+  focusableGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+  }>();
+
+  focusableNativeViewRegistrationSubject$ = new Subject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+
+  focusableNativeGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+};
+
+const focusableNativeViewRegistration = ({ focusableView, focusableGroup }) => {
+  return focusableNativeViewRegistrationSubject$.pipe(
+    filter(
+      (focusableNativeView) => focusableNativeView.id === focusableView.id
+    ),
+    take(1),
+    switchMap((focusableNativeView) =>
+      // start waiting registration of its parent FocusableNativeGroup
+      focusableNativeGroupRegistrationSubject$.pipe(
+        filter(
+          (focusableNativeGroup) =>
+            focusableNativeGroup.id === focusableNativeView.groupId
+        ),
+        take(1),
+        map((focusableNativeGroup) => ({
+          focusableNativeGroup,
+          focusableNativeView,
+          focusableView,
+          focusableGroup,
+        }))
+      )
+    )
+  );
+};
+
+export const firstFocusableViewRegistrationFactory = () =>
+  focusableViewRegistrationSubject$.pipe(
+    take(1), // we care about only first FocusableView registration
+    switchMap((focusableView) =>
+      // start waiting registration of its parent FocusableGroup
+      focusableGroupRegistrationSubject$.pipe(
+        filter((focusableGroup) => focusableGroup.id === focusableView.groupId),
+        take(1),
+        map((focusableGroup) => ({
+          focusableView,
+          focusableGroup,
+        }))
+      )
+    ),
+    // start waiting registration for FocusableNativeView and its parent FocusableNativeGroup
+    switchMap(({ focusableView, focusableGroup }) =>
+      focusableNativeViewRegistration({
+        focusableView,
+        focusableGroup,
+      })
+    )
+  );
+
+// registration on RN level(into RN focusManager)
+export const emitRegistered = ({
+  id,
+  groupId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  groupId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: true });
+  }
+
+  if (isGroup && id) {
+    focusableGroupRegistrationSubject$.next({ id });
+  }
+
+  if (!isGroup && id && groupId) {
+    focusableViewRegistrationSubject$.next({ id, groupId });
+  }
+};
+
+// unregistration on RN level(into RN focusManager)
+export const emitUnregistered = (id: Option<FocusableID>): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: false });
+  }
+};
+
+// registration focusableNativeView and focusableNativeGroup
+export const emitNativeRegistered = ({
+  id,
+  groupId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  groupId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
+  if (!isGroup && id && groupId) {
+    focusableNativeViewRegistrationSubject$.next({ id, groupId });
+  }
+
+  if (isGroup && id && groupId) {
+    focusableNativeGroupRegistrationSubject$.next({ id, groupId });
+  }
+};
+
+// /////
+
 const focusedSubject$ = new Subject<FocusableID>();
 
 const focused$ = focusedSubject$.asObservable();
@@ -26,38 +200,32 @@ export const contentFocused$ = focused$.pipe(
   })
 );
 
-const registeredHomeTopMenuItemSubject$ = new ReplaySubject<FocusableID>(1);
+const createFocusableRegistry = () => {
+  const subject$ = new ReplaySubject<FocusableID | undefined>(1);
+
+  return {
+    observable$: subject$.asObservable(),
+    register: (id: FocusableID) => {
+      // save focusable_id on registration
+      subject$.next(id);
+    },
+    unregister: () => {
+      // reset focusable_id on unregistration
+      subject$.next(undefined);
+    },
+  };
+};
 
-export const registeredHomeTopMenuItem$ =
-  registeredHomeTopMenuItemSubject$.asObservable();
+/// HOME_TOP_MENU_ITEM
+export const HomeTopMenuItemRegistry = createFocusableRegistry();
 
 export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
-  withLatestFrom(registeredHomeTopMenuItem$),
+  withLatestFrom(HomeTopMenuItemRegistry.observable$),
   filter(([id, homeId]) => id === homeId)
 );
 
-export const emitHomeTopMenuItemRegistered = (id) => {
-  // save homeId on registration
-  registeredHomeTopMenuItemSubject$.next(id);
-};
-
-export const emitHomeTopMenuItemUnregistered = () => {
-  // reset homeId on unregistration
-  registeredHomeTopMenuItemSubject$.next(undefined);
-};
+/// SCREEN_PICKER
+export const ScreenPickerContentContainerRegistry = createFocusableRegistry();
 
-const registeredScreenPickerContentContainerSubject$ =
-  new ReplaySubject<FocusableID>(1);
-
-export const registeredScreenPickerContentContainer$ =
-  registeredScreenPickerContentContainerSubject$.asObservable();
-
-export const emitScreenPickerContentContainerRegistered = (id) => {
-  // save screenPickerContentContainerId on registration
-  registeredScreenPickerContentContainerSubject$.next(id);
-};
-
-export const emitScreenPickerContentContainerUnregistered = () => {
-  // reset screenPickerContentContainerId on unregistration
-  registeredScreenPickerContentContainerSubject$.next(undefined);
-};
+/// SEARCH_INPUT
+export const SearchInputRegistry = createFocusableRegistry();

package/appUtils/keyCodes/keys/keys.web.ts

@@ -10,10 +10,7 @@ import { Platform } from "react-native";
  * platformKeys[Platform.OS] should only include keys
  * that are unique to that platform, i.e. Exit: { keyCode: 10182 }
  */
-export const KEYS = Object.assign(
-  platformKeys["web"],
-  platformKeys[Platform.OS]
-);
+export const KEYS = Object.assign(platformKeys.web, platformKeys[Platform.OS]);
 
 export const ARROW_KEYS = [
   KEYS.ArrowUp,

package/appUtils/orientationHelper.ts

@@ -1,5 +1,5 @@
 import * as ReactNative from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { isTV, platformSelect } from "../reactUtils";
 import { useIsTablet } from "../reactHooks";
@@ -184,9 +184,7 @@ export const getScreenOrientation = ({
 
 export const useGetScreenOrientation = (screenData) => {
   const isTablet = useIsTablet();
-
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return getScreenOrientation({
     screenData,

package/appUtils/platform/platformUtils.ts

@@ -79,7 +79,7 @@ export class ClosedCaptioningManager {
   private constructor() {
     this.initialize();
 
-    window["vizioDebug"] = {
+    window.vizioDebug = {
       setCCEnabled: (isCCEnabled: boolean) => {
         this.ccState$.next(isCCEnabled);
       },
@@ -170,7 +170,9 @@ export const getClosedCaptionState = () => {
  */
 export class TTSManager {
   private ttsState$ = new BehaviorSubject<boolean>(false);
+  private screenReaderEnabled$ = new BehaviorSubject<boolean>(false);
   private static ttsManagerInstance: TTSManager;
+  private samsungListenerId: number | null = null;
 
   private constructor() {
     this.initialize();
@@ -185,23 +187,116 @@ export class TTSManager {
   }
 
   async initialize() {
-    if (!isVizioPlatform()) return;
+    if (isVizioPlatform()) {
+      document.addEventListener(
+        "VIZIO_TTS_ENABLED",
+        () => {
+          log_debug("Vizio screen reader enabled");
+          this.screenReaderEnabled$.next(true);
+        },
+        false
+      );
 
-    document.addEventListener(
-      "VIZIO_TTS_ENABLED",
-      () => {
-        this.ttsState$.next(true);
-      },
-      false
-    );
+      document.addEventListener(
+        "VIZIO_TTS_DISABLED",
+        () => {
+          log_debug("Vizio screen reader disabled");
+          this.screenReaderEnabled$.next(false);
+        },
+        false
+      );
+    }
 
-    document.addEventListener(
-      "VIZIO_TTS_DISABLED",
-      () => {
-        this.ttsState$.next(false);
-      },
-      false
-    );
+    if (isLgPlatform() && window.webOS?.service) {
+      try {
+        // https://webostv.developer.lge.com/develop/references/settings-service
+        window.webOS.service.request("luna://com.webos.settingsservice", {
+          method: "getSystemSettings",
+          parameters: {
+            category: "option",
+            keys: ["audioGuidance"],
+            subscribe: true, // Request a subscription to changes
+          },
+          onSuccess: (response: any) => {
+            const isEnabled = response?.settings?.audioGuidance === "on";
+
+            log_debug("LG Audio Guidance status changed", {
+              isEnabled,
+              response,
+            });
+
+            this.screenReaderEnabled$.next(isEnabled);
+          },
+          onFailure: (error: any) => {
+            log_debug("webOS settings subscription failed", { error });
+            this.screenReaderEnabled$.next(false);
+          },
+        });
+      } catch (error) {
+        log_debug("webOS settings service request error", { error });
+        // Fallback to false if the service is not available
+        this.screenReaderEnabled$.next(false);
+      }
+    }
+
+    if (isSamsungPlatform() && typeof window.webapis !== "undefined") {
+      try {
+        if (
+          window.webapis?.tvinfo &&
+          typeof window.webapis.tvinfo.getMenuValue === "function" &&
+          typeof window.webapis.tvinfo.addCaptionChangeListener === "function"
+        ) {
+          // Get initial Voice Guide status
+          const initialStatus = window.webapis.tvinfo.getMenuValue(
+            window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY
+          );
+
+          const isEnabled =
+            initialStatus === window.webapis.tvinfo.TvInfoMenuValue.ON;
+
+          log_debug("Samsung Voice Guide initial status", {
+            isEnabled,
+            initialStatus,
+          });
+
+          this.screenReaderEnabled$.next(isEnabled);
+
+          // Listen for Voice Guide status changes
+          const onChange = () => {
+            const currentStatus = window.webapis.tvinfo.getMenuValue(
+              window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY
+            );
+
+            const enabled =
+              currentStatus === window.webapis.tvinfo.TvInfoMenuValue.ON;
+
+            log_debug("Samsung Voice Guide status changed", {
+              enabled,
+              currentStatus,
+            });
+
+            this.screenReaderEnabled$.next(enabled);
+          };
+
+          this.samsungListenerId =
+            window.webapis.tvinfo.addCaptionChangeListener(
+              window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY,
+              onChange
+            );
+
+          log_debug("Samsung Voice Guide listener registered", {
+            listenerId: this.samsungListenerId,
+          });
+        } else {
+          log_debug("Samsung TvInfo API not available");
+          this.screenReaderEnabled$.next(false);
+        }
+      } catch (error) {
+        log_debug("Samsung Voice Guide listener error", { error });
+        // Fallback to false if the service is not available
+        this.screenReaderEnabled$.next(false);
+      }
+    }
   }
 
   getCurrentState(): boolean {
@@ -212,6 +307,10 @@ export class TTSManager {
     return this.ttsState$.asObservable();
   }
 
+  getScreenReaderEnabledAsObservable() {
+    return this.screenReaderEnabled$.asObservable();
+  }
+
   readText(text: string) {
     this.ttsState$.next(true);
 
@@ -229,14 +328,14 @@ export class TTSManager {
       try {
         window.webOS.service.request("luna://com.webos.service.tts", {
           method: "speak",
-          onFailure(error: any) {
+          onFailure: (error: any) => {
             log_debug("There was a failure setting up webOS TTS service", {
               error,
             });
 
             this.ttsState$.next(false);
           },
-          onSuccess(response: any) {
+          onSuccess: (response: any) => {
             log_debug("webOS TTS service is configured successfully", {
               response,
             });