@applicaster/zapp-react-native-ui-components 12.0.0-rc.10 → 12.0.0-rc.101

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -0,0 +1,182 @@
+import React, { useContext } from "react";
+import { Animated } from "react-native";
+
+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 {
+  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;
+  startComponentsAnimationDistance: number;
+  progressBarHeight: number;
+};
+
+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,
+  startComponentsAnimationDistance: 0,
+  progressBarHeight: 0,
+});
+
+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 {
+    videoModalState: { mode, visible, item },
+  } = useNavigation();
+
+  const isLiveItem = isLive(item);
+  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: 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);
+
+  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]);
+  // 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,
+        startComponentsAnimationDistance,
+        progressBarHeight,
+      }}
+    >
+      {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,302 @@
+/* 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 PROGRESS_BAR_HEIGHT = 3;
+
+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,
+    startComponentsAnimationDistance,
+    startComponentsAnimation,
+    setStartComponentsAnimation,
+    getAnimationValue,
+  } = data;
+
+  if (calculationData.fromMiniPlayer) {
+    if (listenerValue <= 0) {
+      if (
+        preparedValue >= 0 &&
+        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
+      ) {
+        !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 >= startComponentsAnimationDistance) {
+      !startComponentsAnimation && setStartComponentsAnimation(true);
+      const value = Math.round(
+        preparedValue - startComponentsAnimationDistance
+      );
+
+      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,
@@ -40,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,
@@ -61,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 
@@ -75,6 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (