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

package/package.json

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

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View, ScrollView } from "react-native";
+import { ViewStyle, View } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -26,6 +26,13 @@ import {
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  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",
@@ -68,29 +75,20 @@ export const defaultAspectRatioWidth = (height: number): number =>
   (height / 9) * 16;
 
 const Styles = {
-  mainContainer: (docked: boolean, style: ViewStyle) => {
+  mainContainer: (style: ViewStyle) => {
     const combinedStyle: ViewStyle = {
       flex: 1,
     };
 
-    if (!docked) {
-      style.paddingTop = 0;
-      style.paddingHorizontal = 15;
-    }
-
-    return { ...combinedStyle, ...style };
-  },
-  playerContainer: (docked: boolean, style: ViewStyle) => {
-    const combinedStyle: ViewStyle = {
-      flex: 1,
+    return {
+      ...combinedStyle,
+      ...style,
     };
-
-    if (docked) {
-      combinedStyle.height = style.height;
-    }
-
-    return combinedStyle;
   },
+  playerContainer: {
+    flex: 1,
+  },
+  paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
 
   controlsMobile: {
     height: 50,
@@ -168,6 +166,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const [sleepTimerDate, setSleepTimerDate] = useState(0);
 
+  const [defaultDimensions, setDefaultDimensions] =
+    React.useState<Dimensions>(undefined);
+
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
@@ -181,9 +182,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     const { width, height } = event.nativeEvent.layout;
 
     setDimensions({
-      width: docked ? defaultAspectRatioWidth(height) : width,
+      width,
       height,
     });
+
+    if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
   const cancelSleepTimer = async () => {
@@ -292,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);
@@ -375,58 +378,64 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(
-    () => (docked ? [] : ["right", "left", "top"]),
-    [docked]
-  );
+  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
 
-  const ContainerView = docked ? View : SafeAreaView;
+  const ContainerView = SafeAreaView;
 
   const MainContent = React.useMemo(() => {
     return (
-      <ContainerView style={Styles.mainContainer(docked, style)} edges={edges}>
-        <ScrollView
-          style={Styles.playerContainer(docked, style)}
-          onLayout={onLayout}
+      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveUpComponent}
+          additionalData={{ saveArea: true }}
         >
-          <Layout
-            entry={entry}
-            playerState={playerState}
-            layoutState={layoutState}
-            value={value}
-            onPlaybackButtonPress={onPlaybackButtonPress}
-            onRewindButtonPress={onRewindButtonPress}
-            onForwardButtonPress={onForwardButtonPress}
-            onPlayerSeek={onPlayerSeek}
-            onSkipStart={onSkipStart}
-            onSpeedButtonPress={onSpeedButtonPress}
-            onSleepButtonPress={onSleepButtonPress}
-            playbackSpeedName={formatSpeed(playbackSpeed.value)}
-            playbackSleepName={
-              sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
-            }
-            sleepTimerDate={sleepTimerDate}
-            cancelSleepTimer={cancelSleepTimer}
-            onSkipLive={onSkipLive}
-            onCloseVideoModal={onCloseVideoModal}
-            maximiseVideoModal={maximiseVideoModal}
-            configuration={configuration}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-          />
-          {children}
-          {!docked && (
-            <PlayerDetails
-              configuration={configuration}
-              style={Styles.playerDetails}
-              entry={entry}
-              isTabletLandscape={isTabletLandscape}
-              isAudioPlayer={true}
-            />
-          )}
-        </ScrollView>
+          <AnimatedScrollModal>
+            <View style={Styles.playerContainer} onLayout={onLayout}>
+              <Layout
+                entry={entry}
+                playerState={playerState}
+                layoutState={layoutState}
+                value={value}
+                onPlaybackButtonPress={onPlaybackButtonPress}
+                onRewindButtonPress={onRewindButtonPress}
+                onForwardButtonPress={onForwardButtonPress}
+                onPlayerSeek={onPlayerSeek}
+                onSkipStart={onSkipStart}
+                onSpeedButtonPress={onSpeedButtonPress}
+                onSleepButtonPress={onSleepButtonPress}
+                playbackSpeedName={formatSpeed(playbackSpeed.value)}
+                playbackSleepName={
+                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+                }
+                sleepTimerDate={sleepTimerDate}
+                cancelSleepTimer={cancelSleepTimer}
+                onSkipLive={onSkipLive}
+                onCloseVideoModal={onCloseVideoModal}
+                maximiseVideoModal={maximiseVideoModal}
+                configuration={configuration}
+                dimensions={dimensions}
+                playNextData={playNextData}
+                title={title}
+                summary={summary}
+                defaultDimensions={defaultDimensions}
+              />
+              <View style={Styles.paddingHorizontal}>
+                {children}
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                >
+                  <PlayerDetails
+                    configuration={configuration}
+                    style={Styles.playerDetails}
+                    entry={entry}
+                    isTabletLandscape={isTabletLandscape}
+                    isAudioPlayer={true}
+                  />
+                </AnimationComponent>
+              </View>
+            </View>
+          </AnimatedScrollModal>
+        </AnimationComponent>
       </ContainerView>
     );
   }, [

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,
@@ -18,13 +19,22 @@ import {
   rewindButton,
   skipToStartButton,
   skipToLiveButton,
+  PADDING_HORIZONTAL,
   speedButton,
   sleepButton,
 } from "./defaultLayoutsConts";
 import { AudioDescription } from "../AudioDescription";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { useEffect, useMemo, useState } from "react";
+import {
+  useModalAnimationContext,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import DockedLayout from "./DockedLayout";
+import { isValidDate } from "../../Utils";
 
 type Dimensions = {
   width: number;
@@ -60,22 +70,29 @@ type LayoutProps = {
   onPlayerSeek: (targetTime: number) => void;
   onSkipLive: () => void;
   onSkipStart: () => void;
+  onCloseVideoModal: () => void;
+  maximiseVideoModal: () => void;
   dimensions: Dimensions;
+  playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
+  defaultDimensions: Dimensions;
 };
 
 const Styles = {
   container: { flex: 1 },
-  tabletContainer: (isPortraitMode) => ({
+  tabletContainer: (isPortraitMode: boolean) => ({
     flex: 1,
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  tabletLayout: {
-    width: 463,
+  playerImageWrapper: {
+    width: "100%",
     maxHeight: 750,
     marginTop: 80,
+  },
+  tabletLayout: {
+    width: 463,
     marginBottom: 80,
   },
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
@@ -84,24 +101,31 @@ const Styles = {
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
+    const mobileValue = dimensions.width
+      ? dimensions.width - PADDING_HORIZONTAL * 2
+      : 330;
+
     return {
-      width: isTablet ? 463 : dimensions.width || 330,
-      height: isTablet ? 463 : dimensions.width || 330,
+      width: isTablet ? 463 : mobileValue,
+      height: isTablet ? 463 : mobileValue,
     };
   },
-  backgroundImageContainerImageStyle: (isTablet) => ({
-    borderRadius: isTablet ? 24 : 10,
+  backgroundImageContainerImageStyle: (
+    isTablet: boolean,
+    docked: boolean,
+    startComponentsAnimation: boolean,
+    isActiveGesture: boolean
+  ) => ({
+    borderRadius:
+      (startComponentsAnimation && isActiveGesture) || docked
+        ? 0
+        : isTablet
+        ? 24
+        : 10,
   }),
-  playerContainer: (docked: boolean, style) => {
-    const combinedStyle = {
-      flex: 1,
-    };
 
-    if (docked) {
-      combinedStyle["height"] = style.height;
-    }
-
-    return combinedStyle;
+  paddingHorizontal: {
+    paddingHorizontal: PADDING_HORIZONTAL,
   },
 
   controlsMobile: {
@@ -115,6 +139,12 @@ const Styles = {
   separator: {
     height: 20,
   },
+  flexDirectionRow: {
+    flexDirection: "row",
+  },
+  alignItemsCenter: {
+    alignItems: "center",
+  },
 };
 
 export default function DefaultLayout(props: LayoutProps) {
@@ -139,12 +169,14 @@ export default function DefaultLayout(props: LayoutProps) {
     sleepTimerDate,
     title,
     summary,
+    defaultDimensions,
   } = props;
 
   const isTablet = useIsTablet();
   const { width, height } = dimensions;
   const isPortraitMode = width < height;
   const isLiveContent = playerState.isLive;
+  const docked = layoutState.docked;
 
   const languageData = useLanguageData("audio-player");
 
@@ -160,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);
   }
 
@@ -191,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({
@@ -225,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,
@@ -246,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);
 
@@ -262,26 +315,28 @@ 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 defaultImageDimensions = React.useMemo(
+    () =>
+      defaultDimensions &&
+      Styles.backgroundImageContainer(defaultDimensions, isTablet),
+    [defaultDimensions, isTablet]
+  );
 
-  const needsToShowProgressBar =
-    (isLiveContent && liveSeekingEnabled) || !isLiveContent;
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
 
   return (
     <View
@@ -289,65 +344,107 @@ export default function DefaultLayout(props: LayoutProps) {
         isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
       }
     >
-      <TransportInfo
-        content={entry}
-        value={value}
-        visible={true}
-        languageData={languageData}
-        layoutState={layoutState}
-        actionButtons={actionButtons}
-      />
-      <View
-        style={
-          isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
-        }
+      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+        <TransportInfo
+          content={entry}
+          value={value}
+          visible={true}
+          languageData={languageData}
+          layoutState={layoutState}
+          actionButtons={actionButtons}
+        />
+      </AnimationComponent>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        style={isTablet ? Styles.playerImageWrapper : undefined}
       >
-        <View style={isTablet ? Styles.tabletLayout : null}>
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveComponentHorizontal}
+          additionalData={{
+            disableAnimatedComponent: !isTablet,
+            moveValue: (dimensions.width - 463) / 2,
+            extraAnimation: !isTablet
+              ? {
+                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
+                    style: Styles.paddingHorizontal,
+                  },
+                }
+              : null,
+          }}
+          style={isTablet ? Styles.alignItemsCenter : undefined}
+        >
           <PlayerImageBackground
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
-          />
-          <AudioDescription
-            title={title}
-            summary={summary}
-            value={value}
-            layoutState={layoutState}
+            imageStyle={Styles.backgroundImageContainerImageStyle(
+              isTablet,
+              docked,
+              startComponentsAnimation,
+              isActiveGesture
+            )}
+            defaultImageDimensions={defaultImageDimensions}
           />
-          <Separator />
-          {needsToShowProgressBar && (
-            <View>
-              <ProgressBar
-                content={entry}
-                value={value}
-                visible={true}
-                layoutState={layoutState}
-                onPlayerSeek={onPlayerSeek}
-                playerState={playerState}
-                disableFullscreen={true}
-                sliderStyle={2}
-              />
-
-              {showCounter && timeLeft >= 0 && (
-                <CountDown
-                  timeLeft={timeLeft}
+        </AnimationComponent>
+
+        <DockedLayout {...props} />
+      </AnimationComponent>
+      <View
+        style={[
+          Styles.paddingHorizontal,
+          isTablet ? Styles.tabletLayout : undefined,
+        ]}
+      >
+        {!docked && (
+          <AnimationComponent
+            animationType={ComponentAnimationType.componentFade}
+          >
+            <AudioDescription
+              title={title}
+              summary={summary}
+              value={value}
+              layoutState={layoutState}
+            />
+            <Separator />
+            {needsToShowProgressBar && (
+              <View>
+                <ProgressBar
+                  content={entry}
                   value={value}
-                  title={sleepTitle}
+                  visible={true}
+                  layoutState={layoutState}
+                  onPlayerSeek={onPlayerSeek}
+                  playerState={playerState}
+                  disableFullscreen={true}
+                  sliderStyle={2}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
                 />
-              )}
 
-              <Separator />
-            </View>
-          )}
-          <Controls
-            value={value}
-            visible={true}
-            keepAlive={null}
-            buttons={controlButtons}
-            style={Styles.controls(isTablet, isLiveContent && showFullControls)}
-            playerState={playerState}
-          />
-        </View>
+                {showCounter && timeLeft >= 0 && (
+                  <CountDown
+                    timeLeft={timeLeft}
+                    value={value}
+                    title={sleepTitle}
+                  />
+                )}
+
+                <Separator />
+              </View>
+            )}
+            <Controls
+              value={value}
+              visible={true}
+              keepAlive={null}
+              buttons={controlButtons}
+              style={Styles.controls(
+                isTablet,
+                isLiveContent && showFullControls
+              )}
+              playerState={playerState}
+            />
+          </AnimationComponent>
+        )}
       </View>
     </View>
   );

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

@@ -15,8 +15,13 @@ import {
   Button,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
-import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import {
+  useModalAnimationContext,
+  AnimationComponent,
+  ComponentAnimationType,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Dimensions = {
   width: number;
@@ -104,14 +109,26 @@ const backgroundColorStyle = (value: GetValue): ViewStyle => ({
   backgroundColor: value("docked_player_background_color"),
 });
 
-const playerDimensionsStyle = ({
-  height,
-}: PlayerDimensionsProp): ViewStyle => ({
-  paddingLeft: height || 100,
+const playerDimensionsStyle = (
+  minimisedHeight: number,
+  addPadding: boolean
+): ViewStyle => ({
+  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
 });
 
-const backgroundImageStyle = (dimensions: Dimensions): ViewStyle => ({
-  height: dimensions.height,
+const animatedContainerStyle = (docked: boolean): ViewStyle => ({
+  top: docked ? 2 : null,
+  position: "absolute",
+  width: "100%",
+  zIndex: docked ? 1 : -1,
+});
+
+const backgroundImageStyle = (
+  dimensions: Dimensions,
+  minimisedHeight: number,
+  isActiveGesture: boolean
+): ViewStyle => ({
+  height: isActiveGesture ? minimisedHeight : dimensions.height,
   aspectRatio: 1,
   position: "absolute",
 });
@@ -193,7 +210,6 @@ export default function DockedLayout(props: LayoutProps) {
     dimensions,
     entry,
     onCloseVideoModal,
-    maximiseVideoModal,
     onPlayerSeek,
     playerState,
     configuration,
@@ -207,9 +223,29 @@ export default function DockedLayout(props: LayoutProps) {
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
 
+  const {
+    isActiveGesture,
+    setPlayerAnimationState,
+    startComponentsAnimation,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const maximazeVideoModal = React.useCallback(
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    []
+  );
+
+  if (!layoutState.docked && !startComponentsAnimation) return null;
+
   return (
-    <View style={styles.container}>
-      {!playerState.isLive && (
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentAppears}
+      style={[
+        styles.container,
+        animatedContainerStyle(isActiveGesture || layoutState.docked),
+      ]}
+    >
+      {!playerState.isLive && layoutState.docked && (
         <ProgressBar
           content={entry}
           value={value}
@@ -217,18 +253,27 @@ export default function DockedLayout(props: LayoutProps) {
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
+          docked
         />
       )}
 
       <View style={styles.content}>
-        <PlayerImageBackground
-          configuration={configuration}
-          entry={entry}
-          style={backgroundImageStyle(dimensions)}
+        <View
+          style={backgroundImageStyle(
+            dimensions,
+            minimisedHeight,
+            isActiveGesture
+          )}
         />
-        <TouchableWithoutFeedback onPress={maximiseVideoModal}>
+        <TouchableWithoutFeedback onPress={maximazeVideoModal}>
           <View
-            style={[styles.touchableArea, playerDimensionsStyle(dimensions)]}
+            style={[
+              styles.touchableArea,
+              playerDimensionsStyle(
+                minimisedHeight,
+                isActiveGesture || layoutState.docked
+              ),
+            ]}
           >
             <View
               style={[
@@ -272,6 +317,6 @@ export default function DockedLayout(props: LayoutProps) {
           />
         </View>
       </View>
-    </View>
+    </AnimationComponent>
   );
 }

package/src/Player/AudioLayer/Layout/defaultLayoutsConts.ts

@@ -19,6 +19,8 @@ const playbackButtonMargins = (
 ): number =>
   isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
 
+export const PADDING_HORIZONTAL = 15;
+
 export const playbackButton = ({
   playerState,
   liveButton,

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

@@ -1,6 +1,5 @@
 import React from "react";
 import DefaultLayout from "./DefaultLayout";
-import DockedLayout from "./DockedLayout";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
 type Dimensions = {
@@ -40,6 +39,7 @@ type LayoutProps = {
   onSkipLive: () => void;
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
+  defaultDimensions: Dimensions;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
@@ -48,11 +48,5 @@ type LayoutProps = {
 export default function Layout(
   props: LayoutProps
 ): React.ReactElement<LayoutProps> {
-  const { layoutState } = props;
-
-  if (layoutState.docked) {
-    return <DockedLayout {...props} />;
-  }
-
   return <DefaultLayout {...props} />;
 }

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

@@ -111,7 +111,7 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     };
 
     fetchColors();
-  }, [image, fallbackUrl, colors, defaultColor]);
+  }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

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";
@@ -38,6 +32,12 @@ import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/c
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+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()
@@ -57,6 +57,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -70,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;
@@ -101,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
@@ -109,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;
   }
 
@@ -118,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()) {
@@ -174,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
@@ -398,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({});
       }
     });
@@ -429,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 }) => {
@@ -448,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);
@@ -652,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;
         }
@@ -780,7 +713,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
       docked,
       entry,
       fullscreen,
@@ -790,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;
 
@@ -856,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,
@@ -915,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 = {
@@ -949,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 = {
@@ -969,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 = {
@@ -1027,6 +962,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          nativeControls={!!controls}
         />
       ) : null;
     };
@@ -1061,29 +997,14 @@ 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}
               {...nativeProps}
             />
           )}
-          <AudioPlayerWrapper {...sharedWrapperViewProps}>
-            <View>
-              {
-                <PlayNextOverlay
-                  item={entry}
-                  playerIsDocked={docked}
-                  pluginConfiguration={this.getPluginConfiguration()}
-                  playerId={this.props.playerId}
-                  playNextData={this.getPlayNextData()}
-                  setNextVideoPreloadThresholdPercentage={
-                    this.props.setNextVideoPreloadThresholdPercentage
-                  }
-                />
-              }
-            </View>
-          </AudioPlayerWrapper>
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
         <PlayerWrapper {...sharedWrapperViewProps}>
@@ -1098,11 +1019,24 @@ export default class VideoPlayer extends React.Component<
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
                   {isAudioItem && (
-                    <AudioPlayer
-                      style={playerDimensions}
-                      audio_item={entry}
-                      plugin_configuration={this.getPluginConfiguration()}
-                    />
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={{
+                        ...playerDimensions,
+                        inlineAudioPlayer: true,
+                      }}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <AudioPlayer
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        audio_item={entry}
+                        plugin_configuration={this.getPluginConfiguration()}
+                      />
+                    </AnimationComponent>
                   )}
 
                   {shouldRenderBackground && (
@@ -1114,18 +1048,28 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
-                    <this.props.PlayerComponent
-                      ref={this._assignRoot}
-                      {...nativeEvents}
-                      {...nativeProps}
-                      listener={this.props.listener}
+                  {(!castAction?.state?.connected || supportNativeCast) && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={playerDimensions}
                       style={getStyle(playerDimensions)}
-                      pluginConfiguration={this.getPluginConfiguration()}
-                      controller={this.props.controller}
                     >
-                      {this.childrenWithPlayNext()}
-                    </this.props.PlayerComponent>
+                      <this.props.PlayerComponent
+                        ref={this._assignRoot}
+                        {...nativeEvents}
+                        {...nativeProps}
+                        listener={this.props.listener}
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        pluginConfiguration={this.getPluginConfiguration()}
+                        controller={this.props.controller}
+                      >
+                        {this.childrenWithPlayNext()}
+                      </this.props.PlayerComponent>
+                    </AnimationComponent>
                   )}
                 </View>