@applicaster/quick-brick-player 12.0.0-alpha.3120641745 → 12.0.0-alpha.3132044100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.3120641745",
+  "version": "12.0.0-alpha.3132044100",
   "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.3120641745",
+    "@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.3120641745",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3120641745",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3120641745",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3132044100",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3132044100",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3132044100",
     "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 } from "react-native";
+import { ViewStyle, View, ScrollView } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -26,12 +26,6 @@ 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";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -74,20 +68,29 @@ export const defaultAspectRatioWidth = (height: number): number =>
   (height / 9) * 16;
 
 const Styles = {
-  mainContainer: (style: ViewStyle) => {
+  mainContainer: (docked: boolean, style: ViewStyle) => {
     const combinedStyle: ViewStyle = {
       flex: 1,
     };
 
-    return {
-      ...combinedStyle,
-      ...style,
-    };
+    if (!docked) {
+      style.paddingTop = 0;
+      style.paddingHorizontal = 15;
+    }
+
+    return { ...combinedStyle, ...style };
   },
-  playerContainer: {
-    flex: 1,
+  playerContainer: (docked: boolean, style: ViewStyle) => {
+    const combinedStyle: ViewStyle = {
+      flex: 1,
+    };
+
+    if (docked) {
+      combinedStyle.height = style.height;
+    }
+
+    return combinedStyle;
   },
-  paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
 
   controlsMobile: {
     height: 50,
@@ -165,9 +168,6 @@ 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,11 +181,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     const { width, height } = event.nativeEvent.layout;
 
     setDimensions({
-      width,
+      width: docked ? defaultAspectRatioWidth(height) : width,
       height,
     });
-
-    if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
   const cancelSleepTimer = async () => {
@@ -377,64 +375,58 @@ 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[]>(
+    () => (docked ? [] : ["right", "left", "top"]),
+    [docked]
+  );
 
-  const ContainerView = SafeAreaView;
+  const ContainerView = docked ? View : SafeAreaView;
 
   const MainContent = React.useMemo(() => {
     return (
-      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveUpComponent}
-          additionalData={{ saveArea: true }}
+      <ContainerView style={Styles.mainContainer(docked, style)} edges={edges}>
+        <ScrollView
+          style={Styles.playerContainer(docked, style)}
+          onLayout={onLayout}
         >
-          <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>
+          <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>
       </ContainerView>
     );
   }, [

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

@@ -18,21 +18,13 @@ 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";
 
 type Dimensions = {
   width: number;
@@ -68,13 +60,9 @@ 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 = {
@@ -84,13 +72,10 @@ const Styles = {
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  playerImageWrapper: {
-    width: "100%",
-    maxHeight: 750,
-    marginTop: 80,
-  },
   tabletLayout: {
     width: 463,
+    maxHeight: 750,
+    marginTop: 80,
     marginBottom: 80,
   },
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
@@ -99,31 +84,24 @@ 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 : mobileValue,
-      height: isTablet ? 463 : mobileValue,
+      width: isTablet ? 463 : dimensions.width || 330,
+      height: isTablet ? 463 : dimensions.width || 330,
     };
   },
-  backgroundImageContainerImageStyle: (
-    isTablet,
-    docked,
-    startComponentsAnimation,
-    isActiveGesture
-  ) => ({
-    borderRadius:
-      (startComponentsAnimation && isActiveGesture) || docked
-        ? 0
-        : isTablet
-        ? 24
-        : 10,
+  backgroundImageContainerImageStyle: (isTablet) => ({
+    borderRadius: isTablet ? 24 : 10,
   }),
+  playerContainer: (docked: boolean, style) => {
+    const combinedStyle = {
+      flex: 1,
+    };
+
+    if (docked) {
+      combinedStyle["height"] = style.height;
+    }
 
-  paddingHorizontal: {
-    paddingHorizontal: PADDING_HORIZONTAL,
+    return combinedStyle;
   },
 
   controlsMobile: {
@@ -137,12 +115,6 @@ const Styles = {
   separator: {
     height: 20,
   },
-  flexDirectionRow: {
-    flexDirection: "row",
-  },
-  alignItemsCenter: {
-    alignItems: "center",
-  },
 };
 
 export default function DefaultLayout(props: LayoutProps) {
@@ -167,14 +139,12 @@ 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");
 
@@ -313,120 +283,71 @@ export default function DefaultLayout(props: LayoutProps) {
   const needsToShowProgressBar =
     (isLiveContent && liveSeekingEnabled) || !isLiveContent;
 
-  const defaultImageDimensions = React.useMemo(
-    () =>
-      defaultDimensions &&
-      Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions]
-  );
-
-  const { isActiveGesture, startComponentsAnimation } =
-    useModalAnimationContext();
-
   return (
     <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 : null}
+      <TransportInfo
+        content={entry}
+        value={value}
+        visible={true}
+        languageData={languageData}
+        layoutState={layoutState}
+        actionButtons={actionButtons}
+      />
+      <View
+        style={
+          isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
+        }
       >
-        <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}
-        >
+        <View style={isTablet ? Styles.tabletLayout : null}>
           <PlayerImageBackground
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(
-              isTablet,
-              docked,
-              startComponentsAnimation,
-              isActiveGesture
-            )}
-            defaultImageDimensions={defaultImageDimensions}
+            imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
           />
-        </AnimationComponent>
-
-        <DockedLayout {...props} />
-      </AnimationComponent>
-      <View
-        style={[
-          Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : null,
-        ]}
-      >
-        {!docked && (
-          <AnimationComponent
-            animationType={ComponentAnimationType.componentFade}
-          >
-            <AudioDescription
-              title={title}
-              summary={summary}
-              value={value}
-              layoutState={layoutState}
-            />
-            <Separator />
-            {needsToShowProgressBar && (
-              <View>
-                <ProgressBar
-                  content={entry}
+          <AudioDescription
+            title={title}
+            summary={summary}
+            value={value}
+            layoutState={layoutState}
+          />
+          <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}
                   value={value}
-                  visible={true}
-                  layoutState={layoutState}
-                  onPlayerSeek={onPlayerSeek}
-                  playerState={playerState}
-                  disableFullscreen={true}
-                  sliderStyle={2}
+                  title={sleepTitle}
                 />
-
-                {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>
-        )}
+
+              <Separator />
+            </View>
+          )}
+          <Controls
+            value={value}
+            visible={true}
+            keepAlive={null}
+            buttons={controlButtons}
+            style={Styles.controls(isTablet, isLiveContent && showFullControls)}
+            playerState={playerState}
+          />
+        </View>
       </View>
     </View>
   );

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

@@ -15,13 +15,8 @@ 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;
@@ -109,26 +104,14 @@ 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 = ({
+  height,
+}: PlayerDimensionsProp): ViewStyle => ({
+  paddingLeft: height || 100,
 });
 
-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,
+const backgroundImageStyle = (dimensions: Dimensions): ViewStyle => ({
+  height: dimensions.height,
   aspectRatio: 1,
   position: "absolute",
 });
@@ -210,6 +193,7 @@ export default function DockedLayout(props: LayoutProps) {
     dimensions,
     entry,
     onCloseVideoModal,
+    maximiseVideoModal,
     onPlayerSeek,
     playerState,
     configuration,
@@ -223,29 +207,9 @@ 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 (
-    <AnimationComponent
-      animationType={ComponentAnimationType.componentAppears}
-      style={[
-        styles.container,
-        animatedContainerStyle(isActiveGesture || layoutState.docked),
-      ]}
-    >
-      {!playerState.isLive && layoutState.docked && (
+    <View style={styles.container}>
+      {!playerState.isLive && (
         <ProgressBar
           content={entry}
           value={value}
@@ -253,27 +217,18 @@ export default function DockedLayout(props: LayoutProps) {
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
-          docked
         />
       )}
 
       <View style={styles.content}>
-        <View
-          style={backgroundImageStyle(
-            dimensions,
-            minimisedHeight,
-            isActiveGesture
-          )}
+        <PlayerImageBackground
+          configuration={configuration}
+          entry={entry}
+          style={backgroundImageStyle(dimensions)}
         />
-        <TouchableWithoutFeedback onPress={maximazeVideoModal}>
+        <TouchableWithoutFeedback onPress={maximiseVideoModal}>
           <View
-            style={[
-              styles.touchableArea,
-              playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              ),
-            ]}
+            style={[styles.touchableArea, playerDimensionsStyle(dimensions)]}
           >
             <View
               style={[
@@ -317,6 +272,6 @@ export default function DockedLayout(props: LayoutProps) {
           />
         </View>
       </View>
-    </AnimationComponent>
+    </View>
   );
 }

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

@@ -19,8 +19,6 @@ 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,5 +1,6 @@
 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 = {
@@ -39,7 +40,6 @@ type LayoutProps = {
   onSkipLive: () => void;
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
-  defaultDimensions: Dimensions;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
@@ -48,5 +48,11 @@ 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/index.tsx

@@ -38,10 +38,6 @@ 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()
@@ -61,7 +57,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -1103,24 +1098,11 @@ export default class VideoPlayer extends React.Component<
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
                   {isAudioItem && (
-                    <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>
+                    <AudioPlayer
+                      style={playerDimensions}
+                      audio_item={entry}
+                      plugin_configuration={this.getPluginConfiguration()}
+                    />
                   )}
 
                   {shouldRenderBackground && (
@@ -1133,27 +1115,17 @@ export default class VideoPlayer extends React.Component<
                   )}
 
                   {!castAction?.state?.connected && (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.player}
-                      additionalData={playerDimensions}
+                    <this.props.PlayerComponent
+                      ref={this._assignRoot}
+                      {...nativeEvents}
+                      {...nativeProps}
+                      listener={this.props.listener}
                       style={getStyle(playerDimensions)}
+                      pluginConfiguration={this.getPluginConfiguration()}
+                      controller={this.props.controller}
                     >
-                      <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>
+                      {this.childrenWithPlayNext()}
+                    </this.props.PlayerComponent>
                   )}
                 </View>