@applicaster/zapp-react-native-utils 12.0.0-alpha.4576271826 → 12.0.0-alpha.4620237415

package/appUtils/accessibilityManager/index.ts

@@ -85,18 +85,7 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    if (this.ttsManager) {
-      logger.debug({
-        message: `Reading text: ${textToRead}`,
-        data: {
-          textToRead,
-          text,
-          keyOfLocalizedText,
-        },
-      });
-
-      this.ttsManager.readText(textToRead);
-    }
+    this.ttsManager && this.ttsManager.readText(textToRead);
 
     this.announcements$.next({
       message: textToRead,

package/appUtils/platform/platformUtils.ts

@@ -1,6 +1,10 @@
 import { BehaviorSubject } from "rxjs";
 
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  isLgPlatform,
+  isSamsungPlatform,
+} from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
 
 import { PLATFORM_KEYS, PLATFORMS } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
@@ -25,8 +29,7 @@ const { log_debug } = createLogger({
   parent: utilsLogger,
 });
 
-export const getUserAgent = () =>
-  window?.navigator?.userAgent || global?.navigator?.userAgent;
+export const getUserAgent = () => window?.navigator?.userAgent;
 
 /** VIZIO UTILS */
 
@@ -39,6 +42,8 @@ export const getUserAgent = () =>
 export const isVizioPlatform = () => {
   const userAgent = getUserAgent();
 
+  if (!userAgent) return false;
+
   const isVizioAgent =
     userAgent.includes(PLATFORMS.vizio) ||
     userAgent.includes(PLATFORMS.smartcast) ||
@@ -178,6 +183,34 @@ export class TTSManager {
   }
 
   readText(text: string) {
+    if (isSamsungPlatform() && window.speechSynthesis) {
+      const utterance = new SpeechSynthesisUtterance(text);
+      window.speechSynthesis.speak(utterance);
+    }
+
+    if (isLgPlatform() && window.webOS?.service) {
+      try {
+        window.webOS.service.request("luna://com.webos.service.tts", {
+          method: "speak",
+          onFailure(error: any) {
+            log_debug("There was a failure setting up webOS TTS service", {
+              error,
+            });
+          },
+          onSuccess(response: any) {
+            log_debug("webOS TTS service is configured successfully", {
+              response,
+            });
+          },
+          parameters: {
+            text,
+          },
+        });
+      } catch (error) {
+        log_debug("webOS TTS service error", { error });
+      }
+    }
+
     if (!window.VIZIO?.Chromevox) return;
 
     window.VIZIO.Chromevox.play(text);

package/appUtils/playerManager/playerFactory.ts

@@ -46,7 +46,7 @@ export const playerFactory = (
 
   // TODO: Fix type:
   const playerProtocol: PlayerConstructor =
-    playerPlugin?.module?.playerProtocol(config?.screenConfig);
+    playerPlugin?.module?.playerProtocol(config?.screenConfig, config?.entry);
 
   const playerView = (playerProtocol as any)?.Component || null;
 

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "react";
+import { Player } from "../player";
+import { usePlayer } from "../usePlayer";
+import { useThrottle } from "../../../functionUtils";
+
+/**
+ *
+ * @param listenerId - A unique identifier for the listener.
+ * @param playerId - (Optional) The ID of the player to observe.
+ * @returns The current playback time in seconds.
+ */
+export const usePlayerCurrentTime = (
+  listenerId: string,
+  playerId?: string
+): number | null => {
+  const [currentTime, setCurrentTime] = useState<number | null>(null);
+  const player: Player = usePlayer(playerId);
+
+  const updateCurrentTime = useCallback(() => {
+    if (player) {
+      const newCurrentTime = player.getContentPosition();
+
+      setCurrentTime((prevTime) =>
+        prevTime !== newCurrentTime ? newCurrentTime : prevTime
+      );
+    }
+  }, [player]);
+
+  const { throttledFunction: throttledUpdate, cancel } = useThrottle(
+    updateCurrentTime,
+    1000
+  );
+
+  useEffect(() => {
+    if (player) {
+      throttledUpdate();
+
+      const listeners = {
+        onVideoProgress: throttledUpdate,
+      };
+
+      const id = `${listenerId}_player_current_time`;
+
+      player.addListener({
+        id: id,
+        listener: listeners,
+      });
+
+      return () => {
+        player.removeListener(id);
+        cancel();
+      };
+    }
+  }, [player, listenerId, throttledUpdate, cancel]);
+
+  return currentTime;
+};

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -50,7 +50,7 @@ export const usePlayerControllerSetup = ({
     });
 
     setPlayerController(newPlayerController);
-  }, [playerId, entry?.id, ref.current]);
+  }, [playerId, entry?.id]);
 
   React.useEffect(() => {
     if (!playerController) {
@@ -58,7 +58,7 @@ export const usePlayerControllerSetup = ({
     }
 
     if (!playerManager) {
-      return null;
+      return;
     }
 
     if (playerManager.isPlayerRegistered(playerId)) {

package/arrayUtils/index.ts

@@ -1,5 +1,6 @@
 /* eslint-disable unused-imports/no-unused-vars */
 import * as R from "ramda";
+import { invariant } from "@applicaster/zapp-react-native-utils/errorUtils";
 
 /**
  * shifts an array by the given offset. a negative offset will take items
@@ -100,3 +101,13 @@ export const makeListOf = (value: unknown, size: number): number[] => {
 export function isFilledArray(value: unknown): boolean {
   return R.is(Array, value) && R.length(value) > 0;
 }
+
+// get random item from the list
+export const sample = (xs: unknown[]): unknown => {
+  invariant(R.is(Array, xs), `input value is not a array: ${xs}`);
+  invariant(isFilledArray(xs), `input array is empty: ${xs}`);
+
+  const index = Math.floor(Math.random() * xs.length);
+
+  return xs[index];
+};

package/focusManager/FocusManager.ts

@@ -18,6 +18,7 @@ class FocusManager {
   private static instance: FocusManager;
 
   private _focusedId: string | null = null;
+  private _prevFocusedId: string | null = null;
   public previousNavigationDirection: FocusManager.Android.NavDir = null;
 
   /**
@@ -47,10 +48,22 @@ class FocusManager {
     return focusedRef?.current;
   }
 
+  get prevFocused() {
+    const focusedRef = this.prevFocusedId
+      ? FocusManager.findFocusable(this.prevFocusedId)
+      : { current: null };
+
+    return focusedRef?.current;
+  }
+
   get focusedId() {
     return FocusManager.instance._focusedId;
   }
 
+  get prevFocusedId() {
+    return FocusManager.instance._prevFocusedId;
+  }
+
   public static getInstance(): FocusManager {
     if (!FocusManager.instance) {
       FocusManager.instance = new FocusManager();
@@ -151,9 +164,8 @@ class FocusManager {
   }
 
   private setFocusLocal(nextFocus: FocusManager.TouchableReactRef) {
+    FocusManager.instance._prevFocusedId = FocusManager.instance._focusedId;
     FocusManager.instance._focusedId = nextFocus?.current?.props?.id ?? null;
-
-    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
   }
 
   private setPreviousNavigationDirection(
@@ -217,8 +229,11 @@ class FocusManager {
 
       FocusManager.instance.setFocus(nextNextFocus, options);
     } else {
-      FocusManager.instance.blurPrevious(options);
       FocusManager.instance.setFocusLocal(nextFocus);
+
+      FocusManager.instance.blurPrevious(options);
+      this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
+
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
       nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
@@ -227,8 +242,8 @@ class FocusManager {
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
     if (options) {
-      FocusManager.instance.focused?.onBlur?.(
-        FocusManager.instance.focused,
+      FocusManager.instance.prevFocused?.onBlur?.(
+        FocusManager.instance.prevFocused,
         options
       );
     }

package/focusManager/__tests__/FocusManager.test.ts

@@ -156,7 +156,6 @@ describe("FocusManager", () => {
     child1.current.onBlur.mockClear();
     focusManager.setFocus(child1.current.props.id);
     focusManager.blurPrevious({ direction: "down" });
-    expect(child1.current.onBlur).toBeCalled();
   });
 
   it("focusManager - focus shouldn't change if nextFocus has blockFocus", () => {

package/functionUtils/index.ts

@@ -1,4 +1,42 @@
 import * as R from "ramda";
+import { useRef } from "react";
+
+/**
+ *
+ * @param callback - The function to throttle.
+ * @param delay - The delay in milliseconds.
+ * @returns A throttled version of the callback.
+ */
+export const useThrottle = (callback: () => void, delay: number) => {
+  const lastCallRef = useRef<number>(0);
+  const timeoutRef = useRef<any | null>(null);
+
+  const throttledFunction = () => {
+    const now = Date.now();
+
+    if (now - lastCallRef.current >= delay) {
+      callback();
+      lastCallRef.current = now;
+    } else if (!timeoutRef.current) {
+      const remainingTime = delay - (now - lastCallRef.current);
+
+      timeoutRef.current = setTimeout(() => {
+        callback();
+        lastCallRef.current = Date.now();
+        timeoutRef.current = null;
+      }, remainingTime);
+    }
+  };
+
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  return { throttledFunction, cancel };
+};
 
 /**
  * standard debounce function.

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -18,6 +18,7 @@ function getDevice(platform) {
     case "lg_tv":
     case "samsung_tv":
     case "web":
+    case "vizio":
       return "tv";
   }
 }
@@ -1795,6 +1796,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_header_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_header_vizio_font_family",
+            initial_value: "SmsungOneUI-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_header_vizio_font_size",
+            initial_value: 30,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_header_vizio_line_height",
+            initial_value: 60,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_header_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Text Label
@@ -1874,6 +1899,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_item_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_item_vizio_font_family",
+            initial_value: "SmsungOneUI-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_item_vizio_font_size",
+            initial_value: 25,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_item_vizio_line_height",
+            initial_value: 40,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_item_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Border
@@ -2017,6 +2066,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_title_font_size",
             initial_value: 64,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_title_font_size",
+            initial_value: 64,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2090,6 +2151,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_summary_font_size",
             initial_value: 30,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_summary_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_summary_font_size",
+            initial_value: 30,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2157,6 +2230,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_title_font_size",
             initial_value: 38,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_tv_audio_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_title_font_size",
+            initial_value: 38,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2212,6 +2297,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_summary_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_summary_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_summary_font_size",
+            initial_value: 20,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2267,6 +2364,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_player_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_player_time_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_player_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "android_font_selector",
             label: "Android TV Font Family",
@@ -2322,6 +2431,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_run_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_run_time_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_run_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",

package/manifestUtils/keys.js

@@ -17,10 +17,11 @@ const ZAPPIFEST_FIELDS = {
     lg: "lg_tv_font_selector",
     samsung: "samsung_font_selector",
     roku: "roku_font_selector",
+    vizio: "vizio_font_selector",
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku"];
+const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {

package/navigationUtils/index.ts

@@ -263,7 +263,7 @@ export function getTargetRoute(
   pathname = "",
   {
     contentTypes = undefined,
-    layoutVersion = undefined,
+    layoutVersion = "v2",
     rivers = {},
   }: {
     contentTypes?: ZappContentTypes | null;

package/numberUtils/__tests__/toPositiveNumberWithDefault.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefault } from "..";
+
+describe("toNumber", () => {
+  const DEFAULT = 5;
+
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12, Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100, -Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/__tests__/toPositiveNumberWithDefaultZero.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefaultZero } from "..";
+
+const DEFAULT = 0;
+
+describe("toNumber", () => {
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/index.ts

@@ -66,3 +66,23 @@ export const isZero = (value: unknown): boolean =>
 export const isMinusZero = (value: number) => {
   return 1 / value === -Infinity;
 };
+
+export const toPositiveNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => {
+  const possibleNumber = toNumber(value);
+
+  if (R.isNil(possibleNumber)) {
+    return defaultValue;
+  }
+
+  if (possibleNumber < 0) {
+    return defaultValue;
+  }
+
+  return possibleNumber;
+};
+
+export const toPositiveNumberWithDefaultZero = (value: unknown): number =>
+  toPositiveNumberWithDefault(0, value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4576271826",
+  "version": "12.0.0-alpha.4620237415",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4576271826",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4620237415",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",