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

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

@@ -0,0 +1,294 @@
+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.web.tsx

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

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { Animated } from "react-native";
+import React, { useEffect, useMemo } from "react";
+import { Animated, Dimensions } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -11,6 +11,7 @@ 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",
@@ -23,6 +24,7 @@ export enum PlayerAnimationStateEnum {
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
+  yTranslate: React.MutableRefObject<Animated.Value | null>;
   isActiveGesture: boolean;
   playerAnimationState: PlayerAnimationStateT;
   setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
@@ -48,6 +50,7 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
+  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,6 +76,10 @@ export const ReactContext = React.createContext<ModalAnimationContextT>({
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
+  const yTranslate = React.useRef(
+    new Animated.Value(Dimensions.get("window").height)
+  );
+
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);
 
@@ -96,13 +103,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-    }
-  }, [visible, resetPlayerAnimationState]);
-
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;
@@ -115,6 +115,29 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   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) {
+          yTranslate.current?.setValue(windowDimensions.height);
+        }
+      } else {
+        yTranslate.current?.setValue(windowDimensions.height);
+      }
+    }
+  }, [
+    visible,
+    resetPlayerAnimationState,
+    windowDimensions.height,
+    isTabletLandscape,
+  ]);
 
   React.useEffect(() => {
     if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {
@@ -140,30 +163,51 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <ReactContext.Provider
-      value={{
-        startComponentsAnimation,
-        setStartComponentsAnimation,
-        isActiveGesture: playerAnimationState !== null,
-        playerAnimationState,
-        setPlayerAnimationState,
-        resetPlayerAnimationState,
-        minimisedHeight,
-        animatedValues: {
+      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,
-        },
-        lastScrollYValue,
-        scrollPosition,
-        modalSnapPoints,
-        lastSnap,
-        setLastSnap,
-        tabletLandscapePlayerTopPosition,
-        setTabletLandscapePlayerTopPosition,
-        startComponentsAnimationDistance,
-        progressBarHeight,
-      }}
+          lastSnap,
+          modalSnapPoints,
+          lastScrollYValue,
+          scrollPosition,
+          tabletLandscapePlayerTopPosition,
+          startComponentsAnimationDistance,
+          progressBarHeight,
+          isLiveItem,
+        ]
+      )}
     >
       {children}
     </ReactContext.Provider>

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,6 +11,8 @@ import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactH
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -26,6 +28,10 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
+  inline?: any;
+  docked?: boolean;
+  isModal?: boolean;
+  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -42,8 +48,24 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  isTablet = false,
+  inline,
+  docked,
+  isModal,
+  pip,
 }: Props) => {
+  const isInlineModal = inline && isModal;
+
+  // Mounting the PlayerDetails component is a resource-intensive process.
+  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
+  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
+  // This helps to avoid blocking the rotation and any animations related to the rotation.
+  const isShowPlayerDetails = useDelayedPlayerDetails({
+    isInline: isInlineModal,
+    isDocked: docked,
+    isPip: pip,
+  });
+
+  const isTablet = useIsTablet();
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
@@ -79,7 +101,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components)) {
+  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
     return null;
   }