@applicaster/zapp-react-native-ui-components 12.0.0-rc.74 → 12.0.0-rc.76

package/Components/MasterCell/utils/index.ts

@@ -9,6 +9,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
+import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -47,44 +48,26 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-const isColorOrEmpty = (value) =>
-  value === null ||
-  value === undefined ||
-  value === "" ||
-  value.startsWith("#") ||
-  value.startsWith("rgba") ||
-  value === "transparent";
-
 function resolveColorForProp(entry, style, colorProp) {
-  const colorValue = style[colorProp];
+  const colorFromProp = style[colorProp];
+  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  if (isColorOrEmpty(colorValue)) {
-    return style;
+  if (nestedEntryValue === undefined) {
+    logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 
-  const pathParts = colorValue.split(".");
-  let nestedEntryValue = entry;
-
-  for (const part of pathParts) {
-    if (nestedEntryValue === null || typeof nestedEntryValue !== "object") {
-      logWarning(colorValue, style, entry, nestedEntryValue);
-
-      return style;
-    }
+  const colorValue = getColorFromData({
+    data: entry,
+    valueFromLayout: colorFromProp,
+  });
 
-    nestedEntryValue = nestedEntryValue[part];
-  }
-
-  if (nestedEntryValue === undefined) {
-    logWarning(colorValue, style, entry, nestedEntryValue);
+  if (!colorValue) {
+    logWarning(colorProp, style, entry, colorValue);
 
     return style;
   }
 
-  // After successful traversal, set the value.
-  style[colorProp] = nestedEntryValue;
-
-  return style;
+  return { ...style, [colorProp]: colorValue };
 }
 
 export function resolveColor(entry, style) {

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -252,6 +252,11 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     showNavBar(true);
+
+    // Hack to close player screen on mobile only (tv handles that in InteractionManager)
+    if (!isTV()) {
+      navigator.goBack();
+    }
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });

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/index.tsx

@@ -3,6 +3,10 @@ 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";
@@ -69,7 +73,11 @@ export function Screen(_props: Props) {
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
   const insets = useSafeAreaInsets();
 
-  const { width: screenWidth } = useDimensions("screen", {
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
     fullDimensions: true,
   });
 
@@ -81,6 +89,13 @@ export function Screen(_props: Props) {
 
   const { title } = useNavbarState();
 
+  const isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
   const hasMenu =
     resolveNavigationPlugin({
       category: "menu",
@@ -143,6 +158,19 @@ export function Screen(_props: 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 null;
+  }
+
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>

package/Components/Transitioner/Transitioner.tsx

@@ -4,10 +4,7 @@ import * as R from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -277,36 +274,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/package.json

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