@applicaster/zapp-react-native-utils 16.0.0-alpha.6088600543 → 16.0.0-alpha.6409114856

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -383,7 +383,45 @@ function getPlayerConfiguration({ platform, version }) {
       initial_value: "Start Over",
       type: "text_input",
     });
+  }
+
+  if (isMobile(platform)) {
+    // Screen reader strings for the audio player's playlist controls. Mobile
+    // only, because the audio player layout itself is mobile only.
+    localizations.fields.push({
+      key: "accessibility_previous_track_label",
+      label: "Accessibility previous track label",
+      initial_value: "Previous track button",
+      label_tooltip: "Label for previous track button accessibility",
+      type: "text_input",
+    });
+
+    localizations.fields.push({
+      key: "accessibility_previous_track_hint",
+      label: "Accessibility previous track hint",
+      initial_value: "Press to play the previous track",
+      label_tooltip: "Hint for previous track button accessibility",
+      type: "text_input",
+    });
+
+    localizations.fields.push({
+      key: "accessibility_next_track_label",
+      label: "Accessibility next track label",
+      initial_value: "Next track button",
+      label_tooltip: "Label for next track button accessibility",
+      type: "text_input",
+    });
 
+    localizations.fields.push({
+      key: "accessibility_next_track_hint",
+      label: "Accessibility next track hint",
+      initial_value: "Press to play the next track",
+      label_tooltip: "Hint for next track button accessibility",
+      type: "text_input",
+    });
+  }
+
+  if (isTV(platform)) {
     styles.fields.push(
       fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
         {
@@ -781,21 +819,6 @@ function getPlayerConfiguration({ platform, version }) {
       }
     );
 
-    if (
-      platform.includes("android") ||
-      platform.includes("amazon") ||
-      platform.includes("ios") ||
-      platform.includes("tvos")
-    ) {
-      general.fields.push({
-        key: "user_agent",
-        label: "User agent",
-        initial_value: "",
-        type: "text_input",
-        label_tooltip: "Override default user agent string",
-      });
-    }
-
     if (platform === "android_for_quickbrick") {
       general.fields.push({
         key: "stop_playback_on_task_removal",
@@ -1236,6 +1259,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Playback Speed 0.8x",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "speed_1",
@@ -1243,6 +1273,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Playback Speed 1x",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "speed_1_2",
@@ -1250,6 +1287,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Playback Speed 1.2x",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "speed_1_5",
@@ -1257,6 +1301,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Playback Speed 1.5x",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "speed_2",
@@ -1264,6 +1315,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Playback Speed 2x",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "sleep_timer",
@@ -1271,6 +1329,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Sleep Timer Default",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
           },
           {
             key: "sleep_timer_active",
@@ -1278,6 +1343,43 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Sleep Timer Active",
             initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playback_speed_and_sleep_timer",
+              },
+            ],
+          },
+          {
+            key: "previous_track",
+            label: "Previous Track Control Icon",
+            type: "uploader",
+            label_tooltip:
+              "Override the default Previous Track icon. Recommended size 120x120px (@3x).",
+            initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playlist_controls",
+              },
+            ],
+          },
+          {
+            key: "next_track",
+            label: "Next Track Control Icon",
+            type: "uploader",
+            label_tooltip:
+              "Override the default Next Track icon. Recommended size 120x120px (@3x).",
+            initial_value: null,
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/player_controls_layout",
+                condition_value: "playlist_controls",
+              },
+            ],
           },
         ]
       ),
@@ -2415,6 +2517,21 @@ function getPlayerConfiguration({ platform, version }) {
     );
   }
 
