@applicaster/zapp-react-native-utils 13.0.16-rc.0 → 13.0.17-alpha.1002505828

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

@@ -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/OverlayObserver/OverlaysObserver.ts

@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../../logger";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import {
   findPluginByIdentifier,
+  loadFeedEntry,
   loadFeedAndPrefetchThumbnailImage,
   parseTimeToSeconds,
   retrieveFeedUrl,
@@ -41,6 +42,19 @@ export type ChapterMarkerEvent = {
   actions: ActionChapter[];
 };
 
+export type LiveMetadataEvent = {
+  programId: string;
+  assetId: string;
+  title: string;
+  programStartTime: string;
+  programEndTime: string;
+};
+
+export type LiveMetadataConfig = {
+  updateUrl: string;
+  updateInterval: number;
+};
+
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;
@@ -65,11 +79,13 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private liveMetadataSubject: BehaviorSubject<LiveMetadataEvent>;
   private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
   private feedUrl: string;
   private reloadData: () => void;
   private updateTitleAndDescription: (data: any) => void;
   private feedDataInterval: any;
+  private liveMetadataUpdateInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -81,13 +97,17 @@ export class OverlaysObserver {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
 
+    this.player = player;
+    this.entry = player.getEntry();
+
     this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
-      title: player.getEntry()?.title || "",
-      summary: player.getEntry()?.summary || "",
+      title: this.entry?.title || "",
+      summary: this.entry?.summary || "",
     });
 
-    this.entry = player.getEntry();
-    this.player = player;
+    this.liveMetadataSubject = new BehaviorSubject<LiveMetadataEvent>(
+      this.entry?.extensions?.liveMetadata || null
+    );
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
@@ -95,7 +115,9 @@ export class OverlaysObserver {
     this.reloadData = () => {};
     this.updateTitleAndDescription = () => {};
     this.feedDataInterval = null;
+    this.liveMetadataUpdateInterval = null;
     void this.preparePlayNext();
+    void this.prepareLiveMetadata();
   }
 
   private setupFeedDataInterval(interval: number) {
@@ -113,6 +135,13 @@ export class OverlaysObserver {
     }
   }
 
+  public clearLiveMetadataUpdateInterval() {
+    if (this.liveMetadataUpdateInterval) {
+      clearInterval(this.liveMetadataUpdateInterval);
+      this.liveMetadataUpdateInterval = null;
+    }
+  }
+
   public setFeedDataHandlers(
     feedUrl: string,
     reloadData: () => void,
@@ -212,6 +241,48 @@ export class OverlaysObserver {
     }
   };
 
+  prepareLiveMetadata = async () => {
+    if (!this.player?.isLive?.()) {
+      log_debug("prepareLiveMetadata: Player is not live. Skipping...");
+
+      return;
+    }
+
+    const config: LiveMetadataConfig =
+      this.entry?.extensions?.liveMetadataConfig;
+
+    if (!config?.updateUrl || !config?.updateInterval) {
+      log_debug(
+        "prepareLiveMetadata: Live metadata configuration is not available. Skipping...",
+        { config }
+      );
+
+      return;
+    }
+
+    const reloadData = async () => {
+      try {
+        const entry = await loadFeedEntry(config.updateUrl, this.entry);
+
+        this.onLiveMetadataUpdated(entry?.extensions?.liveMetadata || null);
+      } catch (error) {
+        log_error("prepareLiveMetadata: Metadata fetching failed", {
+          error,
+          config,
+        });
+      }
+    };
+
+    log_debug("prepareLiveMetadata: Setting up live metadata observer update", {
+      config,
+    });
+
+    const interval = Number(config?.updateInterval) || 60;
+
+    this.clearLiveMetadataUpdateInterval();
+    this.liveMetadataUpdateInterval = setInterval(reloadData, interval * 1000);
+  };
+
   // TODO: Hack for video end, will be replaced with playlist prev/next in the future
   getPlayNextEntry = () =>
     !this.isCanceledByUser ? this.playNextConfig?.entry : null;
@@ -332,9 +403,11 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.liveMetadataSubject.complete();
     this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
     this.clearFeedDataInterval();
+    this.clearLiveMetadataUpdateInterval();
     this.releasePlayerObserver = null;
   };
 
@@ -367,4 +440,21 @@ export class OverlaysObserver {
         (prev, curr) => prev?.triggerTime === curr?.triggerTime
       )
     );
+
+  private onLiveMetadataUpdated = (liveMetadataEvent: LiveMetadataEvent) => {
+    this.liveMetadataSubject.next(liveMetadataEvent);
+  };
+
+  public getLiveMetadataObservable = (): Observable<LiveMetadataEvent> => {
+    return this.liveMetadataSubject.pipe(
+      distinctUntilChanged(
+        (prev, curr) =>
+          prev?.programId === curr?.programId && prev?.assetId === curr?.assetId
+      )
+    );
+  };
+
+  public getLiveMetadataValue = (): LiveMetadataEvent => {
+    return this.liveMetadataSubject.value;
+  };
 }

