@applicaster/zapp-react-native-utils 16.0.0-rc.6 → 16.0.0-rc.60

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",
+              },
+            ],
           },
         ]
       ),
@@ -1294,6 +1396,35 @@ function getPlayerConfiguration({ platform, version }) {
             type: "switch",
             label_tooltip: "Select whether you want to display title in player",
           },
+          {
+            section: "title",
+            key: "title_data_key_source",
+            label: "Title data key",
+            initial_value: "title",
+            type: "select",
+            options: [
+              { text: "Title", value: "title" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the player content title. Keep 'Title' to use the entry title",
+          },
+          {
+            section: "title",
+            key: "title_custom_data_key",
+            label: "Custom title data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/title_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_name. Falls back to the entry title if the key is empty or missing",
+          },
           {
             section: "title",
             key: "title_font_android",
@@ -1701,6 +1832,35 @@ function getPlayerConfiguration({ platform, version }) {
             label_tooltip:
               "Select whether you want to display subtitle in player",
           },
+          {
+            section: "subtitle",
+            key: "subtitle_data_key_source",
+            label: "Subtitle data key",
+            initial_value: "summary",
+            type: "select",
+            options: [
+              { text: "Subtitle", value: "summary" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the player content subtitle. Keep 'Subtitle' to use the entry summary",
+          },
+          {
+            section: "subtitle",
+            key: "subtitle_custom_data_key",
+            label: "Custom subtitle data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/subtitle_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_subtitle. Falls back to the entry summary if the key is empty or missing",
+          },
           {
             section: "subtitle",
             key: "subtitle_font_android",
@@ -2415,6 +2575,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",
@@ -2850,6 +3025,33 @@ function getPlayerConfiguration({ platform, version }) {
         "Video Player - Title Text",
         "Video Player Title Text Label Styles",
         [
+          {
+            key: "video_player_title_data_key_source",
+            label: "Video title data key",
+            initial_value: "title",
+            type: "select",
+            options: [
+              { text: "Title", value: "title" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the video player title. Keep 'Title' to use the entry title",
+          },
+          {
+            key: "video_player_title_custom_data_key",
+            label: "Custom video title data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/video_player_title_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_name. Falls back to the entry title if the key is empty or missing",
+          },
           {
             key: "player_title_color",
             label: "Font color",
@@ -2935,6 +3137,33 @@ function getPlayerConfiguration({ platform, version }) {
         "Video Player - Summary Text",
         "Video Player Summary Text Label Styles",
         [
+          {
+            key: "video_player_summary_data_key_source",
+            label: "Video summary data key",
+            initial_value: "summary",
+            type: "select",
+            options: [
+              { text: "Summary", value: "summary" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the video player summary. Keep 'Summary' to use the entry summary",
+          },
+          {
+            key: "video_player_summary_custom_data_key",
+            label: "Custom video summary data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/video_player_summary_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_subtitle. Falls back to the entry summary if the key is empty or missing",
+          },
           {
             key: "player_summary_color",
             label: "Font color",
@@ -3020,6 +3249,33 @@ function getPlayerConfiguration({ platform, version }) {
         "Audio Player - Title Text",
         "Audio Player Title Text Label Styles",
         [
+          {
+            key: "audio_player_title_data_key_source",
+            label: "Audio title data key",
+            initial_value: "title",
+            type: "select",
+            options: [
+              { text: "Title", value: "title" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the audio player title. Keep 'Title' to use the entry title",
+          },
+          {
+            key: "audio_player_title_custom_data_key",
+            label: "Custom audio title data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/audio_player_title_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_name. Falls back to the entry title if the key is empty or missing",
+          },
           {
             key: "audio_player_title_color",
             label: "Audio player title color",
@@ -3105,6 +3361,33 @@ function getPlayerConfiguration({ platform, version }) {
         "Audio Player - Summary Text",
         "Audio Player Summary Text Label Styles",
         [
+          {
+            key: "audio_player_summary_data_key_source",
+            label: "Audio summary data key",
+            initial_value: "summary",
+            type: "select",
+            options: [
+              { text: "Summary", value: "summary" },
+              { text: "Other", value: "other" },
+            ],
+            label_tooltip:
+              "Select which feed data key provides the audio player summary. Keep 'Summary' to use the entry summary",
+          },
+          {
+            key: "audio_player_summary_custom_data_key",
+            label: "Custom audio summary data key",
+            initial_value: "",
+            type: "text_input",
+            rules: "conditional",
+            conditional_fields: [
+              {
+                key: "styles/audio_player_summary_data_key_source",
+                condition_value: "other",
+              },
+            ],
+            label_tooltip:
+              "Data key on the feed entry, dot notation supported, for example extensions.episode_subtitle. Falls back to the entry summary if the key is empty or missing",
+          },
           {
             key: "audio_player_summary_color",
             label: "Audio player summary color",
@@ -3451,6 +3734,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 +3830,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,