@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5412418016 → 15.0.0-alpha.5830601313

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,33 +1,5 @@
-import React, { useRef, useState } from "react";
-import { Animated, View } from "react-native";
-
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-import {
-  useDimensions,
-  useGetBottomTabBarHeight,
-  useNavigation,
-} 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 {
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
-  ComponentAnimationType,
-  defaultAspectRatioWidth,
-  gestureListenerHelper,
-  getAnimationDefaultValue,
-  getAnimationStyle,
-  getMoveUpValue,
-} from "./utils";
-
-import { DURATION_TO_MINIMIZE, DEFAULT_DURATION_FOR_ANIMATION } from "./const";
+import React from "react";
+import { View } from "react-native";
 
 type Props = {
   animationType: string;
@@ -36,465 +8,10 @@ type Props = {
   additionalData?: { [key: string]: any };
 };
 
-export const AnimationView = ({
-  animationType,
-  style,
-  children,
-  additionalData = {},
-}: Props) => {
-  const {
-    startComponentsAnimation,
-    setStartComponentsAnimation,
-    playerAnimationState,
-    minimisedHeight,
-    animatedValues: { dragScrollY, dragVideoPlayerY },
-    lastScrollYValue,
-    scrollPosition,
-    tabletLandscapePlayerTopPosition,
-    setTabletLandscapePlayerTopPosition,
-    modalSnapPoints,
-    startComponentsAnimationDistance,
-    progressBarHeight,
-  } = useModalAnimationContext();
-
-  const isRTL = useIsRTL();
-  const isAppActive = useAppState(true);
-
-  const {
-    width: screenWidth,
-    deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("window", {
-    deviceInfo: true,
-    updateForInactiveScreens: true,
-  });
-
-  const { videoModalState } = useNavigation();
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-
-  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
-  const measureView = React.useCallback(() => {
-    if (isTabletLandscape && tabletLandscapePlayerTopPosition === 0) {
-      animationComponentRef.current.measure(
-        (_x, _y, _width, _height, _pageX, pageY) => {
-          setTabletLandscapePlayerTopPosition(pageY - 20);
-        }
-      );
-    }
-  }, [tabletLandscapePlayerTopPosition]);
-
-  const [defaultValue, setDefaultValue] = useState<any>(
-    getAnimationDefaultValue(animationType, bottomTabBarHeight)
-  );
-
-  const isAudioItem = React.useMemo(
-    () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value?.includes?.("audio"),
-    [videoModalItem]
-  );
-
-  const inlineAudioPlayer = additionalData.inlineAudioPlayer;
-
-  const moveUpValue = getMoveUpValue({
-    additionalData,
-    insets,
-    isAudioItem,
-    progressBarHeight,
-    isTablet,
-    isTabletLandscape,
-    tabletLandscapePlayerTopPosition,
-  });
-
-  const moveComponentHorizontalValue = additionalData.moveValue
-    ? isRTL
-      ? additionalData.moveValue
-      : -additionalData.moveValue
-    : 0;
-
-  const animationValueType: string =
-    animationType === ComponentAnimationType.player ? "ValueXY" : "Value";
-
-  const getAnimationValue = React.useCallback(
-    (animationType, state) => {
-      const defaultConfig = {
-        toValue: 0,
-        duration:
-          state === PlayerAnimationStateEnum.minimize
-            ? DURATION_TO_MINIMIZE
-            : DEFAULT_DURATION_FOR_ANIMATION,
-        useNativeDriver: true,
-      };
-
-      switch (animationType) {
-        case ComponentAnimationType.bottomBar: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.player: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            const minWidth =
-              isAudioItem && !inlineAudioPlayer
-                ? minimisedHeight
-                : minimisedWidth;
-
-            return {
-              ...defaultConfig,
-              toValue: { x: minWidth, y: minimisedHeight },
-              useNativeDriver: false,
-            };
-          }
-
-          return {
-            ...defaultConfig,
-            toValue: defaultValue,
-            useNativeDriver: false,
-          };
-        }
-
-        case ComponentAnimationType.componentFade: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = 0;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.componentAppears: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = 1;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.moveUpComponent: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = moveUpValue;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.moveComponentHorizontal: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = moveComponentHorizontalValue;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = defaultValue;
-
-          return defaultConfig;
-        }
-
-        case ComponentAnimationType.audioPlayerPaddingHorizontal: {
-          if (state === PlayerAnimationStateEnum.minimize) {
-            defaultConfig.toValue = isRTL
-              ? AUDIO_PLAYER_HORIZONTAL_PADDING
-              : -AUDIO_PLAYER_HORIZONTAL_PADDING;
-
-            return defaultConfig;
-          }
-
-          defaultConfig.toValue = 0;
-
-          return defaultConfig;
-        }
-
-        default:
-          return defaultConfig;
-      }
-    },
-    [
-      defaultValue,
-      minimisedWidth,
-      minimisedHeight,
-      isAudioItem,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      isRTL,
-      inlineAudioPlayer,
-    ]
-  );
-
-  const getInitialValue = React.useCallback(() => {
-    const { mode: videoModalMode, previousMode } = videoModalState;
-    const mode = videoModalMode === "PIP" ? previousMode : videoModalMode;
-
-    switch (mode) {
-      case "MINIMIZED":
-        return getAnimationValue(
-          animationType,
-          PlayerAnimationStateEnum.minimize
-        ).toValue;
-
-      case "MAXIMIZED":
-      default:
-        return getAnimationValue(
-          animationType,
-          PlayerAnimationStateEnum.maximize
-        ).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: videoModalMode === "MINIMIZED",
-      inlineAudioPlayer,
-    }),
-    [
-      bottomTabBarHeight,
-      minimisedHeight,
-      minimisedWidth,
-      defaultValue,
-      moveUpValue,
-      moveComponentHorizontalValue,
-      videoModalMode,
-      isAudioItem,
-      isTablet,
-      isTabletLandscape,
-      isRTL,
-      inlineAudioPlayer,
-    ]
-  );
-
-  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 (
-        (videoModalMode === "MAXIMIZED" || videoModalMode === "MINIMIZED") &&
-        defaultValue.x !== screenWidth &&
-        width &&
-        height
-      ) {
-        const value = { x: width, y: height };
-        setDefaultValue(value);
-        animatedValue.setValue(value);
-      }
-    }
-  }, [screenWidth]);
-
-  React.useEffect(() => {
-    const { mode, previousMode } = videoModalState;
-
-    if (mode === "MINIMIZED" && 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);
-      }
-    }
-  }, [
-    animatedValue,
-    animationType,
-    getAnimationValue,
-    playerAnimationState,
-    videoModalState,
-  ]);
-
-  React.useEffect(() => {
-    if (
-      playerAnimationState === PlayerAnimationStateEnum.minimize &&
-      startComponentsAnimation &&
-      videoModalMode === "MAXIMIZED"
-    ) {
-      Animated.timing(
-        animatedValue,
-        getAnimationValue(animationType, playerAnimationState)
-      ).start();
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      animatedValue.setValue(defaultValue);
-    }
-  }, [playerAnimationState, startComponentsAnimation, defaultValue]);
-
-  React.useEffect(() => {
-    const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
-      ({ value }) => {
-        if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
-          const preparedValue = Math.round(Math.abs(value));
-
-          gestureListenerHelper({
-            listenerValue: value,
-            preparedValue,
-            animationType,
-            animatedValue,
-            calculationData,
-            modalSnapPoint: modalSnapPoints[1],
-            startComponentsAnimationDistance,
-            startComponentsAnimation,
-            setStartComponentsAnimation,
-            getAnimationValue,
-          });
-        }
-      }
-    );
-
-    const dragListenerId = dragScrollY.addListener(({ value }) => {
-      if (
-        scrollPosition.current === 0 &&
-        playerAnimationState === PlayerAnimationStateEnum.drag_scroll
-      ) {
-        const preparedValue = Math.round(
-          Math.abs(value) - lastScrollYValue.current
-        );
-
-        gestureListenerHelper({
-          listenerValue: value,
-          preparedValue,
-          animationType,
-          animatedValue,
-          calculationData,
-          modalSnapPoint: modalSnapPoints[1],
-          startComponentsAnimationDistance,
-          startComponentsAnimation,
-          setStartComponentsAnimation,
-          getAnimationValue,
-        });
-      }
-    });
-
-    return () => {
-      dragScrollY.removeListener(dragListenerId);
-      dragVideoPlayerY.removeListener(dragVideoPlayerYListenerId);
-    };
-  }, [playerAnimationState, calculationData, startComponentsAnimation]);
-
-  const preparedStyles = Array.isArray(style) ? style : [style];
-
-  return (
-    <Animated.View
-      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
-      ref={animationComponentRef}
-      style={[
-        ...preparedStyles,
-        (videoModalMode === "MAXIMIZED" ||
-          videoModalMode === "MINIMIZED" ||
-          (videoModalMode === "PIP" && isAppActive)) &&
-          getAnimationStyle(animationType, animatedValue),
-      ]}
-    >
-      {children}
-    </Animated.View>
-  );
-};
-
 export const AnimationComponent = (props: Props) => {
-  const { additionalData = {}, style } = props;
-
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  if (additionalData?.disableAnimatedComponent) {
-    return <>{props.children}</>;
-  }
-
-  const useAnimation =
-    visible && !additionalData.disableAnimatedComponent && !isTV();
-
-  const isReactFragment = !useAnimation && !style;
-
-  const Component = useAnimation
-    ? AnimationView
-    : style
-      ? View
-      : React.Fragment;
-
-  if (
-    additionalData.extraAnimation &&
-    typeof additionalData.extraAnimation === "object" &&
-    !Array.isArray(additionalData.extraAnimation) &&
-    !!Object.keys(additionalData.extraAnimation).length
-  ) {
-    const animationType = Object.keys(additionalData.extraAnimation)[0];
-    const animationProps = additionalData.extraAnimation[animationType] || {};
-    delete additionalData.extraAnimation[animationType];
-
-    return (
-      // @ts-ignore
-      <Component {...(isReactFragment ? null : props)}>
-        <AnimationComponent
-          {...animationProps}
-          animationType={animationType}
-          additionalData={{
-            ...animationProps.additionalData,
-            extraAnimation:
-              !!Object.keys(additionalData.extraAnimation).length &&
-              additionalData.extraAnimation,
-          }}
-        >
-          {props.children}
-        </AnimationComponent>
-      </Component>
-    );
-  }
+  const { style } = props;
 
-  if (isReactFragment) {
-    // @ts-ignore
-    return <Component>{props.children}</Component>;
-  }
+  const Component = style ? View : React.Fragment;
 
   return <Component {...props}>{props.children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,78 +1,19 @@
 import React, { useEffect, useMemo } from "react";
 import { Animated, Dimensions } from "react-native";
 
-import {
-  useSafeAreaInsets,
-  useSafeAreaFrame,
-} from "react-native-safe-area-context";
-import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
-import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
-import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
-export enum PlayerAnimationStateEnum {
-  minimize = "minimize",
-  maximize = "maximize",
-  drag_player = "drag_player",
-  drag_scroll = "drag_scroll",
-  appear_as_docked = "appear_as_docked",
-}
-
-export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
-
 export type ModalAnimationContextT = {
   yTranslate: React.MutableRefObject<Animated.Value | null>;
-  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;
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
   yTranslate: React.createRef<Animated.Value | null>(),
-  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,
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
@@ -80,49 +21,18 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     new Animated.Value(Dimensions.get("window").height)
   );
 
-  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 },
+    videoModalState: { visible },
   } = 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);
   const isTabletLandscape = useIsTabletLandscape();
   const windowDimensions = Dimensions.get("window");
 
   useEffect(() => {
     // Reset player animation state when video modal is closed
     if (!visible) {
-      resetPlayerAnimationState();
-
       if (!isTabletLandscape) {
         // restore to portrait ( in portrait mode height is bigger)
         if (windowDimensions.height > windowDimensions.width) {
@@ -134,79 +44,19 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     }
   }, [
     visible,
-    resetPlayerAnimationState,
     windowDimensions.height,
     isTabletLandscape,
+    windowDimensions.width,
   ]);
 
-  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 + progressBarHeight + bottomSafeArea);
-
-  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={useMemo(
         () => ({
           yTranslate,
-          startComponentsAnimation,
-          setStartComponentsAnimation,
-          isActiveGesture: playerAnimationState !== null,
-          playerAnimationState,
-          setPlayerAnimationState,
-          resetPlayerAnimationState,
           minimisedHeight,
-          animatedValues: {
-            lastScrollY,
-            dragScrollY,
-            dragVideoPlayerY,
-            translateYOffset,
-          },
-          lastScrollYValue,
-          scrollPosition,
-          modalSnapPoints,
-          lastSnap,
-          setLastSnap,
-          tabletLandscapePlayerTopPosition,
-          setTabletLandscapePlayerTopPosition,
-          startComponentsAnimationDistance,
-          progressBarHeight,
         }),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [
-          startComponentsAnimation,
-          playerAnimationState,
-          minimisedHeight,
-          lastScrollY,
-          dragScrollY,
-          dragVideoPlayerY,
-          translateYOffset,
-          lastSnap,
-          modalSnapPoints,
-          lastScrollYValue,
-          scrollPosition,
-          tabletLandscapePlayerTopPosition,
-          startComponentsAnimationDistance,
-          progressBarHeight,
-          isLiveItem,
-        ]
+        [minimisedHeight]
       )}
     >
       {children}