@applicaster/zapp-react-native-ui-components 15.0.0-rc.44 → 15.0.0-rc.46

package/Components/Cell/TvOSCellComponent.tsx

@@ -40,6 +40,7 @@ type Props = {
     component_type: string;
     styles?: {
       component_margin_top?: number;
+      component_padding_top?: number;
     };
   };
   selected: boolean;
@@ -205,19 +206,25 @@ class TvOSCell extends React.Component<Props, State> {
     ) {
       const { headerOffset } = getHeaderOffset();
 
-      const extraAnchorPointYOffset =
-        screenLayout?.extraAnchorPointYOffset || 0;
+      const extraAnchorPointYOffset = toNumberWithDefaultZero(
+        screenLayout?.extraAnchorPointYOffset
+      );
 
       const componentMarginTop = toNumberWithDefaultZero(
         component?.styles?.component_margin_top
       );
 
+      const componentPaddingTop = toNumberWithDefaultZero(
+        component?.styles?.component_padding_top
+      );
+
       const totalOffset =
         headerOffset +
-        (componentAnchorPointY || 0) +
+        toNumberWithDefaultZero(componentAnchorPointY) +
         extraAnchorPointYOffset -
-        (componentsMapOffset || 0) +
-        componentMarginTop;
+        toNumberWithDefaultZero(componentsMapOffset) +
+        componentMarginTop +
+        componentPaddingTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -135,17 +135,11 @@ export const BorderContainerView = (props: Props) => {
 
   const isImageOnlyCell = useMemo(
     () =>
-      !hasFocusableInside(entry) &&
-      !hasTextLabels &&
       state === "focused" &&
-      !isMeasurement?.measuringInProgress,
-    [
-      hasFocusableInside,
-      entry,
-      hasTextLabels,
-      state,
-      isMeasurement?.measuringInProgress,
-    ]
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
   );
 
   useEffect(() => {

package/Components/Screen/navigationHandler.ts

@@ -1,35 +1,19 @@
 import { resolveNavigationPlugin } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
-/**
- * This function helps to decide wether the menu should be presented on the screen
- * based on route and / or screen Data
- *
- * 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}
- */
-export function isMenuVisible(route, screenData, plugins) {
-  const plugin = resolveNavigationPlugin({
+export const BOTTOM_TABS_PLUGIN_ID = "quick-brick-bottom-tabs";
+
+export const SIDE_MENU_PLUGIN_ID = "quick_brick_side_menu";
+
+export function getMenuPlugin(screenData, plugins) {
+  return resolveNavigationPlugin({
     category: "menu",
     navigations:
       screenData?.navigations || screenData?.targetScreen?.navigations,
     plugins,
   });
+}
 
-  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
-
-  if (!isBottomTabsPlugin) {
-    return false;
-  }
-
+function shouldShowNavigation(route, screenData) {
   if (route.includes("playable")) {
     return false;
   }
@@ -56,3 +40,44 @@ export function isMenuVisible(route, screenData, plugins) {
 
   return true;
 }
+
+/**
+ * This function helps to decide whether the menu should be presented on the screen
+ * based on route and / or screen Data
+ *
+ * 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}
+ */
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+  const isSideMenuPlugin = plugin?.identifier === SIDE_MENU_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin && !isSideMenuPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}
+
+export function isBottomTabVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -5,7 +5,7 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/n
 
 import { useConfiguration } from "../utils";
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
-import { isMenuVisible } from "../../Screen/navigationHandler";
+import { isBottomTabVisible } from "../../Screen/navigationHandler";
 
 import {
   useSafeAreaFrame,
@@ -70,7 +70,11 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
 
   const plugins = usePlugins();
 
-  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+  const bottomTabsVisible = isBottomTabVisible(
+    currentRoute,
+    screenData,
+    plugins
+  );
 
   const frame = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
@@ -115,7 +119,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   React.useEffect(() => {
     const collapsedHeight =
       minimisedHeight +
-      (menuVisible ? bottomTabBarHeight : 0) +
+      (bottomTabsVisible ? bottomTabBarHeight : 0) +
       (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
       PROGRESS_BAR_HEIGHT;
 
@@ -136,7 +140,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
       setHeightAboveMinimised(heightAboveMinimised);
       offset.current = heightAboveMinimised;
     }
-  }, [frame.height, insets.bottom, menuVisible, minimisedHeight]);
+  }, [frame.height, insets.bottom, bottomTabsVisible, minimisedHeight]);
 
   return (
     <ReactContext.Provider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.44",
+  "version": "15.0.0-rc.46",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.44",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.44",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.44",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.44",
+    "@applicaster/applicaster-types": "15.0.0-rc.46",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.46",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.46",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.46",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"