@applicaster/zapp-react-native-utils 15.0.0-alpha.2004137882 → 15.0.0-alpha.2120060090

package/appUtils/focusManager/treeDataStructure/Tree/__tests__/Tree.test.js

@@ -373,3 +373,49 @@ describe("addNode", () => {
     checkParents(tree.root);
   });
 });
+
+describe("findInTree", () => {
+  function createNode(id, children) {
+    return {
+      id,
+      children,
+    };
+  }
+
+  it("returns a direct child match from root children", () => {
+    const tree = new Tree(treeLoaded);
+    const direct = createNode("direct-node");
+
+    tree.root.children = [direct];
+
+    expect(tree.findInTree("direct-node")).toEqual(direct);
+  });
+
+  it("returns a nested descendant match", () => {
+    const tree = new Tree(treeLoaded);
+    const nested = createNode("nested-node");
+    const intermediate = createNode("intermediate-node", [nested]);
+    const rootNode = createNode("root-node", [intermediate]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("nested-node")).toEqual(nested);
+  });
+
+  it("returns null when node id does not exist", () => {
+    const tree = new Tree(treeLoaded);
+    const leaf = createNode("leaf-node");
+    const rootNode = createNode("root-node", [leaf]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("missing-node")).toEqual(null);
+  });
+
+  it("returns null when tree has no children", () => {
+    const tree = new Tree(treeLoaded);
+    tree.root.children = null;
+
+    expect(tree.findInTree("any-node")).toEqual(null);
+  });
+});

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

