@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4837064762 → 12.0.0-alpha.4885205607

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,10 +1,7 @@
 import React, { useRef, useState } from "react";
-import { Animated, View, StyleSheet } from "react-native";
+import { Animated, View } from "react-native";
 
-import {
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
   useModalAnimationContext,
@@ -18,6 +15,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
   gestureListenerHelper,
@@ -35,10 +33,6 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export const AnimationView = ({
   animationType,
   style,
@@ -56,21 +50,22 @@ export const AnimationView = ({
     tabletLandscapePlayerTopPosition,
     setTabletLandscapePlayerTopPosition,
     modalSnapPoints,
+    startComponentsAnimationDistance,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const isRTL = useIsRTL();
+  const isAppActive = useAppState(true);
 
   const {
-    height: screenHeight,
+    width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("screen", { deviceInfo: true });
+  } = useDimensions("window", { deviceInfo: true });
 
-  const startAnimationDistance = Math.round((screenHeight * 60) / 100);
   const { videoModalState } = useNavigation();
-  const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const insets = useSafeAreaInsets();
-  const { width: screenWidth } = useSafeAreaFrame();
+  const bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
+  const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
   const animationComponentRef = useRef(null);
 
   // retrieving top position of the player for tablet landscape mode
@@ -88,13 +83,6 @@ export const AnimationView = ({
     getAnimationDefaultValue(animationType, bottomTabBarHeight)
   );
 
-  const animationValueType: string =
-    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
-
-  const animatedValue = useRef(
-    new Animated[animationValueType](defaultValue)
-  ).current;
-
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -105,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
@@ -118,63 +106,8 @@ export const AnimationView = ({
       : -additionalData.moveValue
     : 0;
 
-  const calculationData = React.useMemo(
-    () => ({
-      isAudioItem,
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      isTablet,
-      isTabletLandscape,
-      isRTL,
-      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
-      inlineAudioPlayer,
-    }),
-    [
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      videoModalState.mode,
-    ]
-  );
-
-  React.useEffect(() => {
-    if (additionalData.resetAnimationValue) {
-      animatedValue.setValue(0);
-    }
-  }, [additionalData.resetAnimationValue]);
-
-  React.useEffect(() => {
-    if (animationType === ComponentAnimationType.player) {
-      let width, height;
-
-      if (additionalData.aspectRatio) {
-        width = isTabletLandscape ? additionalData.width : screenWidth;
-
-        height =
-          (isTabletLandscape ? additionalData.width : screenWidth) /
-          additionalData.aspectRatio;
-      } else {
-        width =
-          typeof additionalData.width === "number" && additionalData.width;
-
-        height =
-          typeof additionalData.height === "number" && additionalData.height;
-      }
-
-      if (defaultValue.x === 0 && width && height) {
-        const value = { x: width, y: height };
-        setDefaultValue(value);
-        animatedValue.setValue(value);
-      }
-    }
-  }, [additionalData, screenWidth]);
+  const animationValueType: string =
+    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
 
   const getAnimationValue = React.useCallback(
     (animationType, state) => {
@@ -292,6 +225,90 @@ export const AnimationView = ({
     ]
   );
 
+  const getInitialValue = React.useCallback(() => {
+    const mode =
+      videoModalState.mode === "PIP"
+        ? videoModalState.previousMode
+        : videoModalState.mode;
+
+    switch (mode) {
+      case "MINIMIZED":
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+      case "MAXIMIZED":
+      default:
+        return getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.maximaze
+        ).toValue;
+    }
+  }, [defaultValue, videoModalState]);
+
+  const animatedValue = useRef(
+    new Animated[animationValueType](getInitialValue())
+  ).current;
+
+  const calculationData = React.useMemo(
+    () => ({
+      isAudioItem,
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      isTablet,
+      isTabletLandscape,
+      isRTL,
+      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
+      inlineAudioPlayer,
+    }),
+    [
+      bottomTabBarHeight,
+      minimisedHeight,
+      minimisedWidth,
+      defaultValue,
+      moveUpValue,
+      moveComponentHorizontalValue,
+      videoModalState.mode,
+    ]
+  );
+
+  React.useEffect(() => {
+    if (additionalData.resetAnimationValue) {
+      animatedValue.setValue(defaultValue);
+    }
+  }, [additionalData.resetAnimationValue, defaultValue]);
+
+  React.useEffect(() => {
+    if (animationType === ComponentAnimationType.player) {
+      let width, height;
+
+      if (additionalData.aspectRatio) {
+        width = isTabletLandscape ? additionalData.width : screenWidth;
+
+        height =
+          (isTabletLandscape ? additionalData.width : screenWidth) /
+          additionalData.aspectRatio;
+      } else {
+        width =
+          typeof additionalData.width === "number" && additionalData.width;
+
+        height =
+          typeof additionalData.height === "number" && additionalData.height;
+      }
+
+      if (defaultValue.x === 0 && width && height) {
+        const value = { x: width, y: height };
+        setDefaultValue(value);
+        animatedValue.setValue(value);
+      }
+    }
+  }, [additionalData, screenWidth]);
+
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
@@ -325,7 +342,7 @@ export const AnimationView = ({
             animatedValue,
             calculationData,
             modalSnapPoint: modalSnapPoints[1],
-            startAnimationDistance,
+            startComponentsAnimationDistance,
             startComponentsAnimation,
             setStartComponentsAnimation,
             getAnimationValue,
@@ -350,7 +367,7 @@ export const AnimationView = ({
           animatedValue,
           calculationData,
           modalSnapPoint: modalSnapPoints[1],
-          startAnimationDistance,
+          startComponentsAnimationDistance,
           startComponentsAnimation,
           setStartComponentsAnimation,
           getAnimationValue,
@@ -372,9 +389,9 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        additionalData.saveArea ? styles.flex : null,
         (videoModalState.mode === "MAXIMIZED" ||
-          videoModalState.mode === "MINIMIZED") &&
+          videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >
@@ -412,6 +429,7 @@ export const AnimationComponent = (props: Props) => {
     delete additionalData.extraAnimation[animationType];
 
     return (
+      // @ts-ignore
       <Component {...(isReactFragment ? null : props)}>
         <AnimationComponent
           {...animationProps}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,9 +1,17 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
-
+import {
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} from "react-native-safe-area-context";
+import {
+  useGetBottomTabBarHeight,
+  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 {
@@ -36,6 +44,8 @@ export type ModalAnimationContextT = {
   setLastSnap: (value: number) => void;
   tabletLandscapePlayerTopPosition: number;
   setTabletLandscapePlayerTopPosition: (value: number) => void;
+  startComponentsAnimationDistance: number;
+  progressBarHeight: number;
 };
 
 const ReactContext = React.createContext<ModalAnimationContextT>({
@@ -59,6 +69,8 @@ const ReactContext = React.createContext<ModalAnimationContextT>({
   setLastSnap: () => null,
   tabletLandscapePlayerTopPosition: 0,
   setTabletLandscapePlayerTopPosition: () => null,
+  startComponentsAnimationDistance: 0,
+  progressBarHeight: 0,
 });
 
 export function useModalAnimationContext() {
@@ -77,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(() => {
@@ -90,9 +107,29 @@ 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 } = useSafeAreaFrame();
+  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 minValue = height - minimisedHeight - bottomTabBarHeight;
+  const startComponentsAnimationDistance = Math.round((height * 60) / 100);
+
+  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) -
+    progressBarHeight;
+
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
   const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);
@@ -123,6 +160,8 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
         setLastSnap,
         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;
@@ -233,7 +234,7 @@ export const gestureListenerHelper = (data) => {
     animatedValue,
     calculationData,
     modalSnapPoint,
-    startAnimationDistance,
+    startComponentsAnimationDistance,
     startComponentsAnimation,
     setStartComponentsAnimation,
     getAnimationValue,
@@ -243,7 +244,7 @@ export const gestureListenerHelper = (data) => {
     if (listenerValue <= 0) {
       if (
         preparedValue >= 0 &&
-        preparedValue <= modalSnapPoint - startAnimationDistance
+        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
       ) {
         !startComponentsAnimation && setStartComponentsAnimation(true);
 
@@ -263,9 +264,11 @@ export const gestureListenerHelper = (data) => {
       animatedValue.setValue(value);
     }
   } else {
-    if (preparedValue >= startAnimationDistance) {
+    if (preparedValue >= startComponentsAnimationDistance) {
       !startComponentsAnimation && setStartComponentsAnimation(true);
-      const value = Math.round(preparedValue - startAnimationDistance);
+      const value = Math.round(
+        preparedValue - startComponentsAnimationDistance
+      );
 
       animatedValue.setValue(
         calculateAnimationValue(animationType, value, calculationData)

package/Components/VideoModal/PlayerDetails.tsx

@@ -42,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(100)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: 0,
+      toValue: -30,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -63,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,12 +14,13 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
-  AnimationComponent,
-  ComponentAnimationType,
   AnimatedScrollModal,
   AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type DimensionsT = {
@@ -180,65 +181,71 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={directionStyles(isTabletLandscape)}
-      >
-        <ScreenContextProvider pathname={"videoModal"}>
-          <PathnameContext.Provider value={"videoModal"}>
-            <View
-              testID={`${entry?.id}-player-container`}
-              style={[
-                defaultStyles.playerContainer,
-                containerDimensions,
-                containerStyle,
-                playerDimesionsHack,
-              ]}
-            >
-              <AnimationComponent
-                animationType={ComponentAnimationType.moveUpComponent}
-                style={isTabletLandscape ? defaultStyles.flex : undefined}
-                additionalData={{
-                  useLayoutMeasure: isTabletLandscape,
-                  disableAnimatedComponent: !isTabletLandscape,
-                  resetAnimationValue: isTabletLandscape && docked,
-                }}
-              >
-                <AnimatedVideoPlayerComponent>
-                  {children(childrenStyles)}
-                </AnimatedVideoPlayerComponent>
-              </AnimationComponent>
-            </View>
-            <AnimatedScrollModal>
-              {isInlineModal ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
+          >
+            <PathnameContext.Provider value={pathname}>
+              <ScreenContextProvider pathname={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
                 >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              ) : (
-                <View style={defaultStyles.playerDetails} />
-              )}
-            </AnimatedScrollModal>
-          </PathnameContext.Provider>
-        </ScreenContextProvider>
-      </AnimationComponent>
-    </WrapperView>
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal && !docked ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
+          </AnimationComponent>
+        </WrapperView>
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -129,17 +129,17 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <AnimatedPlayerModalWrapper
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
+    <PathnameContext.Provider value={pathname}>
       <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
@@ -147,14 +147,14 @@ const VideoModalComponent = () => {
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
       </ScreenContextProvider>
-    </AnimatedPlayerModalWrapper>
+    </PathnameContext.Provider>
   );
 };
 

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

@@ -25,6 +25,13 @@ jest.mock("react-native-gesture-handler");
 
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));