@applicaster/zapp-react-native-ui-components 13.0.8-alpha.4915596275 → 13.0.8-alpha.8384339831

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;
@@ -132,7 +132,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    backgroundColor: "black",
+    background: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -150,6 +150,7 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
+    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -569,9 +570,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 }),
@@ -592,11 +592,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;
     }
 
@@ -626,8 +622,6 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
-  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -648,17 +642,14 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
-                pointerEvents={pointerEventsProp}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
-                  pointerEvents={pointerEventsProp}
                 >
                   {/* Player container */}
                   <View
-                    pointerEvents={pointerEventsProp}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, FlatList } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -9,8 +9,8 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  useProfilerLogging,
   usePipesCacheReset,
+  useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
 import { ViewportTracker } from "../../Viewport";
@@ -25,6 +25,8 @@ import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHo
 import { useShallow } from "zustand/react/shallow";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
+import { ComponentsMapRefContext } from "./ContextProviders/ComponentsMapRefContext";
 
 const isAndroid = isAndroidPlatform();
 
@@ -70,6 +72,7 @@ function ComponentsMapComponent(props: Props) {
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const flatListWrapperRef = React.useRef<View | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -265,48 +268,57 @@ function ComponentsMapComponent(props: Props) {
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
   return (
-    <View style={styles.container}>
-      <ScreenLoadingMeasurements
-        riverId={riverId}
-        numberOfComponents={riverComponents.length}
-      >
-        <ViewportTracker>
-          <FlatList
-            ref={(ref) => {
-              flatListRef.current = ref;
-            }}
-            // Fix for WebView rerender crashes on Android API 28+
-            // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={isAndroid ? "never" : "auto"}
-            scrollIndicatorInsets={scrollIndicatorInsets}
-            extraData={feed}
-            stickyHeaderIndices={stickyHeaderIndices}
-            removeClippedSubviews={isAndroid}
-            onLayout={handleOnLayout}
-            initialNumToRender={3}
-            maxToRenderPerBatch={10}
-            windowSize={12}
-            listKey={riverId}
-            keyExtractor={keyExtractor}
-            renderItem={renderRiverItem}
-            data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
+    <View
+      style={styles.container}
+      ref={(ref) => {
+        flatListWrapperRef.current = ref;
+      }}
+    >
+      <ComponentsMapHeightContext.Provider value={flatListHeight}>
+        <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
+          <ScreenLoadingMeasurements
+            riverId={riverId}
+            numberOfComponents={riverComponents.length}
+          >
+            <ViewportTracker>
+              <FlatList
+                ref={(ref) => {
+                  flatListRef.current = ref;
+                }}
+                // Fix for WebView rerender crashes on Android API 28+
+                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                overScrollMode={isAndroid ? "never" : "auto"}
+                scrollIndicatorInsets={scrollIndicatorInsets}
+                extraData={feed}
+                stickyHeaderIndices={stickyHeaderIndices}
+                removeClippedSubviews={isAndroid}
+                onLayout={handleOnLayout}
+                initialNumToRender={3}
+                maxToRenderPerBatch={10}
+                windowSize={12}
+                listKey={riverId}
+                keyExtractor={keyExtractor}
+                renderItem={renderRiverItem}
+                data={riverComponents}
+                contentContainerStyle={contentContainerStyle}
+                ListFooterComponent={
+                  <RiverFooter
+                    flatListHeight={flatListHeight}
+                    loadingState={loadingState}
+                  />
+                }
+                refreshControl={refreshControl}
+                onScrollBeginDrag={onScrollBeginDrag}
+                onScroll={onScroll}
+                onMomentumScrollEnd={_onMomentumScrollEnd}
+                onScrollEndDrag={_onScrollEndDrag}
+                scrollEventThrottle={16}
+                {...scrollViewExtraProps}
               />
-            }
-            refreshControl={refreshControl}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={onScroll}
-            onMomentumScrollEnd={_onMomentumScrollEnd}
-            onScrollEndDrag={_onScrollEndDrag}
-            scrollEventThrottle={16}
-            {...scrollViewExtraProps}
-          />
-        </ViewportTracker>
-      </ScreenLoadingMeasurements>
+            </ViewportTracker>
+          </ScreenLoadingMeasurements>
+        </ComponentsMapRefContext.Provider>
+      </ComponentsMapHeightContext.Provider>
     </View>
   );
 }

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapHeightContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export const ComponentsMapHeightContext = React.createContext<number | null>(
+  null
+);
+
+export const useComponentsMapHeight = () =>
+  React.useContext(ComponentsMapHeightContext);

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapRefContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View } from "react-native";
+
+export const ComponentsMapRefContext =
+  React.createContext<React.RefObject<View | null> | null>(null);
+
+export const useComponentsMapRef = () =>
+  React.useContext(ComponentsMapRefContext);

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -372,7 +372,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         maxDeltaY={lastSnap - modalSnapPoints[0]}
         numberOfTaps={1}
       >
