@applicaster/zapp-react-native-utils 12.0.3-rc.2 → 13.0.0-alpha.1338463240

package/appUtils/HooksManager/types.ts

@@ -0,0 +1,116 @@
+import { SubscriberObj } from "../../functionUtils";
+import { HOOKS_EVENTS } from "./constants";
+
+export interface HookConfiguration {}
+
+/* existing Hook Plugn props: sample */
+interface _HookModulePlugin {
+  Component:
+    | React.FC<HookPluginProps>
+    | React.Component<HookPluginProps, any>
+    | React.ReactNode;
+  ModalContainer?: React.FC<ModalProps> | React.Component<ModalProps, any>;
+  skipHook?: (payload: ZappRiver | ZappEntry) => boolean;
+  presentFullScreen: boolean;
+  showNavBar?: boolean;
+  isFlowBlocker: (() => boolean) | boolean; // narrow this
+  hasPlayerHook?: boolean;
+  name: string;
+  runInBackground?: (
+    item: HookPluginProps["payload"],
+    callback: hookCallback,
+    hookPlugin: HookScreenData,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => any;
+}
+
+//* Derived from usage */
+export interface HookModule {
+  ModalContainer?: React.ComponentType<any>;
+  Component: React.ComponentType<any>;
+  presentFullScreen: boolean;
+  run?: (
+    arg0: unknown,
+    callback: () => void,
+    configuration: HookConfiguration
+  ) => void; // not sure about optional parameter
+  hasPlayerHook?: boolean;
+  configuration?: HookConfiguration;
+  isFlowBlocker: () => boolean;
+  skipHook?: (payload?: ZappRiver | ZappEntry) => boolean;
+  runInBackground?: (
+    arg0: unknown,
+    callback: () => void,
+    hookPlugin: Hook,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+  name: string;
+  showNavBar?: boolean; // unsure
+}
+
+export type HookManagerArgs = {
+  rivers: Record<string, ZappRiver>;
+  plugins: ZappPlugin[];
+  targetScreen: ZappRiver;
+  startUpHooksData?: {
+    startUpHooks?: unknown[] | "in_process";
+    setStartUpHooks?: (arg0: string) => void;
+  };
+};
+
+export interface HookManager {
+  subscriber: SubscriberObj;
+  presentScreenHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  executeHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  handleHooks: (payload: unknown) => void;
+  runInBackground: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+}
+
+export type HookIniObj = {
+  hook: HookModule & {
+    module: HookModule;
+    general: unknown;
+    screen_id?: string;
+    identifier?: string;
+    weight?: number | string;
+  };
+  hooks: Hook<any>[];
+  manager: HookManager;
+};
+
+export interface Hook<T extends HookModule = HookModule> {
+  manager: HookManager;
+  lastHook: boolean;
+  state: number;
+  module: T;
+  screen_id: string;
+  identifier: string;
+  configuration: T["configuration"];
+  setStateAndNotify(
+    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    opts: {
+      error?: typeof Error;
+      route?: string;
+      hookPlugin: Hook<T>;
+      payload: unknown;
+    }
+  );
+  general?: {
+    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    allow_screen_plugin_presentation: boolean;
+    is_flow_blocker: boolean;
+  };
+}

package/appUtils/RiverFocusManager/index.js

@@ -26,7 +26,7 @@ export const riverFocusManager = (function () {
   /**
    * Retrieve screen focus data by id
    *
-   * @param {String}  screenFocusableGroupId Id that was used to save screen data.
+   * @param {{screenFocusableGroupId: string}} screenFocusableGroupId Unique Id of the screen from layout.json
    *
    */
   function screenFocusableData({ screenFocusableGroupId }) {
@@ -36,8 +36,9 @@ export const riverFocusManager = (function () {
   /**
    * Clear screen data for specific screen
    *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function clearScreenData({ screenId, isInsideContainer }) {
@@ -60,9 +61,13 @@ export const riverFocusManager = (function () {
   /**
    * Focus on selected items
    *
-   * @param {String}  screenFocusableGroupId Top group id that was saved as screenn
-   * @param {String} screenFocusedOnItem focusable item to focus
-   * @param {object} history navigator history object
+   * @param {{
+   * screenFocusableGroupId: string,
+   * screenFocusedOnItem: () => void,
+   * previousAction: QuickBrickNavigationActionType,
+   * isDeepLink: boolean }} object contains data for focus
+   * - `screenFocusedOnItem` focusable item to focus
+   * - `previousActionhistory` navigator history object
    *
    */
   function focusOnSelectedItem({
@@ -115,15 +120,15 @@ export const riverFocusManager = (function () {
 
   /**
    * Create unique key that will be used for save focused group data inside specific screen
-   *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function screenFocusableGroupId({ screenId, isInsideContainer }) {
-    return R.isNil(isInsideContainer)
-      ? `RiverFocusableGroup-${screenId}`
-      : `RiverFocusableGroup-${screenId}-isInsideContainer`;
+    return `RiverFocusableGroup-${screenId}${
+      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
+    }`;
   }
 
   return {

package/appUtils/accessibilityManager/index.ts

@@ -6,9 +6,6 @@ import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
-  private headingTimeout: ReturnType<typeof setTimeout> | null = null;
-  private WORDS_PER_MINUTE = 160;
-  private MINIMUM_PAUSE = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -23,7 +20,6 @@ export class AccessibilityManager {
 
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
-  private headingQueue: string[] = [];
 
   private constructor() {}
 
@@ -56,28 +52,6 @@ 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
@@ -111,22 +85,7 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    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.ttsManager && this.ttsManager.readText(textToRead);
 
     this.announcements$.next({
       message: textToRead,

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,82 +167,13 @@ export const focusManager = (function () {
   }
 
   /**
-   * 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.
-   */
-  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.
+   * returns the current focusable's group
+   * @private
+   * @returns {React.Component} the current focus
    */
-  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);
-      }
-    }
-  };
+  function getCurrentGroup() {
+    return getGroupById(R.path(["props", "groupId"], getCurrentFocus()));
+  }
 
   /**
    * Sets the current focus to the provided id. If there is an existing focus, it will
@@ -250,29 +181,34 @@ 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) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    options?: Partial<{ groupFocusedChanged: boolean }>
+  ) {
     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);
   }
 
@@ -315,7 +251,6 @@ export const focusManager = (function () {
       !focusableItem.isGroup &&
       isFocusEnabled(focusableItem)
     ) {
-      // TODO: Move this to setFocus method
       blur();
 
       logger.log({
@@ -326,7 +261,7 @@ export const focusManager = (function () {
       });
 
       currentFocusNode = focusCandidate;
-
+      focusableItem.willReceiveFocus(focusableItem, null);
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -513,10 +448,20 @@ export const focusManager = (function () {
         const nextRect = nextFocusable.component.getRect();
 
         if (nextRect && nextRect.width > 0) {
-          // TODO: Move this to setFocus method
+          nextFocusable.component.willReceiveFocus(
+            nextFocusable.component,
+            direction
+          );
+
           blur(direction);
 
-          setFocus(nextFocusable.id, direction);
+          const groupChanged =
+            nextFocusable.component.props.groupId !==
+            currentFocusNode?.component?.props?.groupId;
+
+          setFocus(nextFocusable.id, direction, {
+            groupFocusedChanged: groupChanged,
+          });
         }
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
@@ -536,6 +481,34 @@ 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

@@ -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,27 +231,4 @@ 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/{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__/keyCodes.test.js

@@ -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}

@@ -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/keysByPlatform.ts

@@ -0,0 +1,8 @@
+export {
+  lg_tv,
+  samsung_tv,
+  web,
+  tvos,
+  android_tv,
+  vizio,
+} from "./keys/keysByPlatform";