@applicaster/zapp-react-native-utils 13.0.0-alpha.1632352572 → 13.0.0-alpha.1673005505

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/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/{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}

@@ -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.js → keys/keysByPlatform.ts}

@@ -78,9 +78,9 @@ const web = {
   Escape: { code: "Escape", keyCode: 27 },
   EscapeDevice: { code: "Escape", keyCode: 27 },
   // For Debugging
-  Z: { code: "KeyZ", keyCode: 90 },
-  X: { code: "KeyX", keyCode: 88 },
-  C: { code: "KeyC", keyCode: 67 },
+  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/keyCodes/keysByPlatform.ts

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

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,22 +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";
-
-declare global {
-  interface Window {
-    VIZIO?: {
-      exitApplication: () => void;
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
+import { getPlatform } from "../../reactUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 const { log_debug } = createLogger({
   category: "General",
@@ -29,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 */
@@ -75,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;
   }
 
@@ -90,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/player.ts

@@ -98,6 +98,7 @@ export class Player {
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
 
+    this.isPaused = this.isPaused.bind(this);
     this.entryObservable = null;
   }
 
@@ -154,8 +155,8 @@ export class Player {
     this.isSeeking()
       ? this.playerState.seekPosition
       : this.playerState.adState
-      ? this.playerState.adState.adPosition
-      : this.playerState.contentPosition;
+        ? this.playerState.adState.adPosition
+        : this.playerState.contentPosition;
 
   getEntry = (): ZappEntry | null => this.entry;
 
@@ -253,9 +254,9 @@ export class Player {
     return this.playerState.seekPosition !== null;
   };
 
-  isPaused = () => {
+  isPaused() {
     return !!this.playerState.isPaused;
-  };
+  }
 
   isPlaying = () => {
     return !!this.playerState.isPaused === false;

package/appUtils/playerManager/playerNative.ts

@@ -58,7 +58,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerProps> =>
+  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;

package/arrayUtils/__tests__/__snapshots__/arrayUtils.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`shiftArray shifts the n first items from the head to the tail of the array with a positive offset 1`] = `
-Array [
+[
   "bar",
   "baz",
   42,
@@ -10,7 +10,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n first items from the head to the tail of the array with a positive offset 2`] = `
-Array [
+[
   "baz",
   42,
   "foo",
@@ -19,7 +19,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n last items from the tail to the head of the array with a negative offset 1`] = `
-Array [
+[
   42,
   "foo",
   "bar",
@@ -28,7 +28,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n last items from the tail to the head of the array with a negative offset 2`] = `
-Array [
+[
   "baz",
   42,
   "foo",

package/domUtils/{cookieManager.js → cookieManager.ts}

@@ -2,7 +2,6 @@ import { domUtilsLogger } from "./logger";
 
 /**
  * Gets an object of cookies and sets them on the DOM.
- * @param {Object} cookies selected data key for label.
  */
 export function setCookies(cookies): void {
   const cookieKeys = Object.keys(cookies);
@@ -25,7 +24,7 @@ export function setCookies(cookies): void {
 /**
  * Gets cookies set on DOM
  */
-export function getCookies(): Object {
+export function getCookies(): typeof document.cookie {
   try {
     if (document) {
       return document.cookie;

package/equalUtils/index.ts

@@ -49,9 +49,16 @@ export const isEqual =
     }
 
     if (compareRemainingKeysBySameValue) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
+
+      const undeclaredKeys = Array.from(allKeys).filter(
+        (key) => !declaredKeys.has(key)
       );
 
       const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>

package/focusManager/FocusManager.ts

@@ -250,7 +250,17 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    const isFocused = FocusManager.instance.isFocused(id);
+
+    const isDescendantFocused = (() => {
+      try {
+        return FocusManager.instance.isAnyDescendantFocused(id);
+      } catch (_e) {
+        return false;
+      }
+    })();
+
+    if (isFocused || isDescendantFocused) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;

package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`functionUtils subscriber can be invoked without args 1`] = `
-Object {
-  "handlers": Object {},
+{
+  "handlers": {},
   "invokeHandler": [Function],
   "on": [Function],
   "removeHandler": [Function],
@@ -10,9 +10,9 @@ Object {
 `;
 
 exports[`functionUtils subscriber returns the original object with additional methods 1`] = `
-Object {
+{
   "foo": "bar",
-  "handlers": Object {},
+  "handlers": {},
   "invokeHandler": [Function],
   "method": [Function],
   "on": [Function],

package/functionUtils/index.ts

@@ -111,12 +111,12 @@ type SubscriberFn<T> = (
 
 export type EventHandlerFn<T> = (event: string, ...args: unknown[]) => T;
 
-type SubscriberObj = Partial<{
-  on?: SubscriberFn<SubscriberObj>;
-  invokeHandler: EventHandlerFn<SubscriberObj>;
-  removeHandler: EventHandlerFn<SubscriberObj>;
-  handlers: Record<string, SubscriberFn<SubscriberObj>[] | []>;
-}>;
+export type SubscriberObj<T extends {} = {}> = {
+  on: SubscriberFn<SubscriberObj<T>>;
+  invokeHandler: EventHandlerFn<SubscriberObj<T>>;
+  removeHandler: EventHandlerFn<SubscriberObj<T>>;
+  handlers: Record<string, SubscriberFn<SubscriberObj<T>>[] | []>;
+} & T;
 
 export const clearObject = (object: { [key: string]: unknown }) =>
   Object.keys(object).forEach((key) => delete object[key]);
@@ -126,7 +126,11 @@ export const clearObject = (object: { [key: string]: unknown }) =>
  * @param {Object} obj to add the subscription feature on
  * @returns {Object} subscriber object
  */
-export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
+export function subscriber<T extends Partial<SubscriberObj> = {}>(
+  _obj: T = {} as T
+): SubscriberObj {
+  const obj: T = _obj;
+
   if (!obj.handlers) {
     obj.handlers = {};
   }
@@ -172,7 +176,7 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
       | SubscriberFn<SubscriberObj>[]
       | [];
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   /**
@@ -188,16 +192,16 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
 
     R.compose(R.forEach(callHandlerWithDispose), R.propOr([], event))(handlers);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   obj.removeHandler = function (event, handler) {
     handlers[event] = R.reject(R.equals(handler), handlers[event]);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
-  return obj;
+  return obj as SubscriberObj;
 }
 
 /**

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));
+};