@applicaster/zapp-react-native-utils 16.0.0-alpha.3527552622 → 16.0.0-alpha.3550017939

package/appUtils/playerManager/player.ts

@@ -1,9 +1,22 @@
 import * as R from "ramda";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
+import { distinctUntilChanged } from "rxjs/operators";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
-import { getBoolFromConfigValue } from "../../configurationUtils";
-import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
+import {
+  getBoolFromConfigValue,
+  imageSrcFromMediaItem,
+} from "../../configurationUtils";
+// Imported from the leaf modules rather than the `playerUtils` barrel: that
+// barrel imports `playerManager`, so going through it would create a require
+// cycle (playerManager/index -> player -> playerUtils/index -> playerManager).
+import {
+  resolvePlayerTitleSubtitle,
+  getPlayerContentDataKeys,
+} from "../../playerUtils/resolvePlayerTitleSubtitle";
+import { isAudioItem } from "../../playerUtils/isAudioItem";
+import { isTV } from "../../reactUtils";
+import { PlayerRole, SharedPlayerCallBacksKeys } from "./const";
 import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 
@@ -19,6 +32,23 @@ export declare type PlayerControllerListenerData = {
   id: string;
   listener: QuickBrickPlayer.SharedPlayerCallBacks;
 };
+
+/**
+ * The player's resolved Title/Subtitle text, published by the player the same
+ * way duration and progress are. Consumers render these values as-is rather
+ * than reading `entry` or the plugin configuration themselves.
+ */
+export type PlayerContent = {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+  /**
+   * Cover art for the content currently playing. Published alongside the text
+   * (rather than read from `entry` by whoever needs it) so it follows the same
+   * entry: on live audio that means the programme's own artwork, refreshed
+   * with every feed poll, instead of the channel's.
+   */
+  imageUrl: Option<string>;
+};
 /**
  * Player Instance Controller
  * Instance exposes utility methods that will help set or get state
@@ -45,6 +75,13 @@ export class Player {
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
   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;
@@ -58,7 +95,18 @@ 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.
+    this.overlaysObserver?.clearLiveEntry();
     this.entryObservable?.next(newEntry);
+    // Optional chaining short-circuits the whole call expression, so
+    // `getContent()` is NOT evaluated while no subscriber exists. That
+    // matters: `PlayerNative` assigns `this.entry` in its constructor, before
+    // subclass arrow-function properties such as `getPluginConfiguration`
+    // have been assigned.
+    this.contentSubject?.next(this.getContent());
   }
 
   constructor(props) {
@@ -117,6 +165,77 @@ export class Player {
     return this.entryObservable;
   };
 
+  /**
+   * The player's resolved Title/Subtitle.
+   *
+   * Resolved on demand rather than cached: the plugin configuration arrives
+   * asynchronously on both the native and cast paths, so a value computed once
+   * at entry-set time would be stale for whichever arrives first.
+   *
+   * Every fallback (no config, empty/whitespace key, unresolvable key, key
+   * resolving to an empty string or to a non-string/non-number) lives in
+   * `resolvePlayerContentText` and is never reimplemented here.
+   */
+  getContent = (): PlayerContent => {
+    // Live audio keeps playing one channel while the programme on air
+    // changes, so the observer's freshly-loaded programme entry wins when
+    // there is one. Read through `?.` so this never constructs an observer:
+    // a VOD or cast player has none and falls straight through to its entry.
+    const entry = this.overlaysObserver?.liveEntry ?? this.entry;
+
+    return {
+      ...resolvePlayerTitleSubtitle({
+        entry,
+        pluginConfiguration: this.getPluginConfiguration(),
+        dataKeys: getPlayerContentDataKeys({
+          isTV: isTV(),
+          isAudioContent: isAudioItem(entry),
+        }),
+      }),
+      // Same selection Android's `EntryHelpers.extractCoverImage` makes:
+      // prefer the `image_base` media item, otherwise the first one available.
+      // Reused rather than reimplemented so the two platforms cannot drift.
+      imageUrl: entry ? imageSrcFromMediaItem(entry, []) : undefined,
+    };
+  };
+
+  /**
+   * Created lazily, like `entryObservable`. An eagerly created subject would
+   * resolve during `PlayerNative`'s constructor and call a not-yet-assigned
+   * `getPluginConfiguration`.
+   *
+   * The seed is produced by calling the resolver, never from raw entry fields:
+   * a `BehaviorSubject` replays its seed synchronously on subscribe, so a raw
+   * seed would overwrite correctly-resolved text at mount.
+   */
+  getContentObservable = (): Observable<PlayerContent> => {
+    if (!this.contentSubject) {
+      this.contentSubject = new BehaviorSubject<PlayerContent>(
+        this.getContent()
+      );
+    }
+
+    return this.contentSubject.asObservable().pipe(
+      // `resolvePlayerTitleSubtitle` returns a fresh object every call, so
+      // reference equality would never dedupe. Compare by value.
+      distinctUntilChanged(
+        (previous, next) =>
+          previous.title === next.title &&
+          previous.summary === next.summary &&
+          previous.imageUrl === next.imageUrl
+      )
+    );
+  };
+
+  /**
+   * Re-resolves and publishes the current content. Called when something the
+   * resolution depends on changed without `entry` itself being reassigned -
+   * today that is the observer swapping in a newly-loaded live programme.
+   */
+  publishContent = () => {
+    this.contentSubject?.next(this.getContent());
+  };
+
   /**
    * ---------------------------------------- PLAYER SETTERS GETTERS ----------------------------------------
    * These methods let you get information about the content / ad playing
@@ -159,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;
 
@@ -380,6 +503,8 @@ export class Player {
   };
 
   onVideoError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnVideoError,
       event: error,
@@ -387,6 +512,8 @@ export class Player {
   };
 
   onError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
       event: error,
@@ -634,6 +761,13 @@ export class Player {
     });
   };
 
+  onRemoteCommand = (event: QuickBrickPlayer.RemoteCommandEvent) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnRemoteCommand,
+      event,
+    });
+  };
+
   getTracksState = (): QuickBrickPlayer.TracksState =>
     this.playerState.trackState;
 
@@ -711,6 +845,8 @@ export class Player {
     // PIP
     onPlayerDetached: this.onPlayerDetached,
     onPlayerAttached: this.onPlayerAttached,
+
+    onRemoteCommand: this.onRemoteCommand,
   });
 
   play = () => {};
@@ -720,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/playerFactory.ts

@@ -1,7 +1,7 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 
 type PlayerFactoryItem = {
   Component: any;
@@ -19,52 +19,35 @@ type PlayerFactoryProps = {
   playerRole: PlayerRole;
 };
 
-interface PlayerConstructor {
+interface PlayerControllerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (
-  config: PlayerFactoryProps
-): PlayerFactoryItem | null => {
-  const IDENTIFIER = config?.playerPluginId;
+type PlayerProtocol = {
+  Component: any;
+  controllerClass: PlayerControllerConstructor;
+};
 
-  if (!IDENTIFIER) {
-    return null;
-  }
+export const playerFactory = async (
+  config: PlayerFactoryProps
+): Promise<PlayerFactoryItem | null> => {
+  if (!config?.playerPluginId) return null;
 
   const plugins = appStore.get("plugins");
+  if (!plugins) return null;
 
-  if (!plugins) {
-    return null;
-  }
-
-  const playerPlugin = findPluginByIdentifier(IDENTIFIER, plugins);
+  const playerPlugin = findPluginByIdentifier(config.playerPluginId, plugins);
+  if (!playerPlugin?.module?.playerProtocol) return null;
 
-  if (!playerPlugin?.module?.playerProtocol) {
-    return null;
-  }
-
-  const playerProtocol: PlayerConstructor = playerPlugin.module.playerProtocol(
-    config?.screenConfig,
-    config?.entry
-  );
+  const playerProtocol: PlayerProtocol | null =
+    await playerPlugin.module.playerProtocol(config.screenConfig, config.entry);
 
-  const playerView = (playerProtocol as any)?.Component || null;
-
-  if (!playerView) {
+  if (!playerProtocol?.Component || !playerProtocol.controllerClass) {
     return null;
   }
 
-  const Controller = (playerProtocol as any)?.controllerClass || null;
-
-  if (Controller === null) {
-    return null;
-  }
-
-  const controller = new Controller(config);
-
   return {
-    controller,
-    Component: playerView,
+    controller: new playerProtocol.controllerClass(config),
+    Component: playerProtocol.Component,
   };
 };

package/appUtils/playerManager/playerNative.ts

@@ -3,9 +3,10 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
 import { findNodeHandle } from "react-native";
-import { PlayerRole } from "./conts";
+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);
   }
 };
 

package/appUtils/playerManager/playerToolbox.ts

@@ -0,0 +1,196 @@
+import { registerXrayToolbox, XrayToolSpec } from "../../logger/xrayToolbox";
+import type { PlayerManager } from "./index";
+
+/**
+ * X-Ray `player.*` toolbox: lets an agent read and drive the active player without screenshots.
+ * Registered by the PlayerManager singleton itself, so it exists wherever players do. Skipped
+ * when the installed X-Ray plugin has no React toolbox API.
+ *
+ * How the player is shown (video modal mode, mini player) is navigation state: see `nav.*`.
+ */
+
+const toNumber = (value: unknown) =>
+  typeof value === "number" && Number.isFinite(value) ? value : null;
+
+const clamp = (value: number, max: number) => Math.min(Math.max(value, 0), max);
+
+/** Key systems the entry declares (widevine, playready, fairplay...). */
+const drmKeySystems = (drm: unknown) =>
+  drm && typeof drm === "object" && Object.keys(drm).length
+    ? Object.keys(drm)
+    : null;
+
+/** The range a seek can reach: the DVR window on live, the content on VOD. */
+const requireSeekable = (player: {
+  getSeekableDuration: () => number | undefined;
+}) => {
+  const seekable = toNumber(player.getSeekableDuration());
+
+  if (!seekable) throw new Error("Seek is not supported");
+
+  return seekable;
+};
+
+const tools = (manager: PlayerManager): XrayToolSpec[] => {
+  const requirePlayer = () => {
+    const player = manager.getActivePlayer();
+
+    if (!player) throw new Error("No active player");
+
+    return player;
+  };
+
+  return [
+    {
+      name: "state",
+      description:
+        "The active player: entry, position and duration in seconds (the ad's while an ad plays), " +
+        "playing/buffering/ad/live/muted, role (Primary, Cell, Chromecast) and casting; in seconds, " +
+        "seekableDuration and contentPosition/contentDuration (the content's, even during ads); " +
+        "drm key systems, lastError {message} and next {id, title}, each null when absent; " +
+        "plugin (player plugin id) and engine (the default player's web engine, else null). " +
+        "active: false when nothing plays.",
+      handler: () => {
+        const player = manager.getActivePlayer();
+
+        if (!player) return { active: false, casting: manager.isCasting() };
+
+        const entry = player.getEntry();
+        const seekableDuration = toNumber(player.getSeekableDuration());
+        const next = player.getPlayNextEntry();
+        const error: any = player.lastError;
+
+        return {
+          active: true,
+          playerId: player.playerId,
+          entry: entry ? { id: entry.id, title: entry.title } : null,
+          position: toNumber(player.getPosition()),
+          duration: toNumber(player.getDuration()),
+          // isPlaying() only means "not paused", which is also true before the stream starts.
+          playing: !!player.isReadyToPlay() && player.isPlaying(),
+          buffering: !!player.isBuffering(),
+          readyToPlay: !!player.isReadyToPlay(),
+          ad: player.isAd(),
+          live: !!player.isLive(),
+          muted: !!player.getIsMuted(),
+          role: player.playerRole,
+          plugin: player.playerPluginId ?? null,
+          engine: player.engine ?? null,
+          casting: manager.isCasting(),
+          seekableDuration,
+          contentPosition: toNumber(player.getContentPosition()),
+          contentDuration: toNumber(player.getContentDuration()),
+          drm: drmKeySystems(entry?.extensions?.drm),
+          lastError:
+            error == null
+              ? null
+              : { message: String(error?.message ?? error?.error ?? error) },
+          next: next ? { id: next.id, title: next.title } : null,
+        };
+      },
+    },
+    {
+      name: "play",
+      description: "Resume the active player.",
+      handler: () => {
+        requirePlayer().play();
+
+        return "OK";
+      },
+    },
+    {
+      name: "pause",
+      description: "Pause the active player.",
+      handler: () => {
+        requirePlayer().pause();
+
+        return "OK";
+      },
+    },
+    {
+      name: "next",
+      description:
+        "Play the next item, as the Play Next overlay does. Fails when there is none.",
+      handler: () => {
+        const player = requirePlayer();
+        const next = player.getPlayNextEntry();
+
+        if (!next || !player.playNextHandler) throw new Error("No next item");
+
+        player.playNextHandler();
+
+        return { id: next.id, title: next.title };
+      },
+    },
+    {
+      name: "seek",
+      description:
+        "Seek to an absolute position, as the player's console command does: seconds from the start, " +
+        "or from the end when negative. Clamped to the seekable range. Where it lands can differ: " +
+        "server-side ads snap back to the break before the target; read player.state afterwards.",
+      parameters: [
+        {
+          name: "position",
+          type: "number",
+          description:
+            "Seconds from the start; negative values count back from the end.",
+        },
+      ],
+      handler: ({ position }) => {
+        const player = requirePlayer();
+        const seconds = toNumber(position);
+
+        if (seconds === null) {
+          throw new Error("'position' must be a number of seconds");
+        }
+
+        const seekable = requireSeekable(player);
+
+        const target =
+          seconds >= 0
+            ? Math.min(seconds, seekable)
+            : clamp(seekable + seconds, seekable);
+
+        player.seekTo(target);
+
+        return { position: target };
+      },
+    },
+    {
+      name: "offset",
+      description:
+        "Seek relative to the current position, as the player's console command does: positive " +
+        "forward, negative back. Clamped to the seekable range.",
+      parameters: [
+        {
+          name: "seconds",
+          type: "number",
+          description: "Seconds to move: positive forward, negative back.",
+        },
+      ],
+      handler: ({ seconds }) => {
+        const player = requirePlayer();
+        const delta = toNumber(seconds);
+
+        if (delta === null) throw new Error("'seconds' must be a number");
+
+        if (delta === 0) throw new Error("Ignored zero relative seek");
+
+        const seekable = requireSeekable(player);
+        const from = toNumber(player.getContentPosition()) ?? 0;
+        const target = clamp(from + delta, seekable);
+
+        player.seekTo(target);
+
+        return { from, position: target };
+      },
+    },
+  ];
+};
+
+export const registerPlayerToolbox = (manager: PlayerManager) =>
+  registerXrayToolbox({
+    name: "player",
+    description: "Inspect and control the active player.",
+    tools: tools(manager),
+  });

