@applicaster/zapp-react-native-utils 12.0.0-rc.105 → 12.0.0-rc.106

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

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

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();