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

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const generalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    position: "absolute",
+    zIndex: 201,
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AnimatedVideoPlayer = ({ children }: Props) => {
+  const {
+    playerAnimationState,
+    setPlayerAnimationState,
+    animatedValues: { translateYOffset, dragVideoPlayerY, lastScrollY },
+    lastScrollYValue,
+    modalSnapPoints,
+    lastSnap,
+    setLastSnap,
+    resetPlayerAnimationState,
+    setStartComponentsAnimation,
+  } = useModalAnimationContext();
+
+  const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
+  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
+  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
+
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
+  const onGestureEvent = Animated.event(
+    [{ nativeEvent: { translationY: dragVideoPlayerY } }],
+    { useNativeDriver: true }
+  );
+
+  const onHandlerStateChange = React.useCallback(
+    ({ nativeEvent }) => {
+      if (nativeEvent.oldState === State.ACTIVE) {
+        // eslint-disable-next-line prefer-const
+        const { velocityY, translationY } = nativeEvent;
+        const preparedTranslationY = Math.abs(translationY);
+        const dragToss = 0.05;
+
+        if (videoModalState.mode === "MAXIMIZED") {
+          if (translationY > 0) {
+            const endOffsetY =
+              lastSnap + preparedTranslationY + dragToss * velocityY + 200;
+
+            let destSnapPoint = modalSnapPoints[0];
+
+            for (const snapPoint of modalSnapPoints) {
+              const distFromSnap = Math.abs(snapPoint - endOffsetY);
+
+              if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+                destSnapPoint = snapPoint;
+              }
+            }
+
+            setLastSnap(destSnapPoint);
+
+            if (destSnapPoint === modalSnapPoints[0]) {
+              setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            } else {
+              lastScrollY.setValue(0);
+              lastScrollYValue.current = 0;
+              setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
+            }
+          }
+        } else if (videoModalState.mode === "MINIMIZED") {
+          if (translationY < 0) {
+            // from mini to full
+            setLastSnap(modalSnapPoints[0]);
+
+            translateYOffset.setValue(
+              modalSnapPoints[1] - preparedTranslationY
+            );
+
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+          } else {
+            resetPlayerAnimationState();
+          }
+        }
+      }
+    },
+    [lastSnap, modalSnapPoints, videoModalState.mode]
+  );
+
+  React.useEffect(() => {
+    const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
+      ({ value }) => {
+        if (
+          (isMinimizedModal && value >= 0) ||
+          (isMaximazedModal && value <= 0)
+        ) {
+          if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
+            translateYOffset.setValue(
+              modalSnapPoints[isMinimizedModal ? 1 : 0]
+            );
+          }
+        } else {
+          const preparedValue = Math.round(Math.abs(value));
+
+          if (
+            preparedValue > 0 &&
+            playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
+          ) {
+            if (playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+              isMinimizedModal && setStartComponentsAnimation(true);
+              setPlayerAnimationState(PlayerAnimationStateEnum.drag_player);
+            }
+
+            translateYOffset.setValue(
+              isMaximazedModal
+                ? preparedValue
+                : modalSnapPoints[1] - preparedValue
+            );
+          }
+        }
+      }
+    );
+
+    return () => {
+      dragVideoPlayerY.removeListener(dragVideoPlayerYListenerId);
+    };
+  }, [playerAnimationState, isMinimizedModal, isMaximazedModal]);
+
+  return (
+    <PanGestureHandler
+      enabled={isEnablePanGesture}
+      shouldCancelWhenOutside={isMaximazedModal}
+      onGestureEvent={onGestureEvent}
+      onHandlerStateChange={onHandlerStateChange}
+    >
+      <Animated.View style={generalStyles.container}>{children}</Animated.View>
+    </PanGestureHandler>
+  );
+};
+
+export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
+  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+
+  return <Component>{children}</Component>;
+};

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -0,0 +1,456 @@
+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 (
+      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>;
+};