@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7528906949 → 12.0.0-alpha.7531504237

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -5,7 +5,6 @@ import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   style: ViewStyle[];
@@ -18,13 +17,8 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
     animatedValues: { lastScrollY, dragScrollY, translateYOffset },
     modalSnapPoints,
     setStartComponentsAnimation,
-    lastScrollYValue,
   } = useModalAnimationContext();
 
-  const { height: screenHeight } = useDimensions("screen", {
-    deviceInfo: true,
-  });
-
   const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
     () => ({
       inputRange: modalSnapPoints,
@@ -51,16 +45,10 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
   }
 
   React.useEffect(() => {
-    const translateYListener = translateY.addListener(({ value }) => {
-      const preparedValue = Math.round(
-        Math.abs(value) - lastScrollYValue.current
-      );
-
+    const translateYListener = translateY.addListener(() => {
       (playerAnimationState === PlayerAnimationStateEnum.minimize ||
         playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-        setStartComponentsAnimation(
-          preparedValue >= Math.round((screenHeight * 10) / 100)
-        );
+        setStartComponentsAnimation(true);
     });
 
     return () => {

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -58,6 +58,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     modalSnapPoints,
     lastSnap,
     setLastSnap,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
@@ -199,12 +200,29 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       videoModalState.mode === "MINIMIZED" &&
       videoModalState.previousMode === "MAXIMIZED"
     ) {
-      resetPlayerAnimationState();
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      } else {
+        resetPlayerAnimationState();
+      }
     }
 
     if (
       (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MAXIMIZED") ||
+        videoModalState.previousMode === "MINIMIZED" &&
+        previousItemId === videoModalState.item?.id) ||
       previousItemId !== videoModalState.item?.id
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
@@ -281,10 +299,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       if (
         preparedValue > 0 &&
         scrollPosition.current === 0 &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_player
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
       ) {
-        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll &&
-          setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
+        isMinimizedModal && setStartComponentsAnimation(true);
+        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
       }
     });
 
@@ -292,7 +311,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints]);
+  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),
@@ -346,7 +365,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -34,6 +34,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     lastSnap,
     setLastSnap,
     resetPlayerAnimationState,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
@@ -121,8 +122,10 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             preparedValue > 0 &&
             playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
           ) {
-            playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+            if (playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+              isMinimizedModal && setStartComponentsAnimation(true);
               setPlayerAnimationState(PlayerAnimationStateEnum.drag_player);
+            }
 
             translateYOffset.setValue(
               isMaximazedModal
@@ -152,7 +155,11 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 };
 
 export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -51,6 +51,7 @@ export const AnimationView = ({
     setTabletLandscapePlayerTopPosition,
     modalSnapPoints,
     startComponentsAnimationDistance,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
@@ -62,9 +63,9 @@ export const AnimationView = ({
   } = useDimensions("window", { deviceInfo: true });
 
   const { videoModalState } = useNavigation();
-  const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const insets = useSafeAreaInsets();
+  const bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
+  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const animationComponentRef = useRef(null);
 
   // retrieving top position of the player for tablet landscape mode
@@ -92,12 +93,12 @@ export const AnimationView = ({
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
 
   const moveUpValue = additionalData.saveArea
-    ? -insets.top
+    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
     : isTablet
     ? isTabletLandscape && (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-      ? -tabletLandscapePlayerTopPosition
+      ? -tabletLandscapePlayerTopPosition + progressBarHeight
       : -130
-    : -50;
+    : -50 + progressBarHeight;
 
   const moveComponentHorizontalValue = additionalData.moveValue
     ? isRTL
@@ -308,6 +309,23 @@ export const AnimationView = ({
     }
   }, [additionalData, screenWidth]);
 
+  React.useEffect(() => {
+    if (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
+    ) {
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        const value = getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+        animatedValue.setValue(value);
+      }
+    }
+  }, [videoModalState]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,12 +1,17 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} from "react-native-safe-area-context";
 import {
   useGetBottomTabBarHeight,
-  useDimensions,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
 
 export enum PlayerAnimationStateEnum {
@@ -40,6 +45,7 @@ export type ModalAnimationContextT = {
   tabletLandscapePlayerTopPosition: number;
   setTabletLandscapePlayerTopPosition: (value: number) => void;
   startComponentsAnimationDistance: number;
+  progressBarHeight: number;
 };
 
 const ReactContext = React.createContext<ModalAnimationContextT>({
@@ -64,6 +70,7 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   tabletLandscapePlayerTopPosition: 0,
   setTabletLandscapePlayerTopPosition: () => null,
   startComponentsAnimationDistance: 0,
+  progressBarHeight: 0,
 });
 
 export function useModalAnimationContext() {
@@ -82,6 +89,11 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const [startComponentsAnimation, setStartComponentsAnimation] =
     React.useState<boolean>(false);
 
+  const {
+    videoModalState: { mode, visible, item },
+  } = useNavigation();
+
+  const isLiveItem = isLive(item);
   const { minimised_height: minimisedHeight } = useConfiguration();
 
   const resetPlayerAnimationState = React.useCallback(() => {
@@ -95,21 +107,28 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const translateYOffset = React.useRef(new Animated.Value(0)).current;
   const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
 
-  const { height } = useDimensions("window", { fullDimensions: true });
+  const { height: safeAreaFrameHeight } = useSafeAreaFrame();
+  const [height, setHeight] = React.useState<number>(safeAreaFrameHeight);
+  const progressBarHeight = isLiveItem ? 0 : PROGRESS_BAR_HEIGHT;
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
+  const startComponentsAnimationDistance = Math.round((height * 60) / 100);
 
-  const startComponentsAnimationDistance = React.useMemo(
-    () => Math.round((height * 60) / 100),
-    [height]
-  );
+  React.useEffect(() => {
+    if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {
+      setHeight(safeAreaFrameHeight);
+    }
+  }, [height, safeAreaFrameHeight, mode, visible]);
 
   /*
     If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
     Because of this we need to minus bottom SafeArea offset.
   */
   const minValue =
-    height - minimisedHeight - (bottomTabBarHeight || bottomSafeArea);
+    height -
+    minimisedHeight -
+    (bottomTabBarHeight || bottomSafeArea) -
+    progressBarHeight;
 
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
@@ -142,6 +161,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
         tabletLandscapePlayerTopPosition,
         setTabletLandscapePlayerTopPosition,
         startComponentsAnimationDistance,
+        progressBarHeight,
       }}
     >
       {children}

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -13,6 +13,7 @@ export enum ComponentAnimationType {
 }
 
 export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+export const PROGRESS_BAR_HEIGHT = 3;
 
 export const defaultAspectRatioWidth = (height: number): number =>
   (height / 9) * 16;

package/Components/VideoModal/PlayerWrapper.tsx

@@ -225,7 +225,7 @@ export const PlayerWrapper = (props: Props) => {
                   </AnimationComponent>
                 </View>
                 <AnimatedScrollModal>
-                  {isInlineModal ? (
+                  {isInlineModal && !docked ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.componentFade}
                       style={defaultStyles.flex}

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

@@ -72,12 +72,34 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -158,6 +180,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />
@@ -254,12 +277,34 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -340,6 +385,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
   addOrientationChangeListener,
@@ -9,11 +8,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 const { Logger } = getXray();
 
-const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
-
 const logger = new Logger(
   "hooks",
   "zapp-react-native-ui-components/Components/VideoModal"
@@ -24,20 +22,18 @@ type Size = {
   height: number | string;
 };
 
-const MODAL_SIZE_FOR_PORTRAIT: Size = {
-  width: WIDTH,
-  height: HEIGHT,
-};
-
 const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   width: "100%",
   height: "100%",
 };
 
 export const useModalSize = (): Size => {
-  const [modalSize, setModalSize] = React.useState<Size>(
-    MODAL_SIZE_FOR_PORTRAIT
-  );
+  const frame = useSafeAreaFrame();
+
+  const [modalSize, setModalSize] = React.useState<Size>({
+    width: frame.width,
+    height: frame.height,
+  });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
     setModalSize((oldSize) => {
@@ -90,7 +86,9 @@ export const useModalSize = (): Size => {
           toOrientation === ORIENTATIONS.landscapeSensor;
 
         setNewModalSize(
-          isLandscape ? MODAL_SIZE_FOR_LANDSCAPE : MODAL_SIZE_FOR_PORTRAIT,
+          isLandscape
+            ? MODAL_SIZE_FOR_LANDSCAPE
+            : { width: frame.width, height: frame.height },
           `useModalSize: set modal size ${
             isLandscape ? "landscape" : "portrait"
           } for orientation: ${to}`

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/package.json

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