@applicaster/quick-brick-core 16.0.0-alpha.1701179921 → 16.0.0-alpha.1733304298

package/App/layoutPreview/persistence.ts

@@ -0,0 +1,228 @@
+import { NativeModules } from "react-native";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+
+// Separate from active_layout_id, which the switchLayout action owns.
+export const LAYOUT_PREVIEW_ID_KEY = "layout_preview_id";
+
+export const LAYOUT_PREVIEW_ACK_KEY = "layout_preview_ack_at";
+
+// Set by Back to Default; makes the reload that follows skip layout selectors once.
+export const LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY =
+  "layout_preview_restore_default";
+
+export const SUPPRESSION_MS = 2 * 60 * 60 * 1000;
+
+export const PREVIEW_TITLE = "You're Viewing a Preview Layout";
+
+export const PREVIEW_MESSAGE =
+  "This device is currently displaying a preview layout instead of the version default layout.";
+
+export const PREVIEW_CONTINUE = "Continue Preview";
+
+export const PREVIEW_BACK = "Back to Default Layout";
+
+export const UNAVAILABLE_TITLE = "Preview layout unavailable";
+
+export const UNAVAILABLE_MESSAGE =
+  "This device was returned to the version default layout.";
+
+export type PreviewApplyResult = "applied" | "absent" | "invalid" | "default";
+
+let unavailableNotice = false;
+
+export function shouldKeepOverride(
+  layoutId: string | null | undefined,
+  defaultId: string | null | undefined
+): boolean {
+  return Boolean(layoutId) && layoutId !== defaultId;
+}
+
+export function shouldShowReminder(
+  hasOverride: boolean,
+  ackAt: number | null,
+  now: number
+): boolean {
+  if (!hasOverride) return false;
+  if (ackAt == null || Number.isNaN(ackAt)) return true;
+
+  return now - ackAt >= SUPPRESSION_MS;
+}
+
+export function markPreviewUnavailable(): void {
+  unavailableNotice = true;
+}
+
+export function consumePreviewUnavailable(): boolean {
+  const pending = unavailableNotice;
+  unavailableNotice = false;
+
+  return pending;
+}
+
+async function removeKey(key: string): Promise<void> {
+  try {
+    await localStorage.removeItem(key);
+  } catch {
+    // key was already absent
+  }
+}
+
+async function readOverrideId(): Promise<string | null> {
+  try {
+    const id = await localStorage.getItem(LAYOUT_PREVIEW_ID_KEY);
+
+    return id || null;
+  } catch {
+    return null;
+  }
+}
+
+export async function getDefaultLayoutId(): Promise<string | null> {
+  try {
+    const id = await NativeModules.AppLoaderBridge?.getDefaultLayoutId?.();
+
+    return id || null;
+  } catch {
+    return null;
+  }
+}
+
+export async function clearLayoutPreview(): Promise<void> {
+  await removeKey(LAYOUT_PREVIEW_ID_KEY);
+  await removeKey(LAYOUT_PREVIEW_ACK_KEY);
+}
+
+/**
+ * Drops the pin and points the loader at the version default.
+ * Used by Back to Default and by a preview link that targets the default layout.
+ */
+export async function returnToDefaultLayout(): Promise<void> {
+  const defaultId = await getDefaultLayoutId();
+
+  await clearLayoutPreview();
+
+  if (!defaultId || !NativeModules.AppLoaderBridge?.switchLayout) return;
+
+  try {
+    await NativeModules.AppLoaderBridge.switchLayout(defaultId, null);
+  } catch {
+    // the pin is already gone; the next load uses the version default
+  }
+}
+
+/** Back to Default from the reminder. The app reloads next, and that load must stay on the version default. */
+export async function leavePreviewForDefault(): Promise<void> {
+  await localStorage.setItem(LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY, "true");
+  await returnToDefaultLayout();
+}
+
+/** Same as returnToDefaultLayout, plus a one-shot unavailable notice. */
+export async function restoreInvalidPreview(): Promise<void> {
+  markPreviewUnavailable();
+  await returnToDefaultLayout();
+}
+
+/**
+ * Pins a layout id, or clears the pin when the id is the version default.
+ * A storage failure still leaves the in-session preview in place.
+ */
+export async function rememberLayoutPreview(layoutId: string): Promise<void> {
+  if (!layoutId) return;
+
+  try {
+    const defaultId = await getDefaultLayoutId();
+
+    if (!shouldKeepOverride(layoutId, defaultId)) {
+      await returnToDefaultLayout();
+
+      return;
+    }
+
+    const current = await readOverrideId();
+
+    if (current !== layoutId) {
+      await removeKey(LAYOUT_PREVIEW_ACK_KEY);
+    }
+
+    await localStorage.setItem(LAYOUT_PREVIEW_ID_KEY, layoutId);
+  } catch {
+    // this session already loaded the layout; the pin is best-effort
+  }
+}
+
+export async function acknowledgeLayoutPreview(): Promise<void> {
+  await localStorage.setItem(LAYOUT_PREVIEW_ACK_KEY, String(Date.now()));
+}
+
+export async function readReminderState(): Promise<{
+  hasOverride: boolean;
+  ackAt: number | null;
+}> {
+  const layoutId = await readOverrideId();
+  const defaultId = await getDefaultLayoutId();
+  let ackRaw: string | null = null;
+
+  try {
+    ackRaw = await localStorage.getItem(LAYOUT_PREVIEW_ACK_KEY);
+  } catch {
+    ackRaw = null;
+  }
+
+  const ackAt = ackRaw == null || ackRaw === "" ? null : Number(ackRaw);
+
+  return {
+    hasOverride: shouldKeepOverride(layoutId, defaultId),
+    ackAt: ackAt != null && !Number.isNaN(ackAt) ? ackAt : null,
+  };
+}
+
+/**
+ * Re-applies a stored preview before layout-manager selection.
+ * "invalid" means the pin was cleared and the version default was restored,
+ * so the caller must not run selectLayout over the top of that fallback.
+ */
+export async function applyPersistedLayoutPreview(): Promise<PreviewApplyResult> {
+  let restoreDefault = null;
+
+  try {
+    restoreDefault = await localStorage.getItem(
+      LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY
+    );
+  } catch {
+    restoreDefault = null;
+  }
+
+  if (restoreDefault) {
+    await removeKey(LAYOUT_PREVIEW_RESTORE_DEFAULT_KEY);
+
+    const defaultId = await getDefaultLayoutId();
+
+    if (defaultId) {
+      await NativeModules.AppLoaderBridge.switchLayout(defaultId, null);
+    }
+
+    return "default";
+  }
+
+  const layoutId = await readOverrideId();
+
+  if (!layoutId) return "absent";
+
+  const defaultId = await getDefaultLayoutId();
+
+  if (!shouldKeepOverride(layoutId, defaultId)) {
+    await clearLayoutPreview();
+
+    return "absent";
+  }
+
+  try {
+    await NativeModules.AppLoaderBridge.switchLayout(layoutId, null);
+
+    return "applied";
+  } catch {
+    await restoreInvalidPreview();
+
+    return "invalid";
+  }
+}

