@applicaster/zapp-react-native-ui-components 12.0.0-rc.6 → 12.0.0-rc.61

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -0,0 +1,299 @@
+/* eslint-disable padding-line-between-statements */
+
+import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+export enum ComponentAnimationType {
+  bottomBar = "bottomBar",
+  player = "player",
+  componentFade = "componentFade",
+  componentAppears = "componentAppears",
+  moveUpComponent = "moveUpComponent",
+  moveComponentHorizontal = "moveComponentHorizontal",
+  audioPlayerPaddingHorizontal = "audioPlayerPaddingHorizontal",
+}
+
+export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+
+export const defaultAspectRatioWidth = (height: number): number =>
+  (height / 9) * 16;
+
+export const getAnimationStyle = (component, animatedValue) => {
+  switch (component) {
+    case ComponentAnimationType.bottomBar: {
+      return { zIndex: 99, transform: [{ translateY: animatedValue }] };
+    }
+
+    case ComponentAnimationType.player: {
+      return { width: animatedValue.x, height: animatedValue.y };
+    }
+
+    case ComponentAnimationType.componentFade:
+    case ComponentAnimationType.componentAppears: {
+      return { opacity: animatedValue };
+    }
+
+    case ComponentAnimationType.moveUpComponent: {
+      return { transform: [{ translateY: animatedValue }] };
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal:
+    case ComponentAnimationType.moveComponentHorizontal: {
+      return { transform: [{ translateX: animatedValue }] };
+    }
+
+    default:
+      return null;
+  }
+};
+
+export const getAnimationDefaultValue = (component, bottomTabBarHeight) => {
+  switch (component) {
+    case ComponentAnimationType.bottomBar: {
+      return bottomTabBarHeight;
+    }
+
+    case ComponentAnimationType.player: {
+      return { x: 0, y: 0 };
+    }
+
+    case ComponentAnimationType.componentFade: {
+      return 1;
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal:
+    case ComponentAnimationType.moveComponentHorizontal:
+    case ComponentAnimationType.componentAppears:
+    case ComponentAnimationType.moveUpComponent: {
+      return 0;
+    }
+  }
+};
+
+export const calculateAnimationValue = (animationType, dragPosition, data) => {
+  const {
+    isAudioItem,
+    bottomTabBarHeight,
+    minimisedHeight,
+    minimisedWidth,
+    defaultValue,
+    moveUpValue,
+    moveComponentHorizontalValue,
+    isTablet,
+    isTabletLandscape,
+    isRTL,
+    fromMiniPlayer,
+    inlineAudioPlayer,
+  } = data;
+
+  switch (animationType) {
+    case ComponentAnimationType.bottomBar: {
+      if (fromMiniPlayer) {
+        return dragPosition < bottomTabBarHeight
+          ? dragPosition
+          : bottomTabBarHeight;
+      }
+
+      return dragPosition < bottomTabBarHeight
+        ? bottomTabBarHeight - dragPosition
+        : 0;
+    }
+
+    case ComponentAnimationType.player: {
+      const value =
+        isAudioItem && !inlineAudioPlayer
+          ? isTabletLandscape
+            ? fromMiniPlayer
+              ? { forWidth: 4, forHeight: 4.5 }
+              : { forWidth: 3, forHeight: 3 }
+            : { forWidth: 2, forHeight: 2 }
+          : isTabletLandscape
+          ? { forWidth: 8, forHeight: 6.5 }
+          : { forWidth: 3.5, forHeight: 2 };
+
+      const minWidth =
+        isAudioItem && !inlineAudioPlayer ? minimisedHeight : minimisedWidth;
+
+      if (fromMiniPlayer) {
+        const calculationWidth =
+          dragPosition * value.forWidth < minWidth
+            ? minWidth
+            : dragPosition * value.forWidth;
+        const calculationHeight =
+          dragPosition * value.forHeight < minimisedHeight
+            ? minimisedHeight
+            : dragPosition * value.forHeight;
+
+        return {
+          x:
+            calculationWidth < defaultValue.x
+              ? calculationWidth
+              : defaultValue.x,
+          y:
+            calculationHeight < defaultValue.y
+              ? calculationHeight
+              : defaultValue.y,
+        };
+      }
+
+      const calculationWidth = defaultValue.x - dragPosition * value.forWidth;
+
+      const calculationHeight = defaultValue.y - dragPosition * value.forHeight;
+
+      return {
+        x: calculationWidth > minWidth ? calculationWidth : minWidth,
+        y:
+          calculationHeight > minimisedHeight
+            ? calculationHeight
+            : minimisedHeight,
+      };
+    }
+
+    case ComponentAnimationType.componentFade: {
+      if (fromMiniPlayer) {
+        const calculation = dragPosition / (isTablet ? 200 : 150);
+
+        return calculation < 1 ? calculation : 1;
+      }
+
+      const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
+
+      return calculation > 0 ? calculation : 0;
+    }
+
+    case ComponentAnimationType.componentAppears: {
+      if (fromMiniPlayer) {
+        const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
+
+        return calculation > 0 ? calculation : 0;
+      }
+
+      const calculation = dragPosition / (isTablet ? 200 : 150);
+
+      return calculation < 1 ? calculation : 1;
+    }
+
+    case ComponentAnimationType.moveUpComponent: {
+      if (fromMiniPlayer) {
+        const calculation =
+          moveUpValue + dragPosition / (isTabletLandscape ? 1 : 4);
+
+        return calculation < 0 ? calculation : 0;
+      }
+
+      const calculation = 0 - dragPosition / (isTabletLandscape ? 1 : 2);
+
+      return calculation > moveUpValue ? calculation : moveUpValue;
+    }
+
+    case ComponentAnimationType.moveComponentHorizontal: {
+      if (fromMiniPlayer) {
+        const calculation = isRTL
+          ? moveComponentHorizontalValue - dragPosition * 2
+          : moveComponentHorizontalValue + dragPosition * 2;
+        const condition = isRTL ? calculation > 0 : calculation < 0;
+
+        return condition ? calculation : 0;
+      }
+
+      const calculation = isRTL ? dragPosition * 2 : -(dragPosition * 2);
+      const condition = isRTL
+        ? calculation < moveComponentHorizontalValue
+        : calculation > moveComponentHorizontalValue;
+
+      return condition ? calculation : moveComponentHorizontalValue;
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal: {
+      const padding = isRTL
+        ? AUDIO_PLAYER_HORIZONTAL_PADDING
+        : -AUDIO_PLAYER_HORIZONTAL_PADDING;
+
+      if (fromMiniPlayer) {
+        const calculation = isRTL
+          ? padding - dragPosition / 5
+          : padding + dragPosition / 5;
+        const condition = isRTL ? calculation > 0 : calculation < 0;
+
+        return condition ? calculation : 0;
+      }
+
+      const calculation = isRTL ? dragPosition / 5 : -(dragPosition / 5);
+      const condition = isRTL ? calculation < padding : calculation > padding;
+
+      return condition ? calculation : padding;
+    }
+  }
+};
+
+export const gestureListenerHelper = (data) => {
+  const {
+    listenerValue,
+    preparedValue,
+    animationType,
+    animatedValue,
+    calculationData,
+    modalSnapPoint,
+    startAnimationDistance,
+    startComponentsAnimation,
+    setStartComponentsAnimation,
+    getAnimationValue,
+  } = data;
+
+  if (calculationData.fromMiniPlayer) {
+    if (listenerValue <= 0) {
+      if (
+        preparedValue >= 0 &&
+        preparedValue <= modalSnapPoint - startAnimationDistance
+      ) {
+        !startComponentsAnimation && setStartComponentsAnimation(true);
+
+        animatedValue.setValue(
+          calculateAnimationValue(animationType, preparedValue, calculationData)
+        );
+      } else {
+        animatedValue.setValue(calculationData.defaultValue);
+        startComponentsAnimation && setStartComponentsAnimation(false);
+      }
+    } else {
+      const value = getAnimationValue(
+        animationType,
+        PlayerAnimationStateEnum.minimize
+      ).toValue;
+
+      animatedValue.setValue(value);
+    }
+  } else {
+    if (preparedValue >= startAnimationDistance) {
+      !startComponentsAnimation && setStartComponentsAnimation(true);
+      const value = Math.round(preparedValue - startAnimationDistance);
+
+      animatedValue.setValue(
+        calculateAnimationValue(animationType, value, calculationData)
+      );
+    } else {
+      animatedValue.setValue(calculationData.defaultValue);
+      startComponentsAnimation && setStartComponentsAnimation(false);
+    }
+  }
+};
+
+export const setScrollModalAnimatedValue = (
+  animatedValue,
+  value,
+  setLastSnap
+) => {
+  setLastSnap(value);
+  animatedValue.setValue(value);
+};
+
+export const resetScrollAnimatedValues = (
+  lastScrollY,
+  lastScrollYValue,
+  dragScrollY,
+  dragVideoPlayerY
+) => {
+  lastScrollY.setValue(0);
+  lastScrollYValue.current = 0;
+  dragScrollY.setValue(0);
+  dragVideoPlayerY.setValue(0);
+};

package/Components/VideoModal/PlayerDetails.tsx

@@ -23,6 +23,8 @@ const containerStyle = ({
   backgroundColor: modal_background_color,
 });
 
+// const audioMarginStyle = { marginTop: 0, marginBottom: 0 };
+
 export const PlayerDetails = ({
   entry,
   style,
@@ -75,6 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -9,15 +9,22 @@ 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/device";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  AnimatedScrollModal,
+  AnimatedVideoPlayerComponent,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type DimensionsT = {
   width: number | string;
-  height: number | string;
+  height: number | string | undefined;
   aspectRatio?: number;
 };
 
@@ -33,6 +40,7 @@ type Props = {
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
@@ -43,6 +51,7 @@ type Props = {
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
   playerDetails: { flex: 1, paddingTop: 20 },
+  flex: { flex: 1 },
 });
 
 const orientationStyles = StyleSheet.create({
@@ -81,18 +90,9 @@ const safeAreaStyles = (
   };
 };
 
-const getEdges = (
-  isTablet: boolean,
-  docked: boolean,
-  isInlineModal: boolean
-) => {
+const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
-    return docked ? ["right", "left"] : ["top"];
-  }
-
-  // mobile
-  if (isInlineModal && docked) {
-    return ["bottom"];
+    return ["top"];
   }
 
   if (!isInlineModal && Platform.OS === "android") {
@@ -135,6 +135,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -149,18 +150,18 @@ export const PlayerWrapper = (props: Props) => {
     () => ({
       width:
         isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
-      height: isInlineModal && docked ? style.height : undefined,
+      height: undefined,
     }),
-    [isInlineModal, tabletWidth, style.height, docked]
+    [isInlineModal, tabletWidth, docked]
   );
 
   const playerDimensions: DimensionsT = React.useMemo(
     () => ({
       ...baseDimensions,
       width: isInlineModal && docked ? undefined : baseDimensions.width,
-      aspectRatio: !isInlineModal ? getScreenAspectRatio() : 16 / 9,
+      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -181,39 +182,63 @@ export const PlayerWrapper = (props: Props) => {
 
   return (
     <WrapperView
-      edges={getEdges(isTablet, docked, isInlineModal) as readonly Edge[]}
+      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
       style={[
-        directionStyles(isTabletLandscape),
         safeAreaStyles(configuration, isTablet),
         style,
         playerDimesionsHack,
       ]}
     >
-      <ScreenContextProvider pathname={"videoModal"}>
-        <PathnameContext.Provider value={"videoModal"}>
-          <View
-            testID={`${entry?.id}-player-container`}
-            style={[
-              defaultStyles.playerContainer,
-              containerDimensions,
-              containerStyle,
-              playerDimesionsHack,
-            ]}
-          >
-            {children(childrenStyles)}
-          </View>
-          {isInlineModal && !docked ? (
-            <PlayerDetails
-              configuration={configuration}
-              style={defaultStyles.playerDetails}
-              entry={entry}
-              isTabletLandscape={isTabletLandscape}
-            />
-          ) : (
-            <View style={defaultStyles.playerDetails} />
-          )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
+      <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}
+                >
+                  <PlayerDetails
+                    configuration={configuration}
+                    style={defaultStyles.playerDetails}
+                    entry={entry}
+                    isTabletLandscape={isTabletLandscape}
+                  />
+                </AnimationComponent>
+              ) : (
+                <View style={defaultStyles.playerDetails} />
+              )}
+            </AnimatedScrollModal>
+          </PathnameContext.Provider>
+        </ScreenContextProvider>
+      </AnimationComponent>
     </WrapperView>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -4,9 +4,7 @@ import { StyleSheet, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
-  MenuTypes,
   useNavigation,
-  useNavigationType,
   useZappHooksForEntry,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsInitialRender } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
@@ -16,12 +14,12 @@ import {
   allowedOrientationsForScreen,
   ORIENTATIONS,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
 import { useModalSize } from "./hooks/useModalSize";
 import { useBackgroundColor } from "./hooks/useBackgroundColor";
 import { useInitialPlayerState } from "./hooks/useInitialPlayerState";
-import { usePosition } from "./hooks/usePosition";
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
 import { Spinner } from "../Spinner";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -31,6 +29,8 @@ import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/con
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -59,22 +59,9 @@ const VideoModalComponent = () => {
   const onVideoModalHookSuccessAnalyticsEvent = useVideoModalAnalytics();
 
   const modalSize = useModalSize();
-
   const isFirstRender = useIsInitialRender();
-
   const backgroundColor = useBackgroundColor();
 
-  const { top, height, bottom } = usePosition();
-
-  const navType = useNavigationType();
-  const isBottomBarsNavigation = navType === MenuTypes.bottomTabBar;
-  const heightWithSafeArea = height ? height + bottom : null;
-
-  const dockedHeight =
-    isBottomBarsNavigation && height ? height : heightWithSafeArea;
-
-  const dockedBottom = isBottomBarsNavigation ? bottom : 0;
-
   const {
     closeVideoModal,
     setVideoModalItem,
@@ -83,8 +70,6 @@ const VideoModalComponent = () => {
     maximiseVideoModal,
   } = useNavigation();
 
-  const docked = mode === "MINIMIZED";
-
   const logTimestamp = useProfilerLogging();
 
   useInitialPlayerState(fullscreenVideoModal, maximiseVideoModal, item);
@@ -105,9 +90,10 @@ const VideoModalComponent = () => {
   }, [item?.id]);
 
   const isLandscape = modalSize.width > modalSize.height;
+  const isTablet = useIsTablet();
 
   React.useEffect(() => {
-    if (isLandscape && mode !== "FULLSCREEN" && mode !== "PIP") {
+    if (!isTablet && isLandscape && mode !== "FULLSCREEN" && mode !== "PIP") {
       fullscreenVideoModal();
     }
   }, [isLandscape]);
@@ -143,35 +129,32 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          top,
-          height: dockedHeight,
-          bottom: dockedBottom,
-          backgroundColor,
-        },
-      ]}
-    >
-      <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
-              modalHeight={docked ? height : modalSize.height}
+              modalHeight={modalSize.height}
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
-    </View>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };
 

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

@@ -8,8 +8,6 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("react-native");
-
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

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

@@ -21,6 +21,8 @@ const useIsTablet = jest.fn();
 
 jest.mock("react-native");
 
+jest.mock("react-native-gesture-handler");
+
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
@@ -38,6 +40,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: jest.fn(() => true),
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
   })),
@@ -45,6 +48,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
+    videoModalState: { visible: false },
   })),
 }));
 
@@ -94,7 +98,7 @@ describe("PlayerWrapper", () => {
     useIsTablet.mockReturnValue(false);
 
     const children = jest.fn(() => {});
-    const dimensions = { height: 50, width: props.style.width };
+    const dimensions = { height: undefined, width: props.style.width };
 
     const element = renderWithProviders(
       <PlayerWrapper