@applicaster/zapp-react-native-ui-components 12.0.0-rc.48 → 12.0.0-rc.49

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -0,0 +1,143 @@
+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 { useConfiguration } from "../utils";
+
+export enum PlayerAnimationStateEnum {
+  minimize = "minimize",
+  maximaze = "maximaze",
+  drag_player = "drag_player",
+  drag_scroll = "drag_scroll",
+}
+
+type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
+
+export type ModalAnimationContextT = {
+  isActiveGesture: boolean;
+  playerAnimationState: PlayerAnimationStateT;
+  setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
+  startComponentsAnimation: boolean;
+  setStartComponentsAnimation: (value: boolean) => void;
+  resetPlayerAnimationState: () => void;
+  minimisedHeight: number;
+  animatedValues: {
+    lastScrollY: Animated.Value;
+    dragScrollY: Animated.Value;
+    dragVideoPlayerY: Animated.Value;
+    translateYOffset: Animated.Value;
+  };
+  lastScrollYValue: React.MutableRefObject<number>;
+  scrollPosition: React.MutableRefObject<number>;
+  modalSnapPoints: number[];
+  lastSnap: number;
+  setLastSnap: (value: number) => void;
+  tabletLandscapePlayerTopPosition: number;
+  setTabletLandscapePlayerTopPosition: (value: number) => void;
+};
+
+const ReactContext = React.createContext<ModalAnimationContextT>({
+  isActiveGesture: false,
+  playerAnimationState: null,
+  setPlayerAnimationState: () => null,
+  startComponentsAnimation: false,
+  setStartComponentsAnimation: () => null,
+  resetPlayerAnimationState: () => null,
+  minimisedHeight: 60,
+  animatedValues: {
+    lastScrollY: new Animated.Value(0),
+    dragScrollY: new Animated.Value(0),
+    dragVideoPlayerY: new Animated.Value(0),
+    translateYOffset: new Animated.Value(0),
+  },
+  lastScrollYValue: null,
+  scrollPosition: null,
+  modalSnapPoints: [0, 0],
+  lastSnap: 0,
+  setLastSnap: () => null,
+  tabletLandscapePlayerTopPosition: 0,
+  setTabletLandscapePlayerTopPosition: () => null,
+});
+
+export function useModalAnimationContext() {
+  return useContext<ModalAnimationContextT>(ReactContext);
+}
+
+const Provider = ({ children }: { children: React.ReactNode }) => {
+  const [playerAnimationState, setPlayerAnimationState] =
+    React.useState<PlayerAnimationStateT>(null);
+
+  const [
+    tabletLandscapePlayerTopPosition,
+    setTabletLandscapePlayerTopPosition,
+  ] = React.useState<number>(0);
+
+  const [startComponentsAnimation, setStartComponentsAnimation] =
+    React.useState<boolean>(false);
+
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
+  const resetPlayerAnimationState = React.useCallback(() => {
+    setPlayerAnimationState(null);
+    setStartComponentsAnimation(false);
+  }, []);
+
+  // Animated values
+  const lastScrollY = React.useRef(new Animated.Value(0)).current;
+  const dragScrollY = React.useRef(new Animated.Value(0)).current;
+  const translateYOffset = React.useRef(new Animated.Value(0)).current;
+  const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
+
+  const { height } = useSafeAreaFrame();
+  const bottomTabBarHeight = useGetBottomTabBarHeight();
+  const minValue = height - minimisedHeight - bottomTabBarHeight;
+  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]);
+  // Extracted animated values which we will use for calculations
+  const lastScrollYValue = React.useRef<number>(0);
+  const scrollPosition = React.useRef<number>(0);
+
+  return (
+    <ReactContext.Provider
+      value={{
+        startComponentsAnimation,
+        setStartComponentsAnimation,
+        isActiveGesture: playerAnimationState !== null,
+        playerAnimationState,
+        setPlayerAnimationState,
+        resetPlayerAnimationState,
+        minimisedHeight,
+        animatedValues: {
+          lastScrollY,
+          dragScrollY,
+          dragVideoPlayerY,
+          translateYOffset,
+        },
+        lastScrollYValue,
+        scrollPosition,
+        modalSnapPoints,
+        lastSnap,
+        setLastSnap,
+        tabletLandscapePlayerTopPosition,
+        setTabletLandscapePlayerTopPosition,
+      }}
+    >
+      {children}
+    </ReactContext.Provider>
+  );
+};
+
+export const withModalAnimationProvider = (Component) => {
+  const WithProvider = (props) => {
+    return (
+      <Provider>
+        <Component {...props} />
+      </Provider>
+    );
+  };
+
+  return WithProvider;
+};

package/Components/VideoModal/ModalAnimation/index.ts

@@ -0,0 +1,15 @@
+export { AnimatedPlayerModalWrapper } from "./AnimatedPlayerModalWrapper";
+
+export { AnimatedScrollModal } from "./AnimatedScrollModal";
+
+export { AnimatedVideoPlayerComponent } from "./AnimatedVideoPlayerComponent";
+
+export {
+  withModalAnimationProvider,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "./ModalAnimationContext";
+
+export { AnimationComponent } from "./AnimationComponent";
+
+export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";

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/PlayerWrapper.tsx

@@ -15,9 +15,16 @@ 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;
 };
 
@@ -44,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({
@@ -82,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") {
@@ -151,9 +150,9 @@ 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(
@@ -183,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>
   );
 };