@applicaster/zapp-react-native-utils 15.0.0-rc.5 → 15.0.0-rc.52

package/actionsExecutor/ActionExecutorContext.tsx

@@ -23,12 +23,9 @@ import {
   EntryResolver,
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
-import { useNavigation } from "../reactHooks";
+import { useNavigation, useRivers } from "../reactHooks";
 
-import {
-  useContentTypes,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
 import { APP_EVENTS } from "../appUtils/events";
 import {
@@ -278,7 +275,7 @@ export function withActionExecutor(Component) {
 
   return function ActionExecutorComponent(props: Props) {
     const navigator = useNavigation();
-    const { rivers } = usePickFromState(["rivers"]);
+    const rivers = useRivers();
     const contentTypes = useContentTypes();
 
     const handlers = useMemo(() => {

package/actionsExecutor/feedDecorator.ts

@@ -27,7 +27,7 @@ function makeMultiSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.["behavior"],
+    ...feed.extensions?.behavior,
     select_mode: "multi",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -75,7 +75,7 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.["behavior"],
+    ...feed.extensions?.behavior,
     select_mode: "single",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -141,11 +141,11 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
 }
 
 export const decorateFeed = (feed: ZappFeed) => {
-  if (!(feed.extensions?.["role"] === "preference_editor")) {
+  if (!(feed.extensions?.role === "preference_editor")) {
     return feed;
   }
 
-  const key = feed.extensions?.["preference_editor_options"]?.["key"];
+  const key = feed.extensions?.preference_editor_options?.key;
 
   if (!key) {
     log_error(
@@ -160,8 +160,8 @@ export const decorateFeed = (feed: ZappFeed) => {
   const decoratedFeed = R.clone(feed);
 
   const isSingleSelect =
-    (feed.extensions?.["preference_editor_options"]?.select_mode ||
-      feed.extensions?.["behavior"]?.select_mode) === "single";
+    (feed.extensions?.preference_editor_options?.select_mode ||
+      feed.extensions?.behavior?.select_mode) === "single";
 
   if (isSingleSelect) {
     return makeSingleSelect(feed, key, decoratedFeed);

package/adsUtils/index.ts

@@ -33,10 +33,10 @@ function convertOffset(offset: any): string {
 }
 
 function createAdBreak(ad: AdMap): string {
-  const offset = ad["offset"];
+  const offset = ad.offset;
   const id = offset.toString();
   const timestamp = convertOffset(offset);
-  const url = ad["ad_url"].toString().trim();
+  const url = ad.ad_url.toString().trim();
 
   return `
     <vmap:AdBreak timeOffset="${timestamp}" breakType="linear" breakId="break-${id}">

package/analyticsUtils/AnalyticPlayerListener.ts

@@ -35,8 +35,11 @@ export class AnalyticPlayerListener
     this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
   };
 
-  onError = (err: Error) => {
-    this.handleAnalyticEvent(PLAYBACK_EVENT.error, err); // TODO: Check error format
+  onError = (err: QuickBrickPlayer.PlayerErrorI) => {
+    this.handleAnalyticEvent(
+      PLAYBACK_EVENT.error,
+      err.toObject?.() || { message: err.message }
+    );
   };
 
   onPlayerPause = (event) => {

package/analyticsUtils/README.md

@@ -388,7 +388,7 @@ export function AnalyticsProvider(props: ComponentWithChildrenProps) {
 
 ```ts
 export function useAnalytics(props: any): any {
-  const { appData } = usePickFromState(["appData"]);
+  const appData = useAppData();
   const getAnalyticsFunctions = React.useContext(AnalyticsContext);
 
   const analyticsFunctions = React.useMemo(

package/appUtils/HooksManager/index.ts

@@ -230,7 +230,7 @@ export function HooksManager({
   function completeHook(hookPlugin, payload, callback) {
     logHookEvent(
       hooksManagerLogger.info,
-      `completeHook: hook sequence completed successfully: ${hookPlugin["identifier"]}`,
+      `completeHook: hook sequence completed successfully: ${hookPlugin.identifier}`,
       {
         payload,
         hook: hookPlugin,
@@ -276,7 +276,7 @@ export function HooksManager({
       if (hookPlugin.isCancelled()) {
         logHookEvent(
           hooksManagerLogger.info,
-          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          `hookCallback: hook was cancelled: ${hookPlugin.identifier}`,
           {}
         );
 
@@ -305,7 +305,7 @@ export function HooksManager({
       if (!success) {
         logHookEvent(
           hooksManagerLogger.info,
-          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          `hookCallback: hook was cancelled: ${hookPlugin.identifier}`,
           {
             payload,
             hook: hookPlugin,
@@ -334,7 +334,7 @@ export function HooksManager({
         if (isHookInHomescreen && isHookFlowBlocker && cancelled) {
           logHookEvent(
             hooksManagerLogger.info,
-            `hookCallback: send app to background, cancelled flow blocker hook  ${hookPlugin["identifier"]} on home screen`,
+            `hookCallback: send app to background, cancelled flow blocker hook  ${hookPlugin.identifier} on home screen`,
             {
               payload,
               hook: hookPlugin,
@@ -349,7 +349,7 @@ export function HooksManager({
       } else {
         logHookEvent(
           hooksManagerLogger.info,
-          `hookCallback: hook successfully finished: ${hookPlugin["identifier"]}`,
+          `hookCallback: hook successfully finished: ${hookPlugin.identifier}`,
           {
             payload,
             hook: hookPlugin,
@@ -359,7 +359,7 @@ export function HooksManager({
         if (!callback) {
           logHookEvent(
             hooksManagerLogger.warn,
-            `hookCallback: ${hookPlugin["identifier"]} is missing \`callback\`, using hookCallback(default one)`,
+            `hookCallback: ${hookPlugin.identifier} is missing \`callback\`, using hookCallback(default one)`,
             {
               hookPlugin,
             }
@@ -401,7 +401,7 @@ export function HooksManager({
 
     logHookEvent(
       hooksManagerLogger.info,
-      `presentScreenHook: Presenting screen hook: ${hookPlugin["identifier"]}`,
+      `presentScreenHook: Presenting screen hook: ${hookPlugin.identifier}`,
       {
         hook: hookPlugin,
         payload,
@@ -421,7 +421,7 @@ export function HooksManager({
   hooksManager.executeHook = function (hookPlugin, payload, callback) {
     logHookEvent(
       hooksManagerLogger.info,
-      `executeHook: ${hookPlugin["identifier"]}`,
+      `executeHook: ${hookPlugin.identifier}`,
       {
         hook: hookPlugin,
         payload,
@@ -433,7 +433,7 @@ export function HooksManager({
     } catch (error) {
       logHookEvent(
         hooksManagerLogger.error,
-        `executeHook: error executing hook: ${hookPlugin["identifier"]} error: ${error.message}`,
+        `executeHook: error executing hook: ${hookPlugin.identifier} error: ${error.message}`,
         {
           hook: hookPlugin,
           payload,
@@ -460,7 +460,7 @@ export function HooksManager({
     try {
       logHookEvent(
         hooksManagerLogger.info,
-        `runInBackground: Executing hook: ${hookPlugin["identifier"]}`,
+        `runInBackground: Executing hook: ${hookPlugin.identifier}`,
         {
           hook: hookPlugin,
           payload,

package/appUtils/accessibilityManager/const.ts

@@ -31,6 +31,10 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
       hint: "accessibility_close_mini_hint",
     },
   },
+  back_to_live: {
+    label: "back_to_live_label",
+    hint: "",
+  },
   maximize: {
     label: "accessibility_maximize_label",
     hint: "accessibility_maximize_hint",

package/appUtils/accessibilityManager/hooks.ts

@@ -23,19 +23,6 @@ export const useAccessibilityManager = (
     }
   }, [pluginConfiguration, accessibilityManager]);
 
-  useEffect(() => {
-    const subscription = accessibilityManager.getStateAsObservable().subscribe({
-      next: () => {
-        // TODO: handle accessibility states
-        // screenReaderEnabled: false
-        // reduceMotionEnabled: false
-        // boldTextEnabled: false
-      },
-    });
-
-    return () => subscription.unsubscribe();
-  }, [accessibilityManager]);
-
   return accessibilityManager;
 };
 
@@ -72,3 +59,23 @@ export const useAnnouncementActive = (
 
   return isActive;
 };
+
+export const useAccessibilityState = (
+  pluginConfiguration: Record<string, any> = {}
+) => {
+  const accessibilityManager = useAccessibilityManager(pluginConfiguration);
+
+  const [state, setState] = useState<AccessibilityState>(
+    accessibilityManager.getState()
+  );
+
+  useEffect(() => {
+    const subscription = accessibilityManager
+      .getStateAsObservable()
+      .subscribe(setState);
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return state;
+};

package/appUtils/accessibilityManager/index.ts

@@ -36,7 +36,20 @@ export class AccessibilityManager {
     false
   );
 
-  private constructor() {}
+  private constructor() {
+    this.ttsManager
+      .getScreenReaderEnabledAsObservable()
+      .subscribe((enabled) => {
+        const state = this.state$.getValue();
+
+        if (state.screenReaderEnabled !== enabled) {
+          this.state$.next({
+            ...state,
+            screenReaderEnabled: enabled,
+          });
+        }
+      });
+  }
 
   public static getInstance(): AccessibilityManager {
     if (!AccessibilityManager._instance) {
@@ -92,8 +105,15 @@ export class AccessibilityManager {
   /**
    * 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
+   * Does nothing if screen reader is not enabled
    */
   public addHeading(heading: string) {
+    const state = this.state$.getValue();
+
+    if (!state.screenReaderEnabled) {
+      return;
+    }
+
     if (!this.pendingFocusId) {
       this.pendingFocusId = Date.now().toString();
     }
@@ -108,6 +128,7 @@ export class AccessibilityManager {
    *
    * Implements a delay mechanism to reduce noise during rapid navigation.
    * Only the most recent announcement will be read after the delay period.
+   * Does nothing if screen reader is not enabled
    */
   public readText({
     text,
@@ -116,6 +137,12 @@ export class AccessibilityManager {
     text: string;
     keyOfLocalizedText?: string;
   }) {
+    const state = this.state$.getValue();
+
+    if (!state.screenReaderEnabled) {
+      return;
+    }
+
     let textToRead = text;
 
     if (keyOfLocalizedText) {

package/appUtils/accessibilityManager/utils.ts

@@ -12,13 +12,44 @@ export function calculateReadingTime(
   minimumPause: number = 500,
   announcementDelay: number = 700
 ): number {
-  const words = text
-    .trim()
+  const trimmed = text.trim();
+
+  // Count words (split on whitespace and punctuation, keep alnum boundaries)
+  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],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,12 +1,20 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
-import { isCurrentFocusOn } from "../focusManagerAux/utils";
+import {
+  isCurrentFocusOn,
+  isChildOf as isChildOfUtils,
+} from "../focusManagerAux/utils";
 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;
 
 /**
@@ -180,10 +188,14 @@ export const focusManager = (function () {
   function register({ id, component }) {
     const { isGroup = false } = component;
 
+    emitRegistered(id);
+
     return isGroup ? registerGroup(id, component) : registerItem(id, component);
   }
 
   function unregister(id, { group = false } = {}) {
+    emitUnregistered(id);
+
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
@@ -400,6 +412,10 @@ export const focusManager = (function () {
     return id && isCurrentFocusOn(id, currentFocusNode);
   }
 
+  function isChildOf(childId, parentId): boolean {
+    return isChildOfUtils(focusableTree, childId, parentId);
+  }
+
   return {
     on,
     invokeHandler,
@@ -422,5 +438,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     getPreferredFocusChild,
     isFocusOn,
+    isChildOf,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -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

@@ -0,0 +1,35 @@
+import { ReplaySubject } from "rxjs";
+import { filter } 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";
+
+type FocusableID = string;
+type RegistrationEvent = {
+  id: FocusableID;
+  registered: boolean;
+};
+
+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 emitRegistered = (id: Option<FocusableID>): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: true });
+  }
+};
+
+export const emitUnregistered = (id: Option<FocusableID>): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: false });
+  }
+};

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,