@applicaster/zapp-react-native-utils 12.0.0-alpha.9388848580 → 12.0.0-alpha.9417984401

package/analyticsUtils/AnalyticPlayerListener.ts

@@ -0,0 +1,141 @@
+import { PlayerAnalyticsTracker } from "./playerAnalyticsTracker";
+import { Player } from "../appUtils/playerManager/player";
+import { AD_EVENT, GENERAL_EVENT, PLAYBACK_EVENT, QOS_EVENT } from "./events";
+
+type Props = {
+  analyticsTracker: any;
+  player: any;
+};
+
+/* eslint brace-style: 0 */ // --> OFF
+export class AnalyticPlayerListener
+  implements QuickBrickPlayer.SharedPlayerCallBacks
+{
+  static analyticsListenerID = "analytics-listener";
+  private analyticsTracker: PlayerAnalyticsTracker;
+  private player: Player;
+
+  private onVideoLoadCalled; // android only
+
+  constructor(props: Props) {
+    this.analyticsTracker = props.analyticsTracker;
+    this.player = props.player;
+  }
+
+  handleAnalyticEvent = (event, data = {}) => {
+    if (this.analyticsTracker?.handleAnalyticEvent) {
+      this.analyticsTracker?.handleAnalyticEvent?.(event, {
+        ...data,
+        player_type: this.player.playerPluginId,
+      });
+    }
+  };
+
+  onVideoEnd = () => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
+  };
+
+  onError = (err: Error) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.error, err); // TODO: Check error format
+  };
+
+  onPlayerPause = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.pause, event);
+  };
+
+  onPlayerResume = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.play, event);
+  };
+
+  onPlayerSeekComplete = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_complete, event);
+  };
+
+  onPlayerSeekStart = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_start, event);
+  };
+
+  onBufferStart = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_start, event);
+  };
+
+  onBufferComplete = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_complete, event);
+  };
+
+  // Not implemented
+  onPlayerStop = (event) => {
+    this.handleAnalyticEvent(PLAYBACK_EVENT.stop, event);
+  };
+
+  // TODO: Implement method on native
+  onVideoBandwidthUpdate = (event) => {
+    this.handleAnalyticEvent(QOS_EVENT.bitrate_changed, event);
+  };
+
+  onAdBegin = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_start, event);
+  };
+
+  onAdBreakBegin = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_break_start, event);
+  };
+
+  onAdBreakEnd = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_break_completed, event);
+  };
+
+  onAdEnd = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_complete, event);
+  };
+
+  onAdError = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_error, event);
+  };
+
+  onAdRequest = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_request, event);
+  };
+
+  onAdClicked = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_clicked, event);
+  };
+
+  onAdTapped = (event) => {
+    this.handleAnalyticEvent(AD_EVENT.ad_tapped, event);
+  };
+
+  onVideoLoad = () => {
+    // if (!this.state.isAd && !this.onVideoLoadCalled) {
+    if (!this.player.isAd() && !this.onVideoLoadCalled) {
+      this.onVideoLoadCalled = true;
+
+      this.handleAnalyticEvent(PLAYBACK_EVENT.load_video, {
+        player_type: this.player.playerPluginId,
+      });
+    }
+  };
+
+  onPlayerSessionEnd = () => {
+    // TODO: Implement method on native android, ios exists
+    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
+  };
+
+  onPlayerSessionStart = () => {
+    // TODO: Implement method on native android, ios exists
+
+    this.handleAnalyticEvent(GENERAL_EVENT.session_start);
+  };
+
+  onPlayerNext = ({ nativeEvent }) => {
+    // TODO: Implement method on native
+
+    this.handleAnalyticEvent(PLAYBACK_EVENT.next, nativeEvent);
+  };
+
+  onPlayerPrevious = ({ nativeEvent }) => {
+    // TODO: Implement method on native
+
+    this.handleAnalyticEvent(PLAYBACK_EVENT.previous, nativeEvent);
+  };
+}

package/analyticsUtils/PlayerAnalyticsManager.ts

