@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4201443043 → 12.0.0-alpha.4220424021

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}
@@ -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/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,13 +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;
@@ -46,6 +45,11 @@ export function Scene({
 }: Props) {
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 
+  useScreenOrientationHandler({
+    screenData,
+    isActive,
+  });
+
   React.useLayoutEffect(() => {
     if (isActive) {
       setInitialScreenData(screenData);
@@ -53,12 +57,14 @@ 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
+    ? {
+        width: "100%",
+        height: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
@@ -67,7 +73,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/Transitioner.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import { View } from "react-native";
-import * as R from "ramda";
+import { update, compose, tail, append, take, identity } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -49,7 +46,7 @@ function prepareScene(children) {
  */
 function scenesForBackTransition(props: SceneProps, { scenes }) {
   return scenes.length > 1
-    ? R.identity(scenes)
+    ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
 }
 
@@ -113,7 +110,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   pushTransitionStart() {
     this.setState(
       {
-        scenes: R.append(prepareScene(this.props.children), this.state.scenes),
+        scenes: append(prepareScene(this.props.children), this.state.scenes),
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
@@ -169,21 +166,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: compose(tail, append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }
@@ -226,7 +225,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
         this.shouldSkipAnimationForRoute(previousRoute) ||
         this.shouldSkipAnimationForRoute(currentRoute)
       ) {
-        return this.transitionWithoutAnimation();
+        // we are going back, in this case we need to have only one scene using resetState
+        const resetState = isGoingBack ? true : undefined;
+
+        return this.transitionWithoutAnimation(resetState);
       }
 
       switch (this.props.navigator.previousAction) {
@@ -269,7 +271,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   backTransitionEnd(stepsBack) {
     this.setState({
       animating: false,
-      scenes: R.take(this.state.scenes.length - stepsBack, this.state.scenes),
+      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
     });
   }
 
@@ -277,36 +279,25 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle, layoutData } = this.props;
+    const { contentStyle } = this.props;
     const screenData = this.props.children.props.screenData;
     const pathname = scenes[to.index].key;
 
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
-
-    // 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.
     return (
       <View style={styles.container}>
-        {scenes[to.index] &&
-          isOrientationCompatible({
-            orientation,
-            layoutData,
-          }) && (
-            <Scene
-              {...{ style: to.style }}
-              pathname={pathname}
-              isActive={pathname === this.props.navigator.currentRoute}
-              contentStyle={contentStyle}
-              key={scenes[to.index].key}
-              screenUniqueId={scenes[to.index].screenUniqueId}
-              screenData={screenData}
-            >
-              {scenes[to.index].children}
-            </Scene>
-          )}
+        {scenes[to.index] && (
+          <Scene
+            {...{ style: to?.style || {} }}
+            pathname={pathname}
+            isActive={pathname === this.props.navigator.currentRoute}
+            contentStyle={contentStyle}
+            key={scenes[to.index].key}
+            screenUniqueId={scenes[to.index].screenUniqueId}
+            screenData={screenData}
+          >
+            {scenes[to.index].children}
+          </Scene>
+        )}
       </View>
     );
   }

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

@@ -16,6 +16,13 @@ jest.mock("react-native-safe-area-context", () => ({
   })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler",
+  () => ({
+    useScreenOrientationHandler: jest.fn(),
+  })
+);
+
 const { Scene } = require("../Scene");
 
 const wrapper = shallow(

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/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -12,6 +12,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   <Scene
     isActive={true}
     screenUniqueId="mocked-uuid"
+    style={Object {}}
   >
     <View
       foo="bar"

package/Components/VideoLive/LiveImageManager.ts

@@ -525,6 +525,16 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     LiveImageManager.instance.onLiveImageError(this, error);
   };
 
+  onVideoError = (error: Error) => {
+    log_error(
+      `onVideoError: live-image, fail to play, switching back to image. error: ${
+        error?.message
+      }, ${playerInfo(this.player)}`
+    );
+
+    LiveImageManager.instance.onLiveImageError(this, error);
+  };
+
   onVideoEnd = (_event) => {
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(