-        <View pointerEvents="box-none">
+        <View pointerEvents="box-none" style={generalStyles.container}>
           <PanGestureHandler
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
@@ -382,7 +382,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
           >
-            <Animated.View>
+            <Animated.View style={generalStyles.container}>
               <NativeViewGestureHandler
                 ref={scrollRef}
                 waitFor={tapHandlerRef}
@@ -397,6 +397,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}
+                  contentContainerStyle={generalStyles.container}
                 >
                   {children}
                 </Animated.ScrollView>

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,
@@ -11,7 +11,6 @@ import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
-import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
@@ -24,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;
@@ -50,7 +48,6 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
-  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -76,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);
 
@@ -103,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;
@@ -115,29 +115,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const startComponentsAnimationDistance = Math.round((height * 60) / 100);
-  const isTabletLandscape = useIsTabletLandscape();
-  const windowDimensions = Dimensions.get("window");
-
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-
-      if (!isTabletLandscape) {
-        // restore to portrait ( in portrait mode height is bigger)
-        if (windowDimensions.height > windowDimensions.width) {
-          yTranslate.current?.setValue(windowDimensions.height);
-        }
-      } else {
-        yTranslate.current?.setValue(windowDimensions.height);
-      }
-    }
-  }, [
-    visible,
-    resetPlayerAnimationState,
-    windowDimensions.height,
-    isTabletLandscape,
-  ]);
 
   React.useEffect(() => {
     if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {
@@ -164,7 +141,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
-        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -4,17 +4,16 @@ import {
   Dimensions,
   Easing,
   StyleProp,
-  ViewStyle,
   StyleSheet,
+  ViewStyle,
 } 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";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+const flex1 = { flex: 1 };
 
 type Configuration = {
   [key: string]: any;
@@ -28,10 +27,6 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
-  inline?: any;
-  docked?: boolean;
-  isModal?: boolean;
-  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -48,31 +43,15 @@ 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();
 
   const extraTabletStyles = !isAudioPlayer
     ? isTabletLandscape
       ? { marginTop: -insets.top, paddingTop: insets.top + 20 }
-      : { marginTop: -8, paddingTop: -8 }
+      : {}
     : {};
 
   // Animation setup
@@ -101,7 +80,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
+  if (isNilOrEmpty(screenData?.ui_components)) {
     return null;
   }
 
@@ -115,6 +94,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        flex1,
         {
           // 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
@@ -129,6 +109,7 @@ export const PlayerDetails = ({
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
+          isScreenWrappedInContainer
         />
       ) : null}
     </Animated.View>

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,67 @@ 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>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -17,7 +17,11 @@ import {
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
-import { useModalSize, useInitialPlayerState } from "./hooks";
+import {
+  useModalSize,
+  useBackgroundColor,
+  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";
@@ -29,6 +33,8 @@ 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({
@@ -59,6 +65,7 @@ const VideoModalComponent = () => {
 
   const modalSize = useModalSize();
   const isFirstRender = useIsInitialRender();
+  const backgroundColor = useBackgroundColor();
 
   const {
     closeVideoModal,
@@ -138,13 +145,20 @@ const VideoModalComponent = () => {
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
           {itemIdHooksFinished === item?.id ? (
-            <View pointerEvents="box-none" style={styles.container}>
+            <AnimatedPlayerModalWrapper
+              style={[
+                styles.container,
+                {
+                  backgroundColor,
+                },
+              ]}
+            >
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
                 mode={mode}
               />
-            </View>
+            </AnimatedPlayerModalWrapper>
           ) : (
             <View style={styles.loaderContainer}>
               <Spinner />

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

@@ -13,7 +13,6 @@ const props = {
     tablet_landscape_sidebar_width: "35%",
     tablet_landscape_player_container_background_color: "red",
   },
-  playerContent: jest.fn(() => <></>),
 };
 
 const mockUseIsDeviceTablet = jest.fn();
@@ -123,6 +122,13 @@ 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,27 +21,87 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -67,27 +127,57 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": undefined,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": undefined,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -113,27 +203,103 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "red",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "row",
           },
-          {},
           {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": 195,
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <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
+        animationType="componentFade"
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          configuration={
+            {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            {
+              "id": "test",
+            }
+          }
+          isTablet={true}
+          isTabletLandscape={true}
+          style={
+            {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -159,27 +325,57 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={{}}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "height": 800,
+          "width": 300,
+        },
+        {},
+      ]
+    }
   >
     <View
+      additionalData={
+        {
+          "saveArea": true,
+        }
+      }
+      animationType="moveUpComponent"
       style={
         [
           {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
+            "flexDirection": "column",
           },
-          {},
           {
-            "aspectRatio": 1.7786666666666666,
-            "height": undefined,
-            "width": "100%",
+            "flex": 1,
           },
-          {},
         ]
       }
-      testID="test-player-container"
-    />
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            {
+              "aspectRatio": 1.7786666666666666,
+              "height": undefined,
+              "width": "100%",
+            },
+            {},
+            {},
+          ]
+        }
+        testID="test-player-container"
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

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

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -0,0 +1,10 @@
+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;
+};

package/Components/VideoModal/hooks/useModalSize.ts

@@ -9,12 +9,6 @@ import {
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
-import {
-  isAndroidPlatform,
-  isAndroidVersionAtLeast,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
-import { StatusBar } from "react-native";
-import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const { Logger } = getXray();
 
@@ -33,17 +27,12 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
-const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
-
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
 
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
-    height: isOldAndroidDevice
-      ? frame.height + StatusBar.currentHeight
-      : frame.height,
+    height: frame.height,
   });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
@@ -55,12 +44,7 @@ export const useModalSize = (): Size => {
         return oldSize;
       }
 
-      return {
-        width: newSize.width,
-        height: isOldAndroidDevice
-          ? newSize.height + StatusBar.currentHeight
-          : newSize.height,
-      };
+      return newSize;
     });
 
     logger.debug({

package/Components/VideoModal/utils.ts

@@ -34,9 +34,6 @@ 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()
@@ -46,9 +43,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.8-alpha.4915596275",
+  "version": "13.0.8-alpha.8384339831",
   "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": "13.0.8-alpha.4915596275",
-    "@applicaster/zapp-react-native-bridge": "13.0.8-alpha.4915596275",
-    "@applicaster/zapp-react-native-redux": "13.0.8-alpha.4915596275",
-    "@applicaster/zapp-react-native-utils": "13.0.8-alpha.4915596275",
+    "@applicaster/applicaster-types": "13.0.8-alpha.8384339831",
+    "@applicaster/zapp-react-native-bridge": "13.0.8-alpha.8384339831",
+    "@applicaster/zapp-react-native-redux": "13.0.8-alpha.8384339831",
+    "@applicaster/zapp-react-native-utils": "13.0.8-alpha.8384339831",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",