@applicaster/zapp-react-native-utils 13.0.0-alpha.7120331332 → 13.0.0-alpha.7138263059

package/appUtils/contextKeysManager/contextResolver.ts

@@ -0,0 +1,77 @@
+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]) => {
+      if (typeof value !== "string") {
+        return [key, value];
+      }
+
+      if (!value.startsWith("@")) {
+        return [key, value];
+      }
+
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
+      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/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

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

@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],

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,8 +326,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -281,6 +345,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -412,7 +484,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;
     }
@@ -448,20 +520,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 +543,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
@@ -526,6 +560,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,

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

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,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/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/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 */
@@ -61,13 +77,22 @@ export class ClosedCaptioningManager {
 
   private constructor() {
     this.initialize();
+
+    window["vizioDebug"] = {
+      setCCEnabled: (isCCEnabled: boolean) => {
+        this.ccState$.next(isCCEnabled);
+      },
+    };
   }
 
   static getInstance(): ClosedCaptioningManager {
     if (!ClosedCaptioningManager.ccManagerInstance) {
+      log_debug("ClosedCaptioningManager: Creating new instance");
       ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
     }
 
+    log_debug("ClosedCaptioningManager: Returning existing instance");
+
     return ClosedCaptioningManager.ccManagerInstance;
   }
 
@@ -76,23 +101,41 @@ export class ClosedCaptioningManager {
       PLATFORM_KEYS.deviceClosedCaptioningEnabled
     );
 
-    log_debug("Initializing closed captioning manager", { existingState });
-
     if (existingState !== null) {
+      log_debug(
+        `ClosedCaptioningManager: Setting initial state to ${existingState}`
+      );
+
       this.ccState$.next(existingState === "true" || existingState === true);
+    } else {
+      log_debug("ClosedCaptioningManager: No existing state found");
     }
 
     if (hasVizioAPIs()) {
+      log_debug("ClosedCaptioningManager: Setting closed captioning handler");
+
       window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
-        log_debug("CC state changed", { isCCEnabled });
+        log_debug(
+          "ClosedCaptioningManager: There was a change in the CC state",
+          { isCCEnabled }
+        );
 
         sessionStorage.setItem(
           PLATFORM_KEYS.deviceClosedCaptioningEnabled,
           isCCEnabled
         );
 
+        log_debug(
+          "ClosedCaptioningManager: Saved CC state to session storage",
+          { isCCEnabled }
+        );
+
         this.ccState$.next(isCCEnabled);
       });
+    } else {
+      log_debug(
+        "ClosedCaptioningManager: Vizio APIs are not available, skipping setup"
+      );
     }
   }
 

package/appUtils/playerManager/index.ts

@@ -452,7 +452,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
-      this.getActivePlayer().closeNativePlayer();
+      this.getActivePlayer()?.closeNativePlayer();
       this.invokeHandler("close");
     }
   }