@applicaster/zapp-react-native-utils 12.0.0-rc.7 → 12.0.0-rc.70

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

@@ -1,5 +1,7 @@
-import * as R from "ramda";
+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 {
@@ -143,7 +145,47 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
+const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
+
+const positiveOrZero = (value) => value > 0 || isZero(value);
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1) {
+    return nodes.filter((n) => !isNavBar(n?.target));
+  }
+
+  return nodes;
+};
+
+const toDistance = ({ target, direction, comparisonRect }) => {
+  const componentRect = target.component?.getRect();
+
+  const orientationDistance = measureDistance(
+    direction,
+    comparisonRect,
+    componentRect
+  );
+
+  if (orientationDistance === -1) {
+    // ignores offscreen targets when moving up/down
+    return null;
+  }
+
+  const euclidDistance = measureEuclidianDistanceToCenter(
+    comparisonRect,
+    componentRect
+  );
+
+  return orientationDistance > 0 ? euclidDistance : orientationDistance;
+};
 
 /**
  * Get target in shortest distance in specified direction
@@ -173,43 +215,18 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .map((target) => {
-      const componentRect = target.component?.getRect();
-
-      const distance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      if (distance === -1) {
-        // ignores offscreen targets when moving up/down
-        return null;
-      }
-
-      return {
-        distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
-        target,
-      };
-    })
-    .filter((obj) => obj && obj.distance >= 0);
+    .filter((target) => !excludeFromFocusSearching(target))
+    .map((target) => ({
+      distance: toDistance({ target, direction, comparisonRect }),
+      target,
+    }))
+    .filter(({ distance }) => positiveOrZero(distance));
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  return distances && distances.length > 0 ? match.target : null;
-}
-
-function ignoreMenuIfMultipleTargets(nodes) {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => n?.target?.id !== "navbar");
-  }
-
-  return nodes;
+  return match?.target;
 }
 
 /**
@@ -300,3 +317,26 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
+
+export const getNodeBeforeRoot = (node) => {
+  if (isNil(node)) {
+    return undefined;
+  }
+
+  if (isNil(node.parent)) {
+    return undefined;
+  }
+
+  if (node.parent.id === "root") {
+    return node;
+  }
+
+  return getNodeBeforeRoot(node.parent);
+};
+
+export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
+  const routeForCurrentNode = getNodeBeforeRoot(currentNode);
+  const routeForNextNode = getNodeBeforeRoot(nextNode);
+
+  return routeForCurrentNode?.id === routeForNextNode?.id;
+};

package/appUtils/focusManager/utils/index.ts

@@ -0,0 +1,100 @@
+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
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/appUtils/focusManagerAux/index.ts

@@ -0,0 +1,76 @@
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { find, path } from "ramda";
+
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getNavbarNode,
+} from "./utils";
+
+import { coreLogger } from "../../logger";
+
+const logger = coreLogger.addSubsystem("focusManagerAux");
+
+export async function setFocusOnMenu(currentRoute: string) {
+  const { setFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+
+    const navbar = getNavbarNode(focusableTree);
+
+    const selectedMenuItemId = find(
+      (child) => child.component.props.selected,
+      navbar.children
+    )?.id;
+
+    if (selectedMenuItemId) {
+      // set focus on selected menu item
+      setFocus(selectedMenuItemId);
+
+      return;
+    }
+
+    const firstMenuItemId = path(["children", 0, "id"], navbar);
+
+    if (firstMenuItemId) {
+      // set focus on first menu item
+      setFocus(firstMenuItemId);
+    }
+  } catch (error) {
+    logger.log({
+      message: "setFocusOnMenu – failed to put focus on top-menu",
+      data: {
+        currentRoute,
+        error,
+      },
+    });
+  }
+}
+
+export async function setFocusOnContent(currentRoute: string) {
+  // we need to put focus on content here
+  // For doing it we have to wait registration of first focusable node into focusableTree
+  // we wait until content node starts having children
+
+  const { setInitialFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+    await waitForContent(focusableTree);
+
+    const content = getContentNode(focusableTree);
+
+    const { success } = setInitialFocus(content);
+
+    if (!success) {
+      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
+      throw Error(
+        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
+      );
+    }
+  } catch (error) {
+    setFocusOnContent(currentRoute);
+  }
+}

package/appUtils/focusManagerAux/utils/index.ts

@@ -0,0 +1,100 @@
+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
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/appUtils/keyCodes/__tests__/__snapshots__/keyCodes.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`keyCode returns an object for a given key event 1`] = `
+exports[`keyCodes keyCode returns an object for a given key event 1`] = `
 Object {
   "direction": [Function],
   "matches": [Function],

package/appUtils/keyCodes/__tests__/keyCodes.test.js

@@ -1,3 +1,7 @@
+const { Platform } = require("react-native");
+
+Platform.OS = "web";
+
 import { directionHelper } from "../../directionHelper";
 
 const globalTizen = {
@@ -6,105 +10,96 @@ const globalTizen = {
   },
 };
 
-jest.mock("react-native", () => {
-  return { Platform: { OS: "web" } };
-});
-
-describe("keyCode", () => {
-  const { keyCode } = require("../index");
-  const { KEYS } = require("../keys.web");
-
-  it("returns an object for a given key event", () => {
-    expect(keyCode(KEYS.Enter)).toMatchSnapshot();
-  });
-
-  it("has a matcher method for a single key", () => {
-    expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
-    expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
-    expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
-  });
-
-  it("has matcher for multiple keys", () => {
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
-    ).toBeTruthy();
+describe("keyCodes", () => {
+  describe("keyCode", () => {
+    const { keyCode } = require("..");
+    const { KEYS } = require("../keys.web");
 
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
-    ).toBeFalsy();
-  });
+    it("returns an object for a given key event", () => {
+      expect(keyCode(KEYS.Enter)).toMatchSnapshot();
+    });
 
-  it("returns the direction if it matches an arrow key", () => {
-    expect(keyCode(KEYS.Enter).direction()).toBe(null);
+    it("has a matcher method for a single key", () => {
+      expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
+      expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
+      expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
+    });
 
-    expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
-      directionHelper(KEYS.ArrowDown)
-    );
-  });
+    it("has matcher for multiple keys", () => {
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
+      ).toBeTruthy();
 
-  describe("in web env", () => {
-    it("uses the proper keyCode for the environment", () => {
-      expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
+      ).toBeFalsy();
     });
-  });
-});
 
-describe("in Tizen Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "samsung_tv" } };
-  });
+    it("returns the direction if it matches an arrow key", () => {
+      expect(keyCode(KEYS.Enter).direction()).toBe(null);
 
-  beforeEach(() => {
-    global.tizen = globalTizen;
-    jest.resetModules();
-  });
+      expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
+        directionHelper(KEYS.ArrowDown)
+      );
+    });
 
-  afterEach(() => {
-    global.tizen = undefined;
+    describe("in web env", () => {
+      it("uses the proper keyCode for the environment", () => {
+        expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      });
+    });
   });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
+  describe("in Tizen Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+      global.tizen = globalTizen;
+    });
 
-    expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
-      "Back",
-      "MediaPlay",
-      "MediaPlayPause",
-      "MediaPause",
-      "MediaFastForward",
-      "MediaRewind",
-      "MediaStop",
-      "Exit",
-      "0",
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-    ]);
-
-    expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
-  });
-});
+    afterEach(() => {
+      global.tizen = undefined;
+    });
 
-describe("in WebOS Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "lg_tv" } };
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "samsung_tv";
+      const { keyCode } = require("../");
+      const { KEYS } = require("../keys.web");
+
+      expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
+        "MediaPlay",
+        "MediaPlayPause",
+        "MediaPause",
+        "MediaFastForward",
+        "MediaRewind",
+        "MediaStop",
+        "Exit",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+      ]);
+
+      expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
+    });
   });
 
-  beforeEach(() => {
-    jest.resetModules();
-  });
+  describe("in WebOS Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+    });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
-    // Back is reserved on LG
-    expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "lg_tv";
+      const { keyCode } = require("..");
+      const { KEYS } = require("../keys.web");
+      // Back is reserved on LG
+      expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    });
   });
 });

package/appUtils/keyCodes/keys.web.js

@@ -1,5 +1,6 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
+
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 

package/appUtils/orientationHelper.ts

@@ -2,6 +2,7 @@
 import * as ReactNative from "react-native";
 import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   QUICK_BRICK_EVENTS,
@@ -9,7 +10,6 @@ import {
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { utilsLogger } from "../logger";
-import { useIsTablet } from "../reactHooks/device/useIsTablet";
 
 const { DeviceEventEmitter, NativeModules, NativeEventEmitter } = ReactNative;