@applicaster/quick-brick-player 12.0.0-rc.99 → 13.0.0-alpha.2330880002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.99",
+  "version": "13.0.0-alpha.2330880002",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.96",
-    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.89",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.99",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.99",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.118",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.112",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.2330880002",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.2330880002",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2330880002",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/CellPlayer/ContextProvider.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
 
 import { Context } from "./Context";
@@ -86,7 +86,7 @@ const initialEntryState = () => ({
 });
 
 export function ContextProvider(Component: ReactComponent<any>) {
-  return function DefaultPlayerProvider({
+  return memo(function DefaultPlayerProvider({
     children,
   }: CellActionContextProviderProps) {
     const contextValue = React.useMemo(
@@ -104,5 +104,5 @@ export function ContextProvider(Component: ReactComponent<any>) {
         <Component>{children}</Component>
       </Context.Provider>
     );
-  };
+  });
 }

package/src/Player/index.tsx

@@ -21,14 +21,8 @@ import { PlayerWrapper } from "@applicaster/zapp-react-native-ui-components/Comp
 
 import { PlayNextOverlay } from "./PlayNextOverlay";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
-import { AnalyticsTracker } from "@applicaster/zapp-react-native-utils/analyticsUtils/analyticsTracker";
 
-import {
-  AD_EVENT,
-  GENERAL_EVENT,
-  PLAYBACK_EVENT,
-  QOS_EVENT,
-} from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { GENERAL_EVENT } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
 import { Categories, createLogger, Subsystem } from "../logger";
 import { parseLanguageTracks } from "@applicaster/zapp-react-native-utils/playerUtils/configurationUtils";
 import { DEFAULT_COLORS, SEEK_TIME } from "../utils/const";
@@ -42,6 +36,9 @@ import {
   AnimationComponent,
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/analyticsUtils/PlayerAnalyticsManager";
+import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
+
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
@@ -67,7 +64,6 @@ export default class VideoPlayer extends React.Component<
 > {
   public static propTypes = {};
   _root: any;
-  analyticsTracker: AnalyticsTracker;
   playerPluginId: string;
   takeParentStyle: Record<any, any>;
   playbackStarted = false;
@@ -98,6 +94,17 @@ export default class VideoPlayer extends React.Component<
     duration: 0,
   };
 
+  private _tracker: PlayerAnalyticsTrackerI;
+  get analyticsTracker() {
+    if (!this._tracker) {
+      this._tracker = PlayerAnalyticsManager.getInstance().getTracker(
+        this.props.playerId
+      );
+    }
+
+    return this._tracker;
+  }
+
   constructor(props) {
     super(props);
     this.onVideoLoadCalled = false; // android
@@ -106,14 +113,13 @@ export default class VideoPlayer extends React.Component<
       ? { width: "100%", flex: "1 1 auto", objectFit: "contain" }
       : { flexBasis: "auto", flexGrow: 1, flexShrink: 1 };
 
-    const entry = this.props?.entry;
-    this.analyticsTracker = new AnalyticsTracker(entry);
     this.playerPluginId = this.props?.playerPluginIdentifier;
   }
 
   componentWillUnmount() {
     this.playbackStarted = false;
-    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
+
+    this.analyticsTracker.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
 
     if (isAndroidPlatform()) {
@@ -174,27 +180,6 @@ export default class VideoPlayer extends React.Component<
     return this.props.pluginConfiguration;
   };
 
-  /**
-   * 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 nativeEvent object
-   * nativeEvent contains the return value from native
-   */
-  handleAnalyticEvent = (event, data = {}) => {
-    const entry = this.props?.entry;
-    const playerState = this.getState();
-
-    if (this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker?.handleAnalyticEvent?.(
-        event,
-        { ...data, player_type: this.props.playerPluginIdentifier },
-        entry,
-        playerState
-      );
-    }
-  };
-
   /**
    * This method is for the events that have no implementation in react but are being invoked by native
    * When we get the synthetic event we need to pull the data in the nativeEvent object
@@ -268,12 +253,7 @@ export default class VideoPlayer extends React.Component<
   };
 
   stopBackgroundPlayback = () => {
-    if (
-      this.isReactNativeMethodsSupported() &&
-      RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback
-    ) {
-      RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback();
-    }
+    RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback?.();
   };
 
   forward = (seekTime = SEEK_TIME) => {
@@ -394,28 +374,16 @@ export default class VideoPlayer extends React.Component<
   };
 
   onPlayerPresented = () => {
-    this.handleAnalyticEvent(GENERAL_EVENT.player_presented);
+    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_presented);
   };
 
   onPlayerClosed = () => {
-    this.handleAnalyticEvent(GENERAL_EVENT.player_closed);
-  };
-
-  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);
+    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_closed);
   };
 
   onVideoEnd = () => {
     this.setState({ displayOverlay: !this.state.displayOverlay }, () => {
       if (this.state?.displayOverlay) {
-        this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
         this.props?.listener?.onVideoEnd({});
       }
     });
@@ -425,15 +393,12 @@ export default class VideoPlayer extends React.Component<
   onVideoError = ({ nativeEvent }) => {
     const { message } = nativeEvent;
 
-    this.handleAnalyticEvent(PLAYBACK_EVENT.error, nativeEvent);
-
     return this.props?.listener?.onError(new Error(message));
   };
 
   onPlayerPause = ({ nativeEvent = null }) => {
     this.setState({ paused: true });
     this.props?.listener?.onPlayerPause(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.pause, nativeEvent);
   };
 
   onPlayerResume = ({ nativeEvent = null }) => {
@@ -444,98 +409,61 @@ export default class VideoPlayer extends React.Component<
 
     if (isNotAnAd && !resume) {
       this.setState({ resume: true });
-      this.handleAnalyticEvent(PLAYBACK_EVENT.play, nativeEvent);
     }
   };
 
   onPlayerSeekComplete = ({ nativeEvent }) => {
     this.props?.listener?.onPlayerSeekComplete(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_complete, nativeEvent);
   };
 
   onPlayerSeekStart = ({ nativeEvent }) => {
     this.props?.listener?.onPlayerSeekStart(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_start, nativeEvent);
   };
 
   onBufferStart = ({ nativeEvent }) => {
     this.props?.listener?.onBufferStart(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_start, nativeEvent);
   };
 
   onBufferComplete = ({ nativeEvent }) => {
     this.props?.listener?.onBufferComplete(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_complete, nativeEvent);
-  };
-
-  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);
-  };
-
-  onPlayerStop = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(PLAYBACK_EVENT.stop, nativeEvent);
-  };
-
-  onVideoBandwidthUpdate = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(QOS_EVENT.bitrate_changed, nativeEvent);
   };
 
   onAdBegin = ({ nativeEvent }) => {
     this.setState({ isAd: true });
-    this.handleAnalyticEvent(AD_EVENT.ad_start, nativeEvent);
     this.props.listener?.onAdBegin?.(nativeEvent);
   };
 
   onAdBreakBegin = ({ nativeEvent }) => {
     this.setState({ isAd: true });
-    this.handleAnalyticEvent(AD_EVENT.ad_break_start, nativeEvent);
     this.props.listener?.onAdBreakBegin?.(nativeEvent);
   };
 
   onAdBreakEnd = ({ nativeEvent }) => {
     this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_break_completed, nativeEvent);
     this.props.listener?.onAdBreakEnd?.(nativeEvent);
   };
 
   onAdEnd = ({ nativeEvent }) => {
     this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_complete, nativeEvent);
     this.props.listener?.onAdEnd?.(nativeEvent);
   };
 
   onAdError = ({ nativeEvent }) => {
     this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_error, nativeEvent);
     this.props.listener?.onAdError?.(nativeEvent);
   };
 
   onAdRequest = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_request, nativeEvent);
     this.props.listener?.onAdRequest?.(nativeEvent);
   };
 
   onAdClicked = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_clicked, nativeEvent);
     // Broadcast click event
     this.props.playerEvent("ad-clicked", nativeEvent);
     this.props.listener?.onAdClicked?.(nativeEvent);
   };
 
   onAdTapped = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_tapped, nativeEvent);
     // Broadcast click event
     this.props.playerEvent("ad-tapped", nativeEvent);
     this.props.listener?.onAdTapped?.(nativeEvent);
@@ -648,10 +576,6 @@ export default class VideoPlayer extends React.Component<
         }
 
         if (!this.state.isAd && !this.onVideoLoadCalled) {
-          this.handleAnalyticEvent(PLAYBACK_EVENT.load_video, {
-            player_type: this.props.playerPluginIdentifier,
-          });
-
           // TODO: Hack, needs to remove
           this.onVideoLoadCalled = true;
         }
@@ -919,8 +843,6 @@ export default class VideoPlayer extends React.Component<
       onPlayerResume: this.onPlayerResume, // play
       onPlayerSeekComplete: this.onPlayerSeekComplete, // seek_complete
       onPlayerSeekStart: this.onPlayerSeekStart, // seek_start
-      onPlayerSessionEnd: this.onPlayerSessionEnd, // session_end
-      onPlayerSessionStart: this.onPlayerSessionStart, // session_start
     };
 
     const lifecycleEvents = {
@@ -953,7 +875,6 @@ export default class VideoPlayer extends React.Component<
       onTimedMetadata: this.unHandledEvent("onTimedMetadata"),
       onTracksChanged: this.onTracksChanged,
       eventSubtitlesChange: this.unHandledEvent("eventSubtitlesChange"),
-      onVideoBandwidthUpdate: this.onVideoBandwidthUpdate,
     };
 
     const playerSystemEvents = {
@@ -973,9 +894,6 @@ export default class VideoPlayer extends React.Component<
     const unsupportedEvents = {
       onBufferComplete: this.onBufferComplete, // buffer_complete
       onBufferStart: this.onBufferStart, // buffer_start
-      onPlayerNext: this.onPlayerNext, // next
-      onPlayerPrevious: this.onPlayerPrevious, // previous
-      onPlayerStop: this.onPlayerStop, // stop
     };
 
     const nativeEvents = {
@@ -1077,6 +995,7 @@ export default class VideoPlayer extends React.Component<
               ref={this._assignRoot}
               {...nativeEvents}
               {...nativeProps}
+              listener={this.props.listener}
             />
           )}
           <AudioPlayerWrapper {...sharedWrapperViewProps} />