+  if (
+    platform.includes("android") ||
+    platform.includes("amazon") ||
+    platform.includes("ios") ||
+    platform.includes("tvos")
+  ) {
+    general.fields.push({
+      key: "user_agent",
+      label: "User agent",
+      initial_value: "",
+      type: "text_input",
+      label_tooltip: "Override default user agent string",
+    });
+  }
+
   compact([
     {
       key: "liveCatchUpEnabled",
@@ -3451,6 +3568,31 @@ function getPlayerConfiguration({ platform, version }) {
               },
             ],
           },
+          {
+            key: "player_controls_layout",
+            label: "Player Controls Layout",
+            type: "select",
+            initial_value: "playback_speed_and_sleep_timer",
+            label_tooltip:
+              "Choose which secondary controls appear in the audio player transport row.",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/full_screen_audio_player",
+                condition_value: true,
+              },
+            ],
+            options: [
+              {
+                text: "Playback Speed & Sleep Timer (Default)",
+                value: "playback_speed_and_sleep_timer",
+              },
+              {
+                text: "Playlist Controls (Previous & Next)",
+                value: "playlist_controls",
+              },
+            ],
+          },
           {
             key: "audio_player_artwork_shadow_enabled",
             label: "Image Shadow Enabled",
@@ -3522,13 +3664,13 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Advanced Player Styles",
             type: "text_input",
             multiline: true,
-            initial_value: `.vjs-text-track-cue { 
-            inset: unset !important;
-            top: 94% !important;
+            initial_value: `.vjs-text-track-cue {
+            top: auto !important;
             bottom: 0 !important;
             left: 0 !important;
-            right: 0 !important;
+            right: auto !important;
             width: 100% !important;
+            height: auto !important;
           }`,
             label_tooltip:
               "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -1,9 +1,93 @@
 const {
+  parseShorthand,
+  margin,
+  padding,
   withConditional,
   getConditionalKey,
   createConditionalField,
 } = require("..");
 
+describe("parseShorthand", () => {
+  it("1 value → all four sides equal", () => {
+    expect(parseShorthand("8")).toEqual([8, 8, 8, 8]);
+  });
+
+  it("2 values → top/bottom, right/left", () => {
+    expect(parseShorthand("0 20")).toEqual([0, 20, 0, 20]);
+  });
+
+  it("3 values → top, right/left, bottom", () => {
+    expect(parseShorthand("0 0 20")).toEqual([0, 0, 20, 0]);
+  });
+
+  it("4 values → top right bottom left", () => {
+    expect(parseShorthand("1 2 3 4")).toEqual([1, 2, 3, 4]);
+  });
+
+  it("throws on invalid count", () => {
+    expect(() => parseShorthand("1 2 3 4 5")).toThrow();
+  });
+});
+
+describe("margin", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = margin("margin", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "margin top",
+      "margin right",
+      "margin bottom",
+      "margin left",
+    ]);
+  });
+
+  it("sets type to number_input", () => {
+    margin("margin", { mobile: "0" }).forEach((f) => {
+      expect(f.type).toBe("number_input");
+    });
+  });
+
+  it("expands shorthand per platform", () => {
+    const fields = margin("margin", { mobile: "0 0 20", tv: "0 0 90" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+    expect(byKey["margin top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["margin bottom"].initialValue).toEqual({ mobile: 20, tv: 90 });
+    expect(byKey["margin left"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+
+  it("supports a custom suffix prefix", () => {
+    const fields = margin("input margin", { mobile: "4" });
+    expect(fields[0].suffix).toBe("input margin top");
+  });
+});
+
+describe("padding", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = padding("padding", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "padding top",
+      "padding right",
+      "padding bottom",
+      "padding left",
+    ]);
+  });
+
+  it("expands 2-value shorthand symmetrically", () => {
+    const fields = padding("padding", { mobile: "0 20", tv: "0 124" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+
+    expect(byKey["padding right"].initialValue).toEqual({
+      mobile: 20,
+      tv: 124,
+    });
+
+    expect(byKey["padding left"].initialValue).toEqual({ mobile: 20, tv: 124 });
+    expect(byKey["padding top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["padding bottom"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+});
+
 describe("manifestUtils/fieldUtils", () => {
   it("appends conditions and adds all_conditions when there is more than one condition", () => {
     const config = {

package/manifestUtils/fieldUtils/index.js

@@ -1,3 +1,121 @@
+const { ZAPPIFEST_FIELDS } = require("../keys");
+const { toCamelCase } = require("../_internals");
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+/**
+ * Parses a CSS margin/padding shorthand string into [top, right, bottom, left].
+ *
+ * 1 value  → all four sides
+ * 2 values → top/bottom, right/left
+ * 3 values → top, right/left, bottom
+ * 4 values → top, right, bottom, left
+ *
+ * @param {string} str
+ * @returns {[number, number, number, number]}
+ */
+function parseShorthand(str) {
+  const parts = String(str).trim().split(/\s+/).map(Number);
+
+  switch (parts.length) {
+    case 1:
+      return [parts[0], parts[0], parts[0], parts[0]];
+    case 2:
+      return [parts[0], parts[1], parts[0], parts[1]];
+    case 3:
+      return [parts[0], parts[1], parts[2], parts[1]];
+    case 4:
+      return parts;
+    default:
+      throw new Error(
+        `Shorthand expects 1–4 space-separated values, got ${parts.length}: "${str}"`
+      );
+  }
+}
+
+function spacingFields(prefix, initialValues) {
+  const platforms = Object.keys(initialValues);
+
+  const parsed = Object.fromEntries(
+    platforms.map((p) => [p, parseShorthand(initialValues[p])])
+  );
+
+  return SIDES.map((side, i) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+    initialValue: Object.fromEntries(platforms.map((p) => [p, parsed[p][i]])),
+  }));
+}
+
+/**
+ * Generates four margin field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "margin"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 0 20", tv: "0 0 90" }
+ * @returns {object[]}
+ */
+function margin(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Generates four padding field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "padding"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 20", tv: "0 124" }
+ * @returns {object[]}
+ */
+function padding(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Returns a flat camelCase defaults object for a spacing shorthand.
+ * e.g. marginDefaults("margin", "0 0 20") → { marginTop: 0, marginRight: 0, marginBottom: 20, marginLeft: 0 }
+ *
+ * @param {string} suffix - e.g. "margin" or "padding"
+ * @param {string} shorthand - CSS-like shorthand string
+ * @returns {Record<string, number>}
+ */
+function spacingDefaults(suffix, shorthand) {
+  const values = parseShorthand(shorthand);
+
+  return Object.fromEntries(
+    SIDES.map((side, i) => [toCamelCase(`${suffix} ${side}`), values[i]])
+  );
+}
+
+function marginDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+function paddingDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+/**
+ * Returns four field descriptors (top/right/bottom/left) with only suffix and type — no initialValue.
+ * Used when defaults are stored separately in the subgroup spec.
+ *
+ * @param {string} prefix - e.g. "margin" or "padding"
+ * @returns {object[]}
+ */
+function marginFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
+function paddingFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
 /**
  * Appends new conditional_fields from conditions array
  * to config.conditional_fields
@@ -48,6 +166,13 @@ function createConditionalField(key, condition_value, category = "styles") {
 }
 
 module.exports = {
+  parseShorthand,
+  margin,
+  padding,
+  marginDefaults,
+  paddingDefaults,
+  marginFields,
+  paddingFields,
   withConditional,
   getConditionalKey,
   createConditionalField,

package/manifestUtils/keys.js

@@ -631,6 +631,14 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "margin left",
   },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
 ];
 
 const TV_MENU_LABEL_FIELDS = [

package/manifestUtils/mobileAction/button/index.js

@@ -129,6 +129,22 @@ function mobileActionButton({ label, description, defaults, isFirstButton }) {
       conditions.push(createConditionalField(labelEnabledKey, true));
     }
 
+    const assetAlignmentKey = keyPrefixGenerator("asset_alignment");
+
+    // horizontal_gutter fields depends on [asset_alignment: left or asset_alignment: right]
+    if (isKeyHasSuffix("horizontal_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["left", "right"])
+      );
+    }
+
+    // vertical_gutter fields depends on [asset_alignment: above or asset_alignment: below]
+    if (isKeyHasSuffix("vertical_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["above", "below"])
+      );
+    }
+
     return withConditional(conditions)(field);
   });
 

package/manifestUtils/mobileAction/container/index.js

@@ -49,7 +49,9 @@ function mobileActionButtonsContainer({ label, description, defaults }) {
 
     // over_image_position depends on [positionKey: over_image]
     if (isKeyHasSuffix("over_image_position", key)) {
-      conditions.push(createConditionalField(positionKey, "over_image"));
+      conditions.push(
+        createConditionalField(positionKey, defaults.position[0])
+      );
     }
 
     // horizontal_gutter depends on [stackingKey: horizontal]

package/manifestUtils/mobileAction/groups/defaults.js

@@ -33,7 +33,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   assetHeight: 24,
   assetWidth: 24,
   assetMarginTop: 0,
-  assetMarginRight: 6,
+  assetMarginRight: 0,
   assetMarginBottom: 0,
   assetMarginLeft: 0,
   labelEnabled: true,
@@ -50,6 +50,8 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
+  horizontalGutter: 8,
+  verticalGutter: 8,
 };
 
 const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {

package/numberUtils/__tests__/isMinusZero.test.ts

@@ -0,0 +1,20 @@
+import { isMinusZero } from "..";
+
+describe("isMinusZero", () => {
+  it("return true for minus zero", () => {
+    expect(isMinusZero(-0)).toBe(true);
+  });
+
+  it("return false for positive zero", () => {
+    expect(isMinusZero(0)).toBe(false);
+  });
+
+  it("return false for non-zero numbers", () => {
+    const inputs = [-1, 1, 100, 0.1, -0.1, Infinity, -Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isMinusZero(input)).toBe(false);
+    });
+  });
+});

package/numberUtils/__tests__/isZero.test.ts

@@ -0,0 +1,27 @@
+import { isZero } from "..";
+
+describe("isZero", () => {
+  it("return true for zero and minus zero", () => {
+    expect(isZero(0)).toBe(true);
+    expect(isZero(-0)).toBe(true);
+  });
+
+  it("return false for non-zero numbers", () => {
+    const inputs = [-1, 1, 100, 0.1, -0.1, Infinity, -Infinity, NaN];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isZero(input)).toBe(false);
+    });
+  });
+
+  it("return false for non-number values", () => {
+    const inputs = ["0", "-0", null, undefined, "", {}, [], false, true];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isZero(input)).toBe(false);
+    });
+  });
+});

package/numberUtils/__tests__/requireNumber.test.ts

@@ -0,0 +1,50 @@
+import { requireNumber } from "..";
+
+describe("requireNumber", () => {
+  it("return number if object key holds a number", () => {
+    const inputs = [-1, 1, 100, 0.2];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = requireNumber({ value: input }, "value");
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if object key holds a string as number", () => {
+    const inputs = ["-1", "1", "100", "0.2"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = requireNumber({ value: input }, "value");
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return null if object key holds zero", () => {
+    expect(requireNumber({ value: 0 }, "value")).toBeNull();
+    expect(requireNumber({ value: "0" }, "value")).toBeNull();
+  });
+
+  it("return null if object key is missing or not a number", () => {
+    const cases = [
+      [{}, "value"],
+      [{ value: null }, "value"],
+      [{ value: undefined }, "value"],
+      [{ value: NaN }, "value"],
+      [{ value: "" }, "value"],
+      [{ value: "vfdvf" }, "value"],
+      [{ value: {} }, "value"],
+      [{ value: [] }, "value"],
+      [null, "value"],
+      [undefined, "value"],
+    ] as const;
+
+    expect.assertions(cases.length);
+
+    cases.forEach(([obj, key]) => {
+      const output = requireNumber(obj, key);
+      expect(output).toBeNull();
+    });
+  });
+});

package/numberUtils/__tests__/toNumber.test.ts

@@ -21,6 +21,33 @@ describe("toNumber", () => {
     });
   });
 
+  it("return number if input is boxed string as number", () => {
+    const inputs = [
+      new String("-1"),
+      new String("0"),
+      new String("1"),
+      Object("100"),
+      Object("0.2"),
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumber(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return undefined if input is invalid boxed string", () => {
+    const inputs = [new String("vfdvf"), new String("5n"), Object("")];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumber(input);
+      expect(output).toBeUndefined();
+    });
+  });
+
   it("return undefined if input is not a number", () => {
     const inputs = [
       "vfdvf",