@applicaster/zapp-react-native-ui-components 12.0.0-rc.14 → 12.0.0-rc.140

package/Components/VideoModal/VideoModal.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import * as R from "ramda";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, StatusBar } 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,38 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          top,
-          height: dockedHeight,
-          bottom: dockedBottom,
-          backgroundColor,
-        },
-      ]}
-    >
-      <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
+    <>
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+      <StatusBar hidden={false} />
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+
+      <PathnameContext.Provider value={pathname}>
+        <ScreenContextProvider pathname={pathname}>
           {itemIdHooksFinished === item?.id ? (
-            <HandlePlayable
-              item={item}
-              isModal={mode !== "PIP"}
-              modalHeight={docked ? height : modalSize.height}
-              modalWidth={modalSize.width}
-              mode={mode}
-            />
+            <AnimatedPlayerModalWrapper
+              style={[
+                styles.container,
+                {
+                  backgroundColor,
+                },
+              ]}
+            >
+              <HandlePlayable
+                item={item}
+                isModal={mode !== "PIP"}
+                modalHeight={modalSize.height}
+                modalWidth={modalSize.width}
+                mode={mode}
+              />
+            </AnimatedPlayerModalWrapper>
           ) : (
             <View style={styles.loaderContainer}>
               <Spinner />
             </View>
           )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
-    </View>
+        </ScreenContextProvider>
+      </PathnameContext.Provider>
+    </>
   );
 };
 

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

@@ -8,7 +8,12 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("react-native");
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useDimensions: jest.fn(() => ({
+    width: 20,
+    height: 30,
+  })),
+}));
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({

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

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

@@ -9,6 +9,7 @@ exports[`PlayerDetails renders properly 1`] = `
       "flex": 1,
       "marginTop": -8,
       "paddingTop": -8,
+      "width": 750,
     }
   }
 >
@@ -29,6 +30,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
       "flex": 1,
       "marginTop": -20,
       "paddingTop": 40,
+      "width": 750,
     }
   }
 >