@applicaster/zapp-react-native-utils 14.0.0-alpha.2482261241 → 14.0.0-alpha.2802628909

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/feed/useFeedLoader.tsx

@@ -37,15 +37,6 @@ export const useFeedLoader = ({
   mapping,
   pipesOptions = {},
 }: Props): FeedLoaderResponse => {
-  useEffect(() => {
-    if (!feedUrl) {
-      logger.warning({
-        message: "Required parameter feedUrl is missing",
-        data: { feedUrl },
-      });
-    }
-  }, []);
-
   const isInitialRender = useIsInitialRender();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });

package/reactHooks/feed/useInflatedUrl.ts

@@ -18,6 +18,7 @@ import {
 } from "@applicaster/zapp-pipes-v2-client";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { ENDPOINT_TAGS } from "../../types";
+import { isNilOrEmpty } from "../../reactUtils/helpers";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -75,15 +76,19 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
    * https://foo.com/shows/A1234
    */
 
-  if (!source) {
-    // eslint-disable-next-line no-console
-    console.error("source is empty", {
-      source,
-      contexts,
-      mapping,
-    });
+  if (!isNilOrEmpty(mapping)) {
+    if (!source) {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        throw new Error(
+          "getInflatedDataSourceUrl: source is empty while mapping is provided"
+        );
+      }
 
-    return null;
+      return null;
+    }
+  } else {
+    return source || null;
   }
 
   // Hack because in tv we expect to get key names instead of values from the fake entry
