@applicaster/zapp-react-native-utils 16.0.0-alpha.1929433645 → 16.0.0-alpha.2105365027

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/index.ts

@@ -207,53 +207,57 @@ export function imageSrcFromMediaItem(
   return isEmpty(src) ? undefined : src;
 }
 
-/**
- * map of type checks to apply to each manifest field in order to check if
- * the provided value is valid for that given manifest type
- */
-const typeChecks = {
-  switch: R.is(Boolean),
-  checkbox: R.is(Boolean),
-  number_input: R.is(Number),
-  text_input: R.is(String),
-};
-
-/**
- * This function checks if a provided value is valid for the provided type
- * curried function of the form isInvalidForType(type)(value);
- * returns true if the value is invalid, and false if the value is ok.
- * @param {*} type
- * @returns {Function}
- * @param {Any} value to check
- * @returns {boolean}
- */
-function isInvalidForType(type: string): (arg0: any) => boolean {
-  const typeCheck = typeChecks[type] || (() => true);
-
-  return function (value: TAnyValue): boolean {
-    return !typeCheck(value);
-  };
-}
-
 /**
  * Checks if a value is valid for a provided type. Checks if the the type is correct,
  * but also if the value is not empty, not null, and not NaN
- * curried function of the form isInvalidValue(type)(value). Returns true if the value
- * is invalid, and false otherwise
+ * Returns true if the value is invalid, and false otherwise
  * @param {String} type
- * @returns {Function}
  * @param {Any} value to check for
  * @returns {boolean}
  */
 const isInvalid = (type: string, value: TAnyValue): boolean => {
-  const validators = [R.isEmpty, R.isNil, Number.isNaN, isInvalidForType(type)];
+  if (value == null || Number.isNaN(value)) {
+    return true;
+  }
 
-  return validators.some((valid) => valid(value));
-};
+  if (typeof value === "string") {
+    if (value === "") return true;
 
-function isInvalidValue(type: string): (arg0: TAnyValue) => boolean {
-  return (value) => isInvalid(type, value);
-}
+    if (type === "switch" || type === "checkbox" || type === "number_input") {
+      return true;
+    }
+
+    return false;
+  }
+
+  if (typeof value === "number") {
+    if (type === "switch" || type === "checkbox" || type === "text_input") {
+      return true;
+    }
+
+    return false;
+  }
+
+  if (typeof value === "boolean") {
+    if (type === "number_input" || type === "text_input") return true;
+
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (typeof value === "object") {
+    for (const _ in value) {
+      return false;
+    }
+
+    return true;
+  }
+
+  return false;
+};
 
 /**
  * This function will sanitize a value from a provided configuration, by trying
@@ -283,7 +287,7 @@ function castOrDefault<T>({
   ): T {
     const value = transform(configuration?.[key]);
 
-    if (isInvalidValue(type)(value) && !skipDefaults) {
+    if (isInvalid(type, value) && !skipDefaults) {
       return transform(initial_value);
     }
 
@@ -303,28 +307,32 @@ const applyRemappedKeys = (
   config: PluginConfiguration,
   remappedKeys: PluginConfiguration
 ) => {
-  const oldKeys = R.keys(remappedKeys || {});
-  const configKeys = R.keys(config);
+  if (!config || !remappedKeys) return config;
+
+  let hasAny = false;
+
+  for (const oldKey in remappedKeys) {
+    if (oldKey in config) {
+      hasAny = true;
+      break;
+    }
+  }
 
-  if (
-    !R.compose(R.length, R.intersection(oldKeys))(configKeys) ||
-    !R.length(oldKeys)
-  ) {
+  if (!hasAny) {
     return config;
   }
 
-  // need to update keys
-  return R.reduce(
-    (updatedConfig, oldKey: string) => {
-      if (R.has(oldKey, config) && !R.has(remappedKeys[oldKey], config)) {
-        return R.assoc(remappedKeys[oldKey], config[oldKey], updatedConfig);
-      }
-
-      return updatedConfig;
-    },
-    config,
-    oldKeys
-  );
+  const updatedConfig = { ...config };
+
+  for (const oldKey in remappedKeys) {
+    const newKey = remappedKeys[oldKey];
+
+    if (oldKey in config && !(newKey in config)) {
+      updatedConfig[newKey] = config[oldKey];
+    }
+  }
+
+  return updatedConfig;
 };
 
 /**
@@ -342,23 +350,19 @@ type TRemapUpdatedKeys = (
 
 export const remapUpdatedKeys = R.curry<TRemapUpdatedKeys>(
   (manifest, config) => {
-    return R.reduce(
-      (updatedConfig, configSection: string) => {
-        const remappedKeys = R.pathOr<string[] | null>(
-          null,
-          [configSection, "updated_keys"],
-          manifest
-        );
-
-        updatedConfig[configSection] = remappedKeys
-          ? applyRemappedKeys(config[configSection], remappedKeys)
-          : config[configSection];
-
-        return updatedConfig;
-      },
-      {},
-      R.keys(config)
-    );
+    if (!config) return config;
+
+    const updatedConfig: any = {};
+
+    for (const configSection in config) {
+      const remappedKeys = manifest?.[configSection]?.updated_keys;
+
+      updatedConfig[configSection] = remappedKeys
+        ? applyRemappedKeys(config[configSection], remappedKeys)
+        : config[configSection];
+    }
+
+    return updatedConfig;
   }
 );
 

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;