@@ -205,31 +205,31 @@ export class Tree {
    * @returns founded node or null
    */
   findInTree(id) {
-    const retVal = null;
-
-    return this.findInArray(id, this.root.children, retVal);
+    return this.findInArray(id, this.root.children);
   }
 
-  findInArray(id, children, retVal) {
-    if (!retVal && children) {
-      retVal = children.find((obj) => obj.id === id);
+  findInArray(id, children) {
+    if (!children) {
+      return null;
+    }
 
-      if (!retVal) {
-        children.forEach((child) => {
-          if (child.children) {
-            retVal = this.findInArray(id, child.children, retVal);
+    const directMatch = children.find((obj) => obj.id === id);
 
-            if (retVal) {
-              return retVal;
-            }
-          }
-        });
-      } else {
-        return retVal;
+    if (directMatch) {
+      return directMatch;
+    }
+
+    for (const child of children) {
+      if (child.children) {
+        const nestedMatch = this.findInArray(id, child.children);
+
+        if (nestedMatch) {
+          return nestedMatch;
+        }
       }
     }
 
-    return retVal;
+    return null;
   }
 
   /**

package/appUtils/focusManagerAux/utils/index.ios.ts

@@ -0,0 +1,122 @@
+import { isNil, startsWith } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
+const isRoot = (node) => node?.id === "root";
+
+export const isPartOfTabsScreenContent = (
+  focusableTree,
+  screenPickerContentContainerId,
+  id
+) => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (node?.id === screenPickerContentContainerId) {
+    return true;
+  }
+
+  return isPartOfTabsScreenContent(
+    focusableTree,
+    screenPickerContentContainerId,
+    node.parent?.id
+  );
+};
+
+export const isPartOfMenu = (focusableTree, id): boolean => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isPartOfMenu(focusableTree, node.parent?.id);
+};
+
+export const isPartOfContent = (focusableTree, id) => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isPartOfContent(focusableTree, node.parent?.id);
+};
+
+export const isCurrentFocusOn = (id, node) => {
+  if (!node) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (node?.id === id) {
+    return true;
+  }
+
+  return isCurrentFocusOn(id, node.parent);
+};
+
+export const isChildOf = (focusableTree, childId, parentId) => {
+  if (isNil(childId) || isNil(parentId)) {
+    return false;
+  }
+
+  const childNode = focusableTree.findInTree(childId);
+
+  if (isNil(childNode)) {
+    return false;
+  }
+
+  if (childNode.parent?.id === parentId) {
+    return true;
+  }
+
+  return isChildOf(focusableTree, childNode.parent?.id, parentId);
+};

package/appUtils/focusManagerAux/utils/index.ts

@@ -13,7 +13,7 @@ import {
 
 import {
   getFocusableId,
-  SCREEN_PICKER_CONTAINER,
+  isTabsScreenContentContainerId,
 } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 // run check each 300 ms
@@ -24,8 +24,6 @@ const isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
 const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
 const isRoot = (node) => node?.id === "root";
 
-const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
-
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -136,7 +134,7 @@ export const isTabsScreenOnContentFocused = (node) => {
     return false;
   }
 
-  if (isScrenPicker(node)) {
+  if (isTabsScreenContentContainerId(node?.id)) {
     return true;
   }
 

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -1,7 +1,9 @@
 import { ReplaySubject, Subject } from "rxjs";
-import { filter, switchMap, take, map } from "rxjs/operators";
+import { filter, switchMap, take, withLatestFrom, map } from "rxjs/operators";
+
 import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import { isPartOfMenu, isPartOfContent } from "./index.ios";
 
 type FocusableID = string;
 type RegistrationEvent = {
@@ -104,9 +106,8 @@ const focusableNativeViewRegistration = ({ focusableView, focusableGroup }) => {
   );
 };
 
-export const firstFocusableViewRegistrationFactory = () =>
+export const firstFocusableViewInContentRegistrationFactory = () =>
   focusableViewRegistrationSubject$.pipe(
-    take(1), // we care about only first FocusableView registration
     switchMap((focusableView) =>
       // start waiting registration of its parent FocusableGroup
       focusableGroupRegistrationSubject$.pipe(
@@ -124,7 +125,11 @@ export const firstFocusableViewRegistrationFactory = () =>
         focusableView,
         focusableGroup,
       })
-    )
+    ),
+    filter(({ focusableView }) =>
+      isPartOfContent(focusManager.focusableTree, focusableView.id)
+    ),
+    take(1) // we care about only first FocusableView registration
   );
 
 // registration on RN level(into RN focusManager)
@@ -175,3 +180,55 @@ export const emitNativeRegistered = ({
     focusableNativeGroupRegistrationSubject$.next({ id, groupId });
   }
 };
+
+// /////
+
+const focusedSubject$ = new Subject<FocusableID>();
+
+const focused$ = focusedSubject$.asObservable();
+
+export const emitFocused = (id: FocusableID): void => {
+  focusedSubject$.next(id);
+};
+
+export const topMenuItemFocused$ = focused$.pipe(
+  filter((id) => id && isPartOfMenu(focusManager.focusableTree, id))
+);
+
+export const contentFocused$ = focused$.pipe(
+  filter((id) => {
+    const isContent = isPartOfContent(focusManager.focusableTree, id);
+
+    return id && isContent;
+  })
+);
+
+const createFocusableRegistry = () => {
+  const subject$ = new ReplaySubject<FocusableID | undefined>(1);
+
+  return {
+    observable$: subject$.asObservable(),
+    register: (id: FocusableID) => {
+      // save focusable_id on registration
+      subject$.next(id);
+    },
+    unregister: () => {
+      // reset focusable_id on unregistration
+      subject$.next(undefined);
+    },
+  };
+};
+
+/// HOME_TOP_MENU_ITEM
+export const HomeTopMenuItemRegistry = createFocusableRegistry();
+
+export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
+  withLatestFrom(HomeTopMenuItemRegistry.observable$),
+  filter(([id, homeId]) => id === homeId)
+);
+
+/// SCREEN_PICKER
+export const ScreenPickerContentContainerRegistry = createFocusableRegistry();
+
+/// SEARCH_INPUT
+export const SearchInputRegistry = createFocusableRegistry();

package/appUtils/playerManager/playerNative.ts

@@ -229,8 +229,9 @@ export class PlayerNative extends Player {
   };
 
   closeNativePlayer = () => {
-    // TODO: Delete does not work
+    // TODO: Delete, does not work (component is null)
     this.currentPlayerComponent()?.closeNativePlayer?.();
+    this.getPlayerModule()?.stopBackgroundPlayback?.();
   };
 
   togglePlayPause = () => {