@applicaster/zapp-react-native-utils 13.0.0-alpha.5281161050 → 13.0.0-alpha.5284645460

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,17 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findFirstFocusableItem = (items) => {
+  for (const item of items) {
+    if (!item.component.isGroup) {
+      return item;
+    } else {
+      if (item.children) {
+        const focusableItem = findFirstFocusableItem(item.children);
+
+        if (focusableItem) return focusableItem;
+      }
+    }
+  }
+};

package/appUtils/focusManagerAux/index.ts

@@ -54,7 +54,7 @@ export async function setFocusOnContent(currentRoute: string) {
   // For doing it we have to wait registration of first focusable node into focusableTree
   // we wait until content node starts having children
 
-  const { setInitialFocus, focusableTree } = focusManager;
+  const { setInitialFocus, focusableTree, getCurrentFocus } = focusManager;
 
   try {
     await waitForActiveScreen(currentRoute, focusableTree);
@@ -71,6 +71,6 @@ export async function setFocusOnContent(currentRoute: string) {
       );
     }
   } catch (error) {
-    setFocusOnContent(currentRoute);
+    !getCurrentFocus() && setFocusOnContent(currentRoute);
   }
 }

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/__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";
 

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/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,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");
     }
   }

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;
   }
 
@@ -147,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;
 
@@ -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

@@ -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;
@@ -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/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",