@applicaster/zapp-react-native-utils 15.1.15 → 15.1.16-rc.0

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

@@ -77,6 +77,94 @@ describe("openBottomSheetAction inline items", () => {
     });
   });
 
+  it("opens an empty inline collection when dynamic collection options are present", async () => {
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Queue" },
+        content: {
+          items: [],
+          emptyMessage: "Queued items will be added here",
+          dynamicCollection: {
+            operations: ["remove"],
+            provider: "@{provider/queue}",
+          },
+        },
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Success);
+
+    const [menu] = (modalOrchestrator.open as jest.Mock).mock.calls[0];
+
+    expect(menu.content.items).toEqual([]);
+    expect(menu.content.emptyMessage).toBe("Queued items will be added here");
+
+    expect(menu.content.dynamicCollection).toMatchObject({
+      operations: ["remove"],
+      provider: "@{provider/queue}",
+    });
+  });
+
+  it("accepts empty inline items when dynamic_collection_options live on extensions", async () => {
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        content: {
+          items: [],
+          extensions: {
+            dynamic_collection_options: {
+              operations: "remove,reorder",
+              provider: "@{provider/offline}",
+            },
+          },
+        },
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Success);
+
+    const [menu] = (modalOrchestrator.open as jest.Mock).mock.calls[0];
+
+    expect(menu.content.items).toEqual([]);
+
+    expect(menu.content.dynamicCollection).toMatchObject({
+      operations: ["remove", "reorder"],
+      provider: "@{provider/offline}",
+    });
+  });
+
+  it("returns an error for an empty items array with no source", async () => {
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        content: { items: [] },
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Error);
+    expect(modalOrchestrator.open).not.toHaveBeenCalled();
+  });
+
+  it("forwards content.emptyMessage onto the menu", async () => {
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Queue" },
+        content: {
+          items: [{ id: "t1", title: "Track 1" }],
+          emptyMessage: "Queued items will be added here",
+        },
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Success);
+
+    const [menu] = (modalOrchestrator.open as jest.Mock).mock.calls[0];
+
+    expect(menu.content.emptyMessage).toBe("Queued items will be added here");
+  });
+
   it("pushes a new sheet by default even when another sheet is already open", async () => {
     (modalOrchestrator as any).stackSize = 1;
 

package/actionsExecutor/actions/openBottomSheet.ts

@@ -227,7 +227,18 @@ export async function openBottomSheetAction(
 
     let dynamicCollection: DynamicCollectionOptions | undefined;
 
-    if (Array.isArray(inlineItems) && inlineItems.length > 0) {
+    const rawDynamicCollection =
+      content?.dynamicCollection ??
+      content?.extensions?.dynamic_collection_options;
+
+    // An empty items array is a valid starting state for a provider-backed or
+    // offline collection. A sheet with neither items nor a source still errors.
+    const hasDynamicCollection = Boolean(rawDynamicCollection);
+
+    if (
+      Array.isArray(inlineItems) &&
+      (inlineItems.length > 0 || hasDynamicCollection)
+    ) {
       log_info("openBottomSheet: using inline items from action options", {
         count: inlineItems.length,
       });
@@ -239,10 +250,7 @@ export async function openBottomSheetAction(
         entryToMenuItem(entry, behavior?.currentSelection ?? [])
       );
 
-      dynamicCollection = parseDynamicCollectionOptions(
-        content?.dynamicCollection ??
-          content?.extensions?.dynamic_collection_options
-      );
+      dynamicCollection = parseDynamicCollectionOptions(rawDynamicCollection);
     } else if (itemsUrl) {
       log_info(`openBottomSheet: loading items from source: ${itemsUrl}`);
 
@@ -280,6 +288,7 @@ export async function openBottomSheetAction(
         dynamicCollection,
         themePluginId,
         styleOverrides: styleOverrides ?? content?.styleOverrides,
+        emptyMessage: content?.emptyMessage,
         context,
       },
     };

package/appUtils/playerManager/OverlayObserver/__tests__/getUpcomingQueue.test.ts

@@ -0,0 +1,67 @@
+import { getUpcomingQueue } from "../getUpcomingQueue";
+
+describe("getUpcomingQueue", () => {
+  it("returns null when plugin is not provided or has no module", async () => {
+    expect(await getUpcomingQueue(undefined)).toBeNull();
+    expect(await getUpcomingQueue({} as any)).toBeNull();
+  });
+
+  it("returns null when QueueManager is not present on module", async () => {
+    const plugin = {
+      identifier: "queue-action",
+      module: {},
+    } as any;
+
+    expect(await getUpcomingQueue(plugin)).toBeNull();
+  });
+
+  it("calls setupQuickBrickQueue when QueueManager is not initialized", async () => {
+    const setupQuickBrickQueue = jest.fn();
+    const mockUpcoming = [{ id: "item_1" }];
+
+    const QueueManager = {
+      isInitialized: jest
+        .fn()
+        .mockReturnValueOnce(false)
+        .mockReturnValueOnce(true),
+      instance: {
+        getUpcomingQueue: jest.fn().mockResolvedValue(mockUpcoming),
+      },
+    };
+
+    const plugin = {
+      identifier: "queue-action",
+      module: {
+        QueueManager,
+        setupQuickBrickQueue,
+      },
+    } as any;
+
+    const result = await getUpcomingQueue(plugin);
+
+    expect(setupQuickBrickQueue).toHaveBeenCalled();
+    expect(result).toEqual(mockUpcoming);
+  });
+
+  it("returns upcoming items when QueueManager is already initialized", async () => {
+    const mockUpcoming = [{ id: "item_1" }, { id: "item_2" }];
+
+    const QueueManager = {
+      isInitialized: jest.fn().mockReturnValue(true),
+      instance: {
+        getUpcomingQueue: jest.fn().mockResolvedValue(mockUpcoming),
+      },
+    };
+
+    const plugin = {
+      identifier: "queue-action",
+      module: {
+        QueueManager,
+      },
+    } as any;
+
+    const result = await getUpcomingQueue(plugin);
+
+    expect(result).toEqual(mockUpcoming);
+  });
+});

package/appUtils/playerManager/OverlayObserver/getUpcomingQueue.ts

@@ -1,9 +1,22 @@
 export const getUpcomingQueue = async (
   plugin?: QuickBrickPlugin | ZappPlugin
 ): Promise<unknown[] | null> => {
-  const QueueManager = (plugin as any)?.module?.QueueManager;
+  const module = (plugin as any)?.module;
+  const QueueManager = module?.QueueManager;
+  const setupQuickBrickQueue = module?.setupQuickBrickQueue;
 
-  if (!QueueManager?.instance) {
+  if (!QueueManager) {
+    return null;
+  }
+
+  if (
+    !QueueManager.isInitialized?.() &&
+    typeof setupQuickBrickQueue === "function"
+  ) {
+    setupQuickBrickQueue();
+  }
+
+  if (!QueueManager.isInitialized?.()) {
     return null;
   }
 

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -205,56 +205,64 @@ describe("parseModalBlocksConfiguration", () => {
     );
   });
 
-  it("should fall back to flavor1 reorder/remove assets", () => {
+  it("should parse section_header title and action_buttons independently of header", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "playlist_experience_assets_flavor1.remove_from_playlist_asset":
-          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        "playlist_experience_assets_flavor1.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        "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,
       },
-      "playlist-experience"
+      "queue_action"
     );
 
-    expect(result.item.actionButtons.default).toEqual(
+    expect(result.sectionHeader.title.default).toEqual(
       expect.objectContaining({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        fontColor: "#ABCDEF",
+        fontSize: 13,
+        fontFamily: "SFProText-Bold",
       })
     );
-  });
 
-  it("should fall back to flavor2 reorder/remove assets", () => {
-    const result = parseModalBlocksConfiguration(
-      {
-        "playlist_experience_assets_flavor2.remove_from_playlist_asset":
-          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        "playlist_experience_assets_flavor2.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
-      },
-      "playlist-experience"
+    expect(result.sectionHeader.actionButtons.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(62, 62, 62, 1)",
+        fontColor: "#FFFFFF",
+        fontSize: 14,
+        borderRadius: 16,
+      })
     );
 
-    expect(result.item.actionButtons.default).toEqual(
+    expect(result.sectionHeader.actionButtons.focused).toEqual(
       expect.objectContaining({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        backgroundColor: "rgba(78, 78, 78, 1)",
+      })
+    );
+
+    expect(result.header.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#111111",
+        fontSize: 22,
       })
     );
   });
 
-  it("should ignore playlist-only asset keys for other theme plugins", () => {
+  it("should leave sectionHeader empty when keys are absent", () => {
     const result = parseModalBlocksConfiguration(
-      {
-        "button.create_new_playlist_asset":
-          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
-        "playlist_experience_assets_flavor1.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
-      },
-      "queue-action"
+      { "item.text_label1.font_color": "#FFFFFF" },
+      "playlist-experience"
     );
 
-    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
-    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+    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>;
@@ -63,6 +71,10 @@ export const parseModalBlocksConfiguration = (
       closeButton: {},
       actionButtons: {},
     },
+    sectionHeader: {
+      title: {},
+      actionButtons: {},
+    },
     action: {
       background: {},
       title: {},
@@ -148,6 +160,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": "15.1.15",
+  "version": "15.1.16-rc.0",
   "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": "15.1.15",
+    "@applicaster/applicaster-types": "15.1.16-rc.0",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",