package/appUtils/playerManager/usePlayerContent.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Player, PlayerContent } from "./player";
+import { usePlayer } from "./usePlayer";
+
+const EMPTY_CONTENT: PlayerContent = {
+  title: null,
+  summary: null,
+  imageUrl: null,
+};
+
+/**
+ * Subscribes to the player's resolved Title/Subtitle, the same way
+ * `usePlayerState` subscribes to playback state. Modeled on that hook
+ * deliberately: one React bridge pattern for everything the manager publishes.
+ *
+ * Passing no `playerId` uses the active player, which is the right default -
+ * only one player instance is live at a time. `usePlayer` additionally swaps
+ * to the casting receiver while casting, so this follows cast handover
+ * automatically.
+ */
+export const usePlayerContent = (playerId?: string): PlayerContent => {
+  const player: Player = usePlayer(playerId);
+
+  const [content, setContent] = React.useState<PlayerContent>(
+    () => player?.getContent() ?? EMPTY_CONTENT
+  );
+
+  React.useEffect(() => {
+    if (!player) {
+      setContent(EMPTY_CONTENT);
+
+      return;
+    }
+
+    const subscription = player
+      .getContentObservable()
+      .subscribe((next) => setContent(next));
+
+    return () => subscription.unsubscribe();
+  }, [player]);
+
+  return content;
+};

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -3,11 +3,12 @@ import { useConfiguration } from "../../reactHooks/useConfiguration";
 import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";
 import { isTV } from "../../reactUtils";
