@applicaster/zapp-react-native-utils 16.0.0-alpha.2663208063 → 16.0.0-alpha.2710214351

package/appUtils/playerManager/__tests__/playerToolbox.test.ts

@@ -0,0 +1,281 @@
+const mockRegister = jest.fn();
+let mockXray: Record<string, unknown> | null = {};
+
+jest.mock("../../../logger", () => ({
+  getXray: () => mockXray,
+}));
+
+const loadToolbox = () => {
+  let module;
+
+  jest.isolateModules(() => {
+    module = require("../playerToolbox");
+  });
+
+  return module as typeof import("../playerToolbox");
+};
+
+const player = (overrides = {}) => ({
+  getSeekableDuration: () => 100,
+  getContentPosition: () => 40,
+  isLive: () => false,
+  getPlayNextEntry: () => null,
+  playNextHandler: jest.fn(),
+  seekTo: jest.fn(),
+  ...overrides,
+});
+
+const manager = (active) =>
+  ({ getActivePlayer: () => active, isCasting: () => false }) as any;
+
+const registeredTools = async (active) => {
+  mockRegister.mockResolvedValue(undefined);
+  mockXray = { registerReactToolbox: mockRegister };
+  await loadToolbox().registerPlayerToolbox(manager(active));
+
+  const { tools } = mockRegister.mock.lastCall[0];
+
+  return Object.fromEntries(tools.map((tool) => [tool.name, tool.handler]));
+};
+
+describe("playerToolbox", () => {
+  beforeEach(() => {
+    mockRegister.mockReset();
+  });
+
+  it("does nothing when X-Ray has no React toolbox API", async () => {
+    mockXray = {};
+
+    await expect(
+      loadToolbox().registerPlayerToolbox(manager(null))
+    ).resolves.toBe(false);
+  });
+
+  it("does nothing when getXray returns null", async () => {
+    mockXray = null;
+
+    await expect(
+      loadToolbox().registerPlayerToolbox(manager(null))
+    ).resolves.toBe(false);
+  });
+
+  it("swallows a failed registration", async () => {
+    mockRegister.mockRejectedValue(new Error("no native bridge"));
+    mockXray = { registerReactToolbox: mockRegister };
+
+    await expect(
+      loadToolbox().registerPlayerToolbox(manager(null))
+    ).resolves.toBe(false);
+  });
+
+  it("seeks to an absolute position, from the end when negative, clamped", async () => {
+    const active = player();
+    const tools = await registeredTools(active);
+
+    expect(tools.seek({ position: 30 })).toEqual({ position: 30 });
+    expect(tools.seek({ position: -10 })).toEqual({ position: 90 });
+    expect(tools.seek({ position: 500 })).toEqual({ position: 100 });
+    expect(tools.seek({ position: -500 })).toEqual({ position: 0 });
+    expect(active.seekTo.mock.calls).toEqual([[30], [90], [100], [0]]);
+  });
+
+  it("offsets from the current position and refuses zero", async () => {
+    const tools = await registeredTools(player());
+
+    expect(tools.offset({ seconds: 15 })).toEqual({ from: 40, position: 55 });
+    expect(tools.offset({ seconds: -60 })).toEqual({ from: 40, position: 0 });
+
+    expect(() => tools.offset({ seconds: 0 })).toThrow(
+      "Ignored zero relative seek"
+    );
+  });
+
+  describe("state", () => {
+    const playing = (overrides = {}, entry: any = { id: "e1", title: "T" }) =>
+      player({
+        playerId: "p1",
+        playerRole: "Primary",
+        getEntry: () => entry,
+        getPosition: () => 40,
+        getDuration: () => 100,
+        getContentDuration: () => 100,
+        isReadyToPlay: () => true,
+        isPlaying: () => true,
+        isBuffering: () => false,
+        isAd: () => false,
+        isLive: () => false,
+        getIsMuted: () => false,
+        ...overrides,
+      });
+
+    const state = async (overrides = {}, entry?: any) =>
+      (await registeredTools(playing(overrides, entry))).state();
+
+    it("reports inactive when nothing plays", async () => {
+      expect((await registeredTools(null)).state()).toEqual({
+        active: false,
+        casting: false,
+      });
+    });
+
+    it("keeps the existing fields and adds the content clock for a VOD", async () => {
+      expect(await state()).toEqual({
+        active: true,
+        playerId: "p1",
+        entry: { id: "e1", title: "T" },
+        position: 40,
+        duration: 100,
+        playing: true,
+        buffering: false,
+        readyToPlay: true,
+        ad: false,
+        live: false,
+        muted: false,
+        role: "Primary",
+        plugin: null,
+        engine: null,
+        casting: false,
+        seekableDuration: 100,
+        contentPosition: 40,
+        contentDuration: 100,
+        drm: null,
+        lastError: null,
+        next: null,
+      });
+    });
+
+    it("reports the content's clock next to the ad's during a client-side ad", async () => {
+      const result = await state({
+        isAd: () => true,
+        getPosition: () => 5,
+        getDuration: () => 15,
+        getContentPosition: () => 300,
+        getContentDuration: () => 1800,
+      });
+
+      expect(result).toMatchObject({
+        ad: true,
+        position: 5,
+        duration: 15,
+        contentPosition: 300,
+        contentDuration: 1800,
+      });
+    });
+
+    it("reports non-finite numbers as null", async () => {
+      expect(
+        await state({
+          getSeekableDuration: () => NaN,
+          getContentPosition: () => null,
+          getContentDuration: () => Infinity,
+        })
+      ).toMatchObject({
+        seekableDuration: null,
+        contentPosition: null,
+        contentDuration: null,
+      });
+    });
+
+    it("reports the player plugin and its web engine", async () => {
+      expect(
+        await state({
+          playerPluginId: "QuickBrickPlayerPlugin",
+          engine: "hls.js",
+        })
+      ).toMatchObject({ plugin: "QuickBrickPlayerPlugin", engine: "hls.js" });
+    });
+
+    it("lists the entry's DRM key systems, or null", async () => {
+      const drm = { widevine: { license_url: "w" }, playready: {} };
+
+      expect((await state({}, { id: "e", extensions: { drm } })).drm).toEqual([
+        "widevine",
+        "playready",
+      ]);
+
+      expect((await state({}, { id: "e", extensions: { drm: {} } })).drm).toBe(
+        null
+      );
+
+      expect((await state({}, { id: "e", extensions: {} })).drm).toBe(null);
+      expect((await state({}, null)).drm).toBe(null);
+    });
+
+    it("reports no last error as null", async () => {
+      expect((await state({ lastError: null })).lastError).toBeNull();
+    });
+  });
+
+  describe("play next", () => {
+    const nextEntry = { id: "n1", title: "Next", extensions: {} };
+
+    const stateWith = async (overrides) =>
+      (
+        await registeredTools(
+          player({
+            getEntry: () => null,
+            getPosition: () => 0,
+            getDuration: () => 0,
+            getContentDuration: () => 0,
+            isReadyToPlay: () => true,
+            isPlaying: () => true,
+            isBuffering: () => false,
+            isAd: () => false,
+            getIsMuted: () => false,
+            ...overrides,
+          })
+        )
+      ).state();
+
+    it("reports the entry Play Next would play", async () => {
+      expect(
+        (await stateWith({ getPlayNextEntry: () => nextEntry })).next
+      ).toEqual({ id: "n1", title: "Next" });
+    });
+
+    it("reports no next entry as null", async () => {
+      expect((await stateWith({})).next).toBeNull();
+    });
+
+    it("plays the next entry through the player's Play Next action", async () => {
+      const active = player({ getPlayNextEntry: () => nextEntry });
+      const tools = await registeredTools(active);
+
+      expect(tools.next()).toEqual({ id: "n1", title: "Next" });
+      expect(active.playNextHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it("fails without a next entry", async () => {
+      const active = player();
+      const tools = await registeredTools(active);
+
+      expect(() => tools.next()).toThrow("No next item");
+      expect(active.playNextHandler).not.toHaveBeenCalled();
+    });
+
+    it("fails when no Play Next action is registered", async () => {
+      const tools = await registeredTools(
+        player({
+          getPlayNextEntry: () => nextEntry,
+          playNextHandler: null,
+        })
+      );
+
+      expect(() => tools.next()).toThrow("No next item");
+    });
+
+    it("fails without an active player", async () => {
+      const tools = await registeredTools(null);
+
+      expect(() => tools.next()).toThrow("No active player");
+    });
+  });
+
+  it("refuses to seek a stream that is not seekable", async () => {
+    const tools = await registeredTools(
+      player({ getSeekableDuration: () => 0 })
+    );
+
+    expect(() => tools.seek({ position: 10 })).toThrow("Seek is not supported");
+  });
+});

package/appUtils/playerManager/__tests__/usePlayerControllerSetup.test.tsx

@@ -0,0 +1,62 @@
+import { renderHook } from "@testing-library/react-native";
+
+import { usePlayerControllerSetup } from "../usePlayerControllerSetup";
+import { PlayerAnalyticsManager } from "../../../analyticsUtils/PlayerAnalyticsManager";
+
+const calls: string[] = [];
+
+jest.mock("../index", () => ({
+  playerManager: {
+    isPlayerRegistered: jest.fn(() => false),
+    registerPlayer: jest.fn(() => calls.push("registerPlayer")),
+    unregisterPlayer: jest.fn(),
+  },
+}));
+
+jest.mock("../../../analyticsUtils/PlayerAnalyticsManager", () => ({
+  PlayerAnalyticsManager: {
+    getInstance: jest.fn(() => calls.push("analyticsManager")),
+  },
+}));
+
+jest.mock("../../../reactHooks/useConfiguration", () => ({
+  useConfiguration: () => ({}),
+}));
+
+jest.mock("../../../playerUtils/useValidatePlayerConfig", () => ({
+  useValidatePlayerConfig: jest.fn(),
+}));
+
+jest.mock("../../../reactUtils", () => ({
+  isTV: () => false,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Helpers/Platform",
+  () => ({
+    isAppleTV: () => false,
+  })
+);
+
+class Controller {
+  destroy = jest.fn();
+}
+
+describe("usePlayerControllerSetup", () => {
+  it("creates the analytics manager before the player registers", () => {
+    renderHook(() =>
+      usePlayerControllerSetup({
+        props: { playerId: "player-1", entry: { id: "entry-1" } },
+        ControllerType: Controller,
+        ref: null,
+        manifest: {},
+        pluginId: "plugin",
+      })
+    );
+
+    // The manager attaches analytics to players as they register, so a player
+    // registered before it exists would send no player analytics events
+    expect(PlayerAnalyticsManager.getInstance).toHaveBeenCalled();
+    expect(calls).toEqual(["analyticsManager", "registerPlayer"]);
+  });
+});

package/appUtils/playerManager/const.ts

@@ -59,6 +59,19 @@ export enum SharedPlayerCallBacksKeys {
   // PIP
   OnPlayerDetached = "onPlayerDetached",
   OnPlayerAttached = "onPlayerAttached",
+
+  OnRemoteCommand = "onRemoteCommand",
+}
+
+// Ids native sends in onRemoteCommand (lock screen / Control Center / CarPlay buttons)
+export enum RemoteCommand {
+  Play = "play",
+  Pause = "pause",
+  Stop = "stop",
+  NextTrack = "nextTrack",
+  PreviousTrack = "previousTrack",
+  SkipForward = "skipForward",
+  SkipBackward = "skipBackward",
 }
 
 export enum PlayerRole {

package/appUtils/playerManager/index.ts

@@ -11,6 +11,7 @@ import {
 import { setUserLanguagePreference } from "./userLanguagePreference";
 import { PlayerRole } from "./const";
 import { RNPlayerManager } from "./nativePlayerManager";
+import { registerPlayerToolbox } from "./playerToolbox";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "General",
@@ -54,6 +55,7 @@ export class PlayerManager {
   public static getInstance() {
     if (!PlayerManager.instance) {
       PlayerManager.instance = new PlayerManager();
+      registerPlayerToolbox(PlayerManager.instance);
     }
 
     return PlayerManager.instance;
@@ -395,6 +397,11 @@ export class PlayerManager {
     return this.manager.removeHandler(event, handler);
   }
 
+  /** Whether anything handles `event` now, e.g. a mounted PlayerContainer for "toggleFullscreen". */
+  public hasHandler(event: string) {
+    return this.manager.handlers[event]?.length > 0;
+  }
+
   // TODO: should not be
   public invokeHandler(event, ...args) {
     return this.manager.invokeHandler(event, ...args);

package/appUtils/playerManager/player.ts

@@ -76,6 +76,12 @@ export class Player {
   private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
   private contentSubject?: BehaviorSubject<PlayerContent> | null;
+  // Read by the X-Ray `player` toolbox: the last onError/onVideoError of the current entry,
+  // and the Play Next action of the PlayerContainer showing this player.
+  public lastError: unknown = null;
+  public playNextHandler: (() => void) | null = null;
+  // The web engine the default player picked (hls.js, dash.js, shaka, video.js); null elsewhere.
+  public engine: string | null = null;
 
   protected listeners: {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
@@ -89,6 +95,7 @@ export class Player {
 
   set entry(newEntry: ZappEntry | null) {
     this._entry = newEntry;
+    this.lastError = null;
     // The live entry is scoped to the entry it overlays - see
     // `OverlaysObserver.clearLiveEntry`. No-op when there is no observer,
     // which is every non-live player.
@@ -271,6 +278,10 @@ export class Player {
 
   getEntry = (): ZappEntry | null => this.entry;
 
+  /** The entry Play Next would play now; null without one. Never creates the overlay observer. */
+  getPlayNextEntry = (): ZappEntry | null =>
+    this.overlaysObserver?.getPlayNextEntry() ?? null;
+
   logState = (text, additionalParams = {}) => {
     const isSeeking = this.playerState.seekPosition !== null;
 
@@ -492,6 +503,8 @@ export class Player {
   };
 
   onVideoError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnVideoError,
       event: error,
@@ -499,6 +512,8 @@ export class Player {
   };
 
   onError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
       event: error,
@@ -746,6 +761,13 @@ export class Player {
     });
   };
 
+  onRemoteCommand = (event: QuickBrickPlayer.RemoteCommandEvent) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnRemoteCommand,
+      event,
+    });
+  };
+
   getTracksState = (): QuickBrickPlayer.TracksState =>
     this.playerState.trackState;
 
@@ -823,6 +845,8 @@ export class Player {
     // PIP
     onPlayerDetached: this.onPlayerDetached,
     onPlayerAttached: this.onPlayerAttached,
+
+    onRemoteCommand: this.onRemoteCommand,
   });
 
   play = () => {};
@@ -832,6 +856,7 @@ export class Player {
   setPlaybackRate = (_rate) => {};
   startSleepTimer = (_timestamp) => {};
   cancelSleepTimer = () => {};
+  command = (_command: string, _userInfo?: Record<string, any>) => {};
 
   getPluginConfiguration = () => null;
   appStateChange = (_appState, _previousAppState) => {};

package/appUtils/playerManager/playerNative.ts

@@ -6,6 +6,7 @@ import { findNodeHandle } from "react-native";
 import { PlayerRole } from "./const";
 import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 import { RNPlayerManager } from "./nativePlayerManager";
+import { isApplePlatform } from "../../reactUtils";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -27,6 +28,7 @@ interface PlayerMethods {
   appStateChange?: (appState: string, previousAppState: string) => void;
   closeNativePlayer?: () => void;
   togglePlayPause?: () => void;
+  command?: (command: string, userInfo?: Record<string, any>) => void;
 }
 
 type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
@@ -52,6 +54,7 @@ const PlayerModuleFuncNames = {
   startSleepTimer: "startSleepTimer",
   cancelSleepTimer: "cancelSleepTimer",
   getSleepTimerEnd: "getSleepTimerEnd",
+  command: "command",
 };
 
 export class PlayerNative extends Player {
@@ -206,6 +209,25 @@ export class PlayerNative extends Player {
     }
   };
 
+  command = (command: string, userInfo?: Record<string, any>) => {
+    if (isApplePlatform()) {
+      const module = this.getPlayerModule();
+      module?.command?.(command, this.playerId, userInfo);
+
+      return true;
+    }
+
+    if (
+      !this.invokeNativeFunction(
+        PlayerModuleFuncNames.command,
+        command,
+        userInfo
+      )
+    ) {
+      this.currentPlayerComponent()?.command?.(command, userInfo);
+    }
+  };
+
   disableBufferAnimation = (): boolean => false;
 
   selectTrack = (
@@ -296,9 +318,11 @@ export class PlayerNative extends Player {
     }, listeners);
   };
 
-  isAudioItem = () =>
-    this.getEntry()?.content?.type?.includes?.("audio") ||
-    this.getEntry()?.type?.value === "audio";
+  isAudioItem = (): boolean =>
+    Boolean(
+      this.getEntry()?.content?.type?.includes?.("audio") ||
+        this.getEntry()?.type?.value?.includes?.("audio")
+    );
 
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();

package/appUtils/playerManager/playerNativeCommand.ts

@@ -1,14 +1,11 @@
 import { isApplePlatform } from "../../reactUtils";
 import { NativeModules } from "react-native";
 
-const NativePlayerModule = isApplePlatform()
-  ? NativeModules.PlayerModule
-  : NativeModules.QuickBrickDefaultPlayerModule;
-
 const PlayerNativeCommandTypes = {
   pause: "pause",
   clearPlayerData: "clearPlayerData",
   removeViewByNativeId: "removeViewByNativeId",
+  setPlayerControls: "setPlayerControls",
 };
 
 const PlayerNativeSendCommand = (
@@ -16,8 +13,8 @@ const PlayerNativeSendCommand = (
   playerId: string,
   userInfo?: Record<string, any>
 ) => {
-  if (playerId && command) {
-    NativePlayerModule?.command?.(command, playerId, userInfo);
+  if (isApplePlatform() && playerId && command) {
+    NativeModules.PlayerModule?.command?.(command, playerId, userInfo);
   }
 };