@applicaster/zapp-react-native-ui-components 12.0.0-rc.91 → 12.0.0-rc.93

package/Components/Layout/TV/ScreenContainer.tsx

@@ -13,8 +13,8 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import { useScreenConfiguration } from "../../River/useScreenConfiguration";
 import {
+  findMenuPlugin,
   getNavigationProps,
-  resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -118,13 +118,8 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   });
 
   const menuPlugin = React.useMemo(
-    () =>
-      resolveNavigationPlugin({
-        category: "menu",
-        navigations: activeRiver?.navigations,
-        plugins,
-      }) as QuickBrickPlugin,
-    []
+    () => findMenuPlugin(activeRiver?.navigations, plugins),
+    [activeRiver?.navigations]
   );
 
   const NavBarComponent = React.useMemo(

package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx

@@ -19,7 +19,7 @@ jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
   ...jest.requireActual<any>(
     "@applicaster/zapp-react-native-utils/navigationUtils"
   ),
-  resolveNavigationPlugin: () => ({}),
+  findMenuPlugin: () => ({}),
 }));
 
 jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -124,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,

package/Components/Screen/TV/index.web.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { last } from "ramda";
 import { View, StyleSheet } from "react-native";
 import {
+  findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
-  resolveNavigationPlugin,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -131,11 +131,7 @@ export const Screen = ({ route, Components }: Props) => {
     fallbackNavigations: navigator.activeRiver.navigations,
   });
 
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
+  const menuPlugin = findMenuPlugin(navigations, plugins);
 
   const NavBar = (Components.NavBar ||
     menuPlugin.module) as React.ComponentType<any>;

package/Components/Screen/index.tsx

