@applicaster/zapp-react-native-utils 13.0.0-alpha.2635505531 → 13.0.0-alpha.2833001702

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}

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

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

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

@@ -169,8 +169,12 @@ export class PlayerManager {
     this.addPlayer(id, playerController);
 
     if (playerController.playerRole === PlayerRole.Primary) {
-      if (playerController.playerPluginId !== "QuickBrickPlayerPlugin") {
-        RNPlayerManager?.["QuickBrickPlayerPlugin"]?.stopBackgroundPlayback?.();
+      if (RNPlayerManager) {
+        Object.keys(RNPlayerManager).forEach((pluginId) => {
+          if (pluginId !== playerController.playerPluginId) {
+            RNPlayerManager[pluginId]?.stopBackgroundPlayback?.();
+          }
+        });
       }
 
       playerController.addListener({

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,
@@ -149,8 +154,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;
 
@@ -338,7 +343,7 @@ export class Player {
     });
   };
 
-  onPlayerSeekComplete(event: QuickBrickPlayer.OnSeekCompleteEvent) {
+  onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -353,7 +358,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnPlayerSeekComplete,
       event,
     });
-  }
+  };
 
   onVideoEnd = (event) => {
     this.invokeListenersUpdate({
@@ -623,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,
@@ -736,10 +745,5 @@ export class Player {
 
   public supportsNativeControls = (): boolean => false;
   public supportNativeCast = (): boolean => false;
-
-  public isInDelayedSeek = (): boolean => false;
-  public enterDelayedSeek() {}
-
-  public exitDelayedSeek() {}
   public destroy = () => {};
 }

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/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -5,8 +5,6 @@ import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
-import { isTV } from "../../reactUtils";
-import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -51,19 +49,7 @@ export const usePlayerControllerSetup = ({
       playerRole: PlayerRole.Primary,
     };
 
-    if (isTV()) {
-      const wrappedPlayerController = new ControllerType({
-        ...combinedProps,
-        playerRole: PlayerRole.Unspecified,
-        playerId: playerId + "." + "wrapped",
-      });
-
-      setPlayerController(
-        new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
-      );
-    } else {
-      setPlayerController(new ControllerType(combinedProps));
-    }
+    setPlayerController(new ControllerType(combinedProps));
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

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;