@applicaster/zapp-react-native-utils 16.0.0-alpha.9235607812 → 16.0.0-alpha.9338540010

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

@@ -257,6 +257,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 +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/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();
   });

package/localizationUtils/index.ts

@@ -28,17 +28,23 @@ const RTL_LOCALES = [
   "yi", // Yiddish
 ];
 
+// The strings for the UI language, else the first language present
+export const getLocalizedStrings = (
+  localizations = {},
+  languageCode = getUILanguage()
+) =>
+  localizations?.[languageCode] ||
+  Object.values(localizations).find(
+    (value) => typeof value === "object" && value !== null
+  ) ||
+  {};
+
 export function useLocalizedStrings({ localizations = {} }) {
   const languageCode = getUILanguage();
 
   // TODO: probably we can call getLocalizations here from localizationsHelper.js
   const result = useMemo(
-    () =>
-      localizations?.[languageCode] ||
-      Object.values(localizations).find(
-        (value) => typeof value === "object" && value !== null
-      ) ||
-      {},
+    () => getLocalizedStrings(localizations, languageCode),
     [languageCode, localizations]
   );
 

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/manifestUtils/defaultManifestConfigurations/player.js

@@ -830,6 +830,14 @@ function getPlayerConfiguration({ platform, version }) {
         type: "switch",
         label_tooltip:
           "Enable this option to have a floating video player when the app is in the background.",
+      },
+      {
+        key: "vertical_video_player",
+        label: "Vertical video mode",
+        initial_value: false,
+        type: "switch",
+        label_tooltip:
+          "Enable this option to use the vertical video player layout.",
       }
     );
 

package/manifestUtils/keys.js

@@ -412,6 +412,12 @@ const mobileActionButtonContainerFields = (positionOptions) => [
     type: ZAPPIFEST_FIELDS.switch,
     suffix: "buttons enabled",
   },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "cell navigation enabled",
+    label_tooltip:
+      "Controls whether tapping on the cell (outside the buttons) triggers its navigation behavior. When disabled, only the configured buttons are interactive. Useful for Home screens (tap anywhere to open) vs. Details screens (only buttons should work).",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "position",
@@ -472,7 +478,6 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     suffix: "assign action",
     options: [
       { text: "primary navigation", value: "navigation_action" },
-      { text: "secondary navigation", value: "secondary_navigation" },
       { text: "favorite", value: "local_storage_favourites_action" },
       { text: "more", value: "open-modal-bottom-sheet-cell-action" },
       { text: "add to calendar", value: "add_to_calendar_action" },

package/manifestUtils/mobileAction/container/__tests__/mobileActionButtonsContainer.test.js

@@ -7,6 +7,7 @@ describe("mobileActionButtonsContainer", () => {
       description: "container",
       defaults: {
         buttonsEnabled: false,
+        cellNavigationEnabled: false,
         position: ["over_image", "text_label_1", "text_label_2"],
         align: "left",
         overImagePosition: "bottom_left",
@@ -31,6 +32,26 @@ describe("mobileActionButtonsContainer", () => {
     expect(enabledField).toBeTruthy();
     expect(enabledField.type).toBe("switch");
 
+    const cellNavigationField = result.fields.find(
+      (field) =>
+        field.key === "mobile_buttons_container_cell_navigation_enabled"
+    );
+
+    expect(cellNavigationField).toMatchObject({
+      type: "switch",
+      label: "Cell navigation enabled",
+      initial_value: false,
+      label_tooltip: expect.stringContaining(
+        "Controls whether tapping on the cell"
+      ),
+      conditional_fields: [
+        {
+          key: "styles/mobile_buttons_container_buttons_enabled",
+          condition_value: true,
+        },
+      ],
+    });
+
     const positionField = result.fields.find(
       (field) => field.key === "mobile_buttons_container_position"
     );

package/manifestUtils/mobileAction/groups/__tests__/buildMobileActionButtonGroups.test.js

@@ -67,7 +67,7 @@ describe("buildMobileActionButtonGroups", () => {
     );
 
     expect(button2EnabledField.initial_value).toBe(false);
-    expect(button2AssignActionField.initial_value).toBe("secondary_navigation");
+    expect(button2AssignActionField.initial_value).toBe("trailer_action");
 
     const button3Fields = groups[3].fields;
 

package/manifestUtils/mobileAction/groups/defaults.js

@@ -1,5 +1,6 @@
 const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
   buttonsEnabled: false,
+  cellNavigationEnabled: false,
 
   align: "left",
   overImagePosition: "bottom_left",
@@ -63,7 +64,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
   },
   2: {
     buttonEnabled: false,
-    assignAction: "secondary_navigation",
+    assignAction: "trailer_action",
   },
   3: {
     buttonEnabled: false,