@applicaster/quick-brick-core 16.0.0-rc.121 → 16.0.0-rc.123

package/App/index.tsx

@@ -33,6 +33,7 @@ import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
 import { LoadingOverlay } from "./LoadingOverlay";
 import { NotificationToastRenderer } from "./NotificationToastRenderer";
 import { ZappAppWrapper } from "./components/ZappAppWrapper";
+import { registerCoreUIActions } from "./uiActions";
 
 interface AppOptions {
   Layout: React.ComponentType;
@@ -52,8 +53,10 @@ const App = ({
   OfflineHandler,
   SplashLoader,
   InteractionManager,
-}: AppOptions): ZappApp =>
-  React.memo(function ZappApp(props: AppComponentProps) {
+}: AppOptions): ZappApp => {
+  registerCoreUIActions();
+
+  return React.memo(function ZappApp(props: AppComponentProps) {
     const {
       styles,
       components: { AppContainer },
@@ -92,6 +95,7 @@ const App = ({
       </ZappAppWrapper>
     );
   });
+};
 
 export function createQuickBrickApp(options): ZappApp {
   const {

package/App/uiActions/index.ts

@@ -0,0 +1,13 @@
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+import { registerMuteUnmuteUIAction } from "./muteUnmute";
+
+/**
+ * App-wide UI actions owned by QuickBrick, registered once at startup.
+ * Actions scoped to a live object (e.g. player speed) register with their owner.
+ */
+export const registerCoreUIActions = (): (() => void) => {
+  const unregisters = isTV() ? [] : [registerMuteUnmuteUIAction()];
+
+  return () => unregisters.forEach((unregister) => unregister());
+};

package/App/uiActions/muteUnmute/__tests__/assetResolver.test.ts

@@ -0,0 +1,226 @@
+import {
+  resolveActionAssets,
+  resolveButtonAssets,
+  isConfiguredAsset,
+  firstConfiguredAsset,
+  selectActionAsset,
+  toFlavourTuple,
+} from "../assetResolver";
+import { ACTION_DEFAULT_ASSETS, BUTTON_DEFAULT_ASSETS } from "../defaultAssets";
+
+const createManifest = require("../../../../../../plugins/mute-unmute-action/manifests/manifest.config");
+
+// distinct value per slot, so a resolver mixing up flavours or states is caught.
+// The real defaults are covered by defaultAssets.test.ts
+jest.mock("../defaultAssets", () => {
+  const action = (f: string) => ({
+    mute: `action_${f}_mute`,
+    unmute: `action_${f}_unmute`,
+  });
+
+  const button = (f: string) => ({
+    mute: `button_${f}_mute`,
+    unmute: `button_${f}_unmute`,
+  });
+
+  return {
+    ACTION_DEFAULT_ASSETS: { flavour_1: action("1"), flavour_2: action("2") },
+    BUTTON_DEFAULT_ASSETS: { flavour_1: button("1"), flavour_2: button("2") },
+  };
+});
+
+const FLAVOURS = ["flavour_1", "flavour_2"];
+const ACTION_STATES = ["mute", "unmute"];
+const BUTTON_STATES = ["mute", "unmute"];
+
+const actionKey = (flavour: string, state: string) =>
+  `mobile_action_${flavour}_${state}_asset`;
+
+const buttonKey = (flavour: string, state: string) =>
+  `mobile_button_${flavour}_${state}_asset`;
+
+describe("isConfiguredAsset", () => {
+  it.each([
+    ["a URL", "https://x.com/a.png", true],
+    ["an empty string", "", false],
+    ["whitespace", "  \n", false],
+    ["undefined", undefined, false],
+    ["null", null, false],
+    ["a number", 5, false],
+    ["an object", {}, false],
+  ])("%s", (_, value, expected) => {
+    expect(isConfiguredAsset(value)).toBe(expected);
+  });
+});
+
+describe("firstConfiguredAsset", () => {
+  it("returns the first configured candidate", () => {
+    expect(firstConfiguredAsset(undefined, " ", "a", "b")).toBe("a");
+  });
+
+  it("returns undefined when nothing is configured", () => {
+    expect(firstConfiguredAsset(undefined, "", null)).toBeUndefined();
+    expect(firstConfiguredAsset()).toBeUndefined();
+  });
+});
+
+describe("resolveActionAssets", () => {
+  it("equals the defaults without configuration", () => {
+    expect(resolveActionAssets({ configuration: {} })).toEqual(
+      ACTION_DEFAULT_ASSETS
+    );
+  });
+
+  FLAVOURS.forEach((flavour) =>
+    ACTION_STATES.forEach((state) =>
+      it(`overrides ${flavour} ${state} on its own`, () => {
+        const result = resolveActionAssets({
+          configuration: { [actionKey(flavour, state)]: "plugin.png" },
+        });
+
+        const expected = JSON.parse(JSON.stringify(ACTION_DEFAULT_ASSETS));
+        expected[flavour][state] = "plugin.png";
+        expect(result).toEqual(expected);
+      })
+    )
+  );
+
+  it("never returns an empty URI", () => {
+    const blank = (keys: string[]) =>
+      Object.fromEntries(keys.map((key) => [key, " "]));
+
+    const configuration = blank(
+      FLAVOURS.flatMap((f) => [
+        ...ACTION_STATES.map((s) => actionKey(f, s)),
+        ...BUTTON_STATES.map((s) => buttonKey(f, s)),
+      ])
+    );
+
+    const values = [
+      ...Object.values(
+        resolveActionAssets({
+          configuration,
+        })
+      ),
+      ...Object.values(resolveButtonAssets({ configuration })),
+    ].flatMap((assets) => Object.values(assets));
+
+    values.forEach((value) => expect(isConfiguredAsset(value)).toBe(true));
+  });
+
+  it("applies a plugin override to its own key and flavour only", () => {
+    const result = resolveActionAssets({
+      configuration: { [actionKey("flavour_2", "unmute")]: "plugin.png" },
+    });
+
+    expect(result.flavour_2.unmute).toBe("plugin.png");
+    expect(result.flavour_2.mute).toBe(ACTION_DEFAULT_ASSETS.flavour_2.mute);
+    expect(result.flavour_1).toEqual(ACTION_DEFAULT_ASSETS.flavour_1);
+  });
+
+  it("falls through whitespace plugin values", () => {
+    const result = resolveActionAssets({
+      configuration: {
+        [actionKey("flavour_1", "mute")]: "plugin.png",
+        [actionKey("flavour_1", "unmute")]: "  ",
+      },
+    });
+
+    expect(result.flavour_1.mute).toBe("plugin.png");
+
+    expect(result.flavour_1.unmute).toBe(
+      ACTION_DEFAULT_ASSETS.flavour_1.unmute
+    );
+  });
+});
+
+describe("resolveButtonAssets", () => {
+  it("equals the defaults without configuration", () => {
+    expect(resolveButtonAssets({ configuration: {} })).toEqual(
+      BUTTON_DEFAULT_ASSETS
+    );
+  });
+
+  FLAVOURS.forEach((flavour) =>
+    BUTTON_STATES.forEach((state) =>
+      it(`overrides ${flavour} ${state} on its own`, () => {
+        const result = resolveButtonAssets({
+          configuration: { [buttonKey(flavour, state)]: "plugin.png" },
+        });
+
+        const expected = JSON.parse(JSON.stringify(BUTTON_DEFAULT_ASSETS));
+        expected[flavour][state] = "plugin.png";
+        expect(result).toEqual(expected);
+      })
+    )
+  );
+
+  it("falls back for whitespace values", () => {
+    const result = resolveButtonAssets({
+      configuration: { [buttonKey("flavour_1", "mute")]: " " },
+    });
+
+    expect(result).toEqual(BUTTON_DEFAULT_ASSETS);
+  });
+});
+
+describe("select helpers", () => {
+  const action = { mute: "m", unmute: "u" };
+
+  it.each([
+    [false, "m"],
+    [true, "u"],
+  ])("selectActionAsset muted=%p -> %s", (muted, expected) => {
+    expect(selectActionAsset(action, muted)).toBe(expected);
+  });
+});
+
+describe("toFlavourTuple", () => {
+  it("returns [flavour_1, flavour_2] picks", () => {
+    expect(
+      toFlavourTuple(
+        { flavour_1: { v: "a" }, flavour_2: { v: "b" } },
+        (x) => x.v
+      )
+    ).toEqual(["a", "b"]);
+  });
+});
+
+describe("manifest key contract", () => {
+  const manifestKeys = createManifest({
+    platform: "ios_for_quickbrick",
+    version: "1.0.0",
+  })
+    .custom_configuration_fields.flatMap((group) => group.fields)
+    .filter((field) => field.type === "uploader")
+    .map((field) => field.key)
+    .sort();
+
+  const readKeys = () => {
+    const read = new Set<string>();
+
+    const configuration = new Proxy(
+      {},
+      {
+        get: (_, key) => {
+          read.add(String(key));
+
+          return undefined;
+        },
+      }
+    );
+
+    resolveActionAssets({ configuration });
+    resolveButtonAssets({ configuration });
+
+    return [...read].sort();
+  };
+
+  it("reads exactly the uploader keys defined in the manifest", () => {
+    expect(readKeys()).toEqual(manifestKeys);
+
+    expect(manifestKeys).toHaveLength(
+      FLAVOURS.length * (ACTION_STATES.length + BUTTON_STATES.length)
+    );
+  });
+});

package/App/uiActions/muteUnmute/__tests__/binding.test.ts

@@ -0,0 +1,51 @@
+jest.mock("@applicaster/zapp-react-native-utils/pluginUtils", () => ({
+  getPluginByIdentifier: () => undefined,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/usePluginConfiguration",
+  () => ({ getPluginConfiguration: () => ({}) })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoLive/MuteUnmuteController",
+  () => ({
+    MUTE_UNMUTE_ACTION_IDENTIFIER: "mute_unmute_action",
+    muteUnmuteController: {
+      getEntryState: () => ({ muted: true }),
+      subscribe: jest.fn(() => jest.fn()),
+      toggle: jest.fn(),
+    },
+  })
+);
+
+import { muteUnmuteUIAction } from "../index";
+import { muteUnmuteController } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/MuteUnmuteController";
+
+it("uses bundled visuals on the first read without a configuration plugin", () => {
+  expect(muteUnmuteUIAction.initialEntryState({ id: "1" })).toEqual(
+    expect.objectContaining({ checked: true, state: 1, label: "Unmute" })
+  );
+});
+
+it("delegates the command without a second imperative UI update", () => {
+  const updateState = jest.fn();
+  muteUnmuteUIAction.invokeAction({ id: "1" }, { updateState });
+  expect(muteUnmuteController.toggle).toHaveBeenCalledWith("1");
+  expect(updateState).not.toHaveBeenCalled();
+});
+
+it("hydrates a late subscriber and cleans up its controller subscription", () => {
+  const listener = jest.fn();
+  const remove = muteUnmuteUIAction.addListener("1", listener);
+
+  const controllerRemove = jest.mocked(muteUnmuteController.subscribe).mock
+    .results[0].value;
+
+  expect(listener).toHaveBeenCalledWith(
+    expect.objectContaining({ checked: true })
+  );
+
+  remove();
+  expect(controllerRemove).toHaveBeenCalledTimes(1);
+});

package/App/uiActions/muteUnmute/__tests__/defaultAssets.test.ts

@@ -0,0 +1,73 @@
+import * as fs from "fs";
+import * as path from "path";
+import { Image } from "react-native";
+
+jest
+  .spyOn(Image, "resolveAssetSource")
+  .mockReturnValue({ uri: "asset://mock" } as any);
+
+// imports are hoisted above the spy, so the module is loaded after it is set up
+const {
+  ACTION_DEFAULT_ASSETS,
+  BUTTON_DEFAULT_ASSETS,
+} = require("../defaultAssets");
+
+const FLAVOURS = ["flavour_1", "flavour_2"];
+const ACTION_STATES = ["mute", "unmute"];
+const BUTTON_STATES = ["mute", "unmute"];
+
+const EXPECTED_PATHS = FLAVOURS.flatMap((flavour) => [
+  ...ACTION_STATES.map((state) => `./assets/action/${flavour}/${state}.png`),
+  ...BUTTON_STATES.map((state) => `./assets/button/${flavour}/${state}.png`),
+]);
+
+describe("defaultAssets", () => {
+  it("defines a non-empty action asset for every flavour and state", () => {
+    expect(Object.keys(ACTION_DEFAULT_ASSETS).sort()).toEqual(FLAVOURS);
+
+    FLAVOURS.forEach((flavour) => {
+      const assets = ACTION_DEFAULT_ASSETS[flavour];
+
+      expect(Object.keys(assets).sort()).toEqual([...ACTION_STATES].sort());
+
+      ACTION_STATES.forEach((state) => {
+        expect(typeof assets[state]).toBe("string");
+        expect(assets[state].length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  it("defines a non-empty button asset for every flavour and state", () => {
+    expect(Object.keys(BUTTON_DEFAULT_ASSETS).sort()).toEqual(FLAVOURS);
+
+    FLAVOURS.forEach((flavour) => {
+      const assets = BUTTON_DEFAULT_ASSETS[flavour];
+
+      expect(Object.keys(assets).sort()).toEqual([...BUTTON_STATES].sort());
+
+      BUTTON_STATES.forEach((state) => {
+        expect(typeof assets[state]).toBe("string");
+        expect(assets[state].length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  it("requires exactly the 8 bundled PNGs by literal path", () => {
+    const source = fs.readFileSync(
+      path.resolve(__dirname, "..", "defaultAssets.ts"),
+      "utf8"
+    );
+
+    const required = [
+      ...source.matchAll(/require\("(\.\/assets\/[^"]+)"\)/g),
+    ].map((match) => match[1]);
+
+    expect([...required].sort()).toEqual([...EXPECTED_PATHS].sort());
+
+    required.forEach((relativePath) => {
+      expect(fs.existsSync(path.resolve(__dirname, "..", relativePath))).toBe(
+        true
+      );
+    });
+  });
+});

package/App/uiActions/muteUnmute/__tests__/entryState.test.ts

@@ -0,0 +1,57 @@
+import { buildEntryState } from "../entryState";
+
+const actionAssets = {
+  flavour_1: { mute: "a1_mute", unmute: "a1_unmute" },
+  flavour_2: { mute: "a2_mute", unmute: "a2_unmute" },
+};
+
+const buttonAssets = {
+  flavour_1: { mute: "b1_mute", unmute: "b1_unmute" },
+  flavour_2: { mute: "b2_mute", unmute: "b2_unmute" },
+};
+
+const labels = { mute: "Mute", unmute: "Unmute" };
+
+const build = (muted: boolean) =>
+  buildEntryState({ state: { muted }, actionAssets, buttonAssets, labels });
+
+describe("buildEntryState", () => {
+  it("sound on: Mute icons, state 0", () => {
+    expect(build(false)).toEqual({
+      state: 0,
+      asset: ["a1_mute", "a2_mute"],
+      mobileButtonAssets: ["b1_mute", "b2_mute"],
+      label: "Mute",
+      checked: false,
+      visibleInCells: [],
+    });
+  });
+
+  it("muted: Unmute icons, state 1", () => {
+    expect(build(true)).toEqual({
+      state: 1,
+      asset: ["a1_unmute", "a2_unmute"],
+      mobileButtonAssets: ["b1_unmute", "b2_unmute"],
+      label: "Unmute",
+      checked: true,
+      visibleInCells: [],
+    });
+  });
+
+  it("limits cell actions to the playing instance without removing button assets", () => {
+    expect(
+      buildEntryState({
+        state: { muted: true, activeCellId: "playing-cell" },
+        actionAssets,
+        buttonAssets,
+        labels,
+      })
+    ).toEqual(
+      expect.objectContaining({
+        visibleInCells: ["playing-cell"],
+        mobileButtonAssets: ["b1_unmute", "b2_unmute"],
+        label: "Unmute",
+      })
+    );
+  });
+});

package/App/uiActions/muteUnmute/__tests__/labelResolver.test.ts

@@ -0,0 +1,35 @@
+import { DEFAULT_LABELS, resolveLabels, selectLabel } from "../labelResolver";
+
+describe("labelResolver", () => {
+  it("defaults to Mute / Unmute", () => {
+    expect(DEFAULT_LABELS).toEqual({ mute: "Mute", unmute: "Unmute" });
+    expect(resolveLabels()).toEqual(DEFAULT_LABELS);
+    expect(resolveLabels({})).toEqual(DEFAULT_LABELS);
+  });
+
+  it("uses configured values", () => {
+    expect(
+      resolveLabels({ mute_label: "Silence", unmute_label: "Sound on" })
+    ).toEqual({ mute: "Silence", unmute: "Sound on" });
+  });
+
+  it("falls back to the default for empty or whitespace values", () => {
+    expect(resolveLabels({ mute_label: "", unmute_label: "   " })).toEqual(
+      DEFAULT_LABELS
+    );
+  });
+
+  it("overrides each label independently", () => {
+    expect(resolveLabels({ unmute_label: "Sound on" })).toEqual({
+      mute: "Mute",
+      unmute: "Sound on",
+    });
+  });
+
+  it("selects the label describing the next action", () => {
+    const labels = { mute: "M", unmute: "U" };
+
+    expect(selectLabel(labels, false)).toBe("M");
+    expect(selectLabel(labels, true)).toBe("U");
+  });
+});

package/App/uiActions/muteUnmute/assetResolver.ts

@@ -0,0 +1,87 @@
+import { ACTION_DEFAULT_ASSETS, BUTTON_DEFAULT_ASSETS } from "./defaultAssets";
+import type {
+  ActionAssets,
+  ButtonAssets,
+  Flavour,
+  MuteUnmuteActionConfiguration,
+} from "./types";
+
+export const isConfiguredAsset = (value: unknown): value is string =>
+  typeof value === "string" && value.trim().length > 0;
+
+export const firstConfiguredAsset = (
+  ...candidates: unknown[]
+): string | undefined => candidates.find(isConfiguredAsset);
+
+// The only place in runtime code that defines the manifest key format.
+const pluginAsset = (
+  configuration: MuteUnmuteActionConfiguration | undefined,
+  kind: "action" | "button",
+  flavour: Flavour,
+  state: keyof ButtonAssets
+): unknown => configuration?.[`mobile_${kind}_${flavour}_${state}_asset`];
+
+const resolveAsset = (fallback: string, ...candidates: unknown[]): string =>
+  firstConfiguredAsset(...candidates) ?? fallback;
+
+export const resolveActionAssets = ({
+  configuration,
+}: {
+  configuration?: MuteUnmuteActionConfiguration;
+}): Record<Flavour, ActionAssets> => {
+  const forFlavour = (flavour: Flavour): ActionAssets => {
+    const defaults = ACTION_DEFAULT_ASSETS[flavour];
+
+    return {
+      mute: resolveAsset(
+        defaults.mute,
+        pluginAsset(configuration, "action", flavour, "mute")
+      ),
+      unmute: resolveAsset(
+        defaults.unmute,
+        pluginAsset(configuration, "action", flavour, "unmute")
+      ),
+    };
+  };
+
+  return {
+    flavour_1: forFlavour("flavour_1"),
+    flavour_2: forFlavour("flavour_2"),
+  };
+};
+
+export const resolveButtonAssets = ({
+  configuration,
+}: {
+  configuration?: MuteUnmuteActionConfiguration;
+}): Record<Flavour, ButtonAssets> => {
+  const forFlavour = (flavour: Flavour): ButtonAssets => {
+    const defaults = BUTTON_DEFAULT_ASSETS[flavour];
+
+    const asset = (state: keyof ButtonAssets) =>
+      resolveAsset(
+        defaults[state],
+        pluginAsset(configuration, "button", flavour, state)
+      );
+
+    return {
+      mute: asset("mute"),
+      unmute: asset("unmute"),
+    };
+  };
+
+  return {
+    flavour_1: forFlavour("flavour_1"),
+    flavour_2: forFlavour("flavour_2"),
+  };
+};
+
+export const selectActionAsset = (
+  assets: ActionAssets,
+  muted: boolean
+): string => (muted ? assets.unmute : assets.mute);
+
+export const toFlavourTuple = <T>(
+  byFlavour: Record<Flavour, T>,
+  pick: (assets: T) => string
+): [string, string] => [pick(byFlavour.flavour_1), pick(byFlavour.flavour_2)];

package/App/uiActions/muteUnmute/defaultAssets.ts

@@ -0,0 +1,33 @@
+import { resolveDefaultAssetUri } from "@applicaster/zapp-react-native-utils/actionUtils";
+
+import type { ActionAssets, ButtonAssets, Flavour } from "./types";
+
+export const ACTION_DEFAULT_ASSETS: Record<Flavour, ActionAssets> = {
+  flavour_1: {
+    mute: resolveDefaultAssetUri(require("./assets/action/flavour_1/mute.png")),
+    unmute: resolveDefaultAssetUri(
+      require("./assets/action/flavour_1/unmute.png")
+    ),
+  },
+  flavour_2: {
+    mute: resolveDefaultAssetUri(require("./assets/action/flavour_2/mute.png")),
+    unmute: resolveDefaultAssetUri(
+      require("./assets/action/flavour_2/unmute.png")
+    ),
+  },
+};
+
+export const BUTTON_DEFAULT_ASSETS: Record<Flavour, ButtonAssets> = {
+  flavour_1: {
+    mute: resolveDefaultAssetUri(require("./assets/button/flavour_1/mute.png")),
+    unmute: resolveDefaultAssetUri(
+      require("./assets/button/flavour_1/unmute.png")
+    ),
+  },
+  flavour_2: {
+    mute: resolveDefaultAssetUri(require("./assets/button/flavour_2/mute.png")),
+    unmute: resolveDefaultAssetUri(
+      require("./assets/button/flavour_2/unmute.png")
+    ),
+  },
+};

package/App/uiActions/muteUnmute/entryState.ts

@@ -0,0 +1,28 @@
+import { selectActionAsset, toFlavourTuple } from "./assetResolver";
+import { selectLabel } from "./labelResolver";
+import type { ActionAssets, ButtonAssets, Flavour, Labels } from "./types";
+import type { MuteUnmuteEntryState } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/MuteUnmuteController";
+
+type BuildEntryStateArgs = {
+  state: MuteUnmuteEntryState;
+  actionAssets: Record<Flavour, ActionAssets>;
+  buttonAssets: Record<Flavour, ButtonAssets>;
+  labels: Labels;
+};
+
+export const buildEntryState = ({
+  state: { muted, activeCellId },
+  actionAssets,
+  buttonAssets,
+  labels,
+}: BuildEntryStateArgs): CellActionEntryState => ({
+  // Legacy player convention: state 1 = muted (shows the Unmute icon).
+  state: muted ? 1 : 0,
+  asset: toFlavourTuple(actionAssets, (a) => selectActionAsset(a, muted)),
+  mobileButtonAssets: toFlavourTuple(buttonAssets, (a) =>
+    selectActionAsset(a, muted)
+  ),
+  label: selectLabel(labels, muted),
+  checked: muted,
+  visibleInCells: activeCellId ? [activeCellId] : [],
+});

package/App/uiActions/muteUnmute/index.ts

@@ -0,0 +1,79 @@
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/usePluginConfiguration";
+import {
+  uiActionsRegistry,
+  type RegisteredActionValue,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator/registry";
+
+import {
+  MUTE_UNMUTE_ACTION_IDENTIFIER,
+  muteUnmuteController,
+  type MuteUnmuteEntryState,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/MuteUnmuteController";
+import { resolveActionAssets, resolveButtonAssets } from "./assetResolver";
+import { resolveLabels } from "./labelResolver";
+import { buildEntryState } from "./entryState";
+import type {
+  MuteUnmuteActionConfiguration,
+  MuteUnmuteActionLocalizations,
+} from "./types";
+
+type Assets = Pick<
+  Parameters<typeof buildEntryState>[0],
+  "actionAssets" | "buttonAssets"
+>;
+
+let cache: { plugin: unknown; assets: Assets } | null = null;
+
+// The `mute_unmute_action` plugin is configuration only: assets and labels.
+// Raw values are read because every field is optional and has a bundled default.
+const getVisuals = () => {
+  const plugin = getPluginByIdentifier(MUTE_UNMUTE_ACTION_IDENTIFIER, true);
+
+  if (!cache || cache.plugin !== plugin) {
+    const configuration = (plugin as any)?.configuration as
+      | MuteUnmuteActionConfiguration
+      | undefined;
+
+    cache = {
+      plugin,
+      assets: {
+        actionAssets: resolveActionAssets({ configuration }),
+        buttonAssets: resolveButtonAssets({ configuration }),
+      },
+    };
+  }
+
+  // Not cached: the locale can change at runtime.
+  const { localizations } = getPluginConfiguration<
+    unknown,
+    MuteUnmuteActionLocalizations
+  >(plugin);
+
+  return { ...cache.assets, labels: resolveLabels(localizations) };
+};
+
+const toEntryState = (state: MuteUnmuteEntryState) =>
+  buildEntryState({ state, ...getVisuals() });
+
+/** Visual binding: maps controller state to what cells and buttons render. */
+export const muteUnmuteUIAction: RegisteredActionValue = {
+  initialEntryState: (item) =>
+    toEntryState(muteUnmuteController.getEntryState(String(item.id))),
+  addListener: (entryId, listener) => {
+    const remove = muteUnmuteController.subscribe(String(entryId), (state) =>
+      listener(toEntryState(state))
+    );
+
+    listener(toEntryState(muteUnmuteController.getEntryState(String(entryId))));
+
+    return remove;
+  },
+  invokeAction: (item) => muteUnmuteController.toggle(String(item.id)),
+};
+
+export const registerMuteUnmuteUIAction = () =>
+  uiActionsRegistry.registerAction(
+    MUTE_UNMUTE_ACTION_IDENTIFIER,
+    muteUnmuteUIAction
+  );

package/App/uiActions/muteUnmute/labelResolver.ts

@@ -0,0 +1,15 @@
+import { firstConfiguredAsset } from "./assetResolver";
+import type { Labels, MuteUnmuteActionLocalizations } from "./types";
+
+export const DEFAULT_LABELS: Labels = { mute: "Mute", unmute: "Unmute" };
+
+export const resolveLabels = (
+  localizations?: MuteUnmuteActionLocalizations
+): Labels => ({
+  mute: firstConfiguredAsset(localizations?.mute_label) ?? DEFAULT_LABELS.mute,
+  unmute:
+    firstConfiguredAsset(localizations?.unmute_label) ?? DEFAULT_LABELS.unmute,
+});
+
+export const selectLabel = (labels: Labels, muted: boolean): string =>
+  muted ? labels.unmute : labels.mute;

package/App/uiActions/muteUnmute/types.ts

@@ -0,0 +1,18 @@
+export type Flavour = "flavour_1" | "flavour_2";
+
+export type ActionAssets = { mute: string; unmute: string };
+
+export type ButtonAssets = ActionAssets;
+
+export type Labels = { mute: string; unmute: string };
+
+type MobileKind = "action" | "button";
+
+export type MuteUnmuteActionConfiguration = Partial<
+  Record<`mobile_${MobileKind}_${Flavour}_${keyof ButtonAssets}_asset`, string>
+>;
+
+export type MuteUnmuteActionLocalizations = {
+  mute_label?: string;
+  unmute_label?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-rc.121",
+  "version": "16.0.0-rc.123",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.121",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.121",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.121",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.121",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.121",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.121",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.121",
+    "@applicaster/applicaster-types": "16.0.0-rc.123",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-rc.123",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-rc.123",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.123",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.123",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.123",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.123",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",