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

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({
@@ -261,7 +327,7 @@ export const focusManager = (function () {
       });
 
       currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
+
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -412,7 +478,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 +514,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 +537,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/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 */

package/appUtils/playerManager/player.ts

@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../logger";
 import { getBoolFromConfigValue } from "../../configurationUtils";
 import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
 import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
+import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 
 const logger = createLogger({
   category: "PlayerController",
@@ -49,6 +50,8 @@ export class Player {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
   } = {};
 
+  public seekController?: TVSeekController | null;
+
   get entry(): ZappEntry | null {
     return this._entry;
   }
@@ -59,6 +62,8 @@ export class Player {
   }
 
   constructor(props) {
+    this.seekController = null;
+
     this.playerState = {
       // We want isLive null by default to be able not to show controls if we do not know type
       isLive: null,
@@ -91,6 +96,8 @@ export class Player {
     this.onVideoProgress = this.onVideoProgress.bind(this);
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
+    this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
+
     this.entryObservable = null;
   }
 
@@ -321,7 +328,7 @@ export class Player {
    * You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
    * This allows you to use one method for everything.
    */
-  onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
+  onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -336,10 +343,11 @@ export class Player {
     });
   };
 
-  onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
+  onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
+
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -620,14 +628,18 @@ export class Player {
   selectTrack = (_track) => {};
 
   protected notifyPlayHeadPositionUpdate = () => {
+    const currentTime = this.getPosition();
+
     const event = {
-      currentTime: this.getPosition(),
+      currentTime,
       duration: this.getDuration(),
       item: this.getEntry(),
       seekableDuration: this.playerState.seekableDuration,
       isLive: this.isLive(),
     };
 
+    this.seekController?.onVideoProgress(currentTime);
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnVideoProgress,
       event,
@@ -653,8 +665,8 @@ export class Player {
   };
 
   public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
-    onPlayerSeekStart: this.onSeekStart,
-    onPlayerSeekComplete: this.onSeekComplete,
+    onPlayerSeekStart: this.onPlayerSeekStart,
+    onPlayerSeekComplete: this.onPlayerSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
     onVideoError: this.onVideoError,

package/appUtils/playerManager/playerNative.ts

@@ -222,9 +222,10 @@ export class PlayerNative extends Player {
 
   onVideoLoad = (event) => {
     if (this.startPosition) {
-      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
       this.seekTo(this.startPosition);
       this.startPosition = null;
+
+      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
     } else {
       super.onVideoLoad(event);
     }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -39,7 +39,7 @@ export const usePlayerControllerSetup = ({
       ? { supports_native_controls: true, ...config }
       : config;
 
-    const newPlayerController = new ControllerType({
+    const combinedProps = {
       player: ref,
       listener: props as any,
       config: newConfig,
@@ -47,9 +47,9 @@ export const usePlayerControllerSetup = ({
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
-    });
+    };
 
-    setPlayerController(newPlayerController);
+    setPlayerController(new ControllerType(combinedProps));
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

package/idleUtils/__tests__/withTimeout$.test.ts

@@ -0,0 +1,37 @@
+import { TestScheduler } from "rxjs/testing";
+
+import { withTimeout$ } from "..";
+
+describe("withTimeout$", () => {
+  let testScheduler: TestScheduler;
+
+  beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  it("should emit undefined after the specified timeout", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 1000;
+      const expectedMarble = "1s (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+
+  it("should complete after emitting undefined", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 500;
+      const expectedMarble = "500ms (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+});

package/idleUtils/index.ts

@@ -1,4 +1,4 @@
-export { withTimeout } from "./withTimeout";
+export { withTimeout, withTimeout$ } from "./withTimeout";
 
 export { onIdle } from "./onIdle";
 

package/idleUtils/withTimeout.ts

@@ -1,7 +1,20 @@
-export const withTimeout = (timeout: number) => {
-  return new Promise((resolve) => {
+import { of, Observable } from "rxjs";
+import { delay } from "rxjs/operators";
+
+export const withTimeout = (timeout: number): Promise<void> => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve(undefined);
     }, timeout);
   });
 };
+
+/**
+ * Creates an observable that emits a single value after a specified timeout.
+ *
+ * @param timeout - The delay duration in milliseconds before emitting the value.
+ * @returns An observable that emits `undefined` after the specified timeout.
+ */
+export const withTimeout$ = (timeout: number): Observable<void> => {
+  return of(undefined).pipe(delay(timeout));
+};