@applicaster/zapp-react-native-utils 12.0.0-alpha.5606245605 → 12.0.0-alpha.5624518702

package/analyticsUtils/AnalyticPlayerListener.ts

@@ -0,0 +1,155 @@
+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
+  };
+
+  // HACK: This is a hack to ignore the next resume event after a delayed seek
+  private ignoreNextResume = false;
+  onLoad = () => {
+    this.ignoreNextResume = false;
+  }
+
+  onPlayerPause = (event) => {
+    if (!this.player.isInDelayedSeek()) {
+      this.handleAnalyticEvent(PLAYBACK_EVENT.pause, event);
+    } else {
+      this.ignoreNextResume = true;
+    }
+  };
+
+  onPlayerResume = (event) => {
+    if (!this.player.isInDelayedSeek() && !this.ignoreNextResume) {
+      this.handleAnalyticEvent(PLAYBACK_EVENT.play, event);
+    } else {
+      this.ignoreNextResume = false;
+    }
+  };
+
+  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/AnalyticsEvents/index.ts

@@ -7,6 +7,10 @@ import { sendHeaderClickEvent } from "./sendHeaderClickEvent";
 import { sendHardwareBackButtonClickEvent } from "./sendHardwareBackButtonClickEvent";
 import { sendDownloadsEvent } from "./sendDownloadsEvent";
 import { sendScreenEvent } from "./sendScreenEvent";
+import {
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
+} from "./searchEvents";
 
 export {
   sendScreenEvent,
@@ -18,4 +22,6 @@ export {
   sendHeaderClickEvent,
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 };

package/analyticsUtils/AnalyticsEvents/searchEvents.ts

@@ -0,0 +1,21 @@
+import { log_debug } from "../logger";
+import { postAnalyticEvent } from "../manager";
+import { ANALYTICS_CORE_EVENTS } from "../events";
+
+export const sendSearchCanceledEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_CANCELED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchCanceledEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};
+
+export const sendSearchExecutedEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_EXECUTED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchExecutedEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};

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

@@ -0,0 +1,25 @@
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+
+export const getVideojsAnalyticPluginsConfig = async (entry: ZappEntry) => {
+  let videojsConfiguration = {};
+
+  const plugins = appStore.get("plugins");
+  const analyticPlugins = R.filter(R.propEq("type", "analytics"), plugins);
+
+  const configurations = await Promise.all(
+    analyticPlugins.map(async (plugin) => {
+      const { configuration, module } = plugin;
+
+      return module?.getPlayerConfiguration?.(configuration, entry);
+    })
+  );
+
+  configurations.forEach((analyticConfig) => {
+    if (typeof analyticConfig === "object" && analyticConfig !== null) {
+      videojsConfiguration = { ...videojsConfiguration, ...analyticConfig };
+    }
+  });
+
+  return videojsConfiguration;
+};

package/analyticsUtils/events.ts

