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

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -0,0 +1,302 @@
+/* eslint-disable padding-line-between-statements */
+
+import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+export enum ComponentAnimationType {
+  bottomBar = "bottomBar",
+  player = "player",
+  componentFade = "componentFade",
+  componentAppears = "componentAppears",
+  moveUpComponent = "moveUpComponent",
+  moveComponentHorizontal = "moveComponentHorizontal",
+  audioPlayerPaddingHorizontal = "audioPlayerPaddingHorizontal",
+}
+
+export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+export const PROGRESS_BAR_HEIGHT = 3;
+
+export const defaultAspectRatioWidth = (height: number): number =>
+  (height / 9) * 16;
+
+export const getAnimationStyle = (component, animatedValue) => {
+  switch (component) {
+    case ComponentAnimationType.bottomBar: {
+      return { zIndex: 99, transform: [{ translateY: animatedValue }] };
+    }
+
+    case ComponentAnimationType.player: {
+      return { width: animatedValue.x, height: animatedValue.y };
+    }
+
+    case ComponentAnimationType.componentFade:
+    case ComponentAnimationType.componentAppears: {
+      return { opacity: animatedValue };
+    }
+
+    case ComponentAnimationType.moveUpComponent: {
+      return { transform: [{ translateY: animatedValue }] };
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal:
+    case ComponentAnimationType.moveComponentHorizontal: {
+      return { transform: [{ translateX: animatedValue }] };
+    }
+
+    default:
+      return null;
+  }
+};
+
+export const getAnimationDefaultValue = (component, bottomTabBarHeight) => {
+  switch (component) {
+    case ComponentAnimationType.bottomBar: {
+      return bottomTabBarHeight;
+    }
+
+    case ComponentAnimationType.player: {
+      return { x: 0, y: 0 };
+    }
+
+    case ComponentAnimationType.componentFade: {
+      return 1;
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal:
+    case ComponentAnimationType.moveComponentHorizontal:
+    case ComponentAnimationType.componentAppears:
+    case ComponentAnimationType.moveUpComponent: {
+      return 0;
+    }
+  }
+};
+
+export const calculateAnimationValue = (animationType, dragPosition, data) => {
+  const {
+    isAudioItem,
+    bottomTabBarHeight,
+    minimisedHeight,
+    minimisedWidth,
+    defaultValue,
+    moveUpValue,
+    moveComponentHorizontalValue,
+    isTablet,
+    isTabletLandscape,
+    isRTL,
+    fromMiniPlayer,
+    inlineAudioPlayer,
+  } = data;
+
+  switch (animationType) {
+    case ComponentAnimationType.bottomBar: {
+      if (fromMiniPlayer) {
+        return dragPosition < bottomTabBarHeight
+          ? dragPosition
+          : bottomTabBarHeight;
+      }
+
+      return dragPosition < bottomTabBarHeight
+        ? bottomTabBarHeight - dragPosition
+        : 0;
+    }
+
+    case ComponentAnimationType.player: {
+      const value =
+        isAudioItem && !inlineAudioPlayer
+          ? isTabletLandscape
+            ? fromMiniPlayer
+              ? { forWidth: 4, forHeight: 4.5 }
+              : { forWidth: 3, forHeight: 3 }
+            : { forWidth: 2, forHeight: 2 }
+          : isTabletLandscape
+          ? { forWidth: 8, forHeight: 6.5 }
+          : { forWidth: 3.5, forHeight: 2 };
+
+      const minWidth =
+        isAudioItem && !inlineAudioPlayer ? minimisedHeight : minimisedWidth;
+
+      if (fromMiniPlayer) {
+        const calculationWidth =
+          dragPosition * value.forWidth < minWidth
+            ? minWidth
+            : dragPosition * value.forWidth;
+        const calculationHeight =
+          dragPosition * value.forHeight < minimisedHeight
+            ? minimisedHeight
+            : dragPosition * value.forHeight;
+
+        return {
+          x:
+            calculationWidth < defaultValue.x
+              ? calculationWidth
+              : defaultValue.x,
+          y:
+            calculationHeight < defaultValue.y
+              ? calculationHeight
+              : defaultValue.y,
+        };
+      }
+
+      const calculationWidth = defaultValue.x - dragPosition * value.forWidth;
+
+      const calculationHeight = defaultValue.y - dragPosition * value.forHeight;
+
+      return {
+        x: calculationWidth > minWidth ? calculationWidth : minWidth,
+        y:
+          calculationHeight > minimisedHeight
+            ? calculationHeight
+            : minimisedHeight,
+      };
+    }
+
+    case ComponentAnimationType.componentFade: {
+      if (fromMiniPlayer) {
+        const calculation = dragPosition / (isTablet ? 200 : 150);
+
+        return calculation < 1 ? calculation : 1;
+      }
+
+      const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
+
+      return calculation > 0 ? calculation : 0;
+    }
+
+    case ComponentAnimationType.componentAppears: {
+      if (fromMiniPlayer) {
+        const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
+
+        return calculation > 0 ? calculation : 0;
+      }
+
+      const calculation = dragPosition / (isTablet ? 200 : 150);
+
+      return calculation < 1 ? calculation : 1;
+    }
+
+    case ComponentAnimationType.moveUpComponent: {
+      if (fromMiniPlayer) {
+        const calculation =
+          moveUpValue + dragPosition / (isTabletLandscape ? 1 : 4);
+
+        return calculation < 0 ? calculation : 0;
+      }
+
+      const calculation = 0 - dragPosition / (isTabletLandscape ? 1 : 2);
+
+      return calculation > moveUpValue ? calculation : moveUpValue;
+    }
+
+    case ComponentAnimationType.moveComponentHorizontal: {
+      if (fromMiniPlayer) {
+        const calculation = isRTL
+          ? moveComponentHorizontalValue - dragPosition * 2
+          : moveComponentHorizontalValue + dragPosition * 2;
+        const condition = isRTL ? calculation > 0 : calculation < 0;
+
+        return condition ? calculation : 0;
+      }
+
+      const calculation = isRTL ? dragPosition * 2 : -(dragPosition * 2);
+      const condition = isRTL
+        ? calculation < moveComponentHorizontalValue
+        : calculation > moveComponentHorizontalValue;
+
+      return condition ? calculation : moveComponentHorizontalValue;
+    }
+
+    case ComponentAnimationType.audioPlayerPaddingHorizontal: {
+      const padding = isRTL
+        ? AUDIO_PLAYER_HORIZONTAL_PADDING
+        : -AUDIO_PLAYER_HORIZONTAL_PADDING;
+
+      if (fromMiniPlayer) {
+        const calculation = isRTL
+          ? padding - dragPosition / 5
+          : padding + dragPosition / 5;
+        const condition = isRTL ? calculation > 0 : calculation < 0;
+
+        return condition ? calculation : 0;
+      }
+
+      const calculation = isRTL ? dragPosition / 5 : -(dragPosition / 5);
+      const condition = isRTL ? calculation < padding : calculation > padding;
+
+      return condition ? calculation : padding;
+    }
+  }
+};
+
+export const gestureListenerHelper = (data) => {
+  const {
+    listenerValue,
+    preparedValue,
+    animationType,
+    animatedValue,
+    calculationData,
+    modalSnapPoint,
+    startComponentsAnimationDistance,
+    startComponentsAnimation,
+    setStartComponentsAnimation,
+    getAnimationValue,
+  } = data;
+
+  if (calculationData.fromMiniPlayer) {
+    if (listenerValue <= 0) {
+      if (
+        preparedValue >= 0 &&
+        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
+      ) {
+        !startComponentsAnimation && setStartComponentsAnimation(true);
+
+        animatedValue.setValue(
+          calculateAnimationValue(animationType, preparedValue, calculationData)
+        );
+      } else {
+        animatedValue.setValue(calculationData.defaultValue);
+        startComponentsAnimation && setStartComponentsAnimation(false);
+      }
+    } else {
+      const value = getAnimationValue(
+        animationType,
+        PlayerAnimationStateEnum.minimize
+      ).toValue;
+
+      animatedValue.setValue(value);
+    }
+  } else {
+    if (preparedValue >= startComponentsAnimationDistance) {
+      !startComponentsAnimation && setStartComponentsAnimation(true);
+      const value = Math.round(
+        preparedValue - startComponentsAnimationDistance
+      );
+
+      animatedValue.setValue(
+        calculateAnimationValue(animationType, value, calculationData)
+      );
+    } else {
+      animatedValue.setValue(calculationData.defaultValue);
+      startComponentsAnimation && setStartComponentsAnimation(false);
+    }
+  }
+};
+
+export const setScrollModalAnimatedValue = (
+  animatedValue,
+  value,
+  setLastSnap
+) => {
+  setLastSnap(value);
+  animatedValue.setValue(value);
+};
+
+export const resetScrollAnimatedValues = (
+  lastScrollY,
+  lastScrollYValue,
+  dragScrollY,
+  dragVideoPlayerY
+) => {
+  lastScrollY.setValue(0);
+  lastScrollYValue.current = 0;
+  dragScrollY.setValue(0);
+  dragVideoPlayerY.setValue(0);
+};

package/Components/VideoModal/PlayerDetails.tsx

@@ -23,6 +23,8 @@ const containerStyle = ({
   backgroundColor: modal_background_color,
 });
 
+// const audioMarginStyle = { marginTop: 0, marginBottom: 0 };
+
 export const PlayerDetails = ({
   entry,
   style,
@@ -40,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(100)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: 0,
+      toValue: -30,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -61,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 
@@ -75,6 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,18 +1,32 @@
 import * as React from "react";
-import { Platform, StyleSheet, View, ViewStyle } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
-
-type Dimensions = {
-  width: number;
-  height: number;
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+
+import {
+  AnimatedScrollModal,
+  AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
 };
 
 type Configuration = {
@@ -23,20 +37,22 @@ type Configuration = {
 
 type Props = {
   entry: ZappEntry;
-  style: ViewStyle & Dimensions;
+  style: ViewStyle & DimensionsT;
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
-  children: (playerDimensions: Dimensions) => React.ReactNode;
+  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
 };
 
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
   playerDetails: { flex: 1, paddingTop: 20 },
+  flex: { flex: 1 },
 });
 
 const orientationStyles = StyleSheet.create({
@@ -52,6 +68,15 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
   return orientationStyles.portrait;
 };
 
+const getScreenAspectRatio = () => {
+  const { width, height } = Dimensions.get("screen");
+
+  const longEdge = Math.max(width, height);
+  const shortEdge = Math.min(width, height);
+
+  return longEdge / shortEdge;
+};
+
 const safeAreaStyles = (
   configuration: Configuration,
   isTablet: boolean
@@ -66,9 +91,21 @@ const safeAreaStyles = (
   };
 };
 
+const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
 const getTabletWidth = (
   configuration: Configuration,
-  dimensions: Dimensions
+  dimensions: DimensionsT
 ) => {
   const tablet_landscape_sidebar_width =
     configuration?.tablet_landscape_sidebar_width;
@@ -78,41 +115,14 @@ const getTabletWidth = (
   const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
 
   if (tablet_landscape_sidebar_width?.includes("%")) {
-    return width * (1 - sidebarWidth / 100);
+    return Number(width) * (1 - sidebarWidth / 100);
   }
 
   if (Number.isNaN(sidebarWidth)) {
-    return width * 0.65;
+    return Number(width) * 0.65;
   }
 
-  return width - sidebarWidth;
-};
-
-export const defaultAspectRatioHeight = (width: number): number =>
-  (width / 16) * 9;
-
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
-
-const getEdges = (
-  isTablet: boolean,
-  docked: boolean,
-  isInlineModal: boolean
-) => {
-  if (isTablet) {
-    return docked ? ["right", "left"] : ["top"];
-  }
-
-  // mobile
-  if (isInlineModal && docked) {
-    return ["bottom"];
-  }
-
-  if (!isInlineModal && Platform.OS === "android") {
-    return [];
-  }
-
-  return ["top"];
+  return Number(width) - sidebarWidth;
 };
 
 export const PlayerWrapper = (props: Props) => {
@@ -126,6 +136,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -136,83 +147,105 @@ export const PlayerWrapper = (props: Props) => {
 
   const tabletWidth = getTabletWidth(configuration, style);
 
-  const { width: screenWidth } = useDimensions("screen");
-
-  const containerDimensions: Dimensions = React.useMemo(
+  const baseDimensions: DimensionsT = React.useMemo(
     () => ({
       width:
-        isInlineModal && !docked && isTabletLandscape
-          ? tabletWidth
-          : style.width,
-      height:
-        isInlineModal && !docked
-          ? defaultAspectRatioHeight(
-              isTabletLandscape ? tabletWidth : screenWidth
-            )
-          : style.height,
+        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
+      height: undefined,
     }),
-    [isInlineModal, docked, isTabletLandscape, tabletWidth, style, screenWidth]
+    [isInlineModal, tabletWidth, docked]
   );
 
-  const playerDimensions: Dimensions = React.useMemo(
+  const playerDimensions: DimensionsT = React.useMemo(
     () => ({
-      width:
-        isInlineModal && docked
-          ? defaultAspectRatioWidth(containerDimensions.height)
-          : containerDimensions.width,
-      height: containerDimensions.height,
+      ...baseDimensions,
+      width: isInlineModal && docked ? undefined : baseDimensions.width,
+      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [isInlineModal, docked, containerDimensions]
+    [baseDimensions, isInlineModal, pip]
+  );
+
+  const containerDimensions: DimensionsT = React.useMemo(
+    () => ({
+      ...baseDimensions,
+      aspectRatio:
+        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
+    }),
+    [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
 
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
     () => ({ ...playerDimensions, ...playerDimesionsHack }),
-    [playerDimensions, playerDimesionsHack]
+    [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, docked, isInlineModal) as readonly Edge[]}
-      style={[
-        directionStyles(isTabletLandscape),
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <ScreenContextProvider pathname={"videoModal"}>
-        <PathnameContext.Provider value={"videoModal"}>
-          <View
-            testID={`${entry?.id}-player-container`}
-            style={[
-              defaultStyles.playerContainer,
-              containerDimensions,
-              containerStyle,
-              {
-                height:
-                  isInlineModal && !docked
-                    ? containerDimensions.height + 10
-                    : containerDimensions.height,
-              },
-              playerDimesionsHack,
-            ]}
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={[directionStyles(isTabletLandscape), defaultStyles.flex]}
           >
-            {children(childrenStyles)}
-          </View>
-          {isInlineModal && !docked ? (
-            <PlayerDetails
-              configuration={configuration}
-              style={defaultStyles.playerDetails}
-              entry={entry}
-              isTabletLandscape={isTabletLandscape}
-            />
-          ) : (
-            <View style={defaultStyles.playerDetails} />
-          )}
-        </PathnameContext.Provider>
+            <PathnameContext.Provider value={pathname}>
+              <ScreenContextProvider pathname={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
+                >
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal && !docked ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
+          </AnimationComponent>
+        </WrapperView>
       </ScreenContextProvider>
-    </WrapperView>
+    </PathnameContext.Provider>
   );
 };