@@ -11,10 +11,10 @@ import {
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
-  getNavigationPropsV2,
-  resolveNavigationPlugin,
+  shouldNavBarDisplayMenu,
+  getNavBarProps,
+  getScreenId,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
   useRoute,
@@ -25,20 +25,16 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
-const getScreenId = (
-  screenData: LegacyNavigationScreenData,
-  fallbackRiver: ZappRiver
-) => {
-  return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
-    : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+const screenStyles = {
+  flex: 1,
+  paddingTop: 0,
+  // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
+  // paddingLeft: insets.left, // Should be applied directly by UI plugin
+  // paddingRight: insets.right, // Should be applied directly by UI plugin
 };
 
 function colorIsNotTransparent(color) {
@@ -49,9 +45,7 @@ function colorIsNotTransparent(color) {
     R.replace("rgba(", "")
   )(color);
 
-  const alpha = Number(layers?.[3]);
-
-  return alpha > 0;
+  return Number(layers?.[3]) > 0;
 }
 
 function isValidColor(string) {
@@ -71,7 +65,6 @@ export function Screen(_props: Props) {
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
-  const insets = useSafeAreaInsets();
 
   const {
     width: screenWidth,
@@ -96,30 +89,12 @@ export function Screen(_props: Props) {
 
   const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
 
-  const hasMenu =
-    resolveNavigationPlugin({
-      category: "menu",
-      navigations: currentRiver.navigations,
-      plugins,
-    })?.identifier === "quick_brick_side_menu";
-
-  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
-    const props = getNavigationPropsV2({
-      currentRiver,
-      title,
-      category: "nav_bar",
-    });
-
-    if (props) {
-      return {
-        ...props,
-        id: pathname,
-        pathname: pathname,
-      };
-    }
-
-    return null;
-  }, [currentRiver, pathname]);
+  const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
+    getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname]
+  );
 
   const NavBar = React.useMemo(
     () =>
@@ -141,16 +116,12 @@ export function Screen(_props: Props) {
 
   const style = React.useMemo(
     () => ({
-      flex: 1,
+      ...screenStyles,
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,
-      paddingTop: 0,
-      // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
-      // paddingLeft: insets.left, // Should be applied directly by UI plugin
-      // paddingRight: insets.right, // Should be applied directly by UI plugin
     }),
-    [insets, screenWidth, theme.app_background_color, backgroundColor]
+    [theme.app_background_color, backgroundColor]
   );
 
   const targetScreenData =
@@ -172,15 +143,13 @@ export function Screen(_props: Props) {
   }
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <View style={style}>
-        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
-
-        <OfflineFallbackScreen screenData={targetScreenData}>
-          {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={screenData} />
-        </OfflineFallbackScreen>
-      </View>
-    </ScreenContextProvider>
+    <View style={style}>
+      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+      <OfflineFallbackScreen screenData={targetScreenData}>
+        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+        <RouteManager pathname={pathname} screenData={screenData} />
+      </OfflineFallbackScreen>
+    </View>
   );
 }

package/Components/Screen/navigationHandler.ts

@@ -5,6 +5,11 @@
  * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
  * the menu, will be hidden
  *
+ * - playable screens
+ * - qb_search_screen
+ * - screen hooks that specify showNavBar or presentFullScreen
+ * - screens or nested screens that have allow_screen_plugin_presentation set to true
+ *
  * @param {String} route current route of the screen
  * @param {Object} screenData payload associated with the currently presented screen
  * @returns {Boolean}

package/Components/Transitioner/Scene.tsx

@@ -1,13 +1,9 @@
 import React from "react";
-import {
-  Animated,
-  useWindowDimensions,
-  ViewProps,
-  ViewStyle,
-} from "react-native";
+import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Props = {
   children: any;
@@ -53,12 +49,15 @@ export function Scene({
   }, [screenData, isActive]);
 
   const frame = useSafeAreaFrame();
-  const { height, width } = useWindowDimensions();
 
-  // Safe frame takes too long to update,
-  // so we can not rely on it there, and use height and width instead.
   const isAnimating = animating && overlayStyle;
-  const dimensions = isAnimating ? { height, width } : frame;
+
+  const dimensions = isAnimating
+    ? {
+        height: "100%",
+        width: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
@@ -67,7 +66,9 @@ export function Scene({
     >
       <ScreenDataContext.Provider value={initialScreenData}>
         <PathnameContext.Provider value={pathname}>
-          {children}
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
         </PathnameContext.Provider>
       </ScreenDataContext.Provider>
       {isAnimating && <Animated.View style={overlayStyle} />}

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -22,7 +22,9 @@ exports[`<Scene /> renders correctly 1`] = `
   }
 >
   <ContextProvider>
-    <ContextProvider />
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
   </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
@@ -39,14 +41,16 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
         "paddingBottom": 49,
       },
       Object {
-        "height": 1334,
-        "width": 750,
+        "height": "100%",
+        "width": "100%",
       },
     ]
   }
 >
   <ContextProvider>
-    <ContextProvider />
+    <ContextProvider>
+      <ScreenContextProvider />
+    </ContextProvider>
   </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -58,6 +58,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     modalSnapPoints,
     lastSnap,
     setLastSnap,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
@@ -281,10 +282,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       if (
         preparedValue > 0 &&
         scrollPosition.current === 0 &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_player
+        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
       ) {
-        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll &&
-          setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
+        isMinimizedModal && setStartComponentsAnimation(true);
+        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
       }
     });
 
@@ -292,7 +294,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints]);
+  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -34,6 +34,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     lastSnap,
     setLastSnap,
     resetPlayerAnimationState,
+    setStartComponentsAnimation,
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
@@ -121,8 +122,10 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             preparedValue > 0 &&
             playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
           ) {
-            playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
+            if (playerAnimationState !== PlayerAnimationStateEnum.drag_player) {
+              isMinimizedModal && setStartComponentsAnimation(true);
               setPlayerAnimationState(PlayerAnimationStateEnum.drag_player);
+            }
 
             translateYOffset.setValue(
               isMaximazedModal

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
   addOrientationChangeListener,
@@ -9,11 +8,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 const { Logger } = getXray();
 
-const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
-
 const logger = new Logger(
   "hooks",
   "zapp-react-native-ui-components/Components/VideoModal"
@@ -24,20 +22,18 @@ type Size = {
   height: number | string;
 };
 
-const MODAL_SIZE_FOR_PORTRAIT: Size = {
-  width: WIDTH,
-  height: HEIGHT,
-};
-
 const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   width: "100%",
   height: "100%",
 };
 
 export const useModalSize = (): Size => {
-  const [modalSize, setModalSize] = React.useState<Size>(
-    MODAL_SIZE_FOR_PORTRAIT
-  );
+  const frame = useSafeAreaFrame();
+
+  const [modalSize, setModalSize] = React.useState<Size>({
+    width: frame.width,
+    height: frame.height,
+  });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
     setModalSize((oldSize) => {
@@ -90,7 +86,9 @@ export const useModalSize = (): Size => {
           toOrientation === ORIENTATIONS.landscapeSensor;
 
         setNewModalSize(
-          isLandscape ? MODAL_SIZE_FOR_LANDSCAPE : MODAL_SIZE_FOR_PORTRAIT,
+          isLandscape
+            ? MODAL_SIZE_FOR_LANDSCAPE
+            : { width: frame.width, height: frame.height },
           `useModalSize: set modal size ${
             isLandscape ? "landscape" : "portrait"
           } for orientation: ${to}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.91",
+  "version": "12.0.0-rc.93",
   "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.91",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.91",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.91",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.91",
+    "@applicaster/applicaster-types": "12.0.0-rc.93",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.93",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.93",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.93",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",