@@ -23,10 +23,16 @@ export const TAPPING_EVENTS = {
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
 
+export const SEARCH_EVENTS = {
+  SEARCH_EXECUTED: "search_executed",
+  SEARCH_CANCELED: "search_canceled",
+};
+
 export const ANALYTICS_CORE_EVENTS = {
   ...LEGACY_EVENTS,
   ...SCREEN_VIEW_EVENTS,
   ...TAPPING_EVENTS,
+  ...SEARCH_EVENTS,
 };
 
 export const WEBVIEW_EVENTS = {

package/analyticsUtils/index.tsx

@@ -18,6 +18,8 @@ import {
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
   sendScreenEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 } from "./AnalyticsEvents";
 
 import { postAnalyticEvent } from "./manager";
@@ -66,6 +68,8 @@ type AnalyticsFunctions = {
     item: ZappEntry;
     state: OfflineItemState;
   }) => void;
+  sendSearchCanceledEvent: (props: AnalyticsDefaultProperties) => void;
+  sendSearchExecutedEvent: (props: AnalyticsDefaultProperties) => void;
 };
 
 type GetAnalyticsFunctions = (
@@ -102,6 +106,8 @@ export function getAnalyticsFunctions({
     sendHardwareBackButtonClickEvent,
     sendScreenEvent,
     sendDownloadsEvent,
+    sendSearchCanceledEvent,
+    sendSearchExecutedEvent,
   };
 }
 

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/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

package/appUtils/playerManager/DelayedSeekPlayerWrapper.tsx

@@ -0,0 +1,239 @@
+import { Player } from "./player";
+import { BehaviorSubject } from "rxjs";
+const DELAYED_SEEK_DELAY = 2000;
+
+export class DelayedSeekPlayerWrapper extends Player {
+  private wrappedPlayer: Player;
+  private delayedSeek: boolean;
+  private wasPlaying: boolean;
+  private delayedSeekTimer: NodeJS.Timeout;
+  private resumeTimer: NodeJS.Timeout;
+
+  constructor(props, player: Player) {
+    super(props);
+    // this.playerState = this.wrappedPlayer.playerState;
+    this.wrappedPlayer = player;
+
+    this.wrappedPlayer.addListener({
+      id: "Master-Wrapper-Listener",
+      listener: this,
+    });
+  }
+
+  getOverlayObservable = () => {
+    return this.wrappedPlayer.getOverlayObservable();
+  };
+
+  getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
+    return this.wrappedPlayer.getEntryObservable();
+  };
+
+  getEntry = (): ZappEntry | null => this.wrappedPlayer.getEntry();
+
+  getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {
+    return this.wrappedPlayer.getListener();
+  };
+
+  togglePlayPause = () => {
+    this.wrappedPlayer.togglePlayPause();
+  };
+
+  selectTrack = (_track) => this.wrappedPlayer.selectTrack(_track);
+
+  // Implement all default methods by delegating them to wrapped player
+  public seekTo = (position: number) => {
+    this.wrappedPlayer.seekTo(position);
+  };
+
+  public isPlaying = () => {
+    return this.wrappedPlayer.isPlaying();
+  };
+
+  public isPaused = () => {
+    return this.wrappedPlayer.isPaused();
+  };
+
+  public play = () => {
+    this.wrappedPlayer.play();
+  };
+
+  public pause = () => {
+    this.wrappedPlayer.pause();
+  };
+
+  getState = () => {
+    const currentState = this.wrappedPlayer.getState();
+
+    if (!this.delayedSeek) {
+      return currentState;
+    }
+
+    return {
+      ...currentState,
+      contentPosition: this.playerState.seekPosition,
+      isPaused: false,
+      seekPosition: this.playerState.seekPosition,
+    };
+  };
+
+  forward = (deltaTime: number) => {
+    if (this.delayedSeek || this.delayedSeekTimer) {
+      if (this.playerState.seekPosition == null) {
+        return;
+      }
+
+      this.playerState.seekPosition += deltaTime;
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      this.scheduleResumePlayback();
+
+      return;
+    }
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition += deltaTime;
+
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+
+    this.delayedSeekTimer = setTimeout(() => {
+      this.delayedSeekTimer = null;
+
+      if (this.playerState.seekPosition == null) {
+        return;
+      }
+
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+
+      this.logState("forward", { deltaTime });
+    }, DELAYED_SEEK_DELAY);
+  };
+
+  rewind = (deltaTime: number) => {
+    if (this.delayedSeek || this.delayedSeekTimer) {
+      if (this.playerState.seekPosition == null) {
+        return;
+      }
+
+      this.playerState.seekPosition -= deltaTime;
+
+      if (this.playerState.seekPosition < 0) {
+        this.playerState.seekPosition = 0;
+      }
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      this.scheduleResumePlayback();
+
+      return;
+    }
+
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition -= deltaTime;
+
+    if (this.playerState.seekPosition < 0) {
+      this.playerState.seekPosition = 0;
+    }
+
+    this.delayedSeekTimer = setTimeout(() => {
+      this.delayedSeekTimer = null;
+
+      if (this.playerState.seekPosition == null) {
+        return;
+      }
+
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+
+      // this.currentPlayerComponent()?.["rewind"]?.(deltaTime);
+      this.logState("rewind", { deltaTime });
+    }, DELAYED_SEEK_DELAY);
+  };
+
+  public getConfig = () => this.wrappedPlayer.getConfig();
+
+  // TODO: replace with enum of supported orientations
+  isFullScreenSupported(): boolean {
+    return this.wrappedPlayer.isFullScreenSupported();
+  }
+
+  public supportsNativeControls = (): boolean =>
+    this.wrappedPlayer.supportsNativeControls();
+
+  public supportNativeCast = (): boolean =>
+    this.wrappedPlayer.supportNativeCast();
+
+  public isInDelayedSeek = () => this.delayedSeek;
+
+  public enterDelayedSeek() {
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+    this.delayedSeekTimer = null;
+
+    if (this.delayedSeek) {
+      return;
+    }
+
+    this.delayedSeek = true;
+
+    this.playerState.seekPosition = this.playerState.contentPosition;
+
+    if (!this.isPaused()) {
+      this.wasPlaying = true;
+      this.wrappedPlayer.pause();
+    }
+  }
+
+  public exitDelayedSeek() {
+    if (!this.delayedSeek) {
+      return;
+    }
+
+    if (this.delayedSeekTimer) {
+      this.scheduleResumePlayback();
+
+      return;
+    }
+
+    this.delayedSeek = false;
+
+    if (this.playerState.seekPosition != null) {
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+    }
+
+    this.scheduleResumePlayback();
+  }
+
+  public scheduleResumePlayback(timeout: number = DELAYED_SEEK_DELAY) {
+    if (this.delayedSeek) {
+      this.delayedSeek = false;
+    }
+
+    if (!this.wasPlaying) {
+      return;
+    }
+
+    clearTimeout(this.resumeTimer);
+
+    this.resumeTimer = setTimeout(() => {
+      this.resumeTimer = null;
+      this.play();
+    }, timeout);
+  }
+}

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",