@applicaster/quick-brick-player 12.0.0-alpha.5553532911 → 12.0.0-alpha.5624518702

package/package.json

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

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -32,6 +32,7 @@ import {
   AnimatedScrollModal,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -54,7 +55,7 @@ type Configuration = {
 };
 
 type Props = {
-  children?: React.ReactNode;
+  children: React.ReactNode;
   inline?: boolean;
   docked?: boolean;
   configuration: Configuration;
@@ -294,7 +295,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playerState.isPaused ? player?.play() : player.pause();
   }, [playerState, player]);
 
-  const seekDuration = Number(value("seek_duration"));
+  const seekDuration = toNumberWithDefault(10, value("seek_duration"));
 
   const onRewindButtonPress = React.useCallback(() => {
     player?.rewind(seekDuration);

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
   ProgressBar,
@@ -33,6 +34,7 @@ import {
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import DockedLayout from "./DockedLayout";
+import { isValidDate } from "../../Utils";
 
 type Dimensions = {
   width: number;
@@ -79,7 +81,7 @@ type LayoutProps = {
 
 const Styles = {
   container: { flex: 1 },
-  tabletContainer: (isPortraitMode) => ({
+  tabletContainer: (isPortraitMode: boolean) => ({
     flex: 1,
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
@@ -109,10 +111,10 @@ const Styles = {
     };
   },
   backgroundImageContainerImageStyle: (
-    isTablet,
-    docked,
-    startComponentsAnimation,
-    isActiveGesture
+    isTablet: boolean,
+    docked: boolean,
+    startComponentsAnimation: boolean,
+    isActiveGesture: boolean
   ) => ({
     borderRadius:
       (startComponentsAnimation && isActiveGesture) || docked
@@ -190,8 +192,31 @@ export default function DefaultLayout(props: LayoutProps) {
 
   let showFullControls = !controller?.isAd();
 
+  const startTime = entry.extensions?.live?.start_time;
+  const endTime = entry.extensions?.live?.end_time;
+
+  const hasValidStartTime = isValidDate(startTime);
+  const hasValidEndTime = isValidDate(endTime);
+
+  const isDateBasedLiveContent =
+    isLiveContent && hasValidStartTime && hasValidEndTime;
+
+  const needsToShowProgressBar =
+    (isLiveContent &&
+      (Boolean(value("liveSeekingEnabled")) || isDateBasedLiveContent)) ||
+    !isLiveContent;
+
+  const startTimestamp = hasValidStartTime
+    ? dayjs.utc(startTime!).valueOf()
+    : undefined;
+
+  const endTimestamp = hasValidEndTime
+    ? dayjs.utc(endTime!).valueOf()
+    : undefined;
+
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
+
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
@@ -221,12 +246,14 @@ export default function DefaultLayout(props: LayoutProps) {
 
     const rewind = rewindButton({
       isTablet,
-      onPress: controller?.hasContentDuration?.() ? onRewindButtonPress : null,
+      onPress: controller?.hasSeekableDuration?.() ? onRewindButtonPress : null,
     });
 
     const forward = forwardButton({
       isTablet,
-      onPress: controller?.hasContentDuration?.() ? onForwardButtonPress : null,
+      onPress: controller?.hasSeekableDuration?.()
+        ? onForwardButtonPress
+        : null,
     });
 
     const speed = speedButton({
@@ -255,7 +282,6 @@ export default function DefaultLayout(props: LayoutProps) {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
-    // Temporary empty button until we add sleep button. It will ensure the buttons will not break in their position
     return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
@@ -276,15 +302,12 @@ export default function DefaultLayout(props: LayoutProps) {
 
   useEffect(() => {
     if (showCounter && sleepTimerDate !== 0) {
-      // Setting the initial timeLeft based on sleepTimerDate
       setTimeLeft(sleepTimerDate - Date.now());
 
-      // Setting up an interval to update the remaining time every second
       const intervalId = setInterval(() => {
         setTimeLeft(() => {
           const newTimeLeft = sleepTimerDate - Date.now();
 
-          // If the new remaining time is less than or equal to 0, clear the interval and trigger the cancelSleepTimer function
           if (newTimeLeft <= 0) {
             clearInterval(intervalId);
 
@@ -292,32 +315,24 @@ export default function DefaultLayout(props: LayoutProps) {
 
             return 0;
           } else {
-            // Otherwise, update the state with the new remaining time
             return newTimeLeft;
           }
         });
       }, 1000);
 
-      // Clearing the interval when the component unmounts or dependencies change
       return () => clearInterval(intervalId);
     } else {
-      // Ensure the timeLeft state is set correctly if showCounter is false
       setTimeLeft(0);
     }
   }, [sleepTimerDate, showCounter, cancelSleepTimer]);
 
   const Separator = () => <View style={Styles.separator} />;
 
-  const liveSeekingEnabled = value("liveSeekingEnabled");
-
-  const needsToShowProgressBar =
-    (isLiveContent && liveSeekingEnabled) || !isLiveContent;
-
   const defaultImageDimensions = React.useMemo(
     () =>
       defaultDimensions &&
       Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions]
+    [defaultDimensions, isTablet]
   );
 
   const { isActiveGesture, startComponentsAnimation } =
@@ -341,7 +356,7 @@ export default function DefaultLayout(props: LayoutProps) {
       </AnimationComponent>
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : null}
+        style={isTablet ? Styles.playerImageWrapper : undefined}
       >
         <AnimationComponent
           animationType={ComponentAnimationType.moveComponentHorizontal}
@@ -356,7 +371,7 @@ export default function DefaultLayout(props: LayoutProps) {
                 }
               : null,
           }}
-          style={isTablet ? Styles.alignItemsCenter : null}
+          style={isTablet ? Styles.alignItemsCenter : undefined}
         >
           <PlayerImageBackground
             entry={entry}
@@ -376,7 +391,7 @@ export default function DefaultLayout(props: LayoutProps) {
       <View
         style={[
           Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : null,
+          isTablet ? Styles.tabletLayout : undefined,
         ]}
       >
         {!docked && (
@@ -401,6 +416,9 @@ export default function DefaultLayout(props: LayoutProps) {
                   playerState={playerState}
                   disableFullscreen={true}
                   sliderStyle={2}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
                 />
 
                 {showCounter && timeLeft >= 0 && (

package/src/Player/Utils/Utils.ts

@@ -1,26 +1,5 @@
 import queryString from "query-string";
-
-export const toTypeString = (obj) => {
-  switch (typeof obj) {
-    case "object":
-      return obj instanceof Date ? obj.toISOString() : JSON.stringify(obj); // object, null
-    case "undefined":
-      return "";
-    default:
-      // boolean, number, string
-      return obj.toString();
-  }
-};
-
-export const stringsOnlyObject = (obj) => {
-  const strObj = {};
-
-  Object.keys(obj).forEach((x) => {
-    strObj[x] = toTypeString(obj[x]);
-  });
-
-  return strObj;
-};
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 export const getLiveUrl = (url: string) => {
   // Use the replace method with a regular expression to replace all instances of subClass with livePage
@@ -42,3 +21,7 @@ export const addQueryParam = (
 
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
+
+export const isValidDate = (dateString: string): boolean => {
+  return dateString.trim() !== "" && dayjs.utc(dateString).isValid();
+};

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,8 @@ 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()
@@ -75,7 +71,6 @@ export default class VideoPlayer extends React.Component<
 > {
   public static propTypes = {};
   _root: any;
-  analyticsTracker: AnalyticsTracker;
   playerPluginId: string;
   takeParentStyle: Record<any, any>;
   playbackStarted = false;
@@ -106,6 +101,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
@@ -114,8 +120,6 @@ 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;
   }
 
@@ -123,7 +127,8 @@ export default class VideoPlayer extends React.Component<
     this.stopBackgroundPlayback();
 
     this.playbackStarted = false;
-    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
+
+    this.analyticsTracker.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
 
     if (isAndroidPlatform()) {
@@ -179,27 +184,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
@@ -403,28 +387,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({});
       }
     });
@@ -434,15 +406,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 }) => {
@@ -453,98 +422,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);
@@ -657,10 +589,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;
         }
@@ -785,7 +713,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
       docked,
       entry,
       fullscreen,
@@ -795,8 +722,13 @@ export default class VideoPlayer extends React.Component<
       isTabletPortrait,
       muted,
       style,
+      castAction,
+      controller,
+      startComponentsAnimation,
     } = this.props;
 
+    const supportNativeCast = controller.supportNativeCast();
+
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
@@ -861,7 +793,11 @@ export default class VideoPlayer extends React.Component<
       ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
-    const shouldUseNativeControls = controls && !docked;
+    const shouldUseNativeControls =
+      controls &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
 
     platformSpecificProps = {
       ...platformSpecificProps,
@@ -920,8 +856,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 = {
@@ -954,7 +888,6 @@ export default class VideoPlayer extends React.Component<
       onTimedMetadata: this.unHandledEvent("onTimedMetadata"),
       onTracksChanged: this.onTracksChanged,
       eventSubtitlesChange: this.unHandledEvent("eventSubtitlesChange"),
-      onVideoBandwidthUpdate: this.onVideoBandwidthUpdate,
     };
 
     const playerSystemEvents = {
@@ -974,9 +907,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 = {
@@ -1032,6 +962,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          nativeControls={!!controls}
         />
       ) : null;
     };
@@ -1066,7 +997,7 @@ export default class VideoPlayer extends React.Component<
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         <View style={containerStyle}>
-          {!castAction?.state?.connected && (
+          {(!castAction?.state?.connected || supportNativeCast) && (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
@@ -1117,7 +1048,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
+                  {(!castAction?.state?.connected || supportNativeCast) && (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={playerDimensions}