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

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,10 +14,18 @@ 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";
 
 type DimensionsT = {
   width: number | string;
-  height: number | string;
+  height: number | string | undefined;
   aspectRatio?: number;
 };
 
@@ -33,6 +41,7 @@ type Props = {
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
@@ -43,6 +52,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({
@@ -81,18 +91,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") {
@@ -135,6 +136,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -149,18 +151,18 @@ 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(
     () => ({
       ...baseDimensions,
       width: isInlineModal && docked ? undefined : baseDimensions.width,
-      aspectRatio: !isInlineModal ? getScreenAspectRatio() : 16 / 9,
+      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -179,41 +181,71 @@ 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>
+                  {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>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -4,9 +4,7 @@ import { StyleSheet, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
-  MenuTypes,
   useNavigation,
-  useNavigationType,
   useZappHooksForEntry,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsInitialRender } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
@@ -16,12 +14,12 @@ import {
   allowedOrientationsForScreen,
   ORIENTATIONS,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import { withModalNavigationContextProvider } from "../../Contexts/ModalNavigationContext";
 import { useModalSize } from "./hooks/useModalSize";
 import { useBackgroundColor } from "./hooks/useBackgroundColor";
 import { useInitialPlayerState } from "./hooks/useInitialPlayerState";
-import { usePosition } from "./hooks/usePosition";
 import { APP_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/events";
 import { Spinner } from "../Spinner";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -31,6 +29,8 @@ import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/con
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -59,22 +59,9 @@ const VideoModalComponent = () => {
   const onVideoModalHookSuccessAnalyticsEvent = useVideoModalAnalytics();
 
   const modalSize = useModalSize();
-
   const isFirstRender = useIsInitialRender();
-
   const backgroundColor = useBackgroundColor();
 
-  const { top, height, bottom } = usePosition();
-
-  const navType = useNavigationType();
-  const isBottomBarsNavigation = navType === MenuTypes.bottomTabBar;
-  const heightWithSafeArea = height ? height + bottom : null;
-
-  const dockedHeight =
-    isBottomBarsNavigation && height ? height : heightWithSafeArea;
-
-  const dockedBottom = isBottomBarsNavigation ? bottom : 0;
-
   const {
     closeVideoModal,
     setVideoModalItem,
@@ -83,8 +70,6 @@ const VideoModalComponent = () => {
     maximiseVideoModal,
   } = useNavigation();
 
-  const docked = mode === "MINIMIZED";
-
   const logTimestamp = useProfilerLogging();
 
   useInitialPlayerState(fullscreenVideoModal, maximiseVideoModal, item);
@@ -105,9 +90,10 @@ const VideoModalComponent = () => {
   }, [item?.id]);
 
   const isLandscape = modalSize.width > modalSize.height;
+  const isTablet = useIsTablet();
 
   React.useEffect(() => {
-    if (isLandscape && mode !== "FULLSCREEN" && mode !== "PIP") {
+    if (!isTablet && isLandscape && mode !== "FULLSCREEN" && mode !== "PIP") {
       fullscreenVideoModal();
     }
   }, [isLandscape]);
@@ -143,35 +129,32 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          top,
-          height: dockedHeight,
-          bottom: dockedBottom,
-          backgroundColor,
-        },
-      ]}
-    >
+    <PathnameContext.Provider value={pathname}>
       <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
-              modalHeight={docked ? height : modalSize.height}
+              modalHeight={modalSize.height}
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
       </ScreenContextProvider>
-    </View>
+    </PathnameContext.Provider>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -8,8 +8,6 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("react-native");
-
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -21,8 +21,17 @@ const useIsTablet = jest.fn();
 
 jest.mock("react-native");
 
+jest.mock("react-native-gesture-handler");
+
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));
@@ -38,6 +47,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: jest.fn(() => true),
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
   })),
@@ -45,6 +55,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
+    videoModalState: { visible: false },
   })),
 }));
 
@@ -94,7 +105,7 @@ describe("PlayerWrapper", () => {
     useIsTablet.mockReturnValue(false);
 
     const children = jest.fn(() => {});
-    const dimensions = { height: 50, width: props.style.width };
+    const dimensions = { height: undefined, width: props.style.width };
 
     const element = renderWithProviders(
       <PlayerWrapper