@applicaster/zapp-react-native-ui-components 12.0.0-rc.12 → 12.0.0-rc.121

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -0,0 +1,473 @@
+import React, { useRef, useState } from "react";
+import { Animated, View } from "react-native";
+
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+import {
+  useGetBottomTabBarHeight,
+  useNavigation,
+  useDimensions,
+} 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,
+  getAnimationStyle,
+  defaultAspectRatioWidth,
+  getAnimationDefaultValue,
+  ComponentAnimationType,
+  AUDIO_PLAYER_HORIZONTAL_PADDING,
+} from "./utils";
+
+type Props = {
+  animationType: string;
+  children: React.ReactNode;
+  style?: Record<string, any>;
+  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 });
+
+  const { videoModalState } = useNavigation();
+  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(
+    () =>
+      videoModalState.item?.content?.type?.includes?.("audio") ||
+      videoModalState.item?.type?.value === "audio",
+    [videoModalState.item]
+  );
+
+  const inlineAudioPlayer = additionalData.inlineAudioPlayer;
+
+  const moveUpValue = additionalData.saveArea
+    ? -insets.top + (isAudioItem ? 0 : progressBarHeight)
+    : isTablet
+    ? isTabletLandscape && (!isAudioItem || (isAudioItem && inlineAudioPlayer))
+      ? -tabletLandscapePlayerTopPosition + progressBarHeight
+      : -130
+    : -50 + progressBarHeight;
+
+  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 ? 150 : 100,
+        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,
+    ]
+  );
+
+  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 (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.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);
+      }
+    }
+  }, [videoModalState]);
+
+  React.useEffect(() => {
+    if (
+      playerAnimationState === PlayerAnimationStateEnum.minimize &&
+      startComponentsAnimation &&
+      videoModalState.mode === "MAXIMIZED"
+    ) {
+      Animated.timing(
+        animatedValue,
+        getAnimationValue(animationType, playerAnimationState)
+      ).start();
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+      animatedValue.setValue(defaultValue);
+    }
+  }, [
+    playerAnimationState,
+    startComponentsAnimation,
+    videoModalState.mode,
+    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}
+      ref={animationComponentRef}
+      style={[
+        ...preparedStyles,
+        (videoModalState.mode === "MAXIMIZED" ||
+          videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "PIP" && isAppActive)) &&
+          getAnimationStyle(animationType, animatedValue),
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export const AnimationComponent = (props: Props) => {
+  const { additionalData = {}, style } = props;
+
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  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>
+    );
+  }
+
+  if (isReactFragment) {
+    // @ts-ignore
+    return <Component>{props.children}</Component>;
+  }
+
+  return <Component {...props}>{props.children}</Component>;
+};

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";