@applicaster/zapp-react-native-utils 13.0.0-alpha.6714678893 → 13.0.0-alpha.6944415045

package/appUtils/HooksManager/types.ts

@@ -4,6 +4,8 @@ import { HOOKS_EVENTS } from "./constants";
 export interface HookConfiguration {}
 
 /* existing Hook Plugn props: sample */
+
+/*
 interface _HookModulePlugin {
   Component:
     | React.FC<HookPluginProps>
@@ -23,6 +25,7 @@ interface _HookModulePlugin {
     presentUI: (payload?: HookPluginProps["payload"]) => void
   ) => any;
 }
+*/
 
 //* Derived from usage */
 export interface HookModule {

package/appUtils/accessibilityManager/index.ts

@@ -6,6 +6,9 @@ import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
+  private headingTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 160;
+  private MINIMUM_PAUSE = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -20,6 +23,7 @@ export class AccessibilityManager {
 
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
+  private headingQueue: string[] = [];
 
   private constructor() {}
 
@@ -52,6 +56,28 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
+  /** Calculates the reading time for a given text
+   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
+   * @param text - The text to calculate the reading time for
+   * @returns The reading time in milliseconds
+   */
+  private calculateReadingTime(text: string): number {
+    const words = text.trim().split(/\s+/).length;
+
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
+    );
+  }
+
+  /**
+   * Adds a heading to the queue, headings will be read before the next text
+   * Each heading will be read once and removed from the queue
+   */
+  public addHeading(heading: string) {
+    this.headingQueue.push(heading);
+  }
+
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
@@ -85,7 +111,22 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    this.ttsManager && this.ttsManager.readText(textToRead);
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
+
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
+
+      const pauseTime = this.calculateReadingTime(heading);
+
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
+    } else {
+      this.ttsManager?.readText(textToRead);
+    }
 
     this.announcements$.next({
       message: textToRead,

package/appUtils/contextKeysManager/contextResolver.ts

@@ -0,0 +1,73 @@
+import { createLogger } from "../../logger";
+import { ContextKeysManager } from "./index";
+import * as R from "ramda";
+
+const { log_error } = createLogger({
+  subsystem: "contextResolver",
+  category: "General",
+});
+
+interface IResolver {
+  resolve: (string) => Promise<string | number | object>;
+}
+
+export class EntryResolver implements IResolver {
+  entry: ZappEntry;
+
+  constructor(entry: ZappEntry) {
+    this.entry = entry;
+  }
+
+  async resolve(key: string) {
+    if (!key || key.length === 0) {
+      return this.entry;
+    }
+
+    return R.view(R.lensPath(key.split(".")), this.entry);
+  }
+}
+
+export class ContextResolver implements IResolver {
+  resolve = async (compositeKey: string) =>
+    ContextKeysManager.instance.getKey(compositeKey);
+}
+
+export const resolveObjectValues = async (
+  data: Record<string, any>,
+  resolvers: Record<string, IResolver> = null
+) => {
+  const entries = Object.entries(data);
+
+  const exResolvers = { ctx: new ContextResolver(), ...resolvers };
+
+  const resolvedEntries = await Promise.all(
+    entries.map(async ([key, value]) => {
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
+      if (typeof value !== "string") {
+        return [key, value];
+      }
+
+      const match = (value as string).match(regex);
+
+      if (match) {
+        const contextResolverName = match[1];
+        const compositeKey = match[2];
+
+        const resolver = exResolvers[contextResolverName] || exResolvers.ctx;
+        const resolvedValue = await resolver.resolve(compositeKey);
+
+        return [key, resolvedValue];
+      }
+
+      log_error("resolveObjectValues: invalid context string", {
+        key,
+        value,
+      });
+
+      return [key, null];
+    })
+  );
+
+  return Object.fromEntries(resolvedEntries);
+};

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`focusManager should be defined 1`] = `
-Object {
+{
   "blur": [Function],
   "disableFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
-    "root": Object {
-      "children": Array [],
+    "root": {
+      "children": [],
       "component": null,
       "id": "root",
       "lastFocusedItem": null,
@@ -39,12 +39,12 @@ Object {
 `;
 
 exports[`focusManagerIOS should be defined 1`] = `
-Object {
+{
   "focus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
-    "root": Object {
-      "children": Array [],
+    "root": {
+      "children": [],
       "component": null,
       "id": "root",
       "lastFocusedItem": null,

package/appUtils/focusManager/index.ts

@@ -11,8 +11,8 @@ import {
   haveSameParentBeforeRoot,
 } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
-import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
+import { ACTION } from "./utils/enums";
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -167,13 +167,82 @@ export const focusManager = (function () {
   }
 
   /**
-   * returns the current focusable's group
-   * @private
-   * @returns {React.Component} the current focus
+   * Computes the difference in parent groups between two nodes.
+   * It returns the IDs of parents that are present in the current node but not in the previous node,
+   * as well as the IDs of parents that are present in the previous node but not in the current node.
+   *
+   * @param {string} currentNodeID - The ID of the current node.
+   * @param {string} previousNodeID - The ID of the previous node.
+   * @returns {Object} An object containing the differences in parent IDs:
+   *   - {Array<string>} currentNodeParentsIDs: Parent IDs present in the current node but not in the previous node.
+   *   - {Array<string>} previousNodeParentsIDs: Parent IDs present in the previous node but not in the current node.
    */
-  function getCurrentGroup() {
-    return getGroupById(R.path(["props", "groupId"], getCurrentFocus()));
-  }
+  const getParentDiffs = (currentNodeID, previousNodeID) => {
+    const currentNodeParentsIDs =
+      focusableTree.getParentGroupIds(currentNodeID);
+
+    const previousNodeParentsIDs =
+      focusableTree.getParentGroupIds(previousNodeID);
+
+    return {
+      currentNodeParentsIDs: R.difference(
+        currentNodeParentsIDs,
+        previousNodeParentsIDs
+      ),
+      previousNodeParentsIDs: R.difference(
+        previousNodeParentsIDs,
+        currentNodeParentsIDs
+      ),
+    };
+  };
+
+  /**
+   * Updates the focus state of nodes identified by their IDs.
+   * For each ID, if `setFocus` is true, the node will receive focus;
+   * otherwise, it will lose focus.
+   *
+   * @param {Array<string>} ids - An array of node IDs to update.
+   * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
+   */
+  const updateNodeFocus = (ids, action) => {
+    if (!ids || ids.length === 0) {
+      return; // Nothing to do
+    }
+
+    const startNode = focusableTree.findInTree(ids[0]);
+
+    if (!startNode) {
+      return; // Start node not found
+    }
+
+    const endNodeId = ids[ids.length - 1]; // Get the ID of the end node
+
+    let currentNode = startNode;
+
+    // Function to apply the action (focus or blur)
+    const applyAction = (node) => {
+      if (node && node.component) {
+        if (action === "focus") {
+          node.component.setFocus();
+        } else if (action === "blur") {
+          node.component.setBlur();
+        }
+      }
+    };
+
+    // Apply action to the starting node
+    applyAction(currentNode);
+
+    // Traverse upwards
+    while (currentNode && currentNode.id !== endNodeId) {
+      currentNode = currentNode.parent;
+
+      if (currentNode) {
+        // check if current node exists, as parent might be root
+        applyAction(currentNode);
+      }
+    }
+  };
 
   /**
    * Sets the current focus to the provided id. If there is an existing focus, it will
@@ -181,34 +250,29 @@ export const focusManager = (function () {
    * @private
    * @param {String} id of the focusable to set as currentFocus
    * @param {Object} direction of the navigation, which led to this focus change
-   * @param {Object} options
-   * @param {Boolean} options.groupFocusedChanged tells wether the focus has moved
    * to another group or not. defaults to false
    */
-  function setFocus(
-    id: string,
-    direction?: FocusManager.Web.Direction,
-    options?: Partial<{ groupFocusedChanged: boolean }>
-  ) {
+  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
     if (focusDisabled) return false;
 
-    const { groupFocusedChanged = false } = options || {};
-
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
     // is called, so there will be no delays on tree search.
     // If currentFocusNode is null or undefined we still want it to findInTree
     if (currentFocusNode?.id !== id) {
+      const { currentNodeParentsIDs, previousNodeParentsIDs } = getParentDiffs(
+        id,
+        currentFocusNode?.id
+      );
+
+      // Set focus on current node parents and blur on previous node parents
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    const currentGroup = getCurrentGroup();
-
-    if (groupFocusedChanged && currentGroup) {
-      currentGroup.hasLostFocus(currentGroup, direction);
-    }
-
     focus(direction);
   }
 
@@ -251,6 +315,7 @@ export const focusManager = (function () {
       !focusableItem.isGroup &&
       isFocusEnabled(focusableItem)
     ) {
+      // TODO: Move this to setFocus method
       blur();
 
       logger.log({
@@ -261,7 +326,7 @@ export const focusManager = (function () {
       });
 
       currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
+
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -448,20 +513,10 @@ export const focusManager = (function () {
         const nextRect = nextFocusable.component.getRect();
 
         if (nextRect && nextRect.width > 0) {
-          nextFocusable.component.willReceiveFocus(
-            nextFocusable.component,
-            direction
-          );
-
+          // TODO: Move this to setFocus method
           blur(direction);
 
-          const groupChanged =
-            nextFocusable.component.props.groupId !==
-            currentFocusNode?.component?.props?.groupId;
-
-          setFocus(nextFocusable.id, direction, {
-            groupFocusedChanged: groupChanged,
-          });
+          setFocus(nextFocusable.id, direction);
         }
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
@@ -481,34 +536,6 @@ export const focusManager = (function () {
 
   const { on, invokeHandler, removeHandler } = eventHandler;
 
-  on(FOCUS_EVENTS.FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.onFocus(focusable.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.BLUR, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.onBlur(focusable.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.HAS_LOST_FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.hasLostFocus(parent.component, direction);
-    }
-  });
-
-  on(FOCUS_EVENTS.WILL_RECEIVE_FOCUS, (focusable, direction) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.willReceiveFocus(focusable.component, direction);
-    }
-  });
-
   /**
    * this is the list of the functions available externally
    * when importing the focus manager

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

@@ -231,4 +231,27 @@ export class Tree {
 
     return retVal;
   }
+
+  /**
+   * Gets the IDs of all parent groups for a given node id.
+   * @public
+   * @param {String} nodeId - The id of the node to get parent IDs for.
+   * @returns {Array} An array of parent group IDs or an empty array if the node is not found.
+   */
+  getParentGroupIds(nodeId) {
+    const parentIds = [];
+    let currentNode = this.findInTree(nodeId);
+
+    if (!currentNode) {
+      return []; // Node not found, return an empty array
+    }
+
+    // Traverse up the tree, collecting parent IDs
+    while (currentNode.parent && currentNode.parent.id !== "root") {
+      parentIds.push(currentNode.parent.id);
+      currentNode = currentNode.parent;
+    }
+
+    return parentIds;
+  }
 }

package/appUtils/focusManager/utils/enums.ts

@@ -0,0 +1,4 @@
+export enum ACTION {
+  FOCUS = "focus",
+  BLUR = "blur",
+}

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,8 +1,8 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith, pathOr } from "ramda";
+import { find, last, pathOr, startsWith } from "ramda";
 import {
-  QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
@@ -66,7 +66,8 @@ export const getContentNode = (focusableTree) => {
   const content = find(
     (child) =>
       startsWith(QUICK_BRICK_CONTENT, child.id) ||
-      startsWith("player", child.id),
+      startsWith("player", child.id) ||
+      startsWith("/hooks", child?.parent?.id), // For startup hooks case
     getActiveScreenChildren(focusableTree)
   );
 

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

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

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

@@ -1,4 +1,4 @@
-const { Platform } = require("react-native");
+import { Platform } from "react-native";
 
 Platform.OS = "web";
 

package/appUtils/keyCodes/keys/keysByPlatform.ts

@@ -77,6 +77,10 @@ const web = {
   Exit: { code: "Exit", keyCode: null },
   Escape: { code: "Escape", keyCode: 27 },
   EscapeDevice: { code: "Escape", keyCode: 27 },
+  // For Debugging
+  Z: { code: "KeyZ", keyCode: 90 }, // Hardware Backward Button
+  X: { code: "KeyX", keyCode: 88 }, // Hardware Enter Button
+  C: { code: "KeyC", keyCode: 67 }, // Hardware Forward Button
 };
 
 const android_tv = {

package/appUtils/keyInputHandler/KeyInputHandler.ts

@@ -0,0 +1,68 @@
+export type SeekKeyHandlerListener = {
+  onRewindPress: () => boolean;
+  onForwardPress: () => boolean;
+  onRewindPressOut: () => void;
+  onForwardPressOut: () => void;
+};
+
+export class KeyInputHandler {
+  private static instance: KeyInputHandler;
+
+  public static getInstance() {
+    if (!KeyInputHandler.instance) {
+      KeyInputHandler.instance = new KeyInputHandler();
+    }
+
+    return KeyInputHandler.instance;
+  }
+
+  constructor() {
+    this.listeners = [];
+  }
+
+  private listeners: SeekKeyHandlerListener[] = [];
+
+  addListener = (listener: SeekKeyHandlerListener) => {
+    this.listeners.splice(0, 0, listener);
+
+    return () => this.removeListener(listener);
+  };
+
+  removeListener = (listener: SeekKeyHandlerListener) => {
+    this.listeners = this.listeners.filter((l) => l !== listener);
+  };
+
+  onRewindPress = () => {
+    for (const element of this.listeners) {
+      if (element.onRewindPress()) {
+        break;
+      }
+    }
+  };
+
+  onForwardPress = () => {
+    for (const element of this.listeners) {
+      if (element.onForwardPress()) {
+        break;
+      }
+    }
+  };
+
+  // TODO: Event should be send to listeners who handled down event
+  onRewindPressOut = () => {
+    this.listeners.forEach((listener) => listener.onRewindPressOut());
+  };
+
+  onForwardPressOut = () => {
+    this.listeners.forEach((listener) => listener.onForwardPressOut());
+  };
+
+  getSeekMethods = () => {
+    return {
+      onForwardPress: this.onForwardPress,
+      onRewindPress: this.onRewindPress,
+      onForwardPressOut: this.onForwardPressOut,
+      onRewindPressOut: this.onRewindPressOut,
+    };
+  };
+}

package/appUtils/orientationHelper.ts

@@ -2,7 +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 { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 
 import {
   QUICK_BRICK_EVENTS,

package/appUtils/platform/const.ts

@@ -23,3 +23,17 @@ export const PLATFORMS = {
 export const PLATFORM_KEYS = {
   deviceClosedCaptioningEnabled: "device_closed_captioning_enabled",
 };
+
+export enum ZappPlatform {
+  Android = "android",
+  AndroidTV = "android_tv",
+  AmazonFireTV = "amazon",
+  iOS = "ios",
+  tvOS = "tvos",
+  Roku = "roku",
+  Tizen = "tizen",
+  Web = "web",
+  WebOS = "webos",
+  Vizio = "vizio",
+  Unknown = "unknown",
+}

package/appUtils/platform/platformUtils.ts

@@ -6,8 +6,10 @@ import {
   isSamsungPlatform,
 } from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
 
-import { PLATFORM_KEYS, PLATFORMS } from "./const";
+import { PLATFORM_KEYS, PLATFORMS, ZappPlatform } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
+import { getPlatform } from "../../reactUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 const { log_debug } = createLogger({
   category: "General",
@@ -15,6 +17,20 @@ const { log_debug } = createLogger({
   parent: utilsLogger,
 });
 
+export const getZappPlatform = (): ZappPlatform => {
+  const platform = appStore.get("appData")?.platform;
+
+  switch (platform) {
+    case "amazon_fire_tv":
+      return ZappPlatform.AmazonFireTV;
+    case ZappPlatform.Vizio:
+      return ZappPlatform.Vizio;
+    default:
+      // TODO: Use only ZappPlatform enum
+      return getPlatform() as ZappPlatform;
+  }
+};
+
 export const getUserAgent = () => window?.navigator?.userAgent;
 
 /** VIZIO UTILS */