@applicaster/zapp-react-native-utils 13.0.0-alpha.2178537102 → 13.0.0-alpha.2251143535

package/appUtils/focusManager/index.ios.ts

@@ -1,8 +1,10 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
+import { findChild } from "./utils";
 
 const { FocusableManagerModule } = NativeModules;
 
@@ -52,10 +54,7 @@ export const focusManager = (function () {
     const node = focusableTree.findInTree(groupId);
 
     if (node?.children?.length > 0) {
-      const preferredFocus = R.compose(
-        R.find(R.pathEq(["component", "props", "preferredFocus"], true)),
-        R.prop("children")
-      )(node);
+      const preferredFocus = findChild(true, node);
 
       if (preferredFocus?.component?.isGroup) {
         return getPreferredFocusInGroup({ groupId: preferredFocus?.id });
@@ -382,6 +381,16 @@ export const focusManager = (function () {
     forceFocusOnItem({ focusableItem, callback });
   }
 
+  function getPreferredFocusChild(id) {
+    const node = focusableTree.findInTree(id);
+
+    if (node?.children?.length > 0) {
+      return findChild(true, node) || findChild(false, node);
+    }
+
+    return node;
+  }
+
   return {
     on,
     invokeHandler,
@@ -402,5 +411,6 @@ export const focusManager = (function () {
     getCurrentGroup,
     getGroupRootById,
     isGroupItemFocused,
+    getPreferredFocusChild,
   };
 })();

package/appUtils/focusManager/index.ts

@@ -11,8 +11,9 @@ 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 +168,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 +251,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 +316,7 @@ export const focusManager = (function () {
       !focusableItem.isGroup &&
       isFocusEnabled(focusableItem)
     ) {
+      // TODO: Move this to setFocus method
       blur();
 
       logger.log({
@@ -260,29 +326,22 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
       focusableItem && setFocus(focusCandidate.id, null);
 
-      currentFocusNode?.parent?.component?.onGroupFocusChanged(
-        currentFocusNode?.component
-      );
-
       return { success: true };
     }
 
     return { success: false };
   }
 
-  function treeLoaded(val, node) {
-    logger.log({
-      message: "treeLoaded",
-      data: {
-        val,
-        node,
-        currentFocusNode,
-      },
-    });
+  function treeLoaded(_val, _node) {}
+
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
   }
 
   /**
@@ -416,7 +475,7 @@ export const focusManager = (function () {
   function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (routes.length <= 1) {
+    if (currentFocusNode && routes.length <= 1) {
       // there is only one or zero routes
       return true;
     }
@@ -452,26 +511,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;
-
-          if (groupChanged) {
-            nextFocusable?.parent?.component?.onGroupFocusChanged(
-              nextFocusable.component
-            );
-          }
-
-          setFocus(nextFocusable.id, direction, {
-            groupFocusedChanged: groupChanged,
-          });
+          setFocus(nextFocusable.id, direction);
         }
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
@@ -491,40 +534,17 @@ 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);
-    }
-  });
+  function findPreferredFocusChild(id) {
+    const node = getCurrentFocusNode(id);
 
-  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);
-    }
-  });
+    const preferredFocus = findPriorityItem([node]);
 
-  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);
+    if (isNilOrEmpty(preferredFocus)) {
+      return undefined;
     }
-  });
 
-  on(FOCUS_EVENTS.GROUP_FOCUS_CHANGED, (focusable) => {
-    if (focusable.props.groupId) {
-      const parent = focusableTree.findInTree(focusable.props.groupId);
-      parent?.component?.onGroupFocusChanged(focusable);
-    }
-  });
+    return preferredFocus[0];
+  }
 
   /**
    * this is the list of the functions available externally
@@ -543,6 +563,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,
@@ -554,5 +575,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    findPreferredFocusChild,
   };
 })();

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

@@ -59,7 +59,7 @@ export class Tree {
   /**
    * Update node with provided data from newNode
    * @private
-   * @param {Object} node to update
+   * @param {Object} currentNode to update
    * @param {Object} newNode node to take data from
    */
   updateNode(currentNode, newNode) {
@@ -175,7 +175,6 @@ export class Tree {
    * @private
    * @param {Object} node to check
    * @returns True if node has defined groupID
-   * @returns False if node has NOT defined groupID
    */
   hasGroupID(node) {
     return node.component && node.component.props.groupId;
@@ -191,7 +190,7 @@ export class Tree {
       const findChildNode = this.findInTree(node.component.props.groupId);
 
       if (findChildNode) {
-        this.root.children.pop(findChildNode);
+        this.root.children.pop();
         node.children.push(findChildNode);
       }
     }
@@ -232,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/treeDataStructure/Utils/index.js

@@ -191,7 +191,6 @@ const toDistance = ({ target, direction, comparisonRect }) => {
  * Get target in shortest distance in specified direction
  * @private
  * @param {Object} direction of the navigation, which led to this focus change
- * @param {Object} excludedNode node which should be excluded from target group
  * @param {Array} targetNodes array of input target nodes
  * @param {Object} comparisonRect rectangle to compare sides in direction.
  * @returns {Object} target in direction.
@@ -300,8 +299,7 @@ export function findFocusableNode(direction, currentFocusNode) {
  * @public
  * @param {Object} direction of the navigation, which led to this focus change
  * @param {Object} component - object to check props.prioritiseFocusOn
- * @returns {Boolean} TRUE if object has priority in direction.
- * @returns {Boolean} FALSE if object has NO priority in direction.
+ * @returns {Boolean} TRUE if object has priority in direction. FALSE if object has NO priority in direction.
  */
 export function hasPriorityInDirection(direction, component) {
   const { prioritiseFocusOn = 0 } = component.props;

package/appUtils/focusManager/utils/__tests__/findChild.test.ts

@@ -0,0 +1,35 @@
+import { findChild } from "../index";
+
+describe("findChild", () => {
+  const makeNode = (children = []) => ({ children });
+
+  const child = (preferredFocus: boolean) => ({
+    component: { props: { preferredFocus } },
+  });
+
+  it("returns the child with preferredFocus=true", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(true, node)).toBe(node.children[1]);
+  });
+
+  it("returns the child with preferredFocus=false", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(false, node)).toBe(node.children[0]);
+  });
+
+  it("returns undefined if no child matches preferredFocus", () => {
+    const node = makeNode([child(false), child(false)]);
+    expect(findChild(true, node)).toBeUndefined();
+  });
+
+  it("returns undefined if node has no children", () => {
+    const node = makeNode();
+    expect(findChild(true, node)).toBeUndefined();
+    expect(findChild(false, node)).toBeUndefined();
+  });
+
+  it("returns undefined if children is not an array", () => {
+    const node = { children: null };
+    expect(findChild(true, node)).toBeUndefined();
+  });
+});

package/appUtils/focusManager/utils/enums.ts

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

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,8 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findChild = (preferredFocus: boolean, node) =>
+  (node?.children || []).find(
+    (child) => child?.component?.props?.preferredFocus === preferredFocus
+  );

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

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

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";
 
@@ -13,7 +13,7 @@ const globalTizen = {
 describe("keyCodes", () => {
   describe("keyCode", () => {
     const { keyCode } = require("..");
-    const { KEYS } = require("../keys.web");
+    const { KEYS } = require("../keys/keys.web");
 
     it("returns an object for a given key event", () => {
       expect(keyCode(KEYS.Enter)).toMatchSnapshot();
@@ -63,7 +63,7 @@ describe("keyCodes", () => {
     it("uses the proper keyCode for the environment", () => {
       Platform.OS = "samsung_tv";
       const { keyCode } = require("../");
-      const { KEYS } = require("../keys.web");
+      const { KEYS } = require("../keys/keys.web");
 
       expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
         "MediaPlay",
@@ -97,7 +97,7 @@ describe("keyCodes", () => {
     it("uses the proper keyCode for the environment", () => {
       Platform.OS = "lg_tv";
       const { keyCode } = require("..");
-      const { KEYS } = require("../keys.web");
+      const { KEYS } = require("../keys/keys.web");
       // Back is reserved on LG
       expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
     });

package/appUtils/keyCodes/{index.js → index.ts}

@@ -1,11 +1,11 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
 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
@@ -32,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

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/{keysByPlatform.js → 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 = {