@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1724095599 → 13.0.0-alpha.1731130113

package/Components/Screen/hooks.ts

@@ -7,15 +7,12 @@ import {
   useCurrentScreenData,
   useDimensions,
   useRoute,
+  useIsTablet,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
 
 export const useWaitForValidOrientation = () => {
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
+  const { width: screenWidth, height } = useDimensions("screen", {
     fullDimensions: true,
     updateForInactiveScreens: false,
   });
@@ -26,7 +23,7 @@ export const useWaitForValidOrientation = () => {
 
   const [readyState, setReadyState] = useState(false);
 
-  const isTablet = deviceInfo?.isTablet;
+  const isTablet = useIsTablet();
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 interface IProps {
   targetScreenId?: string;
@@ -31,11 +32,9 @@ export const useMarginTop = (targetScreenId: string): number => {
    * ScreenPicker is a component but should really be a screen.
    * We need to skip margin top for it as it's already applied to the target screen
    **/
-  const isScreenPicker =
-    screenData?.ui_components?.[0]?.component_type === "screen-picker-qb-tv";
 
   // ignore margin on screenPicker
-  if (isScreenPicker) {
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
     return 0;
   }
 

package/Components/TrackedView/index.tsx

@@ -12,6 +12,7 @@ type TrackedViewProps = {
   onPositionUpdated: (props: { rect?: Record<string, number> }) => void;
   testId?: string | undefined;
   groupId?: string;
+  clipThreshold?: number;
 };
 
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {

package/Components/Transitioner/AnimationManager.js

@@ -2,21 +2,21 @@ import { Animated } from "react-native";
 
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
-type TransitionConfig = {
-  duration: number;
-  easing: any;
-  from: {
-    style: any;
-  };
-  to: {
-    style: any;
-  };
-};
+// type TransitionConfig = {
+//   duration: number;
+//   easing: any;
+//   from: {
+//     style: any;
+//   };
+//   to: {
+//     style: any;
+//   };
+// };
 
-type Props = {
-  transitionConfig: TransitionConfig;
-  contentStyle: { [string]: any };
-};
+// type Props = {
+//   transitionConfig: TransitionConfig;
+//   contentStyle: { [string]: any };
+// };
 
 /**
  * Manages animation for the Transitioner,
@@ -25,7 +25,7 @@ type Props = {
  * which must have a proper structure, see types above ^.
  */
 export class AnimationManager {
-  constructor(props: Props) {
+  constructor(props) {
     this.animatedValue = new Animated.Value(0.0);
 
     this.config = props.transitionConfig(

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -32,6 +32,9 @@ const { log_error, log_debug } = loggerLiveImageComponent;
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
 
+// Pixels by which the view can slightly extend outside the viewport and still be considered fully visible.
+const CLIP_THRESHOLD = 10;
+
 type Props = {
   item: ZappEntry;
   style: Record<string, any>;
@@ -328,6 +331,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
+      clipThreshold={CLIP_THRESHOLD}
     >
       <View ref={trackViewRef}>
         {isVideoMode ? (

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`PlayerLiveImageComponent should render correctly with default props 1`] = `
 <TrackedView
+  clipThreshold={10}
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -46,7 +46,7 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   React.useEffect(() => {
     (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
       setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -23,10 +23,12 @@ import {
   setScrollModalAnimatedValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE } from "./const";
+
 const getAnimatedConfig = (toValue) => {
   return {
     toValue,
-    duration: 200,
+    duration: DURATION_TO_MINIMIZE,
     useNativeDriver: true,
   };
 };
@@ -70,14 +72,19 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+  const {
+    mode: videoModalMode,
+    previousMode: previousVideoModalMode,
+    item: videoModalItem,
+  } = videoModalState;
+
   const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
   const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     enableGesture &&
@@ -121,7 +128,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalMode === "MAXIMIZED") {
+        if (isMaximizedModal) {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -143,8 +150,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             translateYOffset.flattenOffset();
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-          } else {
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
+          } else if (destSnapPoint !== modalSnapPoints[0] && isMaximizedModal) {
             setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
           }
         } else {
@@ -158,7 +165,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }
@@ -168,7 +175,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
+    [
+      lastSnap,
+      modalSnapPoints,
+      playerAnimationState,
+      isMinimizedModal,
+      isMaximizedModal,
+    ]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
@@ -219,17 +232,18 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    const { mode, previousMode, item } = videoModalState;
-
     if (
-      mode === "MAXIMIZED" &&
+      videoModalMode === "MAXIMIZED" &&
       !enableGesture &&
       scrollPosition.current === 0
     ) {
       setIEnableGesture(true);
     }
 
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+    if (
+      videoModalMode === "MINIMIZED" &&
+      previousVideoModalMode === "MAXIMIZED"
+    ) {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -247,14 +261,16 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       }
     } else if (
       playerAnimationState === null &&
-      ((previousItemId === item?.id &&
-        mode === "MAXIMIZED" &&
-        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
-        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
+      ((previousItemId === videoModalItem?.id &&
+        videoModalMode === "MAXIMIZED" &&
+        (previousVideoModalMode === "MINIMIZED" ||
+          previousVideoModalMode === "MAXIMIZED")) ||
+        (previousItemId !== videoModalItem?.id &&
+          videoModalMode !== "FULLSCREEN"))
     ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
     }
-  }, [videoModalState]);
+  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -296,7 +312,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
         resetPlayerAnimationState();
       });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
         maximiseVideoModal();
         setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -50,7 +50,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     !isLanguageOverlayVisible &&
@@ -89,7 +89,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             setLastSnap(destSnapPoint);
 
             if (destSnapPoint === modalSnapPoints[0]) {
-              setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+              setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
             } else {
               lastScrollY.setValue(0);
               lastScrollYValue.current = 0;
@@ -105,7 +105,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
               modalSnapPoints[1] - preparedTranslationY
             );
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -24,8 +24,11 @@ import {
   gestureListenerHelper,
   getAnimationDefaultValue,
   getAnimationStyle,
+  getMoveUpValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE, DEFAULT_DURATION_FOR_ANIMATION } from "./const";
+
 type Props = {
   animationType: string;
   children: React.ReactNode;
@@ -91,20 +94,21 @@ export const AnimationView = ({
   const isAudioItem = React.useMemo(
     () =>
       videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
+      videoModalItem?.type?.value?.includes?.("audio"),
     [videoModalItem]
   );
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
 
-  const moveUpValue = additionalData.saveArea
-    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
-    : isTablet
-      ? isTabletLandscape &&
-        (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-        ? -tabletLandscapePlayerTopPosition + progressBarHeight
-        : -130
-      : -50 + progressBarHeight;
+  const moveUpValue = getMoveUpValue({
+    additionalData,
+    insets,
+    isAudioItem,
+    progressBarHeight,
+    isTablet,
+    isTabletLandscape,
+    tabletLandscapePlayerTopPosition,
+  });
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -119,7 +123,10 @@ export const AnimationView = ({
     (animationType, state) => {
       const defaultConfig = {
         toValue: 0,
-        duration: state === PlayerAnimationStateEnum.minimize ? 150 : 100,
+        duration:
+          state === PlayerAnimationStateEnum.minimize
+            ? DURATION_TO_MINIMIZE
+            : DEFAULT_DURATION_FOR_ANIMATION,
         useNativeDriver: true,
       };
 
@@ -228,6 +235,8 @@ export const AnimationView = ({
       isAudioItem,
       moveUpValue,
       moveComponentHorizontalValue,
+      isRTL,
+      inlineAudioPlayer,
     ]
   );
 
@@ -246,7 +255,7 @@ export const AnimationView = ({
       default:
         return getAnimationValue(
           animationType,
-          PlayerAnimationStateEnum.maximaze
+          PlayerAnimationStateEnum.maximize
         ).toValue;
     }
   }, [defaultValue, videoModalState]);
@@ -278,6 +287,11 @@ export const AnimationView = ({
       moveUpValue,
       moveComponentHorizontalValue,
       videoModalMode,
+      isAudioItem,
+      isTablet,
+      isTabletLandscape,
+      isRTL,
+      inlineAudioPlayer,
     ]
   );
 
@@ -306,7 +320,7 @@ export const AnimationView = ({
       }
 
       if (
-        videoModalMode === "MAXIMIZED" &&
+        (videoModalMode === "MAXIMIZED" || videoModalMode === "MINIMIZED") &&
         defaultValue.x !== screenWidth &&
         width &&
         height
@@ -332,7 +346,13 @@ export const AnimationView = ({
         animatedValue.setValue(value);
       }
     }
-  }, [videoModalState]);
+  }, [
+    animatedValue,
+    animationType,
+    getAnimationValue,
+    playerAnimationState,
+    videoModalState,
+  ]);
 
   React.useEffect(() => {
     if (
@@ -344,7 +364,7 @@ export const AnimationView = ({
         animatedValue,
         getAnimationValue(animationType, playerAnimationState)
       ).start();
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       animatedValue.setValue(defaultValue);
     }
   }, [playerAnimationState, startComponentsAnimation, defaultValue]);
@@ -427,6 +447,10 @@ export const AnimationComponent = (props: Props) => {
     videoModalState: { visible },
   } = useNavigation();
 
+  if (additionalData?.disableAnimatedComponent) {
+    return <>{props.children}</>;
+  }
+
   const useAnimation =
     visible && !additionalData.disableAnimatedComponent && !isTV();
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Animated } from "react-native";
 
 import {
@@ -14,12 +14,13 @@ import { useConfiguration } from "../utils";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
-  maximaze = "maximaze",
+  maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
+  appear_as_docked = "appear_as_docked",
 }
 
-type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
+export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
   isActiveGesture: boolean;
@@ -95,6 +96,13 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+    }
+  }, [visible, resetPlayerAnimationState]);
+
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;

package/Components/VideoModal/ModalAnimation/__tests__/getMoveUpValue.test.ts

@@ -0,0 +1,108 @@
+import { getMoveUpValue } from "../utils";
+
+describe("getMoveUpValue", () => {
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is false", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 20 },
+      isAudioItem: false,
+      progressBarHeight: 10,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-20 + 10);
+  });
+
+  it("returns correct value when additionalData.saveArea is true and isAudioItem is true", () => {
+    const result = getMoveUpValue({
+      additionalData: { saveArea: true },
+      insets: { top: 15 },
+      isAudioItem: true,
+      progressBarHeight: 5,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 100,
+    });
+
+    expect(result).toBe(-15 + 0);
+  });
+
+  it("returns correct value for audio item (tablet or not)", () => {
+    const result = getMoveUpValue({
+      additionalData: { marginTop: 30 },
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 0,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-30);
+  });
+
+  it("returns correct value for tablet landscape with inline audio player", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: true,
+      progressBarHeight: 8,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: true,
+      tabletLandscapePlayerTopPosition: 50,
+    });
+
+    expect(result).toBe(-0);
+  });
+
+  it("returns correct value for tablet landscape without audio item", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 12,
+      isTablet: true,
+      isTabletLandscape: true,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 60,
+    });
+
+    expect(result).toBe(-60 + 12);
+  });
+
+  it("returns -130 for tablet portrait (not landscape)", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 0,
+      isTablet: true,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-130);
+  });
+
+  it("returns -50 + progressBarHeight for mobile audio player in docked mode", () => {
+    const result = getMoveUpValue({
+      additionalData: {},
+      insets: { top: 0 },
+      isAudioItem: false,
+      progressBarHeight: 7,
+      isTablet: false,
+      isTabletLandscape: false,
+      inlineAudioPlayer: false,
+      tabletLandscapePlayerTopPosition: 0,
+    });
+
+    expect(result).toBe(-50 + 7);
+  });
+});

package/Components/VideoModal/ModalAnimation/const.ts

@@ -0,0 +1,5 @@
+export const DURATION_TO_MINIMIZE = 200; // old value 200
+
+export const DURATION_TO_MAXIMIZE = 0;
+
+export const DEFAULT_DURATION_FOR_ANIMATION = 200; // old value 100

package/Components/VideoModal/ModalAnimation/index.ts

@@ -14,3 +14,5 @@ export { useModalAnimationContext } from "./useModalAnimationContext";
 export { AnimationComponent } from "./AnimationComponent";
 
 export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";
+
+export { DURATION_TO_MINIMIZE, DURATION_TO_MAXIMIZE } from "./const";

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,6 +1,7 @@
 /* eslint-disable padding-line-between-statements */
 
 import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export enum ComponentAnimationType {
   bottomBar = "bottomBar",
@@ -300,3 +301,32 @@ export const resetScrollAnimatedValues = (
   dragScrollY.setValue(0);
   dragVideoPlayerY.setValue(0);
 };
+
+export const getMoveUpValue = ({
+  additionalData,
+  insets,
+  isAudioItem,
+  progressBarHeight,
+  isTablet,
+  isTabletLandscape,
+  tabletLandscapePlayerTopPosition,
+}) => {
+  if (additionalData.saveArea) {
+    return -insets.top + (isAudioItem ? 0 : progressBarHeight);
+  }
+
+  if (isAudioItem) {
+    // for any layouts in audioPlayer
+    return -1 * toNumberWithDefaultZero(additionalData?.marginTop);
+  }
+
+  if (isTablet) {
+    if (isTabletLandscape) {
+      return -tabletLandscapePlayerTopPosition + progressBarHeight;
+    } else {
+      return -130;
+    }
+  }
+
+  return -50 + progressBarHeight;
+};

package/Components/VideoModal/PlayerDetails.tsx

@@ -5,10 +5,12 @@ import {
   Easing,
   StyleProp,
   ViewStyle,
+  StyleSheet,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 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";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -21,9 +23,9 @@ type Props = {
   entry: ZappEntry;
   style: StyleProp<ViewStyle>;
   configuration: Configuration;
-  isTabletLandscape: boolean;
+  isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
-  isTablet: boolean;
+  isTablet?: boolean;
 };
 
 const containerStyle = ({
@@ -38,9 +40,9 @@ export const PlayerDetails = ({
   entry,
   style,
   configuration,
-  isTabletLandscape,
+  isTabletLandscape = false,
   isAudioPlayer,
-  isTablet,
+  isTablet = false,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -77,6 +79,10 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
+  if (isNilOrEmpty(screenData?.ui_components)) {
+    return null;
+  }
+
   return (
     <Animated.View
       style={[
@@ -90,7 +96,9 @@ export const PlayerDetails = ({
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
-          width: isTablet ? undefined : SCREEN_WIDTH,
+          width: isTablet
+            ? undefined
+            : (StyleSheet.flatten(style)?.width ?? SCREEN_WIDTH),
         },
       ]}
     >