package/App/remoteContextReloader/getRemoteContextData/getNativeRemoteContextData.ts

@@ -14,6 +14,56 @@ import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "../consts";
 const { AppLoaderBridge } = NativeModules;
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { useErrorStore } from "../../ErrorBoundary/store";
+import {
+  PreviewApplyResult,
+  applyPersistedLayoutPreview,
+  restoreInvalidPreview,
+} from "../../layoutPreview/persistence";
+
+/**
+ * Points the loader at the layout to fetch. A persisted device preview wins
+ * over the layout-manager plugin (experiment, geo, language) and over active_layout_id.
+ */
+async function selectActiveLayout(
+  runtimeConfigurationUrls,
+  plugins,
+  isTabletDevice: boolean
+): Promise<PreviewApplyResult> {
+  let preview: PreviewApplyResult = "absent";
+
+  try {
+    preview = await applyPersistedLayoutPreview();
+
+    if (preview !== "absent") return preview;
+
+    const layoutManagerPlugin = R.find(
+      R.pathSatisfies(R.is(Function), ["module", "selectLayout"])
+    )(plugins);
+
+    if (layoutManagerPlugin) {
+      await layoutManagerPlugin.module?.selectLayout({
+        runtimeConfigurationUrls,
+        plugin: layoutManagerPlugin,
+        isTablet: isTabletDevice,
+      });
+
+      return preview;
+    }
+
+    const layoutId = await localStorage.getItem(ACTIVE_LAYOUT_ID_STORAGE_KEY);
+
+    if (layoutId) {
+      await AppLoaderBridge?.switchLayout(layoutId, null);
+    }
+  } catch (error) {
+    logger.error({
+      message: "Error selecting layout using layout manager plugin",
+      data: error,
+    });
+  }
+
+  return preview;
+}
 
 export async function getNativeRemoteContextData(
   dispatch,
@@ -35,32 +85,27 @@ export async function getNativeRemoteContextData(
 
   loadAppContextData(dispatch, R.mergeAll([...generalConfiguration]));
 
-  try {
-    const layoutManagerPlugin = R.find(
-      R.pathSatisfies(R.is(Function), ["module", "selectLayout"])
-    )(plugins);
+  const preview = await selectActiveLayout(
+    runtimeConfigurationUrls,
+    plugins,
+    isTabletDevice
+  );
 
-    if (layoutManagerPlugin) {
-      await layoutManagerPlugin.module?.selectLayout({
-        runtimeConfigurationUrls,
-        plugin: layoutManagerPlugin,
-        isTablet: isTabletDevice,
-      });
-    } else {
-      const layoutId = await localStorage.getItem(ACTIVE_LAYOUT_ID_STORAGE_KEY);
+  let layout;
 
-      if (layoutId) {
-        await AppLoaderBridge?.switchLayout(layoutId, null);
-      }
-    }
+  try {
+    layout = await getPromiseForType("layout");
   } catch (error) {
+    if (preview !== "applied") throw error;
+
     logger.error({
-      message: "Error selecting layout using layout manager plugin",
+      message: "Persisted preview layout failed to load",
       data: error,
     });
-  }
 
-  const layout = await getPromiseForType("layout");
+    await restoreInvalidPreview();
+    layout = await getPromiseForType("layout");
+  }
 
   const layoutLoadingErrorMessage = "Failed to load layout data";
 

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