@@ -0,0 +1,90 @@
+import {
+  PlayerAnalyticsTracker,
+  PlayerAnalyticsTrackerI,
+} from "./playerAnalyticsTracker";
+import {
+  PlayerLifecycleListener,
+  PlayerManager,
+} from "../appUtils/playerManager";
+import { Player } from "../appUtils/playerManager/player";
+import { AnalyticPlayerListener } from "./AnalyticPlayerListener";
+import { PlayerRole } from "../appUtils/playerManager/conts";
+
+enum PlayerAnalyticsTrackerType {
+  PlayerAnalyticsTracker = "PlayerAnalyticsTracker",
+}
+
+class PlayerAnalyticsTrackerFactory {
+  createTracker(type: PlayerAnalyticsTrackerType) {
+    switch (type) {
+      case PlayerAnalyticsTrackerType.PlayerAnalyticsTracker:
+        return new PlayerAnalyticsTracker();
+      default:
+        return new PlayerAnalyticsTracker();
+    }
+  }
+}
+
+export class PlayerAnalyticsManager implements PlayerLifecycleListener {
+  static instance: PlayerAnalyticsManager;
+  private trackers: Record<string, PlayerAnalyticsTrackerI> = {};
+  private trackerFactory: PlayerAnalyticsTrackerFactory;
+
+  public getTracker(
+    id: string,
+    type: PlayerAnalyticsTrackerType = PlayerAnalyticsTrackerType.PlayerAnalyticsTracker
+  ): PlayerAnalyticsTrackerI {
+    if (!this.trackers[id]) {
+      this.trackers[id] = this.trackerFactory.createTracker(type);
+    }
+
+    return this.trackers[id];
+  }
+
+  constructor(trackerFactory: PlayerAnalyticsTrackerFactory) {
+    this.trackerFactory = trackerFactory;
+    this.startListenPlayerManager();
+  }
+
+  static getInstance(
+    trackerFactory: PlayerAnalyticsTrackerFactory = new PlayerAnalyticsTrackerFactory()
+  ): PlayerAnalyticsManager {
+    if (!PlayerAnalyticsManager.instance) {
+      PlayerAnalyticsManager.instance = new PlayerAnalyticsManager(
+        trackerFactory
+      );
+    }
+
+    return PlayerAnalyticsManager.instance;
+  }
+
+  private startListenPlayerManager() {
+    PlayerManager.getInstance().addLifecycleListener(this);
+  }
+
+  // PlayerLifecycleListener
+
+  onRegistered = (player: Player) => {
+    if (player.playerRole !== PlayerRole.Primary) {
+      return;
+    }
+
+    const tracker = this.getTracker(player.playerId);
+    tracker.setPlayer(player);
+
+    const analyticsListener = new AnalyticPlayerListener({
+      analyticsTracker: tracker,
+      player,
+    });
+
+    player.addListener({
+      id: AnalyticPlayerListener.analyticsListenerID,
+      listener: analyticsListener,
+    });
+  };
+
+  onUnRegistered = (player: Player) => {
+    player.removeListener(AnalyticPlayerListener.analyticsListenerID);
+    delete this.trackers[player.playerId];
+  };
+}

package/analyticsUtils/{analyticsTracker.ts → playerAnalyticsTracker.ts}

@@ -5,16 +5,25 @@ import { postAnalyticEvent } from "./manager";
 import { isLive } from "../playerUtils";
 import { extensionsEvents } from "./AnalyticsEvents/helper";
 import { AD_EVENT, EVENT_TYPES, PLAYER_DISPLAY_STATES } from "./events";
+import { Player } from "../appUtils/playerManager/player";
 
