@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3552323332 → 14.0.0-alpha.4009339136

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/summary.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 80,
       "marginBottom": 30,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/title.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/audioPlayer.test.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
-import { AudioPlayer } from "../AudioPlayer";
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
 
 const audioPlayerProps = {
   audio_item: {
@@ -45,9 +49,9 @@ const audioPlayerProps = {
   styles: {},
 };
 
-describe("<AudioPlayer />", () => {
+describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<AudioPlayer {...audioPlayerProps} />);
+    const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/{helpers.tsx → tv/helpers.tsx}

@@ -2,9 +2,8 @@ const defaults = {
   audio_player_title_color: "white",
   audio_player_summary_color: "white",
   audio_player_background_color: "black",
-  audio_player_artwork_aspect_ratio: "1:1",
+  audio_player_background_image: undefined,
   audio_player_rtl: false,
-  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/AudioPlayer/{AudioPlayer.tsx → tv/index.tsx}

@@ -1,60 +1,24 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { AudioPlayerTVLayout } from "./Layout";
 
-import { AudioPlayerLayout } from "./AudioPlayerLayout";
 import { Channel } from "./Channel";
 import { Title } from "./Title";
 import { Summary } from "./Summary";
 import { Runtime } from "./Runtime";
 import { getPropertyFromEntryOrConfig } from "./helpers";
-import { ViewStyle } from "react-native";
-
-type Props = {
-  audio_item: ZappEntry & {
-    extensions?: {
-      audio_player_artwork_aspect_ratio?: string;
-      audio_player_background_image?: string;
-      audio_player_background_color?: string;
-      audio_player_channel_icon?: string;
-      audio_player_title_color?: string;
-      audio_player_summary_color?: string;
-      audio_player_rtl?: boolean;
-      audio_player_background_image_default_color?: string;
-      start_time?: string;
-      end_time?: string;
-    };
-  };
-  plugin_configuration: {
-    audio_player_background_color?: string;
-    audio_player_title_color?: string;
-    audio_player_summary_color?: string;
-    audio_player_rtl?: string;
-    audio_player_background_image_default_color?: string;
-    audio_player_background_image?: string;
-    audio_player_artwork_aspect_ratio?: string;
-    lg_tv_audio_player_title_font_family?: string;
-    lg_tv_audio_player_title_font_size?: number;
-    lg_tv_audio_player_summary_font_family?: string;
-    lg_tv_audio_player_summary_font_size?: number;
-    samsung_tv_audio_player_title_font_family?: string;
-    samsung_tv_audio_player_title_font_size?: number;
-    samsung_tv_audio_player_summary_font_family?: string;
-    samsung_tv_audio_player_summary_font_size?: number;
-    tv_os_audio_player_title_font_family?: string;
-    tv_os_audio_player_title_font_size?: number;
-    tv_os_audio_player_summary_font_family?: string;
-    tv_os_audio_player_summary_font_size?: number;
-  };
-  style?: ViewStyle;
-};
-
-export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration } = props;
+
+import { Props } from "../types";
+
+export function AudioPlayerTV(props: Props) {
+  const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -64,20 +28,20 @@ export function AudioPlayer(props: Props) {
   );
 
   const config = useMemo(() => {
-    // Checking if we are recieving items from the DSP
+    // Checking if we are receiving items from the DSP
     const titleColor = getProp("audio_player_title_color");
     const summaryColor = getProp("audio_player_summary_color");
     const backgroundColor = getProp("audio_player_background_color");
     const backgroundImage = getProp("audio_player_background_image");
-    const artworkAspectRatio = getProp("audio_player_artwork_aspect_ratio");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
-    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
-    const audioPlayerBackgroundImageDefaultColor = getProp(
-      "audio_player_background_image_default_color"
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
     );
 
+    const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -152,23 +116,18 @@ export function AudioPlayer(props: Props) {
       summaryFontSize,
       runTimeFontFamily,
       runTimeFontSize,
-      artworkAspectRatio,
       channelIcon,
-      audioPlayerBackgroundImageDefaultColor,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = imageSrcFromMediaItem(audio_item, [
-    config?.artworkAspectRatio,
-  ]);
-
   return (
-    <AudioPlayerLayout artwork={artwork} config={config}>
+    <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />
       <Runtime {...extensions} config={config} />
-    </AudioPlayerLayout>
+    </AudioPlayerTVLayout>
   );
 }

package/Components/AudioPlayer/types.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from "react-native";
+
+export type Props = {
+  audio_item: ZappEntry & {
+    extensions?: {
+      audio_player_artwork_aspect_ratio?: string;
+      audio_player_background_image?: string;
+      audio_player_background_color?: string;
+      audio_player_channel_icon?: string;
+      audio_player_title_color?: string;
+      audio_player_summary_color?: string;
+      audio_player_rtl?: boolean;
+      audio_player_background_image_default_color?: string;
+      start_time?: string;
+      end_time?: string;
+    };
+  };
+  plugin_configuration: {
+    audio_player_background_color?: string;
+    audio_player_title_color?: string;
+    audio_player_summary_color?: string;
+    audio_player_rtl?: string;
+    audio_player_background_image_default_color?: string;
+    audio_player_background_image?: string;
+    audio_player_artwork_aspect_ratio?: string;
+    lg_tv_audio_player_title_font_family?: string;
+    lg_tv_audio_player_title_font_size?: number;
+    lg_tv_audio_player_summary_font_family?: string;
+    lg_tv_audio_player_summary_font_size?: number;
+    samsung_tv_audio_player_title_font_family?: string;
+    samsung_tv_audio_player_title_font_size?: number;
+    samsung_tv_audio_player_summary_font_family?: string;
+    samsung_tv_audio_player_summary_font_size?: number;
+    tv_os_audio_player_title_font_family?: string;
+    tv_os_audio_player_title_font_size?: number;
+    tv_os_audio_player_summary_font_family?: string;
+    tv_os_audio_player_summary_font_size?: number;
+  };
+  style?: ViewStyle;
+};

package/Components/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -88,7 +88,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-} as const;
+};
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -127,7 +127,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    backgroundColor: "black",
+    background: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -135,9 +135,6 @@ const webStyles = {
   },
   inlineRiver: {
     height: INLINE_CONTAINER_CONTENT_HEIGHT,
-
-    borderWidth: 4,
-    borderColor: "yellow",
   },
 };
 
@@ -148,6 +145,7 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
+    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -567,9 +565,8 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
-      mode as any
-    ) || isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
+    isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -590,11 +587,7 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (
-      screen_background_color &&
-      mode !== VideoModalMode.FULLSCREEN &&
-      isTV()
-    ) {
+    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -644,17 +637,14 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
-                pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
-                  pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                 >
                   {/* Player container */}
                   <View
-                    pointerEvents={mode === "MINIMIZED" ? "box-none" : "auto"}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
@@ -726,7 +716,7 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={0}
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{

package/Components/PlayerImageBackground/index.tsx

@@ -28,7 +28,7 @@ const PlayerImageBackgroundComponent = ({
   defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
+    () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
     [imageKey, entry]
   );
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated, Dimensions } from "react-native";
+import { Animated } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,7 +23,6 @@ export enum PlayerAnimationStateEnum {
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
-  yTranslate: React.MutableRefObject<Animated.Value | null>;
   isActiveGesture: boolean;
   playerAnimationState: PlayerAnimationStateT;
   setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
@@ -49,7 +48,6 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
-  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -75,10 +73,6 @@ export const ReactContext = React.createContext<ModalAnimationContextT>({
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
-  const yTranslate = React.useRef(
-    new Animated.Value(Dimensions.get("window").height)
-  );
-
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);
 
@@ -106,7 +100,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     // Reset player animation state when video modal is closed
     if (!visible) {
       resetPlayerAnimationState();
-      yTranslate.current?.setValue(Dimensions.get("window").height);
     }
   }, [visible, resetPlayerAnimationState]);
 
@@ -148,7 +141,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
-        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,8 +11,6 @@ import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactH
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -28,10 +26,6 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
-  inline?: any;
-  docked?: boolean;
-  isModal?: boolean;
-  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -48,24 +42,8 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  inline,
-  docked,
-  isModal,
-  pip,
+  isTablet = false,
 }: Props) => {
-  const isInlineModal = inline && isModal;
-
-  // Mounting the PlayerDetails component is a resource-intensive process.
-  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
-  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
-  // This helps to avoid blocking the rotation and any animations related to the rotation.
-  const isShowPlayerDetails = useDelayedPlayerDetails({
-    isInline: isInlineModal,
-    isDocked: docked,
-    isPip: pip,
-  });
-
-  const isTablet = useIsTablet();
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
@@ -101,7 +79,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
+  if (isNilOrEmpty(screenData?.ui_components)) {
     return null;
   }
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -9,8 +9,16 @@ import {
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { PlayerDetails } from "./PlayerDetails";
 import { playerDimensionsHack } from "./utils";
-import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
+import { useDelayedPlayerDetails } from "./hooks";
+
+import {
+  AnimatedScrollModal,
+  AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
 
@@ -36,15 +44,29 @@ type Props = {
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
+  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
-
-  playerContent: (styles: ViewStyle) => React.ReactNode;
 };
 
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+  playerDetails: { flex: 1, paddingTop: 20 },
+  flex: { flex: 1 },
+});
+
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
 });
 
+const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
+  if (isTabletLandscape) {
+    return orientationStyles.landscape;
+  }
+
+  return orientationStyles.portrait;
+};
+
 const getScreenAspectRatio = () => {
   const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
   const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
@@ -64,6 +86,51 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   return ["top"];
 };
 
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
+const getTabletWidth = (
+  configuration: Configuration,
+  dimensions: DimensionsT
+) => {
+  const tablet_landscape_sidebar_width =
+    configuration?.tablet_landscape_sidebar_width;
+
+  const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return widthValue * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return widthValue * 0.65;
+  }
+
+  return widthValue - sidebarWidth;
+};
+
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -72,26 +139,35 @@ const PlayerWrapperComponent = (props: Props) => {
     inline,
     docked,
     isModal,
+    children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
-    playerContent,
   } = props;
 
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
 
