@applicaster/zapp-react-native-utils 13.0.7-alpha.7163853950 → 13.0.7

package/appUtils/accessibilityManager/const.ts

@@ -65,8 +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",
-  },
 } 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,4 +1,3 @@
-import * as R from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform/platformUtils";
@@ -9,10 +8,8 @@ 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 = 160;
   private MINIMUM_PAUSE = 500;
-  private ANNOUNCEMENT_DELAY = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -28,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() {}
 
@@ -45,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
    *
@@ -75,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 {
@@ -96,11 +65,9 @@ export class AccessibilityManager {
   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
-      ) + 300
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
     );
   }
 
@@ -109,20 +76,12 @@ export class AccessibilityManager {
    * 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,
@@ -153,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);
     }
@@ -185,49 +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 = this.calculateReadingTime(heading);
-
-    this.headingTimeout = setTimeout(() => {
-      this.processHeadingQueue(textToRead, focusId);
-    }, pauseTime);
-  }
-
   public getButtonAccessibilityProps(name: string): AccessibilityProps {
     const buttonName = _.toString(name);
 
@@ -235,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,
       };
     }
 
@@ -257,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",
     };
   }
 
@@ -320,11 +196,4 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
-
-  private clearAnnouncement() {
-    if (this.announcementDelayTimeout) {
-      clearTimeout(this.announcementDelayTimeout);
-      this.announcementDelayTimeout = null;
-    }
-  }
 }

package/appUtils/platform/platformUtils.ts

