@applicaster/zapp-react-native-utils 16.0.0-alpha.1701179921 → 16.0.0-alpha.1733304298

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,

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

@@ -8,6 +8,7 @@ import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/
 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/cellUtils/__tests__/getButtonsEnabled.test.ts

@@ -0,0 +1,28 @@
+import { getButtonsEnabled } from "..";
+
+describe("getButtonsEnabled", () => {
+  it("returns true when the buttons container is enabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: true })
+    ).toBe(true);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "true" })
+    ).toBe(true);
+  });
+
+  it("returns false when the buttons container is disabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: false })
+    ).toBe(false);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "false" })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getButtonsEnabled({})).toBe(false);
+    expect(getButtonsEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getCellNavigationEnabled.test.ts

@@ -0,0 +1,36 @@
+import { getCellNavigationEnabled } from "..";
+
+describe("getCellNavigationEnabled", () => {
+  it("returns true when cell navigation is enabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "true",
+      })
+    ).toBe(true);
+  });
+
+  it("returns false when cell navigation is disabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "false",
+      })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getCellNavigationEnabled({})).toBe(false);
+    expect(getCellNavigationEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getIsCellNavigationEnabled.test.ts

@@ -0,0 +1,35 @@
+import { getIsCellNavigationEnabled } from "..";
+
+describe("getIsCellNavigationEnabled", () => {
+  it("is disabled when buttons are enabled and cell navigation is off", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+  });
+
+  it("is enabled when buttons and cell navigation are both on", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when buttons are disabled", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: false,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when the keys or styles are missing", () => {
+    expect(getIsCellNavigationEnabled({})).toBe(true);
+    expect(getIsCellNavigationEnabled(undefined)).toBe(true);
+  });
+});

package/cellUtils/__tests__/isCellNavigationEnabled.test.ts

@@ -0,0 +1,21 @@
+import { isCellNavigationEnabled } from "..";
+
+describe("isCellNavigationEnabled", () => {
+  it("is enabled when buttons are disabled, regardless of the toggle", () => {
+    expect(isCellNavigationEnabled(false, false)).toBe(true);
+    expect(isCellNavigationEnabled(false, true)).toBe(true);
+    expect(isCellNavigationEnabled(undefined, undefined)).toBe(true);
+    expect(isCellNavigationEnabled("false", false)).toBe(true);
+  });
+
+  it("is disabled when buttons are enabled and the toggle is off or missing", () => {
+    expect(isCellNavigationEnabled(true, false)).toBe(false);
+    expect(isCellNavigationEnabled(true, undefined)).toBe(false);
+    expect(isCellNavigationEnabled("true", "false")).toBe(false);
+  });
+
+  it("is enabled when buttons and the toggle are both enabled", () => {
+    expect(isCellNavigationEnabled(true, true)).toBe(true);
+    expect(isCellNavigationEnabled("true", "true")).toBe(true);
+  });
+});

package/cellUtils/index.ts

@@ -12,6 +12,7 @@ import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
+import { isTrue } from "../booleanUtils";
 
 const CUSTOM_KEY = "other";
 
@@ -572,3 +573,42 @@ export const hasTextLabelsEnabled = (
     return Boolean(value);
   });
 };
+
+/**
+ * Reads the mobile buttons container "buttons enabled" switch from cell styles.
+ */
+export const getButtonsEnabled = (styles?: Record<string, any>): boolean => {
+  return isTrue(styles?.mobile_buttons_container_buttons_enabled);
+};
+
+/**
+ * Reads the mobile buttons container "cell navigation enabled" switch from cell styles.
+ */
+export const getCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean => {
+  return isTrue(styles?.mobile_buttons_container_cell_navigation_enabled);
+};
+
+/**
+ * Whether tapping a cell outside its action buttons triggers the cell's navigation.
+ * Always true when the buttons are disabled.
+ * @param buttonsEnabled the cell's "buttons enabled" switch value
+ * @param cellNavigationEnabled the cell's "cell navigation enabled" switch value
+ */
+export const isCellNavigationEnabled = (
+  buttonsEnabled: unknown,
+  cellNavigationEnabled: unknown
+): boolean => !isTrue(buttonsEnabled) || isTrue(cellNavigationEnabled);
+
+/**
+ * Whether tapping a mobile cell outside its action buttons triggers the cell's navigation,
+ * read from the cell styles.
+ */
+export const getIsCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean =>
+  isCellNavigationEnabled(
+    getButtonsEnabled(styles),
+    getCellNavigationEnabled(styles)
+  );

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -171,6 +171,17 @@ describe("parseModalBlocksConfiguration", () => {
     expect(result.item.checkbox.default).toBeUndefined();
     expect(result.item.actionButtons.default).toBeUndefined();
   });
