@applicaster/zapp-react-native-utils 16.0.0-rc.80 → 16.0.0-rc.81

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -176,6 +176,27 @@ describe("getAllSpecificStyles", () => {
       });
     });
 
+    it("should normalize Studio focus alias onto focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focus_background_color: "#FF3B30",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles.focused).toEqual({
+        backgroundColor: "#FF3B30",
+      });
+
+      expect(outStyles.focus).toBeUndefined();
+    });
+
     it("should handle selected state", () => {
       const outStyles = {};
 

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -104,4 +104,157 @@ describe("parseModalBlocksConfiguration", () => {
     expect(result.button.title).toEqual({ default: {} });
     expect(result.action.leadingIcon).toEqual({ default: {} });
   });
+
+  it("should map Studio item.background.focus.* onto focused state", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.background.default.background_color": "transparent",
+        "item.background.focus.background_color": "#FF3B30",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.background.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "transparent",
+      })
+    );
+
+    expect(result.item.background.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "#FF3B30",
+      })
+    );
+  });
+
+  it("should accept Studio text_label1 keys without underscore before digit", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.font_color": "#00FF00",
+        "item.text_label1.font_size": 28,
+        "item.text_label2.font_color": "#00FFFF",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FF00",
+        fontSize: 28,
+      })
+    );
+
+    expect(result.item.textLabel2.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FFFF",
+      })
+    );
+  });
+
+  it("should map button.create_new_playlist_asset onto leadingIcon.asset", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      })
+    );
+  });
+
+  it("should map item.checkbox_asset and checked_checkbox_asset onto item.checkbox", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "item.checked_checkbox_asset":
+          "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.checkbox.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      })
+    );
+  });
+
+  it("should map reorder/remove Studio assets onto item.actionButtons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "reorder_playlist_item.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor1 reorder/remove assets", () => {
+    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",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  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.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should ignore playlist-only asset keys for other theme plugins", () => {
+    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"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+  });
 });

package/configurationUtils/manifestKeyParser.ts

@@ -11,11 +11,17 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
+// Do not change the order: focused_selected must be first, and "focus" must
+// come *after* "focused". Matching uses startsWith(state + "_"), so putting
+// "focus" first would steal focused_* / focused_selected_* keys. Adding
+// "focus" here affects every getAllSpecificStyles consumer (not only modals);
+// property names that themselves start with focus_ (e.g. focus_font_color as
+// a non-state style) would also be classified as the focus state.
 const states = [
   "focused_selected",
   "pressed",
   "focused",
+  "focus",
   "selected",
   "default",
 ];
@@ -112,6 +118,11 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
+    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
+    if (state === "focus") {
+      state = "focused";
+    }
+
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);

package/configurationUtils/modalBlocksParser.ts

@@ -25,6 +25,10 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    /** Studio item.checkbox_asset / item.checked_checkbox_asset */
+    checkbox?: Record<string, any>;
+    /** Studio reorder/remove icons for Edit Order rows */
+    actionButtons?: Record<string, any>;
   };
   nowPlayingItem?: {
     background: Record<string, any>;
@@ -37,6 +41,8 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    checkbox?: Record<string, any>;
+    actionButtons?: Record<string, any>;
   };
   button: {
     background: Record<string, any>;
@@ -75,6 +81,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     nowPlayingItem: {
       background: {},
@@ -87,6 +95,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     button: {
       background: {},
@@ -152,8 +162,12 @@ export const parseModalBlocksConfiguration = (
     "now_playing_container",
     "now_playing_asset",
     "now_playing_label",
+    // Underscored form (QB convention) and Studio/manifest-generator form
+    // without the underscore before the digit (text_label1).
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -167,6 +181,8 @@ export const parseModalBlocksConfiguration = (
     "now_playing_label",
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -174,5 +190,107 @@ export const parseModalBlocksConfiguration = (
 
   parseBlock("button", ["background", "title", "icons", "leading_icon"]);
 
+  // Playlist-experience Studio keys live in this shared parser because modal
+  // blocks are themed by themePluginId. Gate them so other plugins are not
+  // affected by playlist-only asset names.
+  const isPlaylistExperience =
+    normalizedComponentName === "playlist_experience";
+
+  // Studio uploads Create New icon as button.create_new_playlist_asset (not
+  // button.leading_icon.asset). Map it onto leadingIcon so AudioPlayerButton
+  // can override the hardcoded action-type asset.
+  const createNewPlaylistAsset = isPlaylistExperience
+    ? configuration["button.create_new_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_button_create_new_playlist_asset`
+      ]
+    : undefined;
+
+  if (createNewPlaylistAsset) {
+    if (!result.button.leadingIcon.default) {
+      result.button.leadingIcon.default = {};
+    }
+
+    result.button.leadingIcon.default.asset = createNewPlaylistAsset;
+  }
+
+  // Studio checkbox assets are top-level item.* keys (not a parseBlock
+  // sub-component). Map onto item.checkbox so multiSelect can render them.
+  const checkboxAsset =
+    configuration["item.checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checkbox_asset`];
+
+  const checkedCheckboxAsset =
+    configuration["item.checked_checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checked_checkbox_asset`];
+
+  if (checkboxAsset || checkedCheckboxAsset) {
+    if (!result.item.checkbox.default) {
+      result.item.checkbox.default = {};
+    }
+
+    if (checkboxAsset) {
+      result.item.checkbox.default.asset = checkboxAsset;
+    }
+
+    if (checkedCheckboxAsset) {
+      result.item.checkbox.default.checkedAsset = checkedCheckboxAsset;
+    }
+  }
+
+  // Edit Order row icons: prefer reorder_playlist_item.*, then flavor1, then
+  // flavor2 playlist_experience_assets_* (playlist-experience theme only).
+  const removeAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.remove_from_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_remove_from_playlist_asset`
+      ]
+    : undefined;
+
+  const dragAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.reorder_handle_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_reorder_handle_asset`
+      ]
+    : undefined;
+
+  if (removeAsset || dragAsset) {
+    if (!result.item.actionButtons.default) {
+      result.item.actionButtons.default = {};
+    }
+
+    if (removeAsset) {
+      result.item.actionButtons.default.removeAsset = removeAsset;
+    }
+
+    if (dragAsset) {
+      result.item.actionButtons.default.dragAsset = dragAsset;
+    }
+  }
+
   return result;
 };

package/package.json

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