@applicaster/zapp-react-native-ui-components 12.0.0-rc.13 → 12.0.0-rc.130

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

@@ -1,9 +1,17 @@
 import React, { useEffect, useRef } from "react";
-import { StyleProp, ViewStyle, Animated, Easing } from "react-native";
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  Dimensions,
+} from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
 type Configuration = {
   [key: string]: any;
   modal_background_color?: string;
@@ -15,6 +23,7 @@ type Props = {
   configuration: Configuration;
   isTabletLandscape: boolean;
   isAudioPlayer?: boolean;
+  isTablet: boolean;
 };
 
 const containerStyle = ({
@@ -23,12 +32,15 @@ const containerStyle = ({
   backgroundColor: modal_background_color,
 });
 
+// const audioMarginStyle = { marginTop: 0, marginBottom: 0 };
+
 export const PlayerDetails = ({
   entry,
   style,
   configuration,
   isTabletLandscape,
   isAudioPlayer,
+  isTablet,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -40,12 +52,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 +73,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 
@@ -75,6 +87,11 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        {
+          // workaround for avoid wrong text-height after going back to portrait rotation
+          // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
+          width: isTablet ? undefined : SCREEN_WIDTH,
+        },
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -7,17 +7,26 @@ import {
   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";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+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";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
 
 type DimensionsT = {
   width: number | string;
-  height: number | string;
+  height: number | string | undefined;
   aspectRatio?: number;
 };
 
@@ -44,6 +53,7 @@ type Props = {
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
   playerDetails: { flex: 1, paddingTop: 20 },
+  flex: { flex: 1 },
 });
 
 const orientationStyles = StyleSheet.create({
@@ -60,10 +70,8 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
 };
 
 const getScreenAspectRatio = () => {
-  const { width, height } = Dimensions.get("screen");
-
-  const longEdge = Math.max(width, height);
-  const shortEdge = Math.min(width, height);
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
   return longEdge / shortEdge;
 };
@@ -82,18 +90,9 @@ const safeAreaStyles = (
   };
 };
 
-const getEdges = (
-  isTablet: boolean,
-  docked: boolean,
-  isInlineModal: boolean
-) => {
+const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
-    return docked ? ["right", "left"] : ["top"];
-  }
-
-  // mobile
-  if (isInlineModal && docked) {
-    return ["bottom"];
+    return ["top"];
   }
 
   if (!isInlineModal && Platform.OS === "android") {
@@ -125,10 +124,37 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-export const PlayerWrapper = (props: Props) => {
+const getStyles = (baseStyle, isMobile, isPortrait) => {
+  if (isMobile && isPortrait) {
+    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
+  }
+
+  if (isMobile && !isPortrait) {
+    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
+  }
+
+  return baseStyle;
+};
+
+const showDetails = (isMobile: boolean, docked: boolean): boolean => {
+  // for mobile we always show details. Mounting of it very heavy operation.
+  if (isMobile) {
+    return true;
+  }
+
+  // workaround for tablets we need to mount/unmount in order to avoid PlayerDetails content dissappearing
+  // FIXME - find out the reason of dissapearing of content
+  if (docked) {
+    return false;
+  }
+
+  return true;
+};
+
+const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
-    style,
+    style: baseStyle,
     containerStyle,
     inline,
     docked,
@@ -143,6 +169,8 @@ export const PlayerWrapper = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
+  const style = getStyles(baseStyle, !isTablet, isInlineModal);
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const tabletWidth = getTabletWidth(configuration, style);
@@ -151,9 +179,9 @@ export const PlayerWrapper = (props: Props) => {
     () => ({
       width:
         isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
-      height: isInlineModal && docked ? style.height : undefined,
+      height: undefined,
     }),
-    [isInlineModal, tabletWidth, style.height, docked]
+    [isInlineModal, tabletWidth, docked]
   );
 
   const playerDimensions: DimensionsT = React.useMemo(
@@ -162,7 +190,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -181,41 +209,73 @@ export const PlayerWrapper = (props: Props) => {
     [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,
-              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>
+                  {showDetails(!isTablet, docked) && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                        isTablet={isTablet}
+                      />
+                    </AnimationComponent>
+                  )}
+                </AnimatedScrollModal>
+              </ScreenContextProvider>
+            </PathnameContext.Provider>
+          </AnimationComponent>
+        </WrapperView>
       </ScreenContextProvider>
-    </WrapperView>
+    </PathnameContext.Provider>
   );
 };
+
+export const PlayerWrapper = PlayerWrapperComponent;