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

package/appUtils/accessibilityManager/const.ts

@@ -65,4 +65,8 @@ 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/index.ts

@@ -8,8 +8,10 @@ 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,
@@ -25,6 +27,9 @@ 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 constructor() {}
 
@@ -65,9 +70,11 @@ 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
+    return (
+      Math.max(
+        this.MINIMUM_PAUSE,
+        (words / this.WORDS_PER_MINUTE) * 60 * 1000
+      ) + 300
     );
   }
 
@@ -76,12 +83,20 @@ 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,
@@ -112,19 +127,27 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    if (this.headingQueue.length > 0) {
-      const heading = this.headingQueue.shift()!;
-      this.ttsManager?.readText(heading);
+    const focusId = this.pendingFocusId || Date.now().toString();
+    this.currentFocusId = focusId;
+    this.pendingFocusId = null;
 
-      if (this.headingTimeout) {
-        clearTimeout(this.headingTimeout);
-      }
+    this.clearAnnouncement();
 
-      const pauseTime = this.calculateReadingTime(heading);
+    this.announcementDelayTimeout = setTimeout(() => {
+      this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
+    }, this.ANNOUNCEMENT_DELAY);
+  }
 
-      this.headingTimeout = setTimeout(() => {
-        this.ttsManager?.readText(textToRead);
-      }, pauseTime);
+  /**
+   * 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);
     } else {
       this.ttsManager?.readText(textToRead);
     }
@@ -136,6 +159,49 @@ 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);
 
@@ -143,12 +209,15 @@ 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,
       };
     }
 
@@ -162,23 +231,52 @@ 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: "textbox" as AccessibilityRole,
-      "aria-role": "textbox",
+      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,
     };
   }
 
@@ -196,4 +294,11 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
+
+  private clearAnnouncement() {
+    if (this.announcementDelayTimeout) {
+      clearTimeout(this.announcementDelayTimeout);
+      this.announcementDelayTimeout = null;
+    }
+  }
 }

package/appUtils/platform/platformUtils.ts

@@ -214,6 +214,8 @@ export class TTSManager {
   readText(text: string) {
     if (isSamsungPlatform() && window.speechSynthesis) {
       const utterance = new SpeechSynthesisUtterance(text);
+
+      window.speechSynthesis.cancel(); // Cancel previous speech before speaking new text
       window.speechSynthesis.speak(utterance);
     }
 
@@ -233,6 +235,7 @@ export class TTSManager {
           },
           parameters: {
             text,
+            clear: true, // Clear any pending speech before speaking new text
           },
         });
       } catch (error) {

package/index.d.ts

@@ -139,10 +139,13 @@ 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.6",
+  "version": "13.0.7-alpha.2991546311",
   "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.6",
+    "@applicaster/applicaster-types": "13.0.7-alpha.2991546311",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/PlayerTTS/PlayerTTS.ts

@@ -0,0 +1,213 @@
+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.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;
+  };
+
+  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,
+      },
+    });
+  }
+
+  public destroy(): void {
+    if (this.player) {
+      this.player.removeListener(this.listenerId);
+    }
+
+    this.seekStartPosition = null;
+  }
+}

package/playerUtils/PlayerTTS/index.ts

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

package/playerUtils/usePlayerTTS.ts

@@ -0,0 +1,21 @@
+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]);
+};