-export class AnalyticsTracker {
+export interface PlayerAnalyticsTrackerI {
+  handleAnalyticEvent(
+    event: QuickBrickPlayer.Events,
+    eventData?: QuickBrickPlayer.EventData
+  ): void;
+  setPlayer(player: Player): void;
+}
+
+export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
   adTime: number | string;
   mediaTime: number | string;
-  entry: ZappEntry;
   eventType: string;
   playerState: QuickBrickPlayer.NativePlayerState;
+  private player: Player;
 
-  constructor(entry: any) {
-    this.entry = entry;
+  setPlayer(player: Player) {
+    this.player = player;
   }
 
   isAdBreak(event: string): boolean {
@@ -30,6 +39,10 @@ export class AnalyticsTracker {
     return !!isAdBreak;
   }
 
+  get entry(): ZappEntry {
+    return this.player?.getEntry();
+  }
+
   getDuration(
     event: QuickBrickPlayer.Events,
     eventData: QuickBrickPlayer.EventData
@@ -215,13 +228,9 @@ export class AnalyticsTracker {
 
   handleAnalyticEvent(
     event: QuickBrickPlayer.Events,
-    eventData: QuickBrickPlayer.EventData = {},
-    entry: ZappEntry,
-    playerState = null
+    eventData: QuickBrickPlayer.EventData = {}
   ) {
-    this.entry = entry;
-    this.playerState = playerState;
-
+    this.playerState = this.player?.getState();
     postAnalyticEvent(event, this.prepareAnalyticPayload(event, eventData));
   }
 }

package/appUtils/accessibilityManager/index.ts

@@ -138,6 +138,17 @@ export class AccessibilityManager {
     };
   }
 
+  public getInputAccessibilityProps(inputName: string): AccessibilityProps {
+    return {
+      accessibilityLabel: inputName,
+      accessibilityHint: `Enter text into ${inputName}`,
+      "aria-label": inputName,
+      "aria-description": `Enter text into ${inputName}`,
+      accessibilityRole: "textbox" as AccessibilityRole,
+      "aria-role": "textbox",
+    };
+  }
+
   public getLocalizedMessage(key: string): string | void {
     if (!key) return;
 

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";
@@ -178,6 +182,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/index.ts

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import { subscriber } from "../../functionUtils";
 import { utilsLogger, createLogger } from "../../logger";
 import { Player } from "./player";
-import { AnalyticsTracker } from "../../analyticsUtils/analyticsTracker";
 import {
   hasTizenAPIs,
   subscribeToDeviceNetworkChanges,
@@ -37,7 +36,10 @@ export interface PlayerLifecycleListener {
 }
 
 type PlayersMap = {
-  [id: string]: { player: Player; isInViewport: boolean };
+  [id: string]: {
+    player: Player;
+    isInViewport: boolean;
+  };
 };
 
 export class PlayerManager {
@@ -46,7 +48,6 @@ export class PlayerManager {
   private playersMap: PlayersMap = {};
   private manager = subscriber();
   private castingReceiver: Player;
-  private analyticsTracker: AnalyticsTracker;
   private lifecycleListeners: PlayerLifecycleListener[] = [];
 
   public static getInstance() {
@@ -57,7 +58,7 @@ export class PlayerManager {
     return PlayerManager.instance;
   }
 
-  public getActivePlayerId = (): String | null => {
+  public getActivePlayerId = (): string | null => {
     return this.activePlayerId;
   };
 
@@ -102,7 +103,10 @@ export class PlayerManager {
   }
 
   private addPlayer = (id: string, player: Player) => {
-    this.playersMap[id] = { player: player, isInViewport: false };
+    this.playersMap[id] = {
+      player: player,
+      isInViewport: false,
+    };
   };
 
   public isPlayerRegistered = (id: string) => !!this.playersMap[id];
@@ -251,28 +255,6 @@ export class PlayerManager {
     this.castingReceiver = null;
   }
 
-  /**
-   * Handles analytic events, generates a new analytics tracker and transmits events
-   * Passes entry data, and playerState to the tracker for additional context
-   * The end result is an event formatted and passed to AnalyticsBridge.postEvent
-   * When we get the synthetic event we need to pull the data in the e object
-   * e contains the return value from native
-   */
-  public handleAnalyticEvent(event, data = {}, entry: ZappEntry) {
-    const playerState = this.getActivePlayer()?.getState();
-
-    if (!this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker = new AnalyticsTracker(entry);
-    }
-
-    this.analyticsTracker?.handleAnalyticEvent?.(
-      event,
-      data,
-      entry,
-      playerState
-    );
-  }
-
   /**
    * Method retrieves the instantiated player instance controller
    * Instance controller exposes methods like getContentDuration, getContentPosision

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/playerNative.ts

@@ -61,7 +61,7 @@ export class PlayerNative extends Player {
   currentPlayerComponent = (): ReactComponent<PlayerProps> =>
     this.playerComponent?.current;
 
-  getState = () => this.currentPlayerComponent()?.["getState"]?.() ?? {};
+  getState = () => this.playerState;
 
   // TODO: Try to add module interface
   invokeNativeFunction = (funcName: string, ...params: any[]): boolean => {

package/appUtils/playerManager/usePlayerControllerSetup.tsx

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

package/appUtils/playerManager/usePlayerState.tsx

@@ -16,24 +16,28 @@ export const usePlayerState = (
   listenerId: string,
   playerId?: string
 ): PlayerState => {
-  const [currentTime, setCurrentTime] = React.useState<number>(null);
-  const [duration, setDuration] = React.useState<number>(null);
-  const [seekableDuration, setSeekableDuration] = React.useState<number>(null);
-  const [isLive, setIsLive] = React.useState<boolean>(null);
-  const [isBuffering, setIsBuffering] = React.useState<boolean>(false);
-  const [isReadyToPlay, setIsReadyToPlay] = React.useState<boolean>(false);
-  const [isPaused, setIsPaused] = React.useState<boolean>(false);
+  const [state, setState] = React.useState<PlayerState>({
+    currentTime: null,
+    duration: null,
+    seekableDuration: null,
+    isLive: null,
+    isPaused: null,
+    isBuffering: false,
+    isReadyToPlay: false,
+  });
 
   const player: Player = usePlayer(playerId);
 
   const onPlayerChangeState = React.useCallback(() => {
-    setIsBuffering(player.isBuffering());
-    setIsReadyToPlay(player.isReadyToPlay);
-    setCurrentTime(player.getContentPosition());
-    setDuration(player.getDuration());
-    setSeekableDuration(player.getSeekableDuration());
-    setIsLive(player.isLive());
-    setIsPaused(player.isPaused());
+    setState({
+      currentTime: player.getContentPosition(),
+      duration: player.getDuration(),
+      seekableDuration: player.getSeekableDuration(),
+      isLive: player.isLive(),
+      isPaused: player.isPaused(),
+      isBuffering: player.isBuffering(),
+      isReadyToPlay: player.isReadyToPlay(),
+    });
   }, [player]);
 
   React.useEffect(() => {
@@ -55,24 +59,5 @@ export const usePlayerState = (
     }
   }, [player]);
 
-  return React.useMemo(
-    () => ({
-      currentTime,
-      duration,
-      seekableDuration,
-      isLive,
-      isPaused,
-      isBuffering,
-      isReadyToPlay,
-    }),
-    [
-      currentTime,
-      duration,
-      seekableDuration,
-      isLive,
-      isPaused,
-      isBuffering,
-      isReadyToPlay,
-    ]
-  );
+  return state;
 };

package/cellUtils/index.ts

@@ -468,3 +468,36 @@ export const getColorFromData = ({
 
   return valueFromLayout;
 };
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
+};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.9388848580",
+  "version": "12.0.0-alpha.9417984401",
   "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.9388848580",
+    "@applicaster/applicaster-types": "12.0.0-alpha.9417984401",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/configurationGenerator.ts

@@ -1798,6 +1798,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: "Ubuntu-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
@@ -1877,6 +1901,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: "Ubuntu-Medium",
+          },
+          {
+            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
@@ -2020,6 +2068,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_title_font_size",
             initial_value: 58,
           },
+          {
+            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: 58,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2093,6 +2153,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-Medium",
+          },
+          {
+            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",
@@ -2160,6 +2232,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_title_font_size",
             initial_value: 40,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_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: 40,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2215,6 +2299,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_summary_font_size",
             initial_value: 22,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_summary_font_family",
+            initial_value: "Ubuntu-Medium",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_summary_font_size",
+            initial_value: 22,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2270,6 +2366,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-Medium",
+          },
+          {
+            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",
@@ -2325,6 +2433,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-Medium",
+          },
+          {
+            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/reactHooks/debugging/__tests__/index.test.js

@@ -4,38 +4,77 @@ import {
   timers,
 } from "@applicaster/zapp-react-native-utils/reactHooks/debugging";
 
-jest.useFakeTimers();
-
 describe("Debug utils", () => {
+  let performanceNowMock;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    // 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
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    performanceNowMock.mockRestore();
+  });
+
   describe("Unit Test: time", () => {
     it("should create new timer if timer with a label does not exist", () => {
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
       expect(timers["timer1"]).toBeDefined();
+      expect(timers["timer1"].startTime).toBe(1000);
     });
 
     it("should update start time of timer if timer with a label exists", () => {
+      // First call to time()
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
       const previousStartTime = timers["timer1"].startTime;
-      jest.advanceTimersByTime(1000);
+
+      // Second call to time()
+      performanceNowMock.mockReturnValue(2000);
       time("timer1");
       const currentStartTime = timers["timer1"].startTime;
-      expect(previousStartTime).not.toEqual(currentStartTime);
+
+      expect(previousStartTime).toBe(1000);
+      expect(currentStartTime).toBe(2000);
     });
   });
 
   describe("Unit Test: timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
 
-      expect(logSpy).toHaveBeenCalled();
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.any(Object)
+      );
     });
 
     it("should not log elapsed time if accumulative: true in settings", () => {
       const logSpy = jest.spyOn(console, "log");
 
+      performanceNowMock.mockReturnValue(1000);
+      time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1", { accumulative: true });
 
       expect(logSpy).not.toHaveBeenCalled();
@@ -43,21 +82,52 @@ describe("Debug utils", () => {
   });
 
   describe("Integration Test: time and timeEnd", () => {
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
 
     it("should log elapsed time on timeEnd call", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      performanceNowMock.mockReturnValue(1000);
       time("timer1");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer1");
-      expect(logSpy).toHaveBeenCalled();
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer1: 1000.000ms 2",
+        expect.objectContaining({
+          label: "timer1",
+          settings: undefined,
+        })
+      );
     });
 
-    it("should log total and average time on timeEnd call without accumulative option", () => {
+    it("should log total and average time when accumulative timing is complete", () => {
       const logSpy = jest.spyOn(console, "log");
+
+      // First timing
+      performanceNowMock.mockReturnValue(1000);
       time("timer2");
+
+      performanceNowMock.mockReturnValue(2000);
       timeEnd("timer2", { accumulative: true });
-      timeEnd("timer2");
-      expect(logSpy).toHaveBeenCalled();
+
+      // Second timing
+      performanceNowMock.mockReturnValue(3000);
+      time("timer2");
+
+      performanceNowMock.mockReturnValue(5000);
+      timeEnd("timer2"); // This will log because timer is accumulative (callCount > 1)
+
+      expect(logSpy).toHaveBeenCalledWith(
+        "timer2: 2000.000ms 2",
+        expect.objectContaining({
+          label: "timer2",
+          settings: undefined,
+        })
+      );
     });
   });
 });

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -95,6 +95,8 @@ export const useDimensions: UseDimensions = (
 
     const activeSubscription = Dimensions.addEventListener("change", handler);
 
+    handler({ [context]: Dimensions.get(context) });
+
     return () => {
       activeSubscription.remove();
     };

package/reactHooks/player/useAutoSeek.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import * as R from "ramda";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
@@ -17,10 +16,6 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   const intervalTimer = React.useRef(null);
   const prevRunning = usePrevious(isRunning);
 
-  const setIntervalTimer = (cb) => {
-    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
-  };
-
   const clearIntervalTimer = () => {
     try {
       clearInterval(intervalTimer.current);
@@ -29,6 +24,11 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     }
   };
 
+  const setIntervalTimer = (cb) => {
+    clearIntervalTimer();
+    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
+  };
+
   const resetState = () => {
     setIsRunning(false);
     setDirection(null);
@@ -42,7 +42,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     if (!player) return;
 
     if (direction) {
-      player[direction](R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
+      player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
       resetHUDTimer();
     }
   }, [multiplier, direction]);
@@ -50,7 +50,9 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   useEffect(() => {
     if (isRunning && isRunning !== prevRunning) {
       setIntervalTimer(() => {
-        setMultiplier(R.add(1));
+        setMultiplier((prev) => {
+          return prev + 1;
+        });
       });
     } else if (!isRunning && isRunning !== prevRunning) {
       resetState();

package/reactHooks/resolvers/useCellResolver.ts

@@ -48,7 +48,11 @@ export function useCellResolver({
   ...cellResolverOptions
 }: Props) {
   let _component = Object.assign({}, component);
-  const { width, height } = useDimensions("screen");
+
+  const { width, height } = useDimensions("screen", {
+    updateForInactiveScreens: false,
+  });
+
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
   const isRTL = useIsRTL();
 

package/reactHooks/useConfiguration.ts

@@ -67,7 +67,7 @@ export const useConfiguration = ({
       if (component) {
         const remappedStylesConfiguration = remapUpdatedKeys(
           pluginManifest,
-          component.styles
+          component
         );
 
         R.forEachObjIndexed((value, key) => {
@@ -83,7 +83,7 @@ export const useConfiguration = ({
 
         const styles = populateConfigurationValues(
           pluginManifest?.styles?.fields,
-          remappedStylesConfiguration,
+          remappedStylesConfiguration.styles,
           skipDefaults
         );