@applicaster/zapp-react-native-utils 12.0.0-alpha.4337072244 → 12.0.0-alpha.4355141911

package/appUtils/focusManager/index.ts

@@ -8,7 +8,7 @@ import { Tree } from "./treeDataStructure/Tree";
 import {
   findFocusableNode,
   findPriorityItem,
-  isTransitionHappening,
+  haveSameParentBeforeRoot,
 } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
@@ -474,19 +474,19 @@ export const focusManager = (function () {
     }
   }
 
-  function isTransitionInProgress() {
+  function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
     if (routes.length <= 1) {
       // there is only one or zero routes
-      return false;
+      return true;
     }
 
-    return isTransitionHappening(currentFocusNode, R.last(routes));
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
   function recoverFocus() {
-    if (isTransitionInProgress()) {
+    if (!isCurrentFocusOnTheTopScreen()) {
       // We've failed to set focused node on the new screen => run focus recovery
       setInitialFocus();
     }
@@ -498,7 +498,7 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (isTransitionInProgress()) {
+    if (!isCurrentFocusOnTheTopScreen()) {
       // We are opening new screen. We need to ignore movement of focus.
       return false;
     }

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,6 +1,7 @@
 import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { QUICK_BRICK_NAVBAR } from "@applicaster/quick-brick-core/const";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -154,10 +155,10 @@ const excludeFromFocusSearching = pathOr(false, [
   "excludeFromFocusSearching",
 ]);
 
-const isNavBar = (target) => startsWith("navbar", target?.id);
+const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
 
 const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+  if (nodes.length > 1) {
     return nodes.filter((n) => !isNavBar(n?.target));
   }
 
@@ -333,9 +334,9 @@ export const getNodeBeforeRoot = (node) => {
   return getNodeBeforeRoot(node.parent);
 };
 
-export const isTransitionHappening = (currentNode, nextNode) => {
+export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
   const routeForCurrentNode = getNodeBeforeRoot(currentNode);
   const routeForNextNode = getNodeBeforeRoot(nextNode);
 
-  return routeForCurrentNode?.id !== routeForNextNode?.id;
+  return routeForCurrentNode?.id === routeForNextNode?.id;
 };

package/appUtils/focusManager/utils/index.ts

@@ -1,5 +1,9 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
 // run this check too often could lead to performance penalty on low-end devices
@@ -60,7 +64,9 @@ const getActiveScreenChildren = (focusableTree) => {
 
 export const getContentNode = (focusableTree) => {
   const content = find(
-    (child) => startsWith("content", child.id),
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
     getActiveScreenChildren(focusableTree)
   );
 
@@ -69,7 +75,7 @@ export const getContentNode = (focusableTree) => {
 
 export const getNavbarNode = (focusableTree) => {
   const navbar = find(
-    (child) => startsWith("navbar", child.id),
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
     getActiveScreenChildren(focusableTree)
   );
 

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,10 +35,14 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
     const newPlayerController = new ControllerType({
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4337072244",
+  "version": "12.0.0-alpha.4355141911",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4337072244",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4355141911",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -8,6 +8,7 @@ import { waitFor } from "@testing-library/react-native";
 const navigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
+  data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -30,7 +31,7 @@ jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
-const { useCellClick } = require("..");
+const { useCellClick } = require("../");
 
 const mockProps = {
   item: {},

package/reactHooks/cell-click/index.ts

@@ -83,7 +83,7 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
         if (isFunction(onCellTap)) {
           onCellTap?.(selectedItem, _index);
         } else {
-          if (currentRoute === pathname || pathname === "videoModal") {
+          if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;
 
             push(

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 const plugins = [];
 
@@ -100,13 +101,15 @@ const mainStackWrapper = ({
   pathname = homeStack.route,
 }) => (
   <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
-    >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -12,7 +12,11 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import {
+  LONG_KEY_PRESS_TIMEOUT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -31,6 +35,7 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
@@ -146,16 +151,8 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
-
-  /**
-   * compose `useRoute()` output data
-   */
-  const composeRouteData = (screenData: VariousScreenData) => ({
-    screenData,
-    pathname,
-  });
-
   const navigator = useNavigation();
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",
@@ -163,10 +160,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
+
   const modalScreenData = modalState.screen;
+
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -183,15 +181,6 @@ export const useRoute = (): {
       plugins
     );
 
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
-    } as NavigationScreenData,
-
-    plugins
-  );
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -200,63 +189,30 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
   }
 
   if (isVideoModalPathname(pathname)) {
-    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookModalPathname(pathname)) {
-    return composeRouteData(hookModalScreenData);
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookPathname(pathname)) {
-    /**
-     * HACK
-     *
-     * This condition relies on hacky approach to get the current hook screen data
-     * using navigator.screenData for some cases.
-     * This is used when hook is in sequence.
-     */
-
-    // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
-    if (!currentStack) {
-      return composeRouteData(navigator.screenData);
-    }
-
-    const isValidHookInCurrentRouteScreenData =
-      "hookPlugin" in currentRouteScreenData &&
-      !!currentRouteScreenData.hookPlugin?.module;
-
-    let screenData;
-
-    // case 2: stack has valid hook data
-    if (isValidHookInCurrentRouteScreenData) {
-      screenData = currentRouteScreenData;
-    }
-
-    const navigatorScreenData = navigator.screenData as NavigatorEntry;
-
-    // case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
-    if (
-      screenData.hookPlugin.identifier ===
-        navigatorScreenData?.hookPlugin?.identifier &&
-      !screenData.hookPlugin?.weight &&
-      navigatorScreenData?.hookPlugin?.weight
-    ) {
-      screenData = navigator.screenData;
-    }
-
-    return composeRouteData(screenData);
+    return { screenData: screenDataContext, pathname };
   }
 
-  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
-  if (!currentStack) {
-    return composeRouteData(navigator.screenData);
-  }
+  const screenData = screenDataContext;
 
-  return composeRouteData(currentRouteScreenData);
+  return { screenData, pathname };
 };
 
 type Callbacks = Partial<{
@@ -511,3 +467,15 @@ export const useUniqueRouteSuffix = (): Return => {
 
   return withUniqueRouteSuffix;
 };
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};

package/reactHooks/screen/useScreenContext.ts

@@ -5,7 +5,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
-import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Components/Layout/TV";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export function useScreenContextV2() {
   return useContext(ScreenContext);
@@ -45,7 +45,6 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
-
   const screenData = useContext(ScreenDataContext);
 
   const modalScreenData = navigator?.modalData;