@applicaster/zapp-react-native-utils 16.0.0-rc.113 → 16.0.0-rc.114

package/actionsExecutor/actions/__tests__/openBottomSheet.customContent.test.ts

@@ -60,6 +60,30 @@ describe("openBottomSheetAction custom content", () => {
     });
   });
 
+  it("passes themePluginId through to the name sheet", async () => {
+    const CustomContent = function CustomContent() {
+      return null;
+    };
+
+    await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Create New Playlist" },
+        themePluginId: "playlist-experience",
+        content: {
+          component: CustomContent,
+          props: { buttonLabel: "Create" },
+        },
+      },
+    } as any);
+
+    const args = (openBottomSheetModal as jest.Mock).mock.calls[0][0];
+
+    expect(args.modalBottomSheetContentProps.themePluginId).toBe(
+      "playlist-experience"
+    );
+  });
+
   it("returns Error when neither list data nor content.component is provided", async () => {
     const result = await openBottomSheetAction({
       type: "openBottomSheet",

package/actionsExecutor/actions/openBottomSheet.ts

@@ -212,6 +212,7 @@ export async function openBottomSheetAction(
             ...(content.props || {}),
             actionContext: context,
           },
+          themePluginId,
         },
       });
 

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

@@ -45,7 +45,7 @@ describe("playerToolbox", () => {
 
     await expect(
       loadToolbox().registerPlayerToolbox(manager(null))
-    ).resolves.toBeUndefined();
+    ).resolves.toBe(false);
   });
 
   it("does nothing when getXray returns null", async () => {
@@ -53,7 +53,7 @@ describe("playerToolbox", () => {
 
     await expect(
       loadToolbox().registerPlayerToolbox(manager(null))
-    ).resolves.toBeUndefined();
+    ).resolves.toBe(false);
   });
 
   it("swallows a failed registration", async () => {
@@ -62,7 +62,7 @@ describe("playerToolbox", () => {
 
     await expect(
       loadToolbox().registerPlayerToolbox(manager(null))
-    ).resolves.toBeUndefined();
+    ).resolves.toBe(false);
   });
 
   it("seeks to an absolute position, from the end when negative, clamped", async () => {

package/appUtils/playerManager/index.ts

@@ -397,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/playerToolbox.ts

@@ -1,4 +1,4 @@
-import { getXray } from "../../logger";
+import { registerXrayToolbox, XrayToolSpec } from "../../logger/xrayToolbox";
 import type { PlayerManager } from "./index";
 
 /**
@@ -9,25 +9,6 @@ import type { PlayerManager } from "./index";
  * 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;
 
@@ -44,7 +25,7 @@ const requireSeekable = (player: {
   return seekable;
 };
 
-const tools = (manager: PlayerManager): ToolSpec[] => {
+const tools = (manager: PlayerManager): XrayToolSpec[] => {
   const requirePlayer = () => {
     const player = manager.getActivePlayer();
 
@@ -168,25 +149,9 @@ const tools = (manager: PlayerManager): ToolSpec[] => {
   ];
 };
 
-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({
+export const registerPlayerToolbox = (manager: PlayerManager) =>
+  registerXrayToolbox({
     name: "player",
     description: "Inspect and control the active player.",
     tools: tools(manager),
-  }).catch(() => {
-    registration = undefined;
   });
-
-  return registration;
-};

package/audioPlayerUtils/__tests__/getArtworkImage.test.ts

@@ -141,4 +141,14 @@ describe("getArtworkImage", () => {
 
     expect(result).toBe(DEFAULT_IMAGE);
   });
+
+  it("returns undefined when entry explicitly sets an empty key", () => {
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: { ...entryWithImage, extensions: { artwork_key: "" } },
+      plugin_configuration: pluginConfigWithImage,
+    });
+
+    expect(result).toBeUndefined();
+  });
 });

package/audioPlayerUtils/index.ts

@@ -110,10 +110,15 @@ export const getArtworkImage = ({
   key,
   entry,
   plugin_configuration,
-}: GetArtworkImageParams): string => {
+}: GetArtworkImageParams): Option<string> => {
   // 1) image_key from extensions
   const imageKeyFromExtensions = getPropertyFromExtensions(key, entry);
 
+  // An explicitly empty key means the feed wants no artwork (background only)
+  if (imageKeyFromExtensions === "") {
+    return undefined;
+  }
+
   const imageFromExtensions = getImageFromEntry({
     entry,
     imageKey: imageKeyFromExtensions,
@@ -165,7 +170,7 @@ const AUDIO_PLAYER_ARTWORK_IMAGE_KEY = "audio_player_artwork_image_key";
 const audioPlayerArtworkImageKeySelector = (config) =>
   config?.[AUDIO_PLAYER_ARTWORK_IMAGE_KEY];
 
-export const useArtworkImage = (entry: ZappEntry): string => {
+export const useArtworkImage = (entry: ZappEntry): Option<string> => {
   const configuration = useZStore("playerConfiguration");
 
   const audio_player_artwork_image_key_value = configuration(

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -329,4 +329,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/logger/__tests__/xrayToolbox.test.ts

@@ -0,0 +1,69 @@
+const xray = require("@applicaster/quick-brick-xray");
+
+const toolbox = { name: "test", description: "", tools: [] };
+
+const load = (): typeof import("../xrayToolbox") => {
+  let module;
+
+  jest.isolateModules(() => {
+    module = require("../xrayToolbox");
+  });
+
+  return module;
+};
+
+describe("registerXrayToolbox", () => {
+  afterEach(() => {
+    delete xray.registerReactToolbox;
+  });
+
+  it("registers once per name", async () => {
+    xray.registerReactToolbox = jest.fn().mockResolvedValue(undefined);
+    const { registerXrayToolbox } = load();
+
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(true);
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(true);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+
+  it("resolves false without a toolbox API", async () => {
+    await expect(load().registerXrayToolbox(toolbox)).resolves.toBe(false);
+  });
+
+  it("keeps a failed registration instead of retrying it", async () => {
+    xray.registerReactToolbox = jest
+      .fn()
+      .mockRejectedValue(new Error("XRayToolboxBridge is not available"));
+
+    const { registerXrayToolbox } = load();
+
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(false);
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(false);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+
+  it("registers new tools under the same name again (Fast Refresh)", async () => {
+    xray.registerReactToolbox = jest.fn().mockResolvedValue(undefined);
+    const { registerXrayToolbox } = load();
+
+    await registerXrayToolbox(toolbox);
+    await registerXrayToolbox({ ...toolbox, tools: [] });
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(2);
+  });
+
+  it("stops trying every toolbox once the bridge is missing", async () => {
+    xray.registerReactToolbox = jest.fn().mockRejectedValue(new Error("no"));
+    const { registerXrayToolbox } = load();
+
+    await registerXrayToolbox(toolbox);
+
+    await expect(
+      registerXrayToolbox({ ...toolbox, name: "other" })
+    ).resolves.toBe(false);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+});

package/logger/xrayToolbox.ts

@@ -0,0 +1,67 @@
+import { getXray } from ".";
+
+/** One tool of an X-Ray React toolbox: an agent calls it by name with JSON arguments. */
+export type XrayToolSpec = {
+  name: string;
+  description: string;
+  parameters?: Array<{
+    name: string;
+    type: "number" | "string";
+    description: string;
+  }>;
+  handler: (args: Record<string, unknown>) => unknown;
+};
+
+export type XrayToolbox = {
+  name: string;
+  description: string;
+  tools: XrayToolSpec[];
+};
+
+type RegisterReactToolbox = (toolbox: XrayToolbox) => Promise<void>;
+
+const registered = new Map<
+  string,
+  { tools: XrayToolSpec[]; registration: Promise<boolean> }
+>();
+
+/** Set once a registration fails: the build has no X-Ray bridge, which cannot appear later. */
+let bridgeMissing = false;
+
+/**
+ * Registers an X-Ray React toolbox and resolves whether it is registered. The same tools are
+ * registered once; new tools under the same name (Fast Refresh re-ran the module) replace them.
+ * A build without the X-Ray native bridge (release builds) rejects the first attempt and every
+ * later call resolves false at once, so callers on hot paths pay for one attempt only.
+ */
+export const registerXrayToolbox = (toolbox: XrayToolbox): Promise<boolean> => {
+  const cached = registered.get(toolbox.name);
+
+  if (cached?.tools === toolbox.tools) return cached.registration;
+
+  if (bridgeMissing) return Promise.resolve(false);
+
+  const register = (
+    getXray() as
+      | { registerReactToolbox?: RegisterReactToolbox }
+      | null
+      | undefined
+  )?.registerReactToolbox;
+
+  const registration = register
+    ? register(toolbox).then(
+        () => true,
+        () => {
+          bridgeMissing = true;
+
+          return false;
+        }
+      )
+    : Promise.resolve(false);
+
+  if (!register) bridgeMissing = true;
+
+  registered.set(toolbox.name, { tools: toolbox.tools, registration });
+
+  return registration;
+};

package/navigationUtils/xrayNavigator.ts

@@ -0,0 +1,12 @@
+/**
+ * The app navigator for the X-Ray toolboxes (nav, screen), which run outside React. The
+ * NavigationProvider sets it after each commit; it is a plain module variable, so updating it
+ * never renders anything.
+ */
+let navigator: QuickBrickAppNavigator | undefined;
+
+export const setXrayNavigator = (value: QuickBrickAppNavigator | undefined) => {
+  navigator = value;
+};
+
+export const getXrayNavigator = () => navigator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-rc.113",
+  "version": "16.0.0-rc.114",
   "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-rc.113",
+    "@applicaster/applicaster-types": "16.0.0-rc.114",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/riverComponetsMeasurementProvider/index.tsx

@@ -34,6 +34,7 @@ type Props = {
 type ItemProps = {
   children: React.ReactNode;
   index: number;
+  testID?: string;
 };
 
 type MeasurementContext = {
@@ -153,11 +154,12 @@ export const ScreenLoadingMeasurements = ({
 export const ScreenLoadingMeasurementsListItemWrapper = ({
   children,
   index,
+  testID,
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
   return (
-    <View style={styles.container} onLayout={onLayout?.(index)}>
+    <View style={styles.container} onLayout={onLayout?.(index)} testID={testID}>
       {children}
     </View>
   );