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

package/analyticsUtils/analyticsPlugins.ts

@@ -0,0 +1,25 @@
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+
+export const getVideojsAnalyticPluginsConfig = async (entry: ZappEntry) => {
+  let videojsConfiguration = {};
+
+  const plugins = appStore.get("plugins");
+  const analyticPlugins = R.filter(R.propEq("type", "analytics"), plugins);
+
+  const configurations = await Promise.all(
+    analyticPlugins.map(async (plugin) => {
+      const { configuration, module } = plugin;
+
+      return module?.getPlayerConfiguration?.(configuration, entry);
+    })
+  );
+
+  configurations.forEach((analyticConfig) => {
+    if (typeof analyticConfig === "object" && analyticConfig !== null) {
+      videojsConfiguration = { ...videojsConfiguration, ...analyticConfig };
+    }
+  });
+
+  return videojsConfiguration;
+};

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

@@ -3,7 +3,9 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
+  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
+  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -28,13 +30,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
-  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
-  "setFocusOnContent": [Function],
-  "setFocusOnMenu": [Function],
   "setInitialFocus": [Function],
+  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

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

@@ -14,8 +14,10 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("manages to land initial focus", () => {
+  it("enableAutomaticFocus should not block setting focus", () => {
     const mockSetFocus = jest.fn();
+    focusManager.setupInitialFocus("1", true);
+    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -29,13 +31,31 @@ describe("focusManager", () => {
       },
     });
 
-    const { success } = focusManager.setInitialFocus();
-
-    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
+  it("enableAutomaticFocus should block setting focus", () => {
+    const mockSetFocus = jest.fn();
+    focusManager.setupInitialFocus("1", true);
+    focusManager.disableAutomaticFocus();
+
+    focusManager.register({
+      id: "1",
+      component: {
+        setFocus: mockSetFocus,
+        willReceiveFocus: function () {},
+        isMounted: function () {
+          return true;
+        },
+        props: { groupId: "121" },
+      },
+    });
+
+    expect(mockSetFocus).toBeCalledTimes(0);
+    expect(mockSetFocus).not.toBeCalledWith(null);
+  });
+
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

package/appUtils/focusManager/__tests__/index.test.ts

@@ -18,6 +18,7 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
+      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -26,11 +27,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
+      "disableAutomaticFocus",
+      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
-      "setFocusOnMenu",
-      "setFocusOnContent",
-      "recoverFocus",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -1,24 +1,9 @@
 import * as R from "ramda";
-import {
-  isNilOrEmpty,
-  isNotNil,
-} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-
 import { Tree } from "./treeDataStructure/Tree";
-import {
-  findFocusableNode,
-  findPriorityItem,
-  isTransitionHappening,
-} from "./treeDataStructure/Utils";
+import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
-import {
-  waitForActiveScreen,
-  waitForContent,
-  getContentNode,
-  getNavbarNode,
-} from "./utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
 
@@ -59,9 +44,21 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
+  let initialFocusOnContent = null;
   let focusDisabled = false;
+  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
+  function disableAutomaticFocus() {
+    logger.log({ message: "disableAutomaticFocus" });
+    focusAutoEnabled = false;
+  }
+
+  function enableAutomaticFocus() {
+    logger.log({ message: "focusManager: enableAutomaticFocus" });
+    focusAutoEnabled = true;
+  }
+
   function enableFocus() {
     focusDisabled = false;
   }
@@ -96,7 +93,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(direction);
+      currentFocusable.blur(currentFocusable, direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -229,52 +226,32 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (isNilOrEmpty(preferredFocus)) {
-      return { success: false };
-    }
-
-    const focusCandidate = preferredFocus[0];
-    const focusableItem = focusCandidate.component;
-
-    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
-    const nextFocusedId = R.path(["props", "id"], focusableItem);
-
-    if (
-      isNotNil(currentFocusedId) &&
-      isNotNil(nextFocusedId) &&
-      currentFocusedId === nextFocusedId
-    ) {
-      // we are going to move focus to the same node(already focused) -> nothing to do
-      return { success: true };
-    }
-
-    if (focusableItem?.isGroup) {
-      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
-      return { success: false };
-    }
-
-    if (
-      focusableItem &&
-      !focusableItem.isGroup &&
-      isFocusEnabled(focusableItem)
-    ) {
-      blur();
-
-      logger.log({
-        message: "setInitialFocus – currentFocusNode",
-        data: {
-          focusableItem,
-        },
-      });
+    if (preferredFocus && preferredFocus.length > 0) {
+      const focusCandidate = preferredFocus[0];
+      const focusableItem = focusCandidate.component;
+
+      if (
+        focusableItem &&
+        !focusableItem.isGroup &&
+        isFocusEnabled(focusableItem)
+      ) {
+        if (initialFocusOnContent) {
+          blur();
+          initialFocusOnContent = false;
+        }
 
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
-      focusableItem && setFocus(focusCandidate.id, null);
+        logger.log({
+          message: "setInitialFocus – currentFocusNode",
+          data: {
+            focusableItem,
+          },
+        });
 
-      return { success: true };
+        currentFocusNode = focusCandidate;
+        focusableItem.willReceiveFocus(focusableItem, null);
+        focusableItem && setFocus(focusCandidate.id, null);
+      }
     }
-
-    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -284,8 +261,17 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
+        initialFocusOnContent,
       },
     });
+
+    if ((val && !currentFocusNode) || initialFocusOnContent) {
+      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
+
+      if (focusAutoEnabled) {
+        setInitialFocus(initialFocusOnContent ? node : undefined);
+      }
+    }
   }
 
   /**
@@ -416,79 +402,11 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  async function setFocusOnMenu(currentRoute: string) {
-    try {
-      await waitForActiveScreen(currentRoute, focusableTree);
-
-      const navbar = getNavbarNode(focusableTree);
-
-      const selectedMenuItemId = R.find(
-        (child) => child.component.props.selected,
-        navbar.children
-      )?.id;
-
-      if (selectedMenuItemId) {
-        // set focus on selected menu item
-        setFocus(selectedMenuItemId);
-
-        return;
-      }
-
-      const firstMenuItemId = R.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,
-        },
-      });
-    }
-  }
-
-  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
-    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);
-    }
-  }
-
-  function isTransitionInProgress() {
-    const routes = R.pathOr([], ["root", "children"], focusableTree);
-
-    if (routes.length <= 1) {
-      // there is only one or zero routes
-      return false;
-    }
-
-    return isTransitionHappening(currentFocusNode, R.last(routes));
-  }
-
-  function recoverFocus() {
-    if (isTransitionInProgress()) {
-      // We've failed to set focused node on the new screen => run focus recovery
-      setInitialFocus();
+  function setupInitialFocus(id: string, focusOnContent?: boolean) {
+    if (focusOnContent) {
+      initialFocusOnContent = focusOnContent;
+    } else {
+      setFocus(id);
     }
   }
 
@@ -498,11 +416,6 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (isTransitionInProgress()) {
-      // We are opening new screen. We need to ignore movement of focus.
-      return false;
-    }
-
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
@@ -531,6 +444,8 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
+    } else {
+      setInitialFocus();
     }
   }
 
@@ -590,6 +505,7 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
+    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -598,10 +514,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
+    disableAutomaticFocus,
+    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
-    setFocusOnMenu,
-    setFocusOnContent,
-    recoverFocus,
   };
 })();

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

@@ -1,6 +1,5 @@
-import { allPass, pathOr, startsWith, isNil } from "ramda";
+import * as R from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -144,47 +143,7 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
-
-const positiveOrZero = (value) => value > 0 || isZero(value);
-
-const excludeFromFocusSearching = pathOr(false, [
-  "component",
-  "props",
-  "excludeFromFocusSearching",
-]);
-
-const isNavBar = (target) => startsWith("navbar", target?.id);
-
-const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    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;
-};
+const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
 
 /**
  * Get target in shortest distance in specified direction
@@ -214,18 +173,52 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .filter((target) => !excludeFromFocusSearching(target))
-    .map((target) => ({
-      distance: toDistance({ target, direction, comparisonRect }),
-      target,
-    }))
-    .filter(({ distance }) => positiveOrZero(distance));
+    .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;
+      }
+
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
+      return {
+        distance:
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
+        target,
+      };
+    })
+    .filter((obj) => obj && obj.distance >= 0);
 
   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 match?.target;
+  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;
 }
 
 /**
@@ -316,26 +309,3 @@ 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 isTransitionHappening = (currentNode, nextNode) => {
-  const routeForCurrentNode = getNodeBeforeRoot(currentNode);
-  const routeForNextNode = getNodeBeforeRoot(nextNode);
-
-  return routeForCurrentNode?.id !== routeForNextNode?.id;
-};

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/arrayUtils/index.ts

@@ -95,8 +95,3 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
-
-/** Checks if a value is a non-empty array */
-export function isFilledArray(value: unknown): boolean {
-  return R.is(Array, value) && R.length(value) > 0;
-}

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,24 +7,12 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
-  it("value is a number", () => {
-    const value = 123.45;
-
-    expect(isLikeNumber(value)).toBe(true);
-  });
-
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
-  it("value is a string as number", () => {
-    const value = "123.45";
-
-    expect(isLikeNumber(value)).toBe(true);
-  });
-
   it("value is empty string", () => {
     const value = "";
 
@@ -66,10 +54,4 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
-
-  it("NaN is not a number", () => {
-    const value = NaN;
-
-    expect(isLikeNumber(value)).toBe(false);
-  });
 });

package/numberUtils/index.ts

@@ -50,14 +50,27 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: unknown): boolean => {
-  const possibleNumber = toNumber(value);
-
-  if (R.isNil(possibleNumber)) {
+export const isLikeNumber = (value: any): boolean => {
+  if (R.isEmpty(value)) {
     return false;
   }
 
-  return true;
+  if (R.is(Number, value)) {
+    return true;
+  }
+
+  if (R.is(String, value)) {
+    const onlyDigit = value
+      .split("")
+      .filter((char) =>
+        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(char)
+      )
+      .join("");
+
+    return value === onlyDigit;
+  }
+
+  return false;
 };
 
 export const isZero = (value: unknown): boolean =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4337072244",
+  "version": "12.0.0-alpha.4342066143",
   "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.4342066143",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",