@@ -212,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) {
@@ -232,47 +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) {
-    // Estimate reading time based on word count (160 words per minute)
-    const words = text.trim().split(/\s+/).length;
-    const readingTime = Math.max(500, (words / 160) * 60 * 1000) + 300;
-
-    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.7-alpha.7163853950",
+  "version": "13.0.7",
   "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.7-alpha.7163853950",
+    "@applicaster/applicaster-types": "13.0.7",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/PlayerTTS/PlayerTTS.ts

@@ -1,230 +0,0 @@
-import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
-import uuidv4 from "uuid/v4";
-import { Player } from "../../appUtils/playerManager/player";
-
-enum SEEK_DIRECTION {
-  FORWARD = "forward",
-  REWIND = "back",
-}
-
-export class PlayerTTS {
-  private player: Player;
-  private accessibilityManager: AccessibilityManager;
-  private seekStartPosition: number | null = null;
-  private isSeeking: boolean = false;
-  private listenerId: string;
-  private isInitialPlayerOpen: boolean = true;
-
-  constructor(player: Player, accessibilityManager: AccessibilityManager) {
-    this.player = player;
-    this.accessibilityManager = accessibilityManager;
-    this.listenerId = `player-tts-${uuidv4()}`;
-  }
-
-  private numberToWords(num: number): string {
-    const ones = [
-      "",
-      "one",
-      "two",
-      "three",
-      "four",
-      "five",
-      "six",
-      "seven",
-      "eight",
-      "nine",
-      "ten",
-      "eleven",
-      "twelve",
-      "thirteen",
-      "fourteen",
-      "fifteen",
-      "sixteen",
-      "seventeen",
-      "eighteen",
-      "nineteen",
-    ];
-
-    const tens = [
-      "",
-      "",
-      "twenty",
-      "thirty",
-      "forty",
-      "fifty",
-      "sixty",
-      "seventy",
-      "eighty",
-      "ninety",
-    ];
-
-    if (num === 0) return "zero";
-    if (num < 20) return ones[num];
-
-    const ten = Math.floor(num / 10);
-    const one = num % 10;
-
-    if (one === 0) return tens[ten];
-
-    return `${tens[ten]} ${ones[one]}`;
-  }
-
-  private secondsToTime(
-    seconds: number,
-    format: "natural" | "standard" = "natural"
-  ): string {
-    if (seconds < 0) return format === "natural" ? "zero" : "0";
-
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-
-    if (format === "standard") {
-      if (minutes === 0) {
-        if (remainingSeconds === 0) return "0";
-
-        return `${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`;
-      }
-
-      if (remainingSeconds === 0) {
-        return `${minutes} minute${minutes !== 1 ? "s" : ""}`;
-      }
-
-      return `${minutes} minute${minutes !== 1 ? "s" : ""} ${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`;
-    } else {
-      if (minutes === 0) {
-        if (remainingSeconds === 0) return "zero";
-
-        if (remainingSeconds < 10) {
-          return `zero o ${this.numberToWords(remainingSeconds)}`;
-        }
-
-        return `zero ${this.numberToWords(remainingSeconds)}`;
-      }
-
-      if (remainingSeconds === 0) {
-        return `${this.numberToWords(minutes)}`;
-      }
-
-      if (remainingSeconds < 10) {
-        return `${this.numberToWords(minutes)} o ${this.numberToWords(remainingSeconds)}`;
-      }
-
-      return `${this.numberToWords(minutes)} ${this.numberToWords(remainingSeconds)}`;
-    }
-  }
-
-  private announceLoading = () => {
-    this.accessibilityManager.addHeading("Loading");
-  };
-
-  private announcePause = () => {
-    if (!this.isSeeking) {
-      this.accessibilityManager.addHeading(
-        `Paused - ${this.secondsToTime(this.player.playerState.contentPosition, "standard")}`
-      );
-    }
-  };
-
-  private announceBufferComplete = (event: any) => {
-    if (this.isInitialPlayerOpen) {
-      const timeRemaining = event.duration - event.currentTime;
-      const title = (this.player.entry.title as string) || "";
-      const summary = (this.player.entry.summary as string) || "";
-      this.accessibilityManager.addHeading(`Playing - ${title}`);
-      this.accessibilityManager.addHeading(summary);
-
-      this.accessibilityManager.addHeading(
-        `Playing from ${this.secondsToTime(event.currentTime, "standard")}`
-      );
-
-      this.accessibilityManager.addHeading(
-        `${this.secondsToTime(timeRemaining, "standard")} remaining.`
-      );
-
-      this.accessibilityManager.setInitialPlayerAnnouncementReady();
-      this.isInitialPlayerOpen = false;
-    }
-  };
-
-  private announceResume = () => {
-    if (!this.isSeeking && !this.isInitialPlayerOpen) {
-      this.accessibilityManager.addHeading(
-        `Playing - ${this.secondsToTime(this.player.playerState.contentPosition, "standard")}`
-      );
-    }
-  };
-
-  private handleVideoProgress = (event: any) => {
-    if (event.currentTime > 0) {
-      this.seekStartPosition = event.currentTime;
-    }
-  };
-
-  private handleSeekComplete = (event: any) => {
-    if (this.seekStartPosition !== null) {
-      const seekDirection =
-        event.currentTime > this.seekStartPosition
-          ? SEEK_DIRECTION.FORWARD
-          : SEEK_DIRECTION.REWIND;
-
-      const seekAmount = Math.round(
-        Math.abs(event.currentTime - this.seekStartPosition)
-      );
-
-      this.accessibilityManager.readText({
-        text: `Skipped ${seekDirection} ${this.secondsToTime(seekAmount, "standard")}`,
-      });
-
-      this.seekStartPosition = event.currentTime;
-    }
-
-    this.isSeeking = false;
-  };
-
-  private handleSeekStart = () => {
-    this.isSeeking = true;
-  };
-
-  private handlePlayerClose = () => {
-    this.isInitialPlayerOpen = true;
-    this.accessibilityManager.resetInitialPlayerAnnouncementReady();
-  };
-
-  private announceAdBegin = (event: any) => {
-    if (event?.ad?.data?.duration) {
-      this.accessibilityManager.readText({
-        text: `Sponsored. Ends in ${this.secondsToTime(event.ad.data.duration, "standard")}`,
-      });
-    }
-  };
-
-  public init(): () => void {
-    if (!this.player) {
-      return () => {};
-    }
-
-    return this.player.addListener({
-      id: this.listenerId,
-      listener: {
-        onBufferStart: this.announceLoading,
-        onBufferComplete: this.announceBufferComplete,
-        onPlayerResume: this.announceResume,
-        onPlayerPause: this.announcePause,
-        onVideoProgress: this.handleVideoProgress,
-        onPlayerSeekStart: this.handleSeekStart,
-        onPlayerSeekComplete: this.handleSeekComplete,
-        onPlayerClose: this.handlePlayerClose,
-        onAdBegin: this.announceAdBegin,
-      },
-    });
-  }
-
-  public destroy(): void {
-    if (this.player) {
-      this.player.removeListener(this.listenerId);
-    }
-
-    this.seekStartPosition = null;
-    this.handlePlayerClose();
-  }
-}

package/playerUtils/PlayerTTS/index.ts

@@ -1 +0,0 @@
-export { PlayerTTS } from "./PlayerTTS";

package/playerUtils/usePlayerTTS.ts

@@ -1,21 +0,0 @@
-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 { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
-
-export const usePlayerTTS = () => {
-  const player = usePlayer();
-  const accessibilityManager = useAccessibilityManager({});
-
-  React.useEffect(() => {
-    if (player && accessibilityManager) {
-      const playerTTS = new PlayerTTS(player, accessibilityManager);
-      const unsubscribe = playerTTS.init();
-
-      return () => {
-        unsubscribe();
-        playerTTS.destroy();
-      };
-    }
-  }, [player, accessibilityManager]);
-};