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

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

@@ -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,
@@ -138,6 +127,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";
@@ -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/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

@@ -58,7 +58,7 @@ export const usePlayerControllerSetup = ({
     }
 
     if (!playerManager) {
-      return null;
+      return;
     }
 
     if (playerManager.isPlayerRegistered(playerId)) {

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/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/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"),
+  };
+};