@applicaster/zapp-react-native-utils 16.0.0-alpha.1334507601 → 16.0.0-alpha.1444784746

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;

package/appUtils/playerManager/player.ts

@@ -746,6 +746,13 @@ export class Player {
     });
   };
 
+  onRemoteCommand = (event: QuickBrickPlayer.RemoteCommandEvent) => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.OnRemoteCommand,
+      event,
+    });
+  };
+
   getTracksState = (): QuickBrickPlayer.TracksState =>
     this.playerState.trackState;
 
@@ -823,6 +830,8 @@ export class Player {
     // PIP
     onPlayerDetached: this.onPlayerDetached,
     onPlayerAttached: this.onPlayerAttached,
+
+    onRemoteCommand: this.onRemoteCommand,
   });
 
   play = () => {};
@@ -832,6 +841,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 = (

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,192 @@
+import { getXray } from "../../logger";
+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.*`.
+ */
+
+type ToolSpec = {
+  name: string;
+  description: string;
+  parameters?: Array<{
+    name: string;
+    type: "number";
+    description: string;
+  }>;
+  handler: (args: Record<string, unknown>) => unknown;
+};
+
+type RegisterReactToolbox = (toolbox: {
+  name: string;
+  description: string;
+  tools: ToolSpec[];
+}) => Promise<void>;
+
+let registration: Promise<void> | undefined;
+
+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);
+
+/** 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): ToolSpec[] => {
+  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, playing/buffering/ad/live/muted, " +
+        "role (Primary, Cell, Chromecast) and casting. active: false when nothing plays.",
+      handler: () => {
+        const player = manager.getActivePlayer();
+
+        if (!player) return { active: false, casting: manager.isCasting() };
+
+        const entry = player.getEntry();
+
+        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,
+          casting: manager.isCasting(),
+        };
+      },
+    },
+    {
+      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: "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) => {
+  if (registration) return registration;
+
+  const register = (
+    getXray() as
+      | { registerReactToolbox?: RegisterReactToolbox }
+      | null
+      | undefined
+  )?.registerReactToolbox;
+
+  if (!register) return Promise.resolve();
+
+  registration = register({
+    name: "player",
+    description: "Inspect and control the active player.",
+    tools: tools(manager),
+  }).catch(() => {
+    registration = undefined;
+  });
+
+  return registration;
+};

package/arrayUtils/__tests__/reorderByIds.test.ts

@@ -47,4 +47,17 @@ describe("reorderByIds", () => {
 
     expect(result.map((i) => i.key)).toEqual(["c", "b", "a"]);
   });
+
+  it("reorders duplicate items when using unique slot identifiers via getId", () => {
+    const duplicateItems = [
+      { id: "x", slot: "s1", name: "First X" },
+      { id: "y", slot: "s2", name: "Y" },
+      { id: "x", slot: "s3", name: "Second X" },
+    ];
+
+    const result = reorderByIds(duplicateItems, ["s3", "s1"], (i) => i.slot);
+
+    expect(result).toHaveLength(3);
+    expect(result.map((i) => i.name)).toEqual(["Second X", "Y", "First X"]);
+  });
 });

package/arrayUtils/index.ts

@@ -167,7 +167,7 @@ export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);
 export function reorderByIds<T>(
   items: T[],
   orderedIds: string[],
-  getId: (item: T) => string | string[] = (item: any) => item?.id
+  getId: (item: T) => string = (item: any) => item?.id
 ): T[] {
   if (!items || items.length === 0) return [];
   if (!orderedIds || orderedIds.length === 0) return [...items];
@@ -175,14 +175,16 @@ export function reorderByIds<T>(
   const itemMap = new Map<string, T>();
 
   items.forEach((item) => {
-    const rawId = getId(item);
-    const keys = Array.isArray(rawId) ? rawId : [rawId];
-
-    keys.forEach((key) => {
-      if (key !== undefined && key !== null && key !== "") {
-        itemMap.set(String(key), item);
-      }
-    });
+    const id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      !itemMap.has(String(id))
+    ) {
+      itemMap.set(String(id), item);
+    }
   });
 
   const reorderedSubset: T[] = [];
@@ -192,48 +194,29 @@ export function reorderByIds<T>(
     const strId = String(id);
     const item = itemMap.get(strId);
 
-    if (item && !reorderedSubset.includes(item)) {
+    if (item && !orderedIdsSet.has(strId)) {
       reorderedSubset.push(item);
-      const rawId = getId(item);
-      const keys = Array.isArray(rawId) ? rawId : [rawId];
-
-      keys.forEach((k) => {
-        if (k !== undefined && k !== null && k !== "") {
-          orderedIdsSet.add(String(k));
-        }
-      });
+      orderedIdsSet.add(strId);
     }
   });
 
   if (reorderedSubset.length === 0) return [...items];
 
   let subsetIdx = 0;
-  const result: T[] = [];
-
-  items.forEach((item) => {
-    const rawId = getId(item);
-    const keys = Array.isArray(rawId) ? rawId : [rawId];
-
-    const isMatched = keys.some(
-      (k) =>
-        k !== undefined &&
-        k !== null &&
-        k !== "" &&
-        orderedIdsSet.has(String(k))
-    );
 
-    if (isMatched) {
-      if (subsetIdx < reorderedSubset.length) {
-        result.push(reorderedSubset[subsetIdx++]);
-      }
-    } else {
-      result.push(item);
+  return items.map((item) => {
+    const id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      orderedIdsSet.has(String(id)) &&
+      subsetIdx < reorderedSubset.length
+    ) {
+      return reorderedSubset[subsetIdx++];
     }
-  });
-
-  while (subsetIdx < reorderedSubset.length) {
-    result.push(reorderedSubset[subsetIdx++]);
-  }
 
-  return result;
+    return item;
+  });
 }

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -205,4 +205,65 @@ describe("getEmptyModalBlocksStructure", () => {
       getEmptyModalBlocksStructure()
     );
   });
+
+  it("should parse section_header title and action_buttons independently of header", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "section_header.title.font_color": "#ABCDEF",
+        "section_header.title.font_size": 13,
+        "section_header.title.ios.font_family": "SFProText-Bold",
+        "section_header.action_buttons.default.background_color":
+          "rgba(62, 62, 62, 1)",
+        "section_header.action_buttons.focus.background_color":
+          "rgba(78, 78, 78, 1)",
+        "section_header.action_buttons.default.font_color": "#FFFFFF",
+        "section_header.action_buttons.font_size": 14,
+        "section_header.action_buttons.border_radius": 16,
+        // Theme modal header — must not leak into sectionHeader
+        queue_action_style_header_title_default_fontColor: "#111111",
+        queue_action_style_header_title_default_fontSize: 22,
+      },
+      "queue_action"
+    );
+
+    expect(result.sectionHeader.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#ABCDEF",
+        fontSize: 13,
+        fontFamily: "SFProText-Bold",
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(62, 62, 62, 1)",
+        fontColor: "#FFFFFF",
+        fontSize: 14,
+        borderRadius: 16,
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(78, 78, 78, 1)",
+      })
+    );
+
+    expect(result.header.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#111111",
+        fontSize: 22,
+      })
+    );
+  });
+
+  it("should leave sectionHeader empty when keys are absent", () => {
+    const result = parseModalBlocksConfiguration(
+      { "item.text_label1.font_color": "#FFFFFF" },
+      "playlist-experience"
+    );
+
+    expect(result.sectionHeader.title).toEqual({ default: {} });
+    expect(result.sectionHeader.actionButtons).toEqual({ default: {} });
+  });
 });

package/configurationUtils/modalBlocksParser.ts

@@ -7,6 +7,14 @@ export type ModalBlocksConfig = {
     closeButton: Record<string, any>;
     actionButtons: Record<string, any>;
   };
+  /**
+   * Queue Section Header (BB Variant 3) — shared by Next in Queue / Next Up.
+   * Separate from Theme modal `header` so top-title styles do not collide.
+   */
+  sectionHeader: {
+    title: Record<string, any>;
+    actionButtons: Record<string, any>;
+  };
   action: {
     background: Record<string, any>;
     title: Record<string, any>;
@@ -60,6 +68,10 @@ export const getEmptyModalBlocksStructure = (): ModalBlocksConfig => {
       closeButton: {},
       actionButtons: {},
     },
+    sectionHeader: {
+      title: {},
+      actionButtons: {},
+    },
     action: {
       background: {},
       title: {},
@@ -154,6 +166,8 @@ export const parseModalBlocksConfiguration = (
     "action_buttons",
   ]);
 
+  parseBlock("section_header", ["title", "action_buttons"]);
+
   parseBlock("action", [
     "background",
     "title",

package/modalState/ModalOrchestrator.ts

@@ -44,6 +44,7 @@ function menuToModalArgs(
       title: menu.header?.title ?? menu.content.title,
       summary: menu.header?.subtitle,
       styleOverrides: menu.content.styleOverrides,
+      emptyMessage: menu.content.emptyMessage,
       onPress: onItemPress,
       viewModel,
     },

package/modalState/__tests__/ModalOrchestrator.phase3.test.ts

@@ -44,4 +44,20 @@ describe("ModalOrchestrator phase 3", () => {
     expect(props.title).toBe("Sleep Timer");
     expect(props.summary).toBe("remaining");
   });
+
+  it("forwards the queue empty message onto the sheet props", () => {
+    modalOrchestrator.open({
+      header: { title: "Queue" },
+      content: {
+        title: "Queue",
+        items: [],
+        emptyMessage: "Queued items will be added here",
+      },
+    });
+
+    const props = (modalStore.getState().modalState.screen as any)
+      ?.modalBottomSheetContentProps;
+
+    expect(props.emptyMessage).toBe("Queued items will be added here");
+  });
 });

package/modalState/types.ts

@@ -118,6 +118,8 @@ export interface Content {
   dynamicCollection?: DynamicCollectionOptions;
   themePluginId?: string;
   styleOverrides?: Record<string, any>;
+  /** Shown under Next Up when the queue sheet has no upcoming items. */
+  emptyMessage?: string;
   context?: Record<string, any>;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.1334507601",
+  "version": "16.0.0-alpha.1444784746",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1334507601",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1444784746",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/pluginUtils/__tests__/pluginUtils.test.js

@@ -1,3 +1,9 @@
+const mockAppStoreGet = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockAppStoreGet(key) },
+}));
+
 import * as R from "ramda";
 import * as pluginUtils from "../index";
 
@@ -148,6 +154,32 @@ describe("findPluginByIdentifier", () => {
   });
 });
 
+describe("getPluginByIdentifier", () => {
+  const { getPluginByIdentifier } = pluginUtils;
+
+  const plugins = {
+    foo: pluginMock("foo", "foo", "some_plugin_type"),
+    bar: pluginMock("foo", "bar", "some_plugin_type"),
+  };
+
+  beforeEach(() => {
+    mockAppStoreGet.mockReset();
+  });
+
+  it("reads plugins from appStore and returns the matching plugin", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("foo")).toEqual(plugins.foo);
+    expect(mockAppStoreGet).toHaveBeenCalledWith("plugins");
+  });
+
+  it("returns undefined when the plugin is not found", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("do_not_exist")).toBeUndefined();
+  });
+});
+
 describe("findPluginByType", () => {
   const { findPluginByType } = pluginUtils;
 

package/pluginUtils/index.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { toCamelCase, toPascalCase } from "../stringUtils";
 
 import { getNavigationType } from "../navigationUtils";
@@ -97,6 +98,34 @@ export function findPluginByIdentifier(
   return plugin;
 }
 
+/**
+ * Like findPluginByIdentifier, but reads the current plugins list from appStore.
+ * Convenience for non-render / hook code that doesn't already have `plugins` in hand.
+ * @param identifier of the plugin to look for
+ * @param doNotWarn if set to true, will not log a warning if plugin is not found
+ * @return whole plugin if found, undefined otherwise
+ */
+export function getPluginByIdentifier(
+  identifier: string,
+  doNotWarn: boolean = false
+): (QuickBrickPlugin | ZappPlugin | Plugin) | undefined {
+  try {
+    const plugins = appStore.get("plugins") ?? {};
+
+    return findPluginByIdentifier(identifier, plugins, doNotWarn);
+  } catch (error) {
+    if (!doNotWarn) {
+      pluginUtilsLogger.warning({
+        message:
+          "Could not read plugins from appStore while resolving plugin by identifier",
+        data: { identifier, error },
+      });
+    }
+
+    return undefined;
+  }
+}
+
 const pluginTypeForItemTypeMap = {
   playable: "player",
 };