@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5521273514 → 14.0.0-alpha.5621117258

package/Components/AudioPlayer/Artwork.tsx

@@ -1,5 +1,16 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 24,
+  },
+  image: {
+    width: 400,
+    height: 400,
+  },
+});
 
 type Props = {
   srcImage: string;
@@ -9,25 +20,19 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
 };
 
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
+export function Artwork({ srcImage, config }: Props) {
+  const borderRadius = toNumberWithDefaultZero(config.artworkBorderRadius);
 
-export function Artwork({ srcImage }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Image
         fadeDuration={0}
         source={{ uri: srcImage }}
-        style={imageStyles}
+        style={[styles.image, { borderRadius }]}
         resizeMode="cover"
       />
     </View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -52,7 +52,7 @@ type Props = {
 };
 
 export function AudioPlayer(props: Props) {
-  const { audio_item, plugin_configuration, style } = props;
+  const { audio_item, plugin_configuration } = props;
   const { extensions, title, summary } = audio_item;
 
   const getProp = useCallback(
@@ -72,6 +72,7 @@ export function AudioPlayer(props: Props) {
     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"
@@ -154,6 +155,7 @@ export function AudioPlayer(props: Props) {
       artworkAspectRatio,
       channelIcon,
       audioPlayerBackgroundImageDefaultColor,
+      artworkBorderRadius,
     };
   }, [getProp]);
 
@@ -162,7 +164,7 @@ export function AudioPlayer(props: Props) {
   ]);
 
   return (
-    <AudioPlayerLayout artwork={artwork} config={config} style={style || {}}>
+    <AudioPlayerLayout artwork={artwork} config={config}>
       <Channel srcImage={config?.channelIcon} config={config} />
       <Title title={title} config={config} />
       <Summary summary={summary} config={config} />

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { View, ImageBackground, Animated, ViewStyle } from "react-native";
+import { View, ImageBackground, Animated } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -14,12 +14,12 @@ type Props = {
     backgroundColor: string;
     backgroundImage: string;
     isRTL: boolean;
+    artworkBorderRadius: Option<number>;
   };
   children: React.ReactNode;
-  style: ViewStyle;
 };
 
-export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
+export function AudioPlayerLayout({ artwork, config, children }: Props) {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
   const fadeAudioPlayerIn = () => {
@@ -32,25 +32,24 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const { isRTL, backgroundColor, backgroundImage } = config;
 
-  const backgroundImageSource = { uri: backgroundImage };
+  const backgroundImageSource = { uri: backgroundImage || artwork };
 
-  const backgroundColorStyle = backgroundImage
+  const backgroundColorStyle = backgroundImageSource.uri
     ? "transparent"
     : backgroundColor;
 
   const mainContainerStyles = platformSelect({
     tvos: {
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
       flexDirection: directionStyles(isRTL).flexDirection,
       backgroundColor: backgroundColorStyle,
     },
     android_tv: {
-      position: "absolute",
-      width: 1920,
-      height: 1080,
+      width: "100%",
+      height: "100%",
       alignItems: "center",
       justifyContent: "center",
       flexDirection: directionStyles(isRTL).flexDirection,
@@ -67,7 +66,8 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
     native: {
       backgroundColor: backgroundColorStyle,
       overflow: "hidden",
-      ...style,
+      width: "100%",
+      height: "100%",
     },
     samsung_tv: {
       position: "absolute",

package/Components/AudioPlayer/Runtime.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, Text, ViewStyle, TextStyle } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { directionStyles } from "./helpers";
 
 type Props = {
@@ -31,7 +32,7 @@ const textStyles = ({
 }) => ({
   color: summaryColor,
   opacity: 0.8,
-  fontSize: runTimeFontSize ? Number(runTimeFontSize) : 20,
+  fontSize: toNumberWithDefault(20, runTimeFontSize),
   fontFamily: runTimeFontFamily || null,
   ...directionStyles(isRTL),
 });

package/Components/AudioPlayer/Summary.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, TextStyle } from "react-native";
+import { View, Text, TextStyle, StyleSheet } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   config: {
@@ -14,11 +15,13 @@ type Props = {
   summary: string | number;
 };
 
-const containerStyles = {
-  width: 600,
-  height: 80,
-  marginBottom: 30,
-};
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    height: 80,
+    marginBottom: 30,
+  },
+});
 
 const textStyles = ({
   summaryColor,
@@ -26,8 +29,8 @@ const textStyles = ({
   summaryFontFamily,
   summaryFontSize,
 }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: summaryFontSize ? Number(summaryFontSize) : 20,
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(20, summaryFontSize),
   color: summaryColor,
   fontWeight: "600" as TextStyle["fontWeight"],
   opacity: 0.8,
@@ -36,7 +39,7 @@ const textStyles = ({
 
 export function Summary({ summary, config }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={textStyles(config)} numberOfLines={2}>
         {summary}
       </Text>

package/Components/AudioPlayer/Title.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, TextStyle } from "react-native";
+import { View, Text, TextStyle, StyleSheet } from "react-native";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   config: {
@@ -14,15 +15,17 @@ type Props = {
   title: string | number;
 };
 
-const containerStyles = {
-  width: 600,
-  height: 100,
-  marginBottom: 12,
-};
+const styles = StyleSheet.create({
+  container: {
+    width: 600,
+    height: 100,
+    marginBottom: 12,
+  },
+});
 
 const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
-  textAlign: (isRTL ? "left" : "right") as TextStyle["textAlign"],
-  fontSize: titleFontSize ? Number(titleFontSize) : 38,
+  textAlign: (isRTL ? "right" : "left") as TextStyle["textAlign"],
+  fontSize: toNumberWithDefault(38, titleFontSize),
   fontWeight: "600" as TextStyle["fontWeight"],
   color: titleColor,
   fontFamily: titleFontFamily || null,
@@ -30,7 +33,7 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
 
 export function Title({ title, config }: Props) {
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={textStyles(config)} numberOfLines={2}>
         {title}
       </Text>

package/Components/AudioPlayer/__tests__/__snapshots__/Runtime.test.js.snap

@@ -20,7 +20,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-start",
         "opacity": 0.8,
-        "textAlign": "right",
+        "textAlign": "left",
       }
     }
   >
@@ -49,7 +49,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-end",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/__tests__/__snapshots__/artWork.test.js.snap

@@ -17,10 +17,15 @@ exports[`<Artwork /> renders correctly 1`] = `
       }
     }
     style={
-      {
-        "height": 400,
-        "width": 400,
-      }
+      [
+        {
+          "height": 400,
+          "width": 400,
+        },
+        {
+          "borderRadius": 0,
+        },
+      ]
     }
   />
 </View>

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -6,7 +6,9 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   style={
     {
       "backgroundColor": "transparent",
+      "height": "100%",
       "overflow": "hidden",
+      "width": "100%",
     }
   }
 >
@@ -15,8 +17,10 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     style={
       {
         "backgroundColor": "transparent",
+        "height": "100%",
         "opacity": 0,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -56,7 +60,9 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -6,7 +6,9 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
   style={
     {
       "backgroundColor": "transparent",
+      "height": "100%",
       "overflow": "hidden",
+      "width": "100%",
     }
   }
 >
@@ -15,8 +17,10 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
     style={
       {
         "backgroundColor": "transparent",
+        "height": "100%",
         "opacity": 0,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -56,7 +60,9 @@ exports[`<AudioPlayerLayout /> renders correctly 1`] = `
         style={
           {
             "backgroundColor": "transparent",
+            "height": "100%",
             "overflow": "hidden",
+            "width": "100%",
           }
         }
       />

package/Components/AudioPlayer/__tests__/__snapshots__/summary.test.js.snap

@@ -19,7 +19,7 @@ exports[`<Summary /> renders correctly 1`] = `
         "fontSize": 20,
         "fontWeight": "600",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/__tests__/__snapshots__/title.test.js.snap

@@ -18,7 +18,7 @@ exports[`<Title /> renders correctly 1`] = `
         "fontFamily": null,
         "fontSize": 38,
         "fontWeight": "600",
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >

package/Components/AudioPlayer/helpers.tsx

@@ -26,14 +26,14 @@ export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {
 const LTR = {
   flexDirection: "row",
   justifyContent: "flex-start",
-  textAlign: "right",
+  textAlign: "left",
   alignItems: "flex-end",
 };
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
-  textAlign: "left",
+  textAlign: "right",
   alignItems: "flex-start",
 };
 

package/Components/Cell/index.js

@@ -3,15 +3,11 @@ import * as R from "ramda";
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import {
-  HorizontalScrollContext,
-  RiverOffsetContext,
-  ScreenScrollingContext,
-} from "../../Contexts";
-
+import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
+import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

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;
@@ -105,6 +105,11 @@ const isTvOS = isTvOSPlatform();
 // height for container with additional content below player
 const INLINE_CONTAINER_CONTENT_HEIGHT = 400;
 
+// Default Y offset for anchor points on non-Android TV platforms
+const DEFAULT_OFFSET_Y = -600;
+
+const EXTRA_ANCHOR_POINT_Y_OFFSET = isAndroidTV ? 0 : DEFAULT_OFFSET_Y;
+
 const withBorderHack = () => {
   if (isAndroidTV) {
     /* @HACK: see GH#7269 */
@@ -127,7 +132,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -565,8 +570,9 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
-    isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
+      mode as any
+    ) || isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -587,7 +593,11 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
+    if (
+      screen_background_color &&
+      mode !== VideoModalMode.FULLSCREEN &&
+      isTV()
+    ) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -637,14 +647,17 @@ 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
@@ -716,7 +729,9 @@ const PlayerContainerComponent = (props: Props) => {
                             key={item.id}
                             groupId={FocusableGroupMainContainerId}
                             cellTapAction={onCellTap}
-                            extraAnchorPointYOffset={-600}
+                            extraAnchorPointYOffset={
+                              EXTRA_ANCHOR_POINT_Y_OFFSET
+                            }
                             isScreenWrappedInContainer={true}
                             containerHeight={styles.inlineRiver.height}
                             componentsMapExtraProps={{

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated } from "react-native";
+import { Animated, Dimensions } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,6 +23,7 @@ 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;
@@ -48,6 +49,7 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
+  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,6 +75,10 @@ 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);
 
@@ -100,6 +106,7 @@ 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]);
 
@@ -141,6 +148,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
+        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,6 +11,8 @@ 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");
 
@@ -26,6 +28,10 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
+  inline?: any;
+  docked?: boolean;
+  isModal?: boolean;
+  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -42,8 +48,24 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  isTablet = false,
+  inline,
+  docked,
+  isModal,
+  pip,
 }: 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();
 
@@ -79,7 +101,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components)) {
+  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
     return null;
   }
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -9,16 +9,8 @@ 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 { useDelayedPlayerDetails } from "./hooks";
-
-import {
-  AnimatedScrollModal,
-  AnimatedVideoPlayerComponent,
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
 
@@ -44,29 +36,15 @@ 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);
@@ -86,51 +64,6 @@ 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,
@@ -139,35 +72,26 @@ 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, style);
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
 
   const baseDimensions: DimensionsT = React.useMemo(
     () => ({
-      width:
-        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
+      width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
       height: undefined,
     }),
     [isInlineModal, tabletWidth, docked]
@@ -176,7 +100,7 @@ const PlayerWrapperComponent = (props: Props) => {
   const playerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      width: isInlineModal && docked ? undefined : baseDimensions.width,
+      width: baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
     [baseDimensions, isInlineModal, pip]
@@ -185,8 +109,7 @@ const PlayerWrapperComponent = (props: Props) => {
   const containerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
-      aspectRatio:
-        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
+      aspectRatio: playerDimensions.aspectRatio,
     }),
     [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
@@ -194,68 +117,29 @@ 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={[wrapperViewStyle, style, playerDimensionsHack]}
+      style={playerDimensionsHack}
     >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+      <View
+        testID={`${entry?.id}-player-container`}
+        style={[
+          defaultStyles.playerContainer,
+          playerDimensionsHack,
+          containerDimensions,
+          containerStyle,
+        ]}
       >
-        <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>
+        {playerContent(childrenStyles)}
+      </View>
     </WrapperView>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -17,11 +17,7 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import {
-  useModalSize,
-  useBackgroundColor,
-  useInitialPlayerState,
-} from "./hooks";
+import { useModalSize, useInitialPlayerState } from "./hooks";
 
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -33,8 +29,6 @@ import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 import { Spinner } from "../Spinner";
 import { OpaqueLayer } from "./OpaqueLayer";
 
-import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
 const LOADER_BACKGROUND_COLOR = "rgba(64,64,64,0.5)";
 
 const styles = StyleSheet.create({
@@ -65,7 +59,6 @@ const VideoModalComponent = () => {
 
   const modalSize = useModalSize();
   const isFirstRender = useIsInitialRender();
-  const backgroundColor = useBackgroundColor();
 
   const {
     closeVideoModal,
@@ -145,20 +138,13 @@ const VideoModalComponent = () => {
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
           {itemIdHooksFinished === item?.id ? (
-            <AnimatedPlayerModalWrapper
-              style={[
-                styles.container,
-                {
-                  backgroundColor,
-                },
-              ]}
-            >
+            <View pointerEvents="box-none" style={styles.container}>
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
                 mode={mode}
               />
-            </AnimatedPlayerModalWrapper>
+            </View>
           ) : (
             <View style={styles.loaderContainer}>
               <Spinner />

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -13,6 +13,7 @@ const props = {
     tablet_landscape_sidebar_width: "35%",
     tablet_landscape_player_container_background_color: "red",
   },
+  playerContent: jest.fn(() => <></>),
 };
 
 const mockUseIsDeviceTablet = jest.fn();
@@ -122,13 +123,6 @@ describe("PlayerWrapper", () => {
       </PlayerWrapper>
     );
 
-    const expectDimensions = {
-      ...dimensions,
-      width: undefined,
-      aspectRatio: 16 / 9,
-    };
-
     expect(element).toMatchSnapshot();
-    expect(children).toHaveBeenCalledWith(expectDimensions);
   });
 });

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -21,57 +21,27 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -97,57 +67,27 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": undefined,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": undefined,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -173,73 +113,27 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "red",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "row",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": 195,
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      >
-        <View
-          additionalData={
-            {
-              "disableAnimatedComponent": false,
-              "resetAnimationValue": undefined,
-              "useLayoutMeasure": true,
-            }
-          }
-          animationType="moveUpComponent"
-          style={
-            {
-              "flex": 1,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -265,57 +159,27 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7786666666666666,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

@@ -1,5 +1,3 @@
-export { useBackgroundColor } from "./useBackgroundColor";
-
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/utils.ts

@@ -34,6 +34,9 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    screen_background_color,
+    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -43,6 +46,9 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    audio_player_background_color,
+    screen_background_color,
   };
 };
 

package/Components/Viewport/VisibilitySensor/VisibilitySensor.tsx

@@ -4,8 +4,8 @@ which helps in detecting whether a given component is visible within the viewpor
 It is useful for implementing lazy loading or triggering specific actions when a component comes into view.
 */
 
-import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
-import { Dimensions, View } from "react-native";
+import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
+import { View, Dimensions } from "react-native";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -78,7 +78,7 @@ const VisibilitySensorComponent: FC<Props> = ({
   };
 
   const stopWatching = () => {
-    clearInterval(interval);
+    interval = clearInterval(interval);
   };
 
   const isInViewPort = () => {

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/index.ts

@@ -1,10 +1,10 @@
 import {
+  getColor,
   ACTIVE_COLOR,
   BACKGROUND_COLOR,
-  FOCUSED_TEXT_COLOR,
-  getColor,
   MAIN_TEXT_COLOR,
-} from "../../../colors";
+  FOCUSED_TEXT_COLOR,
+} from "../../../colors/index";
 
 const Image = "Image";
 const View = "View";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.5521273514",
+  "version": "14.0.0-alpha.5621117258",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.5521273514",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5521273514",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5521273514",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5521273514",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5621117258",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5621117258",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5621117258",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5621117258",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};