@applicaster/zapp-react-native-ui-components 12.0.0-rc.48 → 12.0.0-rc.49

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,13 +129,10 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <View
+    <AnimatedPlayerModalWrapper
       style={[
         styles.container,
         {
-          top,
-          height: dockedHeight,
-          bottom: dockedBottom,
           backgroundColor,
         },
       ]}
@@ -160,7 +143,7 @@ const VideoModalComponent = () => {
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
-              modalHeight={docked ? height : modalSize.height}
+              modalHeight={modalSize.height}
               modalWidth={modalSize.width}
               mode={mode}
             />
@@ -171,7 +154,7 @@ const VideoModalComponent = () => {
           )}
         </PathnameContext.Provider>
       </ScreenContextProvider>
-    </View>
+    </AnimatedPlayerModalWrapper>
   );
 };
 

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

@@ -19,6 +19,10 @@ const props = {
 
 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/device", () => ({
@@ -44,6 +48,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
     data: { screen: { id: "testId" } },
+    videoModalState: { visible: false },
   })),
 }));
 
@@ -93,7 +98,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__/PlayerWrapper.test.tsx.snap

@@ -23,9 +23,6 @@ exports[`PlayerWrapper renders inline 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
@@ -38,44 +35,45 @@ exports[`PlayerWrapper renders inline 1`] = `
     }
   >
     <View
-      style={
-        Array [
-          Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
-          },
-          Object {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": "100%",
-          },
-          Object {},
-          Object {},
-        ]
-      }
-      testID="test-player-container"
-    />
-    <View
-      configuration={
+      additionalData={
         Object {
-          "tablet_landscape_player_container_background_color": "red",
-          "tablet_landscape_sidebar_width": "35%",
+          "saveArea": true,
         }
       }
-      entry={
-        Object {
-          "id": "test",
-        }
-      }
-      isTabletLandscape={false}
+      animationType="moveUpComponent"
       style={
         Object {
-          "flex": 1,
-          "paddingTop": 20,
+          "flexDirection": "column",
         }
       }
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -95,22 +93,19 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
   <RNCSafeAreaView
     edges={
       Object {
-        "bottom": "additive",
+        "bottom": "off",
         "left": "off",
         "right": "off",
-        "top": "off",
+        "top": "additive",
       }
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 50,
+          "height": undefined,
           "width": 300,
         },
         Object {},
@@ -118,32 +113,45 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
     }
   >
     <View
-      style={
-        Array [
-          Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
-          },
-          Object {
-            "aspectRatio": undefined,
-            "height": 50,
-            "width": "100%",
-          },
-          Object {},
-          Object {},
-        ]
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-      testID="test-player-container"
-    />
-    <View
+      animationType="moveUpComponent"
       style={
         Object {
-          "flex": 1,
-          "paddingTop": 20,
+          "flexDirection": "column",
         }
       }
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": undefined,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -171,9 +179,6 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "row",
-        },
         Object {
           "backgroundColor": "red",
         },
@@ -186,44 +191,61 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
     }
   >
     <View
-      style={
-        Array [
-          Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
-          },
-          Object {
-            "aspectRatio": 1.7777777777777777,
-            "height": undefined,
-            "width": 195,
-          },
-          Object {},
-          Object {},
-        ]
-      }
-      testID="test-player-container"
-    />
-    <View
-      configuration={
-        Object {
-          "tablet_landscape_player_container_background_color": "red",
-          "tablet_landscape_sidebar_width": "35%",
-        }
-      }
-      entry={
+      additionalData={
         Object {
-          "id": "test",
+          "saveArea": true,
         }
       }
-      isTabletLandscape={true}
+      animationType="moveUpComponent"
       style={
         Object {
-          "flex": 1,
-          "paddingTop": 20,
+          "flexDirection": "row",
         }
       }
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7777777777777777,
+              "height": undefined,
+              "width": 195,
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        testID="test-player-container"
+      >
+        <View
+          additionalData={
+            Object {
+              "disableAnimatedComponent": false,
+              "resetAnimationValue": undefined,
+              "useLayoutMeasure": true,
+            }
+          }
+          animationType="moveUpComponent"
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -251,9 +273,6 @@ exports[`PlayerWrapper renders properly 1`] = `
     }
     style={
       Array [
-        Object {
-          "flexDirection": "column",
-        },
         Object {
           "backgroundColor": "transparent",
         },
@@ -266,32 +285,45 @@ exports[`PlayerWrapper renders properly 1`] = `
     }
   >
     <View
-      style={
-        Array [
-          Object {
-            "alignSelf": "center",
-            "position": "relative",
-            "zIndex": 200,
-          },
-          Object {
-            "aspectRatio": 1.7786666666666666,
-            "height": undefined,
-            "width": "100%",
-          },
-          Object {},
-          Object {},
-        ]
+      additionalData={
+        Object {
+          "saveArea": true,
+        }
       }
-      testID="test-player-container"
-    />
-    <View
+      animationType="moveUpComponent"
       style={
         Object {
-          "flex": 1,
-          "paddingTop": 20,
+          "flexDirection": "column",
         }
       }
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "position": "relative",
+              "zIndex": 200,
+            },
+            Object {
+              "aspectRatio": 1.7786666666666666,
+              "height": undefined,
+              "width": "100%",
+            },
+            Object {},
+            Object {},
+          ]
+        }
+        testID="test-player-container"
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+    </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/utils.ts

@@ -23,13 +23,13 @@ export const useConfiguration = () => {
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
   const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration.type].configuration_json;
+    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
   const config = R.mergeRight(playerPluginConfig, {
-    ...targetScreenConfiguration.general,
-    ...targetScreenConfiguration.styles,
+    ...targetScreenConfiguration?.general,
+    ...targetScreenConfiguration?.styles,
     ...pluginConfiguration,
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.48",
+  "version": "12.0.0-rc.49",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.48",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.48",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.48",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.48",
+    "@applicaster/applicaster-types": "12.0.0-rc.49",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.49",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.49",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.49",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/VideoModal/hooks/usePosition.ts

@@ -1,50 +0,0 @@
-import {
-  useNavigation,
-  useNavigationType,
-  MenuTypes,
-  useGetBottomTabBarHeight,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
-
-import { useConfiguration } from "../utils";
-
-type Option<T> = T | undefined;
-
-type Return = {
-  top: Option<number>;
-  height: Option<number>;
-  bottom: Option<number>;
-};
-
-export const usePosition = (): Return => {
-  const { minimised_height: minimisedHeight } = useConfiguration();
-  const insets = useSafeAreaInsets();
-  const bottomTabBarHeight = useGetBottomTabBarHeight();
-
-  const {
-    videoModalState: { mode },
-    currentRoute,
-    screenData,
-  } = useNavigation();
-
-  const docked = mode === "MINIMIZED";
-
-  const navType = useNavigationType();
-  const isBottomBarNavigation = navType === MenuTypes.bottomTabBar;
-
-  const minimisedMarginBottom =
-    isMenuVisible(currentRoute, screenData) && isBottomBarNavigation
-      ? bottomTabBarHeight
-      : insets.bottom;
-
-  if (docked) {
-    return {
-      top: undefined,
-      height: minimisedHeight,
-      bottom: minimisedMarginBottom,
-    };
-  }
-
-  return { top: 0, height: undefined, bottom: 0 };
-};