+  // Mounting the PlayerDetails component is a resource-intensive process.
+  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
+  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
+  // This helps to avoid blocking the rotation and any animations related to the rotation.
+  const isShowPlayerDetails = useDelayedPlayerDetails({
+    isInline: isInlineModal,
+    isDocked: docked,
+    isPip: pip,
+  });
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
-  const tabletWidth = getTabletWidth(
-    configuration.tablet_landscape_sidebar_width,
-    style
-  );
+  const tabletWidth = getTabletWidth(configuration, style);
 
   const baseDimensions: DimensionsT = React.useMemo(
     () => ({
-      width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+      width:
+        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
       height: undefined,
     }),
     [isInlineModal, tabletWidth, docked]
@@ -100,7 +176,7 @@ const PlayerWrapperComponent = (props: Props) => {
   const playerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      width: baseDimensions.width,
+      width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
     [baseDimensions, isInlineModal, pip]
@@ -109,7 +185,8 @@ const PlayerWrapperComponent = (props: Props) => {
   const containerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      aspectRatio: playerDimensions.aspectRatio,
+      aspectRatio:
+        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
     }),
     [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
@@ -117,29 +194,68 @@ const PlayerWrapperComponent = (props: Props) => {
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
-    () => ({
-      ...playerDimensions,
-      ...playerDimensionsHack,
-    }),
+    () => ({ ...playerDimensions, ...playerDimensionsHack }),
     [containerDimensions, playerDimensionsHack]
   );
 
+  const wrapperViewStyle: ViewStyle = {
+    backgroundColor:
+      isTablet && !fullscreen
+        ? configuration?.tablet_landscape_player_container_background_color
+        : "transparent",
+  };
+
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={playerDimensionsHack}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
-      <View
-        testID={`${entry?.id}-player-container`}
-        style={[
-          defaultStyles.playerContainer,
-          playerDimensionsHack,
-          containerDimensions,
-          containerStyle,
-        ]}
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
       >
-        {playerContent(childrenStyles)}
-      </View>
+        <View
+          testID={`${entry?.id}-player-container`}
+          style={[
+            defaultStyles.playerContainer,
+            containerDimensions,
+            containerStyle,
+            playerDimensionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            style={isTabletLandscape ? defaultStyles.flex : undefined}
+            additionalData={{
+              useLayoutMeasure: isTabletLandscape,
+              disableAnimatedComponent: !isTabletLandscape,
+              resetAnimationValue: isTabletLandscape && docked,
+            }}
+          >
+            <AnimatedVideoPlayerComponent>
+              {children(childrenStyles)}
+            </AnimatedVideoPlayerComponent>
+          </AnimationComponent>
+        </View>
+
+        <AnimatedScrollModal>
+          {isShowPlayerDetails ? (
+            <AnimationComponent
+              animationType={ComponentAnimationType.componentFade}
+              style={defaultStyles.flex}
+            >
+              <PlayerDetails
+                configuration={configuration}
+                style={defaultStyles.playerDetails}
+                entry={entry}
+                isTabletLandscape={isTabletLandscape}
+                isTablet={isTablet}
+              />
+            </AnimationComponent>
+          ) : null}
+        </AnimatedScrollModal>
+      </AnimationComponent>
     </WrapperView>
   );
 };