@applicaster/zapp-react-native-ui-components 12.0.0-alpha.9233494544 → 12.0.0-alpha.9241554284

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

@@ -1,20 +1,34 @@
 import * as React from "react";
-import { last, pathOr } from "ramda";
-import { ScreenResolver } from "../../ScreenResolver";
+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 { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
 import {
-  useInitialFocus,
-  useRestoreFocus,
-} from "@applicaster/zapp-react-dom-ui-components/Components/River/hooks";
+  useNavbarState,
+  useScreenBackgroundColor,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
+import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
+import { ScreenResolver } from "../../ScreenResolver";
+import { useInitialFocus, useRestoreFocus } from "./hooks";
+import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -26,16 +40,6 @@ type Props = {
   Components: Components;
 };
 
-const isPlayer = (routeState): boolean => {
-  const pluginType = pathOr(
-    "unknown_plugin_type",
-    ["state", "screen", "plugin_type"],
-    routeState
-  );
-
-  return pluginType === "player";
-};
-
 const getActiveRiver = ({
   screenId,
   screenType,
@@ -46,6 +50,7 @@ const getActiveRiver = ({
   if (rivers[screenId]) {
     if (screenType === "hooks") {
       const navigations = routeState?.state?.entry?.payload?.navigations;
+
       if (navigations) {
         return routeState.state.entry.payload;
       }
@@ -69,6 +74,7 @@ const getNavigations = ({
     // river presents
     if (screenType === "hooks") {
       const navigations = routeState?.state?.entry?.payload?.navigations;
+
       if (navigations) {
         return navigations;
       }
@@ -81,19 +87,21 @@ const getNavigations = ({
   return fallbackNavigations;
 };
 
-export const Screen = (props: Props) => {
-  if (!props.route) {
-    throw new Error("Required props route is missing");
+export const Screen = ({ route, Components }: Props) => {
+  if (isNilOrEmpty(route)) {
+    throw Error("Required props: route is missing");
   }
 
   const navigator = useNavigation();
   const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
 
-  const pathAttributes = getPathAttributes({ pathname: props.route });
-  const routeState = navigator.getStackForPathname(props.route);
+  const pathAttributes = getPathAttributes({ pathname: route });
+  const routeState = navigator.getStackForPathname(route);
 
   const { screenType, screenId } = last(pathAttributes);
 
+  const backgroundColor = useScreenBackgroundColor(screenId);
+
   useInitialFocus();
   useRestoreFocus();
 
@@ -105,14 +113,6 @@ export const Screen = (props: Props) => {
     fallbackActiveRiver: navigator.activeRiver,
   });
 
-  console.log("debug_2", "Screen", {
-    screenType,
-    routeState,
-    route: props.route,
-    navigator,
-    activeRiver,
-  });
-
   const navigationProps = getNavigationProps({
     navigator: {
       // @ts-ignore
@@ -131,39 +131,35 @@ export const Screen = (props: Props) => {
     fallbackNavigations: navigator.activeRiver.navigations,
   });
 
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
+  const menuPlugin = findMenuPlugin(navigations, plugins);
 
-  const NavBar = (props.Components.NavBar ||
+  const NavBar = (Components.NavBar ||
     menuPlugin.module) as React.ComponentType<any>;
 
-  const isNavBarVisible = !isPlayer(routeState);
+  const isPlayer = isPlayerPlugin(routeState);
+
+  const { visible: isNavBarVisible } = useNavbarState();
 
   const screenData =
-    screenType === "hooks"
+    screenType === "hooks" || isPlayer
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 
   return (
-    <>
+    <View style={[styles.container, { backgroundColor }]}>
       <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
         <NavBar
-          groupId={props.route}
           isVisible={isNavBarVisible}
           menuPlugin={menuPlugin}
           navigationProps={navigationProps}
-          // Maybe activeRiver?
         />
       </NavBarContainer>
       <ScreenResolver
         screenType={screenType}
         screenId={screenId}
         screenData={screenData}
-        groupId={props.route}
+        groupId={route}
       />
-    </>
+    </View>
   );
 };

package/Components/Screen/__tests__/Screen.test.tsx

@@ -10,6 +10,8 @@ const mock_navBarVisibleFlag = true;
 
 const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
 
+const mockIsOrientationCompatible = jest.fn(() => true);
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
@@ -21,6 +23,7 @@ jest.mock("../../RouteManager", () => ({
 jest.mock(
   "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
   () => ({
+    isOrientationCompatible: mockIsOrientationCompatible,
     allowedOrientationsForScreen: jest.fn(),
     getOrientation: jest.fn(),
     getScreenOrientation: jest.fn(),
@@ -96,14 +99,6 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   }),
 }));
 
-const {
-  ORIENTATIONS,
-} = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
-
-const {
-  useCurrentScreenData,
-} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -155,45 +150,4 @@ describe("<Screen Component />", () => {
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
   });
-
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
 });

package/Components/Screen/index.tsx

@@ -1,16 +1,19 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import * as R from "ramda";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  isOrientationCompatible,
+  useGetScreenOrientation,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 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,
@@ -21,39 +24,18 @@ 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;
+import { isValidColor } from "./utils";
+
+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) {
-  const layers = R.compose(
-    R.map(R.trim),
-    R.split(","),
-    R.replace(")", ""),
-    R.replace("rgba(", "")
-  )(color);
-
-  const alpha = Number(layers?.[3]);
-
-  return alpha > 0;
-}
-
-function isValidColor(string) {
-  return string && string !== "transparent" && colorIsNotTransparent(string);
-}
-
 type Props = {
   pathname: unknown;
   screenData: unknown;
@@ -67,9 +49,12 @@ 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 } = useDimensions("screen", {
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
     fullDimensions: true,
   });
 
@@ -81,30 +66,19 @@ export function Screen(_props: Props) {
 
   const { title } = useNavbarState();
 
-  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 isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
+  const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
+    getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname]
+  );
 
   const NavBar = React.useMemo(
     () =>
@@ -126,33 +100,38 @@ 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 =
     currentScreenData || (screenData as any)?.targetScreen || screenData;
 
-  useScreenOrientationHandler({ screenData: targetScreenData });
+  const orientation = useGetScreenOrientation(targetScreenData);
+
+  // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
+  // This saves unnecessary re-renders and user will not see distorted aspect screen.
+  if (
+    !isOrientationCompatible({
+      orientation,
+      layoutData,
+    })
+  ) {
+    return <View style={style} />;
+  }
 
   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/Screen/orientationHandler.ts

@@ -1,14 +1,16 @@
 import React, { useLayoutEffect } from "react";
+
 import {
   allowedOrientationsForScreen,
   ORIENTATIONS,
   getOrientation,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 
@@ -79,14 +81,23 @@ export function useNewOrientationForScreenData({
         screenOrientation;
 }
 
-export function useScreenOrientationHandler({
-  screenData,
-}: OrientationHookArgs) {
+type Props = {
+  screenData: {
+    screen: {};
+  };
+  isActive: boolean;
+};
+
+export function useScreenOrientationHandler({ screenData, isActive }: Props) {
   const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
     ZappHookModalContext.ReactContext
   );
 
-  const newOrientation = useNewOrientationForScreenData({ screenData });
+  const prevIsActive = usePrevious(isActive);
+
+  const newOrientation = useNewOrientationForScreenData({
+    screenData: screenData.screen,
+  });
 
   useLayoutEffect(() => {
     // Null means screen does not have orientation preference, so we can skip rotate
@@ -100,12 +111,12 @@ export function useScreenOrientationHandler({
       return;
     }
 
-    if (newOrientation !== current) {
+    if (!prevIsActive && isActive && newOrientation !== current) {
       current = newOrientation;
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress]);
+  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/Screen/utils.ts

@@ -0,0 +1,16 @@
+import { map, split, replace, compose, trim } from "ramda";
+
+function colorIsNotTransparent(color) {
+  const layers = compose(
+    map(trim),
+    split(","),
+    replace(")", ""),
+    replace("rgba(", "")
+  )(color);
+
+  return Number(layers?.[3]) > 0;
+}
+
+export function isValidColor(string) {
+  return string && string !== "transparent" && colorIsNotTransparent(string);
+}

package/Components/ScreenResolver/index.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
-import { useDispatch } from "react-redux";
+import { path, prop } from "ramda";
 import {
   findPluginByType,
   findPluginByIdentifier,
@@ -15,7 +14,6 @@ import { componentsLogger } from "../../Helpers/logger";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
-import { setAppStateHasFinishedTransitioning } from "@applicaster/zapp-react-native-redux/appState";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -54,11 +52,8 @@ export function ScreenResolverComponent(props: Props) {
 
   const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const dispatch = useDispatch();
-
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-    dispatch(setAppStateHasFinishedTransitioning());
   }, [screenId]);
 
   const ScreenPlugin =
@@ -100,14 +95,14 @@ export function ScreenResolverComponent(props: Props) {
   }
 
   const ScreenComponent =
-    R.path(["module", "Component"], ScreenPlugin) ||
-    R.prop("module", ScreenPlugin) ||
-    R.prop("Component", ScreenPlugin) ||
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
     ScreenPlugin;
 
   const configuration =
-    R.prop("configuration", ScreenPlugin) ||
-    R.prop("__plugin_configuration", ScreenComponent);
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
 
   if (ScreenComponent) {
     return (

package/Components/Transitioner/Scene.tsx

@@ -1,12 +1,12 @@
 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 { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
+
 import { PathnameContext } from "../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Props = {
   children: any;
@@ -16,6 +16,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +40,46 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  useScreenOrientationHandler({
+    screenData,
+    isActive,
+  });
+
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
-  const { height, width } = useWindowDimensions();
 
-  if (overlayStyle && animating) {
-    // Safe frame takes too long to update,
-    // so we can not rely on it there, and use height and width instead.
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        style={[style, contentStyle, { height, width }]}
-      >
-        <PathnameContext.Provider value={pathname}>
-          {children}
-        </PathnameContext.Provider>
-        <Animated.View style={overlayStyle} />
-      </Animated.View>
-    );
-  }
+  const isAnimating = animating && overlayStyle;
+
+  const dimensions = isAnimating
+    ? {
+        height: "100%",
+        width: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
-      style={[style, contentStyle, frame]}
+      style={[style, contentStyle, dimensions]}
     >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
+      {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }