@applicaster/quick-brick-player 12.0.0-alpha.5040434238 → 12.0.0-alpha.5050333009

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.5040434238",
+  "version": "12.0.0-alpha.5050333009",
   "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-alpha.5040434238",
-    "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.5040434238",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5040434238",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5040434238",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.96",
+    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-alpha.5050333009",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.5050333009",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5050333009",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5050333009",
     "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",
@@ -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);
@@ -377,10 +378,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(
-    () => (["right", "left", "top"]),
-    [docked]
-  );
+  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
 
   const ContainerView = SafeAreaView;
 
@@ -390,12 +388,10 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
+          style={Styles.playerContainer}
         >
           <AnimatedScrollModal>
-            <View
-              style={Styles.playerContainer}
-              onLayout={onLayout}
-            >
+            <View style={Styles.playerContainer} onLayout={onLayout}>
               <Layout
                 entry={entry}
                 playerState={playerState}
@@ -426,7 +422,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
               />
               <View style={Styles.paddingHorizontal}>
                 {children}
-                <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                >
                   <PlayerDetails
                     configuration={configuration}
                     style={Styles.playerDetails}

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,
@@ -27,8 +28,13 @@ import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-compone
 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 {
+  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;
@@ -75,7 +81,7 @@ type LayoutProps = {
 
 const Styles = {
   container: { flex: 1 },
-  tabletContainer: (isPortraitMode) => ({
+  tabletContainer: (isPortraitMode: boolean) => ({
     flex: 1,
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
@@ -95,19 +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;
+    const mobileValue = dimensions.width
+      ? dimensions.width - PADDING_HORIZONTAL * 2
+      : 330;
 
     return {
       width: isTablet ? 463 : mobileValue,
       height: isTablet ? 463 : mobileValue,
     };
   },
-  backgroundImageContainerImageStyle: (isTablet, docked, startComponentsAnimation, isActiveGesture) => ({
-    borderRadius: (startComponentsAnimation && isActiveGesture) || docked ? 0 : (isTablet ? 24 : 10),
+  backgroundImageContainerImageStyle: (
+    isTablet: boolean,
+    docked: boolean,
+    startComponentsAnimation: boolean,
+    isActiveGesture: boolean
+  ) => ({
+    borderRadius:
+      (startComponentsAnimation && isActiveGesture) || docked
+        ? 0
+        : isTablet
+        ? 24
+        : 10,
   }),
 
   paddingHorizontal: {
-    paddingHorizontal: PADDING_HORIZONTAL
+    paddingHorizontal: PADDING_HORIZONTAL,
   },
 
   controlsMobile: {
@@ -174,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);
   }
 
@@ -205,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({
@@ -239,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,
@@ -260,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);
 
@@ -276,31 +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 needsToShowProgressBar =
-    (isLiveContent && liveSeekingEnabled) || !isLiveContent;
+  const defaultImageDimensions = React.useMemo(
+    () =>
+      defaultDimensions &&
+      Styles.backgroundImageContainer(defaultDimensions, isTablet),
+    [defaultDimensions, isTablet]
+  );
 
-  const defaultImageDimensions = React.useMemo(() =>
-    defaultDimensions && Styles.backgroundImageContainer(defaultDimensions, isTablet), [defaultDimensions]);
-  
-  const { isActiveGesture, startComponentsAnimation } = useModalAnimationContext();
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
 
   return (
     <View
@@ -318,34 +354,50 @@ export default function DefaultLayout(props: LayoutProps) {
           actionButtons={actionButtons}
         />
       </AnimationComponent>
-      <AnimationComponent animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : null}>
-        <AnimationComponent animationType={ComponentAnimationType.moveComponentHorizontal}
-          additionalData={
-            {
-              disableAnimatedComponent: !isTablet,
-              moveValue: (dimensions.width - 463) / 2,
-              extraAnimation: !isTablet ? {
-                [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
-                  style: Styles.paddingHorizontal,
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        style={isTablet ? Styles.playerImageWrapper : undefined}
+      >
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveComponentHorizontal}
+          additionalData={{
+            disableAnimatedComponent: !isTablet,
+            moveValue: (dimensions.width - 463) / 2,
+            extraAnimation: !isTablet
+              ? {
+                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
+                    style: Styles.paddingHorizontal,
+                  },
                 }
-              } : null
-            }
-          }
-          style={isTablet ? Styles.alignItemsCenter : null}>
+              : null,
+          }}
+          style={isTablet ? Styles.alignItemsCenter : undefined}
+        >
           <PlayerImageBackground
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(isTablet, docked, startComponentsAnimation, isActiveGesture)}
+            imageStyle={Styles.backgroundImageContainerImageStyle(
+              isTablet,
+              docked,
+              startComponentsAnimation,
+              isActiveGesture
+            )}
             defaultImageDimensions={defaultImageDimensions}
           />
         </AnimationComponent>
 
         <DockedLayout {...props} />
       </AnimationComponent>
-      <View style={[Styles.paddingHorizontal, isTablet ? Styles.tabletLayout : null]}>
-        {!docked &&
-          <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+      <View
+        style={[
+          Styles.paddingHorizontal,
+          isTablet ? Styles.tabletLayout : undefined,
+        ]}
+      >
+        {!docked && (
+          <AnimationComponent
+            animationType={ComponentAnimationType.componentFade}
+          >
             <AudioDescription
               title={title}
               summary={summary}
@@ -364,6 +416,10 @@ export default function DefaultLayout(props: LayoutProps) {
                   playerState={playerState}
                   disableFullscreen={true}
                   sliderStyle={2}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
+                  onSkipLive={onSkipLive}
                 />
 
                 {showCounter && timeLeft >= 0 && (
@@ -382,11 +438,14 @@ export default function DefaultLayout(props: LayoutProps) {
               visible={true}
               keepAlive={null}
               buttons={controlButtons}
-              style={Styles.controls(isTablet, isLiveContent && showFullControls)}
+              style={Styles.controls(
+                isTablet,
+                isLiveContent && showFullControls
+              )}
               playerState={playerState}
             />
           </AnimationComponent>
-        }
+        )}
       </View>
     </View>
   );

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

@@ -109,18 +109,24 @@ const backgroundColorStyle = (value: GetValue): ViewStyle => ({
   backgroundColor: value("docked_player_background_color"),
 });
 
-const playerDimensionsStyle = (minimisedHeight: number, addPadding: boolean): ViewStyle => ({
-  paddingLeft: addPadding ? (minimisedHeight || 100) : 0,
+const playerDimensionsStyle = (
+  minimisedHeight: number,
+  addPadding: boolean
+): ViewStyle => ({
+  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
 });
 
 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 => ({
+const backgroundImageStyle = (
+  dimensions: Dimensions,
+  minimisedHeight: number,
+  isActiveGesture: boolean
+): ViewStyle => ({
   height: isActiveGesture ? minimisedHeight : dimensions.height,
   aspectRatio: 1,
   position: "absolute",
@@ -215,32 +221,60 @@ 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), []);
+
+  const {
+    isActiveGesture,
+    setPlayerAnimationState,
+    startComponentsAnimation,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const maximazeVideoModal = React.useCallback(
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    []
+  );
 
   if (!layoutState.docked && !startComponentsAnimation) return null;
-  
+
   return (
-    <AnimationComponent animationType={ComponentAnimationType.componentAppears}
-      style={[styles.container, animatedContainerStyle(isActiveGesture || layoutState.docked)]}
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentAppears}
+      style={[
+        styles.container,
+        animatedContainerStyle(isActiveGesture || layoutState.docked),
+      ]}
     >
-      {!playerState.isLive && layoutState.docked && (
-        <ProgressBar
-          content={entry}
-          value={value}
-          visible={visible}
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-          docked
-        />
-      )}
+      {!playerState.isLive &&
+        (layoutState.docked || startComponentsAnimation) && (
+          <ProgressBar
+            content={entry}
+            value={value}
+            visible={visible}
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={startComponentsAnimation}
+            docked
+          />
+        )}
 
       <View style={styles.content}>
-        <View style={backgroundImageStyle(dimensions, minimisedHeight, isActiveGesture)}/>
+        <View
+          style={backgroundImageStyle(
+            dimensions,
+            minimisedHeight,
+            isActiveGesture
+          )}
+        />
         <TouchableWithoutFeedback onPress={maximazeVideoModal}>
           <View
-            style={[styles.touchableArea, playerDimensionsStyle(minimisedHeight, isActiveGesture || layoutState.docked)]}
+            style={[
+              styles.touchableArea,
+              playerDimensionsStyle(
+                minimisedHeight,
+                isActiveGesture || layoutState.docked
+              ),
+            ]}
           >
             <View
               style={[

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,
@@ -111,13 +124,32 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     };
 
     fetchColors();
-  }, [image, fallbackUrl, colors, defaultColor]);
+  }, []);
+
+  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

@@ -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,11 @@ export const addQueryParam = (
 
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
+
+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";
 
@@ -38,16 +38,11 @@ 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";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -117,8 +112,6 @@ export default class VideoPlayer extends React.Component<
   }
 
   componentWillUnmount() {
-    this.stopBackgroundPlayback();
-
     this.playbackStarted = false;
     this.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
@@ -163,6 +156,11 @@ export default class VideoPlayer extends React.Component<
     }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
   getPlayNextData = () => this.props.playNextData as PlayNextData;
 
   /**
@@ -337,11 +335,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) => {
     const { trackType, id, language } = selected || {};
 
     const isOff = language === "Off";
@@ -782,7 +776,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
       docked,
       entry,
       fullscreen,
@@ -792,8 +785,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;
 
@@ -855,10 +853,14 @@ export default class VideoPlayer extends React.Component<
       !!this.props.controller?.supportsNativeControls?.();
 
     const controls = isAppleTV()
-      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
+      ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
       : supportsNativeControls && !this.getPlayNextData();
 
-    const shouldUseNativeControls = controls && !docked;
+    const shouldUseNativeControls =
+      controls &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
 
     platformSpecificProps = {
       ...platformSpecificProps,
@@ -987,7 +989,13 @@ export default class VideoPlayer extends React.Component<
       ...androidLifecyclePiPEvents,
     };
 
-    const needToShowPlayNextOverlay = this.getPlayNextData() && !docked;
+    const needToShowPlayNextOverlay =
+      isTV() && this.getPlayNextData() && !docked;
+
+    const needToShowDefaultControls = !(
+      (controls && !castAction?.state?.connected) ||
+      this.getPlayNextData()
+    );
 
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
@@ -1029,6 +1037,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          needToShowDefaultControls={needToShowDefaultControls}
         />
       ) : null;
     };
@@ -1063,29 +1072,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}>
@@ -1100,11 +1094,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 && (
@@ -1116,7 +1123,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
+                  {(!castAction?.state?.connected || supportNativeCast) && (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={playerDimensions}
@@ -1127,7 +1134,11 @@ export default class VideoPlayer extends React.Component<
                         {...nativeEvents}
                         {...nativeProps}
                         listener={this.props.listener}
-                        style={isTV() ? getStyle(playerDimensions) : styles.playerSize}
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
                         pluginConfiguration={this.getPluginConfiguration()}
                         controller={this.props.controller}
                       >