@applicaster/zapp-react-native-ui-components 15.0.0-rc.1 → 15.0.0-rc.100

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.web.tsx

@@ -1,294 +0,0 @@
-import React from "react";
-import { Animated, StyleSheet, View } from "react-native";
-
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-
-import {
-  resetScrollAnimatedValues,
-  setScrollModalAnimatedValue,
-} from "./utils";
-
-import { DURATION_TO_MINIMIZE } from "./const";
-
-const getAnimatedConfig = (toValue) => {
-  return {
-    toValue,
-    duration: DURATION_TO_MINIMIZE,
-    useNativeDriver: true,
-  };
-};
-
-const generalStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const AnimatedScrollModalComponent = ({ children }: Props) => {
-  const {
-    isActiveGesture,
-    playerAnimationState,
-    setPlayerAnimationState,
-    resetPlayerAnimationState,
-    animatedValues: {
-      lastScrollY,
-      dragScrollY,
-      dragVideoPlayerY,
-      translateYOffset,
-    },
-    lastScrollYValue,
-    scrollPosition,
-    modalSnapPoints,
-    setLastSnap,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
-
-  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
-    useNavigation();
-
-  const {
-    mode: videoModalMode,
-    previousMode: previousVideoModalMode,
-    item: videoModalItem,
-  } = videoModalState;
-
-  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalItem?.id);
-
-  const isNotMinimizeMaximazeAnimation =
-    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximize;
-
-  const isAudioItem = React.useMemo(
-    () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
-    [videoModalItem]
-  );
-
-  const onRegisterLastScroll = Animated.event(
-    [{ nativeEvent: { contentOffset: { y: lastScrollY } } }],
-    { useNativeDriver: true }
-  );
-
-  const onScroll = React.useCallback(({ nativeEvent }) => {
-    scrollPosition.current = nativeEvent.contentOffset.y;
-  }, []);
-
-  // Workaround for onMomentumScrollEnd issue
-  // https://github.com/facebook/react-native/issues/32696#issuecomment-1104217223
-  const canMomentum = React.useRef(false);
-
-  const onMomentumScrollBegin = React.useCallback(() => {
-    canMomentum.current = true;
-  }, []);
-
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      if (canMomentum.current && !isActiveGesture) {
-        if (nativeEvent.contentOffset.y === 0) {
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-
-          setIEnableGesture(true);
-        } else {
-          setIEnableGesture(false);
-        }
-
-        canMomentum.current = false;
-      }
-    },
-    [isActiveGesture]
-  );
-
-  React.useEffect(() => {
-    return () => {
-      scrollPosition.current = 0;
-
-      resetScrollAnimatedValues(
-        lastScrollY,
-        lastScrollYValue,
-        dragScrollY,
-        dragVideoPlayerY
-      );
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (
-      videoModalMode === "MAXIMIZED" &&
-      !enableGesture &&
-      scrollPosition.current === 0
-    ) {
-      setIEnableGesture(true);
-    }
-
-    if (
-      videoModalMode === "MINIMIZED" &&
-      previousVideoModalMode === "MAXIMIZED"
-    ) {
-      // set animation to the minimize values if moving from the player to another screen
-      if (playerAnimationState === null) {
-        setScrollModalAnimatedValue(
-          translateYOffset,
-          modalSnapPoints[1],
-          setLastSnap
-        );
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-      }
-    } else if (
-      playerAnimationState === null &&
-      ((previousItemId === videoModalItem?.id &&
-        videoModalMode === "MAXIMIZED" &&
-        (previousVideoModalMode === "MINIMIZED" ||
-          previousVideoModalMode === "MAXIMIZED")) ||
-        (previousItemId !== videoModalItem?.id &&
-          videoModalMode !== "FULLSCREEN"))
-    ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
-    }
-  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
-
-  React.useEffect(() => {
-    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
-      if (
-        (scrollPosition.current === 0 &&
-          (lastScrollY as any)._value !== 0 &&
-          (dragScrollY as any)._value === 0 &&
-          (dragVideoPlayerY as any)._value === 0) ||
-        (scrollPosition.current !== 0 &&
-          ((dragScrollY as any)._value !== 0 ||
-            (dragVideoPlayerY as any)._value !== 0))
-      ) {
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-      }
-
-      Animated.timing(
-        translateYOffset,
-        getAnimatedConfig(modalSnapPoints[1])
-      ).start(() => {
-        minimiseVideoModal();
-
-        setScrollModalAnimatedValue(
-          translateYOffset,
-          modalSnapPoints[1],
-          setLastSnap
-        );
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-
-        resetPlayerAnimationState();
-      });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
-        maximiseVideoModal();
-        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-
-        resetPlayerAnimationState();
-      });
-    }
-  }, [playerAnimationState]);
-
-  React.useEffect(() => {
-    const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
-      lastScrollYValue.current = value;
-    });
-
-    const dragListenerId = dragScrollY.addListener(({ value }) => {
-      const preparedValue =
-        isMinimizedModal && value >= 0
-          ? 0
-          : Math.round(isAudioItem ? Math.abs(value) : value);
-
-      if (
-        preparedValue > 0 &&
-        scrollPosition.current === 0 &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
-      ) {
-        isMinimizedModal && setStartComponentsAnimation(true);
-        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
-      }
-    });
-
-    return () => {
-      lastScrollY.removeListener(lastScrollYListenerId);
-      dragScrollY.removeListener(dragListenerId);
-    };
-  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
-
-  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
-
-  return (
-    <View style={generalStyles.container}>
-      <View pointerEvents="box-none">
-        <Animated.View>
-          <Animated.ScrollView
-            scrollEnabled={scrollEnabled}
-            bounces={false}
-            onScrollBeginDrag={onRegisterLastScroll}
-            onScroll={onScroll}
-            onMomentumScrollBegin={onMomentumScrollBegin}
-            onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={1}
-            showsVerticalScrollIndicator={false}
-          >
-            {children}
-          </Animated.ScrollView>
-        </Animated.View>
-      </View>
-    </View>
-  );
-};
-
-export const AnimatedScrollModal = ({ children }: Props) => {
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  const Component =
-    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
-
-  return <Component>{children}</Component>;
-};

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -1,176 +0,0 @@
-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: { mode: videoModalMode },
-  } = useNavigation();
-
-  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
-    PlayerContainerContext
-  );
-
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
-
-  const isNotMinimizeMaximazeAnimation =
-    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximize;
-
-  const isEnablePanGesture =
-    !isLanguageOverlayVisible &&
-    isNotMinimizeMaximazeAnimation &&
-    !isSeekBarTouch &&
-    (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 (videoModalMode === "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.maximize);
-            } else {
-              lastScrollY.setValue(0);
-              lastScrollYValue.current = 0;
-              setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
-            }
-          }
-        } else if (videoModalMode === "MINIMIZED") {
-          if (translationY < 0) {
-            // from mini to full
-            setLastSnap(modalSnapPoints[0]);
-
-            translateYOffset.setValue(
-              modalSnapPoints[1] - preparedTranslationY
-            );
-
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
-          } else {
-            resetPlayerAnimationState();
-          }
-        }
-      }
-    },
-    [lastSnap, modalSnapPoints, videoModalMode]
-  );
-
-  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}
-      onGestureEvent={onGestureEvent}
-      onHandlerStateChange={onHandlerStateChange}
-    >
-      <Animated.View style={generalStyles.container}>{children}</Animated.View>
-    </PanGestureHandler>
-  );
-};
-
-export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
-
-  return <Component>{children}</Component>;
-};

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.web.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import { Animated, StyleSheet } from "react-native";
-
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-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 },
-    modalSnapPoints,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const {
-    videoModalState: { mode: videoModalMode },
-  } = useNavigation();
-
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
-
-  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 (
-    <Animated.View style={generalStyles.container}>{children}</Animated.View>
-  );
-};
-
-export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
-
-  return <Component>{children}</Component>;
-};