@applicaster/quick-brick-player 12.0.0-alpha.3235354579 → 12.0.0-alpha.3262004353

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.3235354579",
+  "version": "12.0.0-alpha.3262004353",
   "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.58",
-    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.62",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3235354579",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3235354579",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3235354579",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.81",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.70",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3262004353",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3262004353",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3262004353",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/Layout/DefaultLayout.tsx

@@ -419,6 +419,7 @@ export default function DefaultLayout(props: LayoutProps) {
                   startTimestamp={startTimestamp}
                   endTimestamp={endTimestamp}
                   isDateBasedLiveContent={isDateBasedLiveContent}
+                  onSkipLive={onSkipLive}
                 />
 
                 {showCounter && timeLeft >= 0 && (

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -1,7 +1,6 @@
-// Disabling for now as lint can't recognise typescript definition here
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import { Animated, StyleSheet, View } from "react-native";
 import LinearGradient from "../LinearGradient";
 import { getDominantColor, getPalettes } from "../../../utils/utils";
 import { useEffect } from "react";
@@ -11,7 +10,7 @@ type MagicBGProps = {
   image: string;
   fallbackUrl?: string;
   defaultColor: string;
-  colors: string[]; // Updated to type string[] as it holds hex values
+  colors: string[];
 };
 
 const defaultColors = {
@@ -66,31 +65,46 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     defaultColors.defaultGradientEnd,
   ]);
 
+  const [backgroundColorAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
+  const [gradientOpacityAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
+
   useEffect(() => {
+    const animateColors = () => {
+      Animated.timing(backgroundColorAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: false,
+      }).start();
+
+      Animated.timing(gradientOpacityAnim, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: false,
+      }).start();
+    };
+
     const fetchColors = async () => {
-      // Check if colors are provided and not empty
       if (colors && colors.length > 0) {
-        // Use provided colors for gradient and dominant color
-        setGradientColors(colors.slice(0, 2)); // First 2 colors for gradient
-        setDominantColor(colors[0]); // First color as dominant
+        setGradientColors(colors.slice(0, 2));
+        setDominantColor(colors[0]);
+        animateColors();
       } else if (image) {
-        // If no colors, try fetching from image
         try {
           const { gradientColors, dominantColor } =
             await fetchPaletteAndDominantColor(image);
 
           setGradientColors(gradientColors);
           setDominantColor(dominantColor);
+          animateColors();
         } catch (error) {
-          // If image fetch fails, try fallback URL
           try {
             const { gradientColors, dominantColor } =
               await fetchPaletteAndDominantColor(fallbackUrl);
 
             setGradientColors(gradientColors);
             setDominantColor(dominantColor);
+            animateColors();
           } catch {
-            // If everything fails, use default color
             setGradientColors([
               defaultColors.defaultGradientStart,
               defaultColors.defaultGradientEnd,
@@ -100,7 +114,6 @@ export const MagicBG: React.FC<MagicBGProps> = ({
           }
         }
       } else {
-        // If no image or colors, use default color
         setGradientColors([
           defaultColors.defaultGradientStart,
           defaultColors.defaultGradientEnd,
@@ -113,11 +126,30 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     fetchColors();
   }, []);
 
+  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["black", dominantColor],
+  });
+
   return (
-    <View style={[styles.container, { backgroundColor: dominantColor }]}>
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: interpolatedBackgroundColor },
+      ]}
+    >
       <View style={styles.fullScreenOverlay} />
-      <LinearGradient colors={gradientColors} style={styles.gradientOverlay} />
+
+      <Animated.View
+        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
+      >
+        <LinearGradient
+          colors={gradientColors}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+
       {children}
-    </View>
+    </Animated.View>
   );
 };

package/src/Player/Utils/Utils.ts

@@ -22,6 +22,10 @@ export const addQueryParam = (
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
 
-export const isValidDate = (dateString: string): boolean => {
-  return dateString.trim() !== "" && dayjs.utc(dateString).isValid();
+export const isValidDate = (dateString: string | undefined): boolean => {
+  return (
+    typeof dateString === "string" &&
+    dateString.trim() !== "" &&
+    dayjs.utc(dateString).isValid()
+  );
 };

package/src/Player/index.tsx

@@ -4,7 +4,7 @@
 import React from "react";
 import * as R from "ramda";
 
-import { findNodeHandle, NativeModules, StyleSheet, View } from "react-native";
+import { findNodeHandle, StyleSheet, View } from "react-native";
 import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
 import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
 
@@ -21,8 +21,14 @@ 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 { GENERAL_EVENT } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import {
+  AD_EVENT,
+  GENERAL_EVENT,
+  PLAYBACK_EVENT,
+  QOS_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";
@@ -36,17 +42,7 @@ 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";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -71,6 +67,7 @@ export default class VideoPlayer extends React.Component<
 > {
   public static propTypes = {};
   _root: any;
+  analyticsTracker: AnalyticsTracker;
   playerPluginId: string;
   takeParentStyle: Record<any, any>;
   playbackStarted = false;
@@ -101,17 +98,6 @@ 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
@@ -120,15 +106,14 @@ 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.stopBackgroundPlayback();
-
     this.playbackStarted = false;
-
-    this.analyticsTracker.handleAnalyticEvent(GENERAL_EVENT.session_end);
+    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
 
     if (isAndroidPlatform()) {
@@ -171,6 +156,11 @@ export default class VideoPlayer extends React.Component<
     }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
   getPlayNextData = () => this.props.playNextData as PlayNextData;
 
   /**
@@ -184,6 +174,27 @@ 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
@@ -328,7 +339,7 @@ export default class VideoPlayer extends React.Component<
    * Sets either subtitle language, or audio language if we have a selected a new locale.
    * If no locale is set it defaults to system language for audio, and leaves subtitles unaltered.
    */
-  setLanguage = (selected = null) => {
+  selectTrack = (selected = null) => {
     const { trackType, id, language } = selected || {};
 
     const isOff = language === "Off";
@@ -387,16 +398,28 @@ export default class VideoPlayer extends React.Component<
   };
 
   onPlayerPresented = () => {
-    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_presented);
+    this.handleAnalyticEvent(GENERAL_EVENT.player_presented);
   };
 
   onPlayerClosed = () => {
-    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_closed);
+    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);
   };
 
   onVideoEnd = () => {
     this.setState({ displayOverlay: !this.state.displayOverlay }, () => {
       if (this.state?.displayOverlay) {
+        this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
         this.props?.listener?.onVideoEnd({});
       }
     });
@@ -406,12 +429,15 @@ 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 }) => {
@@ -422,61 +448,98 @@ 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);
@@ -589,6 +652,10 @@ 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;
         }
@@ -856,6 +923,8 @@ 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 = {
@@ -888,6 +957,7 @@ export default class VideoPlayer extends React.Component<
       onTimedMetadata: this.unHandledEvent("onTimedMetadata"),
       onTracksChanged: this.onTracksChanged,
       eventSubtitlesChange: this.unHandledEvent("eventSubtitlesChange"),
+      onVideoBandwidthUpdate: this.onVideoBandwidthUpdate,
     };
 
     const playerSystemEvents = {
@@ -907,6 +977,9 @@ 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 = {