@applicaster/zapp-react-native-utils 12.0.0-alpha.5035843303 → 12.0.0-alpha.5050333009

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/{index.js → index.ts}

@@ -9,6 +9,8 @@ export { KEYS, ARROW_KEYS } from "./keyCodes/keys";
 
 export { playerManager } from "./playerManager";
 
+export { AccessibilityManager } from "./accessibilityManager";
+
 export function deprecationMessage(fn, replacement) {
   if (__DEV__ && process.env.NODE_ENV !== "test") {
     console.warn("/**  DEPRECATION WARNING  **/");

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/{index.js → index.ts}

@@ -6,6 +6,8 @@ import * as R from "ramda";
 import { directionHelper } from "../directionHelper";
 import { KEYS, ARROW_KEYS } from "./keys";
 
+export { KEYS, ARROW_KEYS, keyEventMapper } from "./keys";
+
 /**
  * @typedef KeyCode
  * @property {Object} value of the Key

package/appUtils/keyCodes/keys/index.ts

@@ -0,0 +1,3 @@
+export * from "./keys";
+
+export { keyEventMapper } from "./keyEventMapper";

package/appUtils/keyCodes/{keys.android.js → keys/keyEventMapper.ts}

@@ -1,22 +1,3 @@
-export const KEYS = {
-  Enter: { code: "Enter", keyCode: 13 },
-  EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
-  Back: { code: "Back", keyCode: 8 },
-  Space: { code: "Space", keyCode: 32 },
-  m: { code: "m", keyCode: 77 },
-  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
-  ArrowUp: { code: "ArrowUp", keyCode: 38 },
-  ArrowRight: { code: "ArrowRight", keyCode: 39 },
-  ArrowDown: { code: "ArrowDown", keyCode: 40 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];
-
 export function keyEventMapper(keyCode) {
   switch (keyCode) {
     case 19: // ArrowUp

package/appUtils/keyCodes/keys/keys.android.ts

@@ -0,0 +1,18 @@
+export const KEYS = {
+  Enter: { code: "Enter", keyCode: 13 },
+  EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
+  Back: { code: "Back", keyCode: 8 },
+  Space: { code: "Space", keyCode: 32 },
+  m: { code: "m", keyCode: 77 },
+  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
+  ArrowUp: { code: "ArrowUp", keyCode: 38 },
+  ArrowRight: { code: "ArrowRight", keyCode: 39 },
+  ArrowDown: { code: "ArrowDown", keyCode: 40 },
+};
+
+export const ARROW_KEYS = [
+  KEYS.ArrowUp,
+  KEYS.ArrowLeft,
+  KEYS.ArrowDown,
+  KEYS.ArrowRight,
+];

package/appUtils/keyCodes/keys/keys.ios.ts

@@ -0,0 +1,25 @@
+export const KEYS = {
+  Enter: { code: "Enter", keyCode: 13 },
+  Space: { code: "Space", keyCode: 32 },
+  m: { code: "m", keyCode: 77 },
+  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
+  ArrowUp: { code: "ArrowUp", keyCode: 38 },
+  ArrowRight: { code: "ArrowRight", keyCode: 39 },
+  ArrowDown: { code: "ArrowDown", keyCode: 40 },
+  Back: { code: "Backspace", keyCode: 8 },
+  Play: { code: "PlayPause", keyCode: 179 },
+  Pause: { code: "Pause", keyCode: 179 },
+  Forward: { code: "Forward", keyCode: 176 },
+  Rewind: { code: "Rewind", keyCode: 177 },
+  VolumeUp: { code: "VolumeUp", keyCode: 175 },
+  VolumeDown: { code: "VolumeDown", keyCode: 174 },
+  ToggleMute: { code: "VolumeMute", keyCode: 173 },
+  Stop: { code: "Q", keyCode: 81 },
+};
+
+export const ARROW_KEYS = [
+  KEYS.ArrowUp,
+  KEYS.ArrowLeft,
+  KEYS.ArrowDown,
+  KEYS.ArrowRight,
+];

package/appUtils/keyCodes/keys/keys.ts

@@ -0,0 +1,15 @@
+// dummy file to make sure the folder structure is created
+export const KEYS: Record<string, { code: string; keyCode: number }> = {
+  ArrowLeft: { code: "ArrowLeft", keyCode: -1 },
+  ArrowUp: { code: "ArrowUp", keyCode: -1 },
+  ArrowRight: { code: "ArrowRight", keyCode: -1 },
+  ArrowDown: { code: "ArrowDown", keyCode: -1 },
+  Back: { code: "Back", keyCode: -1 },
+};
+
+export const ARROW_KEYS = [
+  KEYS.ArrowUp,
+  KEYS.ArrowLeft,
+  KEYS.ArrowDown,
+  KEYS.ArrowRight,
+];

package/appUtils/keyCodes/{keys.web.js → keys/keys.web.ts}

@@ -1,5 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
+
+import { isVizioPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -20,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/{keysByPlatform.js → keys/keysByPlatform.ts}

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

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;
 

package/appUtils/platform/const.ts

@@ -0,0 +1,25 @@
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};
+
+/**
+ * Keys used to store the platform / device state in the session storage
+ */
+export const PLATFORM_KEYS = {
+  deviceClosedCaptioningEnabled: "device_closed_captioning_enabled",
+};

package/appUtils/platform/index.ts

@@ -0,0 +1,3 @@
+export * from "./platformUtils";
+
+export * from "./const";