@@ -193,28 +198,17 @@ export function useInflatedUrl({
 
   const url = useMemo(
     () =>
-      mapping
-        ? getInflatedDataSourceUrl({
-            source: feedUrl,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : feedUrl,
-    [feedUrl, mapping]
+      getInflatedDataSourceUrl({
+        source: feedUrl,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      }),
+    [entryContext, feedUrl, mapping, screenContext, searchContext]
   );
 
-  if (!feedUrl) {
-    logger.warning({
-      message: "Required parameter feedUrl is missing",
-      data: { feedUrl },
-    });
-
-    return null;
-  }
-
   return url;
 }

package/reactHooks/feed/useLoadPipesDataDispatch.ts

@@ -30,7 +30,13 @@ export const useLoadPipesDataDispatch = () => {
   return React.useCallback(
     (
       url: string,
-      options = {},
+      options: {
+        callback?: (data: unknown, error?: Error | null | undefined) => void;
+        riverId?: string;
+        clearCache?: boolean;
+        silentRefresh?: boolean;
+        parentFeed?: string;
+      } = {},
       {
         withResolvers = false,
         withScreenRouteMapping = false,

package/reactHooks/layout/index.ts

@@ -44,7 +44,7 @@ export function useStatusBarHeight() {
 
   return platformSelect({
     ios: StatusBarHeight,
-    android: StatusBar.currentHeight,
+    android: StatusBar.currentHeight ?? 0,
     default: 0,
   });
 }

package/screenPickerUtils/index.ts

@@ -5,3 +5,9 @@ export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
 export const SCREEN_PICKER_CONTAINER = "ScreenPickerContainer";
 
 export const getScreenPickerId = (id) => `${SCREEN_PICKER_CONTAINER}.${id}`;
+
+export const getScreenPickerSelectorContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-selector`;
+
+export const getScreenPickerContentContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-container`;

package/utils/__tests__/endsWith.test.ts

@@ -0,0 +1,30 @@
+import { endsWith } from "../endsWith";
+
+describe("endsWith", () => {
+  it("returns false when str is null", () => {
+    expect(endsWith("a", null)).toBe(false);
+  });
+
+  it("returns false when str is undefined", () => {
+    expect(endsWith("a", undefined)).toBe(false);
+  });
+
+  it("returns true when string ends with target", () => {
+    expect(endsWith("lo", "hello")).toBe(true);
+    expect(endsWith("", "hello")).toBe(true); // empty target always matches
+  });
+
+  it("returns false when string does not end with target", () => {
+    expect(endsWith("yo", "hello")).toBe(false);
+  });
+
+  it("works with single character target", () => {
+    expect(endsWith("o", "hello")).toBe(true);
+    expect(endsWith("x", "hello")).toBe(false);
+  });
+
+  it("is case-sensitive", () => {
+    expect(endsWith("Lo", "hello")).toBe(false);
+    expect(endsWith("lo", "hello")).toBe(true);
+  });
+});

package/utils/__tests__/omit.test.ts

@@ -0,0 +1,19 @@
+import { omit } from "../omit";
+
+test("example 1", () => {
+  const path = ["a", "b", "c"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = {};
+
+  expect(omit(path, record)).toEqual(output);
+});
+
+test("example 2", () => {
+  const path = ["a", "b"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = { c: 3 };
+
+  expect(omit(path, record)).toEqual(output);
+});

package/utils/__tests__/path.test.ts

@@ -0,0 +1,33 @@
+import { path } from "../path";
+
+test("example 1", () => {
+  const route = ["a", "b", "c"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = 1;
+
+  expect(path(route, xs)).toEqual(output);
+});
+
+test("example 2", () => {
+  const route = ["a", "b"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = { c: 1 };
+
+  expect(path(route, xs)).toEqual(output);
+});
+
+test("example 3", () => {
+  const route = ["a", "b", "x"];
+  const xs = { a: { b: { c: 1 } } };
+
+  expect(path(route, xs)).toBeUndefined();
+});
+
+test("example 4", () => {
+  const route = ["a", "b", "c"];
+  const xs = undefined;
+
+  expect(path(route, xs)).toBeUndefined();
+});

package/utils/__tests__/take.test.ts

@@ -0,0 +1,40 @@
+import { take } from "../take";
+
+describe("take", () => {
+  it("takes n elements from the beginning", () => {
+    expect(take(2, [1, 2, 3])).toEqual([1, 2]);
+  });
+
+  it("returns the whole array if n is larger than length", () => {
+    expect(take(5, [1, 2, 3])).toEqual([1, 2, 3]);
+  });
+
+  it("returns empty array if n is 0", () => {
+    expect(take(0, [1, 2, 3])).toEqual([]);
+  });
+
+  it("returns empty array for empty input array", () => {
+    expect(take(2, [])).toEqual([]);
+  });
+
+  it("returns empty array if n is negative", () => {
+    expect(take(-1, [1, 2, 3])).toEqual([]);
+  });
+
+  it("works with strings in array", () => {
+    expect(take(2, ["a", "b", "c"])).toEqual(["a", "b"]);
+  });
+
+  it("works with objects in array", () => {
+    const arr = [{ id: 1 }, { id: 2 }];
+    expect(take(1, arr)).toEqual([{ id: 1 }]);
+  });
+
+  it("returns empty array if input is not an array", () => {
+    // @ts-expect-error testing non-array input
+    expect(take(2, null)).toEqual([]);
+
+    // @ts-expect-error testing non-array input
+    expect(take(2, undefined)).toEqual([]);
+  });
+});

package/utils/endsWith.ts

@@ -0,0 +1,9 @@
+import { isNil } from "lodash";
+
+export const endsWith = (target, str) => {
+  if (isNil(str)) {
+    return false;
+  }
+
+  return str.endsWith(target);
+};

package/utils/index.ts

@@ -8,6 +8,14 @@ export { find } from "./find";
 
 export { pathOr } from "./pathOr";
 
+export { path } from "./path";
+
+export { omit } from "./omit";
+
+export { endsWith } from "./endsWith";
+
+export { take } from "./take";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -19,10 +27,13 @@ export {
   has,
   flatMap,
   difference,
-  take,
   pick,
   map,
   trim,
   toString,
   last,
+  toLower,
+  isEqual as equals,
+  flowRight as compose,
+  partial,
 } from "lodash";

package/utils/omit.ts

@@ -0,0 +1,5 @@
+import { omit as Lodash_omit } from "lodash";
+
+export const omit = (path, record) => {
+  return Lodash_omit(record, path);
+};