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

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/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", "", [
         {
@@ -1221,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",
@@ -1228,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",
@@ -1235,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",
@@ -1242,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",
@@ -1249,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",
@@ -1256,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",
@@ -1263,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",
+              },
+            ],
           },
         ]
       ),
@@ -1279,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",
@@ -1686,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",
@@ -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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-rc.59",
+  "version": "16.0.0-rc.60",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.59",
+    "@applicaster/applicaster-types": "16.0.0-rc.60",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",