@applicaster/zapp-react-native-utils 16.0.0-rc.7 → 16.0.0-rc.71

package/manifestUtils/__tests__/player.audioControls.test.js

@@ -0,0 +1,158 @@
+const { player } = require("../defaultManifestConfigurations/player");
+
+const manifestFor = (platform) => player({ platform, version: "0.0.0" });
+
+const findGroup = (manifest, label) =>
+  manifest.styles.fields.find((group) => group.group && group.label === label);
+
+const findFieldInGroup = (manifest, label, key) =>
+  findGroup(manifest, label)?.fields?.find((field) => field.key === key);
+
+const findLocalization = (manifest, key) =>
+  manifest.localizations.fields.find((field) => field.key === key);
+
+describe("player manifest — audio playlist controls", () => {
+  const manifest = manifestFor("ios_for_quickbrick");
+
+  describe("Player Controls Layout", () => {
+    const field = () =>
+      findFieldInGroup(manifest, "Audio Player", "player_controls_layout");
+
+    it("is declared in the Audio Player group", () => {
+      expect(field()).toBeDefined();
+    });
+
+    it("is a select defaulting to the existing controls", () => {
+      expect(field().type).toBe("select");
+      expect(field().initial_value).toBe("playback_speed_and_sleep_timer");
+    });
+
+    it("only shows when the audio player layout is in use", () => {
+      expect(field()).toMatchObject({
+        rules: "conditional",
+        conditional_fields: [
+          { key: "styles/full_screen_audio_player", condition_value: true },
+        ],
+      });
+    });
+
+    it("offers exactly the two documented options", () => {
+      expect(field().options).toEqual([
+        {
+          text: "Playback Speed & Sleep Timer (Default)",
+          value: "playback_speed_and_sleep_timer",
+        },
+        {
+          text: "Playlist Controls (Previous & Next)",
+          value: "playlist_controls",
+        },
+      ]);
+    });
+  });
+
+  describe("control icons", () => {
+    it.each(["previous_track", "next_track"])(
+      "declares %s as an uploader",
+      (key) => {
+        expect(findFieldInGroup(manifest, "Assets", key)).toMatchObject({
+          key,
+          type: "uploader",
+        });
+      }
+    );
+
+    it.each(["previous_track", "next_track"])(
+      "only shows %s when the playlist controls layout is selected",
+      (key) => {
+        expect(findFieldInGroup(manifest, "Assets", key)).toMatchObject({
+          rules: "conditional",
+          conditional_fields: [
+            {
+              key: "styles/player_controls_layout",
+              condition_value: "playlist_controls",
+            },
+          ],
+        });
+      }
+    );
+
+    it.each([
+      "speed_0_8",
+      "speed_1",
+      "speed_1_2",
+      "speed_1_5",
+      "speed_2",
+      "sleep_timer",
+      "sleep_timer_active",
+    ])(
+      "only shows %s when the playback speed and sleep timer layout is selected",
+      (key) => {
+        expect(findFieldInGroup(manifest, "Assets", key)).toMatchObject({
+          rules: "conditional",
+          conditional_fields: [
+            {
+              key: "styles/player_controls_layout",
+              condition_value: "playback_speed_and_sleep_timer",
+            },
+          ],
+        });
+      }
+    );
+  });
+
+  describe("accessibility strings", () => {
+    it.each([
+      "accessibility_previous_track_label",
+      "accessibility_previous_track_hint",
+      "accessibility_next_track_label",
+      "accessibility_next_track_hint",
+    ])("declares %s with a default", (key) => {
+      expect(findLocalization(manifest, key)).toMatchObject({
+        type: "text_input",
+      });
+
+      expect(findLocalization(manifest, key).initial_value).toBeTruthy();
+    });
+  });
+
+  describe("tv platforms", () => {
+    // The audio player layout is mobile only, so nothing this feature adds —
+    // including its screen reader strings — belongs in a tv manifest.
+    it.each(["tvos_for_quickbrick", "android_tv_for_quickbrick", "lg_tv"])(
+      "adds no audio controls layout field on %s",
+      (platform) => {
+        expect(
+          findFieldInGroup(
+            manifestFor(platform),
+            "Audio Player",
+            "player_controls_layout"
+          )
+        ).toBeUndefined();
+      }
+    );
+
+    it.each([
+      "accessibility_previous_track_label",
+      "accessibility_previous_track_hint",
+      "accessibility_next_track_label",
+      "accessibility_next_track_hint",
+    ])("does not declare %s on tv", (key) => {
+      expect(
+        findLocalization(manifestFor("tvos_for_quickbrick"), key)
+      ).toBeUndefined();
+    });
+
+    it("still declares the tv-only localizations", () => {
+      expect(
+        findLocalization(
+          manifestFor("tvos_for_quickbrick"),
+          "back_to_live_label"
+        )
+      ).toBeDefined();
+
+      expect(
+        findLocalization(manifestFor("tvos_for_quickbrick"), "start_over_label")
+      ).toBeDefined();
+    });
+  });
+});

package/manifestUtils/_internals/index.js

@@ -157,6 +157,10 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
 
         if (conditions) {
           generatedField.conditional_fields = conditions.map((condition) => {
+            if (condition.section === null) {
+              return { key: condition.key, condition_value: condition.value };
+            }
+
             const section = condition.section ? `${condition.section}/` : "";
 
             return {
@@ -164,6 +168,8 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
               condition_value: condition.value,
             };
           });
+
+          generatedField.rules = "all_conditions";
         }
 
         return generatedField;

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -308,6 +308,41 @@ const generalContent = () => ({
         key: "pull_to_refresh_enabled",
         initial_value: false,
       },
+      {
+        type: "switch",
+        label: "Allow using this screen as a hook",
+        label_tooltip:
+          "Make sure that screen uses 'finishHook' action or performs navigation action to exit the screen after performing the hook action, or user will be stuck on the screen", // eslint-disable-line max-len
+        key: "available_as_hook",
+        initial_value: false,
+      },
+      {
+        type: "data_source_selector",
+        label: "Skip hook endpoint",
+        key: "skip_hook_endpoint",
+        label_tooltip:
+          "If set, this endpoint will check with the server whether the hook should be skipped",
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
+      {
+        key: "skip_hook_storage_key",
+        type: "text_input",
+        label: "Hook will be skipped if storage key is set",
+        initial_value: "",
+        label_tooltip:
+          "Comma-separated keys in namespace.key format (key without a dot uses the default namespace)", // eslint-disable-line max-len
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
     ],
   },
 });

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.",