package/appUtils/playerManager/OverlayObserver/utils.ts

@@ -92,22 +92,26 @@ export const prefetchImage = (playableItem: ZappEntry, config: any = {}) => {
   }
 };
 
-export const loadFeedAndPrefetchThumbnailImage = async (
-  playNextFeedUrl: string,
-  entry: ZappEntry,
-  playNextPlugin
-) => {
+/**
+ * Loads a feed entry from the given feed URL using the provided Zapp entry as context.
+ *
+ * @param {string} feedUrl - The URL of the feed to load the entry from.
+ * @param {ZappEntry} entry - The Zapp entry to use as context for the request.
+ * @returns {Promise<ZappEntry>} A promise that resolves to the loaded Zapp entry.
+ * @throws {Error} If the feed loading fails or no entry is found in the response.
+ */
+export const loadFeedEntry = async (feedUrl: string, entry: ZappEntry) => {
   const requestBuilder = new RequestBuilder()
     .setEntryContext(entry)
     .setScreenContext({} as ZappRiver)
-    .setUrl(playNextFeedUrl);
+    .setUrl(feedUrl);
 
   const responseObject = await requestBuilder.call<ZappEntry>();
   const responseHelper = new PipesClientResponseHelper(responseObject);
 
   if (responseHelper.error) {
     log_error(
-      `loadFeedAndPrefetchThumbnailImage: loading failed with error: ${responseHelper.error.message}. Play next observer, will not be executed`,
+      `loadFeedEntry: loading failed with error: ${responseHelper.error.message}. Observer will not be executed`,
       {
         response: responseHelper.getLogsData(),
       }
@@ -116,29 +120,37 @@ export const loadFeedAndPrefetchThumbnailImage = async (
     throw responseHelper.error;
   } else {
     log_info(
-      `loadFeedAndPrefetchThumbnailImage: Play next url was successfully loaded for url: ${playNextFeedUrl}. Prefetching image`,
+      `loadFeedEntry: Feed was successfully loaded for url: ${feedUrl}`,
       responseHelper.getLogsData()
     );
 
-    const playNextEntry = responseHelper.responseData?.entry[0];
+    const entry = responseHelper.responseData?.entry[0];
 
-    if (!playNextEntry) {
-      log_error(
-        "loadFeedAndPrefetchThumbnailImage: Can not retrieve play next entry, feed was loaded but no entry was found",
-        responseHelper.getLogsData()
-      );
+    if (!entry) {
+      const error =
+        "loadFeedEntry: Can not retrieve entry, feed was loaded but no entry was found";
 
-      throw new Error(
-        "Can not retrieve play next entry, feed was loaded but no entry was found"
-      );
-    }
+      log_error(error, responseHelper.getLogsData());
 
-    prefetchImage(playNextEntry, playNextPlugin?.configuration);
+      throw new Error(error);
+    }
 
-    return playNextEntry;
+    return entry;
   }
 };
 
+export const loadFeedAndPrefetchThumbnailImage = async (
+  playNextFeedUrl: string,
+  entry: ZappEntry,
+  playNextPlugin
+) => {
+  const playNextEntry = await loadFeedEntry(playNextFeedUrl, entry);
+
+  prefetchImage(playNextEntry, playNextPlugin?.configuration);
+
+  return playNextEntry;
+};
+
 export const findPluginByIdentifier = (
   identifier: string,
   plugins: ZappPlugin[]

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.16-rc.0",
+  "version": "13.0.17-alpha.1002505828",
   "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.16-rc.0",
+    "@applicaster/applicaster-types": "13.0.17-alpha.1002505828",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/usePlayerTTS.ts

@@ -1,14 +1,19 @@
 import * as React from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import {
+  useAccessibilityManager,
+  useAccessibilityState,
+} from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
 
 export const usePlayerTTS = () => {
   const player = usePlayer();
   const accessibilityManager = useAccessibilityManager({});
+  const accessibilityState = useAccessibilityState();
+  const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
 
   React.useEffect(() => {
-    if (player && accessibilityManager) {
+    if (player && accessibilityManager && isScreenReaderEnabled) {
       const playerTTS = new PlayerTTS(player, accessibilityManager);
       const unsubscribe = playerTTS.init();
 
@@ -17,5 +22,5 @@ export const usePlayerTTS = () => {
         playerTTS.destroy();
       };
     }
-  }, [player, accessibilityManager]);
+  }, [player, accessibilityManager, isScreenReaderEnabled]);
 };