@applicaster/zapp-react-native-utils 14.0.0-alpha.5333112458 → 14.0.0-alpha.5365702091

package/playerUtils/PlayerTTS/PlayerTTS.ts

@@ -0,0 +1,359 @@
+import uuidv4 from "uuid/v4";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "Player",
+  category: "PlayerTTS",
+});
+
+enum SEEK_DIRECTION {
+  FORWARD = "forward",
+  REWIND = "back",
+}
+
+const hasPrerollAds = (entry: ZappEntry): boolean => {
+  const videoAds = entry?.extensions?.video_ads;
+
+  if (!videoAds) {
+    return false;
+  }
+
+  // If it's a string (VMAP URL), assume it might have preroll
+  if (typeof videoAds === "string") {
+    return true;
+  }
+
+  // If it's an array, check for preroll offset
+  if (Array.isArray(videoAds)) {
+    return videoAds.some(
+      (ad: ZappVideoAdExtension) => ad.offset === "preroll" || ad.offset === 0
+    );
+  }
+
+  return false;
+};
+
+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;
+  private isPrerollActive: boolean = false;
+  private hasPrerollAds: boolean = false; // Track if preroll ads are expected
+
+  constructor(player: Player, accessibilityManager: AccessibilityManager) {
+    this.player = player;
+    this.accessibilityManager = accessibilityManager;
+    this.listenerId = `player-tts-${uuidv4()}`;
+    this.hasPrerollAds = hasPrerollAds(player.entry);
+
+    log_debug("PlayerTTS initialized", {
+      hasPrerollAds: this.hasPrerollAds,
+      listenerId: this.listenerId,
+      entryTitle: player.entry.title,
+    });
+  }
+
+  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;
+
+    return one === 0 ? tens[ten] : `${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") {
+      const parts = [];
+
+      if (minutes > 0) {
+        parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
+      }
+
+      if (remainingSeconds > 0) {
+        parts.push(
+          `${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`
+        );
+      }
+
+      return parts.length > 0 ? parts.join(" ") : "0";
+    } 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 announcePause = () => {
+    if (!this.isSeeking) {
+      this.accessibilityManager.addHeading(
+        `Paused - ${this.secondsToTime(this.player.playerState.contentPosition, "standard")}`
+      );
+    }
+  };
+
+  private announceContentStart(
+    options: {
+      currentTime?: number;
+      duration?: number;
+      useReadText?: boolean;
+    } = {}
+  ): void {
+    const { currentTime, duration, useReadText = false } = options;
+    const state = this.player.playerState;
+
+    const timeRemaining =
+      (duration || state?.contentDuration || 0) -
+      (currentTime || state?.contentPosition || 0);
+
+    const title = (this.player.entry.title as string) || "";
+    const summary = (this.player.entry.summary as string) || "";
+
+    log_debug("Announcing content start", {
+      title,
+      currentTime: currentTime || state?.contentPosition || 0,
+      duration: duration || state?.contentDuration || 0,
+      timeRemaining,
+      useReadText,
+    });
+
+    this.accessibilityManager.addHeading(`Playing - ${title}`);
+    if (summary) this.accessibilityManager.addHeading(summary);
+
+    this.accessibilityManager.addHeading(
+      `Playing from ${this.secondsToTime(currentTime || state?.contentPosition || 0, "standard")}`
+    );
+
+    const remainingText = `${this.secondsToTime(Math.max(0, Math.floor(timeRemaining)), "standard")} remaining.`;
+
+    if (useReadText) {
+      this.accessibilityManager.readText({ text: remainingText });
+    } else {
+      this.accessibilityManager.addHeading(remainingText);
+    }
+
+    this.accessibilityManager.setInitialPlayerAnnouncementReady();
+    this.isInitialPlayerOpen = false;
+  }
+
+  private announceBufferComplete = (event: any) => {
+    // If preroll ads are expected, wait for them to finish before announcing content
+    if (this.hasPrerollAds && this.isInitialPlayerOpen) {
+      log_debug("Waiting for preroll ads to finish", {
+        hasPrerollAds: this.hasPrerollAds,
+        isInitialPlayerOpen: this.isInitialPlayerOpen,
+      });
+
+      return;
+    }
+
+    // Gate content announcement until preroll finishes
+    if (this.isInitialPlayerOpen && !this.isPrerollActive) {
+      log_debug("Buffer complete - announcing content", {
+        currentTime: event.currentTime,
+        duration: event.duration,
+        isPrerollActive: this.isPrerollActive,
+      });
+
+      this.announceContentStart({
+        currentTime: event.currentTime,
+        duration: event.duration,
+      });
+    }
+  };
+
+  private announceResume = () => {
+    if (!this.isSeeking && !this.isInitialPlayerOpen) {
+      log_debug("Player resumed", {
+        contentPosition: this.player.playerState.contentPosition,
+        isSeeking: this.isSeeking,
+        isInitialPlayerOpen: 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)
+      );
+
+      log_debug("Seek completed", {
+        seekDirection,
+        seekAmount,
+        fromPosition: this.seekStartPosition,
+        toPosition: event.currentTime,
+      });
+
+      this.accessibilityManager.readText({
+        text: `Skipped ${seekDirection} ${this.secondsToTime(seekAmount, "standard")}`,
+      });
+
+      this.seekStartPosition = event.currentTime;
+    }
+
+    this.isSeeking = false;
+  };
+
+  private handleSeekStart = () => {
+    log_debug("Seek started");
+    this.isSeeking = true;
+  };
+
+  private handlePlayerClose = () => {
+    log_debug("Player closed - resetting state");
+    this.isInitialPlayerOpen = true;
+    this.accessibilityManager.resetInitialPlayerAnnouncementReady();
+  };
+
+  private announceAdBegin = (event: any) => {
+    this.isPrerollActive = true;
+
+    log_debug("Ad started", {
+      adDuration: event?.ad?.data?.duration,
+      isPrerollActive: this.isPrerollActive,
+    });
+
+    if (event?.ad?.data?.duration) {
+      this.accessibilityManager.readText({
+        text: `Sponsored. Ends in ${this.secondsToTime(event.ad.data.duration, "standard")}`,
+      });
+    }
+  };
+
+  private handleAdEnd = (_event: any) => {
+    this.isPrerollActive = false;
+
+    log_debug("Ad ended", {
+      isPrerollActive: this.isPrerollActive,
+      isInitialPlayerOpen: this.isInitialPlayerOpen,
+    });
+
+    // If initial entry still pending, trigger content announcement using latest player state
+    if (this.isInitialPlayerOpen) {
+      this.announceContentStart({ useReadText: true });
+    }
+  };
+
+  public init(): () => void {
+    if (!this.player) {
+      log_error("Failed to initialize PlayerTTS - no player provided");
+
+      return () => {};
+    }
+
+    log_debug("Initializing PlayerTTS listeners", {
+      listenerId: this.listenerId,
+    });
+
+    return this.player.addListener({
+      id: this.listenerId,
+      listener: {
+        onBufferComplete: this.announceBufferComplete,
+        onPlayerResume: this.announceResume,
+        onPlayerPause: this.announcePause,
+        onVideoProgress: this.handleVideoProgress,
+        onPlayerSeekStart: this.handleSeekStart,
+        onPlayerSeekComplete: this.handleSeekComplete,
+        onPlayerClose: this.handlePlayerClose,
+        onAdBegin: this.announceAdBegin,
+        onAdEnd: this.handleAdEnd,
+        onAdBreakEnd: this.handleAdEnd,
+      },
+    });
+  }
+
+  public destroy(): void {
+    log_debug("Destroying PlayerTTS", {
+      listenerId: this.listenerId,
+    });
+
+    if (this.player) {
+      this.player.removeListener(this.listenerId);
+    }
+
+    this.seekStartPosition = null;
+    this.handlePlayerClose();
+  }
+}

package/playerUtils/PlayerTTS/index.ts

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

package/playerUtils/getPlayerActionButtons.ts

@@ -13,5 +13,5 @@ export const getPlayerActionButtons = (configuration: any) => {
     return [];
   }
 
-  return take(map(buttonsString.split(","), trim), 2);
+  return take(2, map(buttonsString.split(","), trim));
 };

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

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,27 +1,31 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
 
 const mockStore = configureStore();
 
@@ -32,10 +36,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +48,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -26,6 +26,9 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/screen"
+  ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
 }));

package/reactHooks/debugging/__tests__/index.test.js

@@ -12,7 +12,6 @@ describe("Debug utils", () => {
     // Clear the timers object
     Object.keys(timers).forEach((key) => delete timers[key]);
 
-    // Mock performance.now()
     // eslint-disable-next-line no-undef
     performanceNowMock = jest.spyOn(performance, "now");
     performanceNowMock.mockReturnValue(0); // Initial value