@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3788876021 → 12.0.0-alpha.3823240084

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

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { last } from "ramda";
+import { View, StyleSheet } from "react-native";
+import {
+  findMenuPlugin,
+  getNavigationProps,
+  getPathAttributes,
+} 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";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  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>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  route: string;
+  Components: Components;
+};
+
+const getActiveRiver = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackActiveRiver,
+}) => {
+  if (rivers[screenId]) {
+    if (screenType === "hooks") {
+      const navigations = routeState?.state?.entry?.payload?.navigations;
+
+      if (navigations) {
+        return routeState.state.entry.payload;
+      }
+    }
+
+    return routeState?.state?.screen;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackActiveRiver;
+};
+
+const getNavigations = ({
+  screenId,
+  screenType,
+  routeState,
+  rivers,
+  fallbackNavigations,
+}) => {
+  if (rivers[screenId]) {
+    // river presents
+    if (screenType === "hooks") {
+      const navigations = routeState?.state?.entry?.payload?.navigations;
+
+      if (navigations) {
+        return navigations;
+      }
+    }
+
+    return routeState?.state?.screen?.navigations;
+  }
+
+  // screenId is not presented into rivers, use fallback instead
+  return fallbackNavigations;
+};
+
+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: route });
+  const routeState = navigator.getStackForPathname(route);
+
+  const { screenType, screenId } = last(pathAttributes);
+
+  const backgroundColor = useScreenBackgroundColor(screenId);
+
+  useInitialFocus();
+  useRestoreFocus();
+
+  const activeRiver = getActiveRiver({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackActiveRiver: navigator.activeRiver,
+  });
+
+  const navigationProps = getNavigationProps({
+    navigator: {
+      // @ts-ignore
+      activeRiver,
+      // @ts-ignore
+      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
+    },
+    category: "menu",
+  });
+
+  const navigations = getNavigations({
+    screenId,
+    screenType,
+    routeState,
+    rivers,
+    fallbackNavigations: navigator.activeRiver.navigations,
+  });
+
+  const menuPlugin = findMenuPlugin(navigations, plugins);
+
+  const NavBar = (Components.NavBar ||
+    menuPlugin.module) as React.ComponentType<any>;
+
+  const isPlayer = isPlayerPlugin(routeState);
+
+  const { visible: isNavBarVisible } = useNavbarState();
+
+  const screenData =
+    screenType === "hooks" || isPlayer
+      ? routeState?.state?.entry
+      : routeState?.state?.screen;
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
+        />
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        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(),

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

@@ -11,7 +11,9 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""
@@ -41,7 +43,9 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""

package/Components/Screen/index.tsx

@@ -3,11 +3,18 @@ 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 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  shouldNavBarDisplayMenu,
+  getNavBarProps,
+  getScreenId,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   useDimensions,
   useRoute,
@@ -18,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) {
@@ -42,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) {
@@ -52,11 +53,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -64,31 +65,35 @@ export function Screen({ setToggleMenu, setCloseMenu }: 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,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
+  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(
@@ -97,12 +102,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -113,16 +116,12 @@ export function Screen({ setToggleMenu, setCloseMenu }: 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 =
@@ -130,18 +129,27 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
 
   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}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
-
-        <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}
@@ -21,9 +26,7 @@ export function isMenuVisible(route, screenData) {
   if (screenData?.hookPlugin) {
     const hookPlugin = screenData?.hookPlugin?.module;
 
-    return (
-      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
-    );
+    return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
   if (

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");
 
@@ -32,12 +30,13 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
+  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData } = props;
+  const { screenType, screenId, screenData, groupId } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -53,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 =
@@ -81,6 +77,7 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
+        groupId={groupId}
       />
     );
   }
@@ -98,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,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;
@@ -16,6 +13,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +37,34 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  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;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
       style={[style, contentStyle, frame]}
     >
-      <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>
   );
 }