@applicaster/zapp-react-native-utils 15.0.0-alpha.9331298916 → 15.0.0-alpha.9423906047

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/index.ios.ts

@@ -188,9 +188,15 @@ export const focusManager = (function () {
   function register({ id, component }) {
     const { isGroup = false } = component;
 
-    emitRegistered(id);
+    if (isGroup) {
+      registerGroup(id, component);
+    } else {
+      registerItem(id, component);
+    }
+
+    const parentId = component?.props?.groupId;
 
-    return isGroup ? registerGroup(id, component) : registerItem(id, component);
+    emitRegistered({ id, parentId, isGroup });
   }
 
   function unregister(id, { group = false } = {}) {

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)

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

@@ -1,5 +1,5 @@
-import { ReplaySubject } from "rxjs";
-import { filter } from "rxjs/operators";
+import { ReplaySubject, Subject } from "rxjs";
+import { filter, switchMap, take } 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";
 
@@ -9,6 +9,15 @@ type RegistrationEvent = {
   registered: boolean;
 };
 
+let focusableViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  parentId: FocusableID;
+}>();
+
+let focusableGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+}>();
+
 const isFocusableButton = (id: Option<FocusableID>): boolean =>
   id && id.includes?.(BUTTON_PREFIX);
 
@@ -22,10 +31,58 @@ export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
     )
   );
 
-export const emitRegistered = (id: Option<FocusableID>): void => {
+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();
+  }
+
+  focusableViewRegistrationSubject$ = new Subject<{
+    id: FocusableID;
+    parentId: FocusableID;
+  }>();
+
+  focusableGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+  }>();
+};
+
+export const firstFocusableViewRegistrationFactory = () =>
+  focusableViewRegistrationSubject$.pipe(
+    take(1), // we care about only first FocusableView registration
+    switchMap(({ parentId }) =>
+      // start waiting registration of its parent
+      focusableGroupRegistrationSubject$.pipe(
+        filter(({ id }) => id === parentId)
+      )
+    ),
+    take(1)
+  );
+
+export const emitRegistered = ({
+  id,
+  parentId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  parentId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
   if (isFocusableButton(id)) {
     registeredSubject$.next({ id, registered: true });
   }
+
+  if (isGroup && id) {
+    focusableGroupRegistrationSubject$.next({ id });
+  }
+
+  if (!isGroup && id && parentId) {
+    focusableViewRegistrationSubject$.next({ id, parentId });
+  }
 };
 
 export const emitUnregistered = (id: Option<FocusableID>): void => {

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);
 

package/appUtils/playerManager/playerNative.ts

@@ -15,6 +15,22 @@ const logger = createLogger({
 
 const { log_warning } = logger;
 
+interface PlayerMethods {
+  seeking?: (position: number) => void;
+  forward?: (deltaTime: number) => void;
+  rewind?: (deltaTime: number) => void;
+  startSleepTimer?: (sleepTimestamp: number) => void;
+  selectTrack?: (
+    selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
+  ) => void;
+  setPlaybackRate?: (rate: number) => void;
+  appStateChange?: (appState: string, previousAppState: string) => void;
+  closeNativePlayer?: () => void;
+  togglePlayPause?: () => void;
+}
+
+type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
+
 type PlayerPlugnId = "QuickBrickPlayerPlugin" | "KalturaPlayerPlugin";
 
 type Props = {
@@ -62,7 +78,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
+  currentPlayerComponent = (): PlayerComponent | null =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -121,7 +137,7 @@ export class PlayerNative extends Player {
 
       this.playerState.seekPosition = newPosition;
 
-      this.currentPlayerComponent()?.["seeking"](this.playerState.seekPosition);
+      this.currentPlayerComponent()?.seeking?.(this.playerState.seekPosition);
     }
 
     this.logState(PlayerModuleFuncNames.seekTo, { position });
@@ -135,7 +151,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.forward, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["forward"](deltaTime);
+      this.currentPlayerComponent()?.forward?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -151,7 +167,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.rewind, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["rewind"](deltaTime);
+      this.currentPlayerComponent()?.rewind?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -178,7 +194,7 @@ export class PlayerNative extends Player {
         sleepTimestamp
       )
     ) {
-      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+      this.currentPlayerComponent()?.startSleepTimer?.(sleepTimestamp);
     }
   };
 
@@ -195,11 +211,11 @@ export class PlayerNative extends Player {
   selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
+    this.currentPlayerComponent()?.selectTrack?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
-    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+    this.currentPlayerComponent()?.setPlaybackRate?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -209,19 +225,16 @@ export class PlayerNative extends Player {
   getProps = () => (this.currentPlayerComponent() as any)?.props;
 
   appStateChange = (appState, previousAppState) => {
-    this.currentPlayerComponent()?.["appStateChange"]?.(
-      appState,
-      previousAppState
-    );
+    this.currentPlayerComponent()?.appStateChange?.(appState, previousAppState);
   };
 
   closeNativePlayer = () => {
     // TODO: Delete does not work
-    this.currentPlayerComponent()?.["closeNativePlayer"]?.();
+    this.currentPlayerComponent()?.closeNativePlayer?.();
   };
 
   togglePlayPause = () => {
-    this.currentPlayerComponent()?.["togglePlayPause"]?.();
+    this.currentPlayerComponent()?.togglePlayPause?.();
   };
 
   onVideoLoad = (event) => {
@@ -289,19 +302,19 @@ export class PlayerNative extends Player {
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();
 
-    const disableFullScreen = config?.["disable_fullscreen"];
+    const disableFullScreen = config?.disable_fullscreen;
 
     if (disableFullScreen) {
       return false;
     }
 
-    const isFullScreenAudioPlayer = config?.["full_screen_audio_player"];
+    const isFullScreenAudioPlayer = config?.full_screen_audio_player;
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
 
   supportsNativeControls = (): boolean =>
-    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+    toBooleanWithDefaultFalse(this.getConfig()?.supports_native_controls);
 
   supportNativeCast = (): boolean =>
     toBooleanWithDefaultFalse(

package/cellUtils/index.ts

@@ -505,3 +505,35 @@ export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
     marginRight: value("image_margin_right"),
   };
 };
+
+export const isTextLabel = (key: string): boolean =>
+  key.includes("text_label_") && key.endsWith("_switch");
+
+export const hasTextLabelsEnabled = (
+  configuration: Record<string, any>
+): boolean => {
+  const textLabelsKeys = Object.keys(configuration).filter(isTextLabel);
+
+  const picked = textLabelsKeys.reduce(
+    (acc, key) => {
+      acc[key] = configuration[key];
+
+      return acc;
+    },
+    {} as Record<string, any>
+  );
+
+  const pickedValues = Object.values(picked);
+
+  return pickedValues.some((value) => {
+    if (typeof value === "boolean") {
+      return value === true;
+    }
+
+    if (typeof value === "string") {
+      return value !== "" && value.toLowerCase() !== "false";
+    }
+
+    return Boolean(value);
+  });
+};