+import { PlayerAnalyticsManager } from "../../analyticsUtils/PlayerAnalyticsManager";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -68,6 +69,11 @@ export const usePlayerControllerSetup = ({
       return;
     }
 
+    // The analytics manager attaches its listener when a player registers, so it
+    // must exist first; on web the Player wrapper that also creates it renders
+    // only after the lazily loaded engine chunk, i.e. after registration.
+    PlayerAnalyticsManager.getInstance();
+
     playerManager.registerPlayer({
       id: playerId,
       playerController,

package/appUtils/playerManager/userLanguagePreference.ts

@@ -1,7 +1,7 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { createLogger, utilsLogger } from "../../logger";
-import { userPreferencesNamespace } from "./conts";
+import { userPreferencesNamespace } from "./const";
 
 export const preferredAudioLanguageStorageKey = "preferred_audio_language";
 

package/arrayUtils/__tests__/{anyThruthy.test.ts → anyTruthy.test.ts}

@@ -21,4 +21,12 @@ describe("anyTruthy", () => {
     expect(anyTruthy([true])).toBe(true);
     expect(anyTruthy([false])).toBe(false);
   });
+
+  it("should return true when the first value is true", () => {
+    expect(anyTruthy([true, false, false])).toBe(true);
+  });
+
+  it("should return true when only the last value is true", () => {
+    expect(anyTruthy([false, false, true])).toBe(true);
+  });
 });