+
+  it("parses the generic button leading icon asset", () => {
+    const result = parseModalBlocksConfiguration(
+      { "button.leading_icon.asset": "https://example.com/add.png" },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBe(
+      "https://example.com/add.png"
+    );
+  });
 });
 
 describe("getEmptyModalBlocksStructure", () => {
@@ -257,6 +268,69 @@ describe("getEmptyModalBlocksStructure", () => {
     );
   });
 
+  it("maps text label and now playing font keys onto the label style", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.ios.font_family": "SFProText-Bold",
+        "item.text_label1.letter_spacing": -0.4,
+        "item.text_label1.text_transform": "uppercase",
+        "now_playing_item.now_playing_label.ios.font_family":
+          "SFProText-Semibold",
+        "now_playing_item.now_playing_label.font_size": 18,
+      },
+      "queue-action"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Bold",
+        letterSpacing: -0.4,
+        textTransform: "uppercase",
+      })
+    );
+
+    expect(result.nowPlayingItem?.nowPlayingLabel.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Semibold",
+        fontSize: 18,
+      })
+    );
+  });
+
+  it("maps queue remove and reorder assets onto item action buttons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.remove_asset": "https://example.com/remove.png",
+        "item.reorder_handle_asset": "https://example.com/reorder.png",
+      },
+      "queue-action"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://example.com/remove.png",
+        dragAsset: "https://example.com/reorder.png",
+      })
+    );
+  });
+
+  it("maps now playing play and pause assets onto action buttons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "now_playing_item.play_asset": "https://example.com/play.png",
+        "now_playing_item.pause_asset": "https://example.com/pause.png",
+      },
+      "queue-action"
+    );
+
+    expect(result.nowPlayingItem?.actionButtons.default).toEqual(
+      expect.objectContaining({
+        playAsset: "https://example.com/play.png",
+        pauseAsset: "https://example.com/pause.png",
+      })
+    );
+  });
+
   it("should leave sectionHeader empty when keys are absent", () => {
     const result = parseModalBlocksConfiguration(
       { "item.text_label1.font_color": "#FFFFFF" },
@@ -266,4 +340,64 @@ describe("getEmptyModalBlocksStructure", () => {
     expect(result.sectionHeader.title).toEqual({ default: {} });
     expect(result.sectionHeader.actionButtons).toEqual({ default: {} });
   });
+
+  it("maps playlist button font family and the new green style keys", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.title.ios.font_family": "GreycliffCF-Bold",
+        "button.title.inactive_font_color": "#111111",
+        "button.title.focused_font_color": "#222222",
+        "button.title.text_transform": "uppercase",
+        "button.background.inactive_color": "#999999",
+        "button.background.horizontal_gutter": 6,
+        "button.icons.width": 24,
+        "button.icons.height": 24,
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.title.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "GreycliffCF-Bold",
+        inactiveFontColor: "#111111",
+        textTransform: "uppercase",
+      })
+    );
+
+    // "focused_" is a state prefix, so this key lands on the focused bucket.
+    expect(result.button.title.focused).toEqual(
+      expect.objectContaining({
+        fontColor: "#222222",
+      })
+    );
+
+    expect(result.button.background.default).toEqual(
+      expect.objectContaining({
+        inactiveColor: "#999999",
+        horizontalGutter: 6,
+      })
+    );
+
+    expect(result.button.icons.default).toEqual(
+      expect.objectContaining({
+        width: 24,
+        height: 24,
+      })
+    );
+  });
+
+  it("keeps a font-selector object on the button title", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.title.ios.font_family": { fontFamily: "GreycliffCF-Bold" },
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.title.default).toEqual(
+      expect.objectContaining({
+        fontFamily: { fontFamily: "GreycliffCF-Bold" },
+      })
+    );
+  });
 });

package/configurationUtils/modalBlocksParser.ts

@@ -210,5 +210,43 @@ export const parseModalBlocksConfiguration = (
 
   parseBlock("button", ["background", "title", "icons", "leading_icon"]);
 
+  // Leaf uploader keys. They are not `<block>_<sub>_<prop>` styles, so
+  // getAllSpecificStyles never sees them.
+  const assignLeafAsset = (
+    block: ModalBlocksConfig["item"] | undefined,
+    key: string,
+    prop: "playAsset" | "pauseAsset" | "removeAsset" | "dragAsset"
+  ) => {
+    if (!block) return;
+
+    const value = configuration[key];
+
+    if (typeof value !== "string" || !value.trim()) return;
+
+    block.actionButtons = {
+      ...block.actionButtons,
+      default: {
+        ...(block.actionButtons?.default || {}),
+        [prop]: value,
+      },
+    };
+  };
+
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.play_asset",
+    "playAsset"
+  );
+
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.pause_asset",
+    "pauseAsset"
+  );
+
+  assignLeafAsset(result.item, "item.remove_asset", "removeAsset");
+
+  assignLeafAsset(result.item, "item.reorder_handle_asset", "dragAsset");
+
   return result;
 };

package/focusManager/FocusManager.ts

@@ -224,12 +224,38 @@ class FocusManager {
 
   unregisterFocusable(focusableId: string) {
     const node = this.tree.find(focusableId);
+    const parentNode = this.tree.findParent(focusableId);
 
     this.focusableComponents = this.focusableComponents.filter(
       (c) => c !== node?.component
     );
 
     this.tree.remove(focusableId);
+
+    if (this._focusedId === focusableId) {
+      this._focusedId = null;
+      this.retainFocus(parentNode);
+    }
+  }
+
+  // Empty groups drop their focusable list after the feed fails, which is
+  // after Layout's one-shot focus pass. Land on the nearest ancestor that is
+  // still mounted so key handlers keep a target.
+  private retainFocus(node: TreeNode | null) {
+    let current = node;
+
+    while (current) {
+      const ref = current.component;
+
+      if (ref?.current?.props?.id) {
+        this.setFocusLocal(ref);
+        ref.current.onFocus?.(ref.current, {}, undefined);
+
+        return;
+      }
+
+      current = current.parentId ? this.tree.find(current.parentId) : null;
+    }
   }
 
   private setNextFocus(

package/focusManager/__tests__/FocusManager.test.ts

@@ -231,6 +231,15 @@ describe("FocusManager", () => {
     ).toBeFalsy();
   });
 
+  it("moves focus to the mounted parent when the focused element unregisters", () => {
+    focusManager.setFocus("child1");
+
+    focusManager.unregisterFocusable("child1");
+
+    expect(focusManager.focusedId).toBe("group");
+    expect(focusManager.focused).toBe(group.current);
+  });
+
   it("focusManager registerFocusable should be defined", () => {
     expect(focusManager.registerFocusable).toBeDefined();
   });