@applicaster/zapp-react-native-utils 16.0.0-alpha.5439705823 → 16.0.0-alpha.5530459253

package/configurationUtils/modalBlocksParser.ts

@@ -0,0 +1,178 @@
+import { getAllSpecificStyles } from "./manifestKeyParser";
+
+export type ModalBlocksConfig = {
+  header: {
+    container: Record<string, any>;
+    title: Record<string, any>;
+    closeButton: Record<string, any>;
+    actionButtons: Record<string, any>;
+  };
+  action: {
+    background: Record<string, any>;
+    title: Record<string, any>;
+    icons: Record<string, any>;
+    leadingIcon: Record<string, any>;
+    trailingIcon: Record<string, any>;
+  };
+  item: {
+    background: Record<string, any>;
+    image: Record<string, any>;
+    nowPlayingContainer: Record<string, any>;
+    nowPlayingAsset: Record<string, any>;
+    nowPlayingLabel: Record<string, any>;
+    textLabel1: Record<string, any>;
+    textLabel2: Record<string, any>;
+    buttonsContainer: Record<string, any>;
+    button1: Record<string, any>;
+    button2: Record<string, any>;
+  };
+  nowPlayingItem?: {
+    background: Record<string, any>;
+    image: Record<string, any>;
+    nowPlayingContainer: Record<string, any>;
+    nowPlayingAsset: Record<string, any>;
+    nowPlayingLabel: Record<string, any>;
+    textLabel1: Record<string, any>;
+    textLabel2: Record<string, any>;
+    buttonsContainer: Record<string, any>;
+    button1: Record<string, any>;
+    button2: Record<string, any>;
+  };
+  button: {
+    background: Record<string, any>;
+    title: Record<string, any>;
+    icons: Record<string, any>;
+    leadingIcon: Record<string, any>;
+  };
+};
+
+export const parseModalBlocksConfiguration = (
+  configuration: Record<string, any>,
+  componentName: string
+): ModalBlocksConfig => {
+  const result: ModalBlocksConfig = {
+    header: {
+      container: {},
+      title: {},
+      closeButton: {},
+      actionButtons: {},
+    },
+    action: {
+      background: {},
+      title: {},
+      icons: {},
+      leadingIcon: {},
+      trailingIcon: {},
+    },
+    item: {
+      background: {},
+      image: {},
+      nowPlayingContainer: {},
+      nowPlayingAsset: {},
+      nowPlayingLabel: {},
+      textLabel1: {},
+      textLabel2: {},
+      buttonsContainer: {},
+      button1: {},
+      button2: {},
+    },
+    nowPlayingItem: {
+      background: {},
+      image: {},
+      nowPlayingContainer: {},
+      nowPlayingAsset: {},
+      nowPlayingLabel: {},
+      textLabel1: {},
+      textLabel2: {},
+      buttonsContainer: {},
+      button1: {},
+      button2: {},
+    },
+    button: {
+      background: {},
+      title: {},
+      icons: {},
+      leadingIcon: {},
+    },
+  };
+
+  if (!configuration || !componentName) {
+    return result;
+  }
+
+  const normalizedComponentName = componentName.replace(/-/g, "_");
+
+  // Helper to parse sub-components for a block
+  const parseBlock = (blockName: string, subComponents: string[]) => {
+    subComponents.forEach((subComponent) => {
+      // e.g. header_container
+      const fullSubComponentName = `${blockName}_${subComponent}`;
+
+      // e.g. result.header.container
+      const camelSubComponent = subComponent.replace(/_([a-z0-9])/g, (g) =>
+        g[1].toUpperCase()
+      );
+
+      const camelBlockName = (blockName as string).replace(
+        /_([a-z0-9])/g,
+        (g) => g[1].toUpperCase()
+      ) as keyof ModalBlocksConfig;
+
+      getAllSpecificStyles({
+        configuration,
+        componentName: normalizedComponentName,
+        subComponentName: fullSubComponentName,
+        styleSeparator: "",
+        outStyles:
+          result[camelBlockName]![
+            camelSubComponent as keyof (typeof result)[typeof camelBlockName]
+          ],
+      });
+    });
+  };
+
+  parseBlock("header", [
+    "container",
+    "title",
+    "close_button",
+    "action_buttons",
+  ]);
+
+  parseBlock("action", [
+    "background",
+    "title",
+    "icons",
+    "leading_icon",
+    "trailing_icon",
+  ]);
+
+  parseBlock("item", [
+    "background",
+    "image",
+    "now_playing_container",
+    "now_playing_asset",
+    "now_playing_label",
+    "text_label_1",
+    "text_label_2",
+    "buttons_container",
+    "button_1",
+    "button_2",
+  ]);
+
+  parseBlock("now_playing_item", [
+    "background",
+    "image",
+    "now_playing_container",
+    "now_playing_asset",
+    "now_playing_label",
+    "text_label_1",
+    "text_label_2",
+    "buttons_container",
+    "button_1",
+    "button_2",
+  ]);
+
+  parseBlock("button", ["background", "title", "icons", "leading_icon"]);
+
+  return result;
+};

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();
+    });
+  });
+});