@applicaster/zapp-react-native-utils 13.0.8 → 13.0.9-alpha.1049520314

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

@@ -16,7 +16,8 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
 
 /**
  * If onCellTap is defined execute the function and
@@ -42,10 +43,12 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +86,9 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
+          screenStateStore,
         });
       }
 
@@ -117,6 +123,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -9,6 +9,9 @@ jest.mock("../../navigation");
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
   () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
     useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
   })
 );

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -2,15 +2,12 @@ import { renderHook } from "@testing-library/react-hooks";
 import * as R from "ramda";
 import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
 import * as reactReduxModules from "react-redux";
-import { Provider } from "react-redux";
 import * as React from "react";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
 import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useFeedLoader } from "../useFeedLoader";
-
-const mockStore = configureStore([thunk]);
+import { WrappedWithProviders } from "../../../testUtils";
+import { ScreenStateResolver } from "../../../appUtils/contextKeysManager/contextResolver";
 
 jest.useFakeTimers({ legacyFakeTimers: true });
 
@@ -55,13 +52,15 @@ const mockZappPipesData = {
 
 describe("useFeedLoader", () => {
   describe("with cached feed url", () => {
-    const store = mockStore({
+    const store = {
       plugins: [],
       zappPipes: { "test://testfakeurl": mockZappPipesData },
-    });
+    };
 
-    const wrapper: React.FC<any> = ({ children }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || store}>
+        {children}
+      </WrappedWithProviders>
     );
 
     it("returns cached feed", () => {
@@ -110,8 +109,10 @@ describe("useFeedLoader", () => {
   describe("without cached feeds", () => {
     const feedUrl = "test://testfakeurl2";
 
-    const wrapper: React.FC<any> = ({ children, store }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store}>
+        {children}
+      </WrappedWithProviders>
     );
 
     it("It loads data for new url and returns it", () => {
@@ -123,10 +124,10 @@ describe("useFeedLoader", () => {
         .spyOn(zappPipesModule, "loadPipesData")
         .mockImplementation(jest.fn());
 
-      const initialStore = mockStore({
+      const initialStore = {
         plugins: [],
         zappPipes: { "test://testfakeurl": "foobar" },
-      });
+      };
 
       const { result, rerender } = renderHook(
         () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
@@ -135,15 +136,19 @@ describe("useFeedLoader", () => {
 
       expect(result.current.data).toBeNull();
 
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+      expect(loadPipesDataSpy).toHaveBeenCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        callback: expect.any(Function),
+        resolvers: {
+          screen: expect.any(ScreenStateResolver),
+        },
       });
 
-      const store2 = mockStore({
+      const store2 = {
         plugins: [],
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
-      });
+      };
 
       rerender({ store: store2 });
 
@@ -164,10 +169,10 @@ describe("useFeedLoader", () => {
         .spyOn(reactReduxModules, "useDispatch")
         .mockImplementation(() => jest.fn());
 
-      const initialStore = mockStore({
+      const initialStore = {
         plugins: [],
         zappPipes: { "test://testfakeurl": "foobar" },
-      });
+      };
 
       const { result, rerender } = renderHook(
         () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
@@ -176,15 +181,22 @@ describe("useFeedLoader", () => {
 
       expect(result.current.data).toBeNull();
 
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+      expect(loadPipesDataSpy.mock.calls[0][0]).toBe(feedUrl);
+
+      expect(loadPipesDataSpy.mock.calls[0][1]).toMatchObject({
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: expect.any(Function),
+          },
+        },
       });
 
-      const store2 = mockStore({
+      const store2 = {
         plugins: [],
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
-      });
+      };
 
       rerender({ store: store2 });
 
@@ -197,8 +209,10 @@ describe("useFeedLoader", () => {
     const feedUrl = "test://testfakeurl";
     const feedUrlWithNext = "test://withnexttestfakeurl";
 
-    const wrapper: React.FC<any> = ({ children, store }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || {}}>
+        {children}
+      </WrappedWithProviders>
     );
 
     describe("reloadData", () => {
@@ -211,10 +225,10 @@ describe("useFeedLoader", () => {
           .spyOn(reactReduxModules, "useDispatch")
           .mockImplementation(() => jest.fn());
 
-        const initialStore = mockStore({
+        const initialStore = {
           plugins: [],
           zappPipes: { [feedUrl]: "foobar" },
-        });
+        };
 
         const { result } = renderHook(() => useFeedLoader({ feedUrl }), {
           wrapper,
@@ -223,11 +237,24 @@ describe("useFeedLoader", () => {
 
         const { reloadData } = result.current;
 
-        reloadData();
+        reloadData?.();
+
+        expect(loadPipesDataSpy).toHaveBeenCalled();
+
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][0]
+        ).toBe(feedUrl);
 
-        expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][1]
+        ).toMatchObject({
           clearCache: true,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: expect.any(Function),
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -247,10 +274,10 @@ describe("useFeedLoader", () => {
           .spyOn(reactReduxModules, "useDispatch")
           .mockImplementation(() => jest.fn());
 
-        const initialStore = mockStore({
+        const initialStore = {
           plugins: [],
           zappPipes: { [feedUrlWithNext]: { data: { next: nextUrl } } },
-        });
+        };
 
         const { result } = renderHook(
           () => useFeedLoader({ feedUrl: feedUrlWithNext }),
@@ -262,11 +289,24 @@ describe("useFeedLoader", () => {
 
         const { loadNext } = result.current;
 
-        loadNext();
+        loadNext?.();
+
+        expect(loadPipesDataSpy).toHaveBeenCalled();
+
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][0]
+        ).toBe(nextUrl);
 
-        expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][1]
+        ).toMatchObject({
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: expect.any(Function),
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/index.ts

@@ -11,3 +11,5 @@ export { useBuildPipesUrl } from "./useBuildPipesUrl";
 export { usePipesCacheReset } from "./usePipesCacheReset";
 
 export { useBatchLoading } from "./useBatchLoading";
+
+export { useLoadPipesDataDispatch } from "./useLoadPipesDataDispatch";