@applicaster/zapp-react-native-utils 16.0.0-alpha.8114431136 → 16.0.0-alpha.8225069933

package/appUtils/playerManager/__tests__/playerDiagnostics.test.ts

@@ -0,0 +1,62 @@
+import { Player } from "../player";
+
+const entry = (id: string) => ({ id, title: id }) as unknown as ZappEntry;
+
+const makePlayer = () => {
+  const player = new Player({ playerId: "test-player" });
+  player.entry = entry("first");
+
+  return player;
+};
+
+describe("Player per-entry diagnostics", () => {
+  it("keeps the latest of onError and onVideoError, and clears it when a new entry loads", () => {
+    const player = makePlayer();
+    const second = { message: "second" };
+
+    player.onError({ message: "first" } as any);
+    player.onVideoError(second as any);
+
+    expect(player.lastError).toBe(second);
+
+    player.entry = entry("second");
+
+    expect(player.lastError).toBeNull();
+  });
+
+  it("reads the next entry without creating the overlay observer", () => {
+    const player = makePlayer();
+
+    expect(player.getPlayNextEntry()).toBeNull();
+
+    jest
+      .spyOn(player.getOverlayObservable(), "getPlayNextEntry")
+      .mockReturnValue(entry("next"));
+
+    expect(player.getPlayNextEntry()).toEqual(entry("next"));
+  });
+
+  it("keeps the content clock while a client-side ad plays", () => {
+    const player = makePlayer();
+
+    player.onVideoProgress({
+      currentTime: 300,
+      duration: 1800,
+      seekableDuration: 1800,
+    });
+
+    player.onAdBegin({});
+
+    player.onVideoProgress({
+      currentTime: 5,
+      duration: 15,
+      seekableDuration: 15,
+    });
+
+    expect(player.getPosition()).toBe(5);
+    expect(player.getDuration()).toBe(15);
+    expect(player.getContentPosition()).toBe(300);
+    expect(player.getContentDuration()).toBe(1800);
+    expect(player.getSeekableDuration()).toBe(1800);
+  });
+});

package/appUtils/playerManager/__tests__/playerToolbox.test.ts

@@ -18,6 +18,9 @@ const loadToolbox = () => {
 const player = (overrides = {}) => ({
   getSeekableDuration: () => 100,
   getContentPosition: () => 40,
+  isLive: () => false,
+  getPlayNextEntry: () => null,
+  playNextHandler: jest.fn(),
   seekTo: jest.fn(),
   ...overrides,
 });
@@ -30,7 +33,7 @@ const registeredTools = async (active) => {
   mockXray = { registerReactToolbox: mockRegister };
   await loadToolbox().registerPlayerToolbox(manager(active));
 
-  const { tools } = mockRegister.mock.calls[0][0];
+  const { tools } = mockRegister.mock.lastCall[0];
 
   return Object.fromEntries(tools.map((tool) => [tool.name, tool.handler]));
 };
@@ -87,6 +90,187 @@ describe("playerToolbox", () => {
     );
   });
 
+  describe("state", () => {
+    const playing = (overrides = {}, entry: any = { id: "e1", title: "T" }) =>
+      player({
+        playerId: "p1",
+        playerRole: "Primary",
+        getEntry: () => entry,
+        getPosition: () => 40,
+        getDuration: () => 100,
+        getContentDuration: () => 100,
+        isReadyToPlay: () => true,
+        isPlaying: () => true,
+        isBuffering: () => false,
+        isAd: () => false,
+        isLive: () => false,
+        getIsMuted: () => false,
+        ...overrides,
+      });
+
+    const state = async (overrides = {}, entry?: any) =>
+      (await registeredTools(playing(overrides, entry))).state();
+
+    it("reports inactive when nothing plays", async () => {
+      expect((await registeredTools(null)).state()).toEqual({
+        active: false,
+        casting: false,
+      });
+    });
+
+    it("keeps the existing fields and adds the content clock for a VOD", async () => {
+      expect(await state()).toEqual({
+        active: true,
+        playerId: "p1",
+        entry: { id: "e1", title: "T" },
+        position: 40,
+        duration: 100,
+        playing: true,
+        buffering: false,
+        readyToPlay: true,
+        ad: false,
+        live: false,
+        muted: false,
+        role: "Primary",
+        plugin: null,
+        engine: null,
+        casting: false,
+        seekableDuration: 100,
+        contentPosition: 40,
+        contentDuration: 100,
+        drm: null,
+        lastError: null,
+        next: null,
+      });
+    });
+
+    it("reports the content's clock next to the ad's during a client-side ad", async () => {
+      const result = await state({
+        isAd: () => true,
+        getPosition: () => 5,
+        getDuration: () => 15,
+        getContentPosition: () => 300,
+        getContentDuration: () => 1800,
+      });
+
+      expect(result).toMatchObject({
+        ad: true,
+        position: 5,
+        duration: 15,
+        contentPosition: 300,
+        contentDuration: 1800,
+      });
+    });
+
+    it("reports non-finite numbers as null", async () => {
+      expect(
+        await state({
+          getSeekableDuration: () => NaN,
+          getContentPosition: () => null,
+          getContentDuration: () => Infinity,
+        })
+      ).toMatchObject({
+        seekableDuration: null,
+        contentPosition: null,
+        contentDuration: null,
+      });
+    });
+
+    it("reports the player plugin and its web engine", async () => {
+      expect(
+        await state({
+          playerPluginId: "QuickBrickPlayerPlugin",
+          engine: "hls.js",
+        })
+      ).toMatchObject({ plugin: "QuickBrickPlayerPlugin", engine: "hls.js" });
+    });
+
+    it("lists the entry's DRM key systems, or null", async () => {
+      const drm = { widevine: { license_url: "w" }, playready: {} };
+
+      expect((await state({}, { id: "e", extensions: { drm } })).drm).toEqual([
+        "widevine",
+        "playready",
+      ]);
+
+      expect((await state({}, { id: "e", extensions: { drm: {} } })).drm).toBe(
+        null
+      );
+
+      expect((await state({}, { id: "e", extensions: {} })).drm).toBe(null);
+      expect((await state({}, null)).drm).toBe(null);
+    });
+
+    it("reports no last error as null", async () => {
+      expect((await state({ lastError: null })).lastError).toBeNull();
+    });
+  });
+
+  describe("play next", () => {
+    const nextEntry = { id: "n1", title: "Next", extensions: {} };
+
+    const stateWith = async (overrides) =>
+      (
+        await registeredTools(
+          player({
+            getEntry: () => null,
+            getPosition: () => 0,
+            getDuration: () => 0,
+            getContentDuration: () => 0,
+            isReadyToPlay: () => true,
+            isPlaying: () => true,
+            isBuffering: () => false,
+            isAd: () => false,
+            getIsMuted: () => false,
+            ...overrides,
+          })
+        )
+      ).state();
+
+    it("reports the entry Play Next would play", async () => {
+      expect(
+        (await stateWith({ getPlayNextEntry: () => nextEntry })).next
+      ).toEqual({ id: "n1", title: "Next" });
+    });
+
+    it("reports no next entry as null", async () => {
+      expect((await stateWith({})).next).toBeNull();
+    });
+
+    it("plays the next entry through the player's Play Next action", async () => {
+      const active = player({ getPlayNextEntry: () => nextEntry });
+      const tools = await registeredTools(active);
+
+      expect(tools.next()).toEqual({ id: "n1", title: "Next" });
+      expect(active.playNextHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it("fails without a next entry", async () => {
+      const active = player();
+      const tools = await registeredTools(active);
+
+      expect(() => tools.next()).toThrow("No next item");
+      expect(active.playNextHandler).not.toHaveBeenCalled();
+    });
+
+    it("fails when no Play Next action is registered", async () => {
+      const tools = await registeredTools(
+        player({
+          getPlayNextEntry: () => nextEntry,
+          playNextHandler: null,
+        })
+      );
+
+      expect(() => tools.next()).toThrow("No next item");
+    });
+
+    it("fails without an active player", async () => {
+      const tools = await registeredTools(null);
+
+      expect(() => tools.next()).toThrow("No active player");
+    });
+  });
+
   it("refuses to seek a stream that is not seekable", async () => {
     const tools = await registeredTools(
       player({ getSeekableDuration: () => 0 })

package/appUtils/playerManager/player.ts

@@ -76,6 +76,12 @@ export class Player {
   private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
   private contentSubject?: BehaviorSubject<PlayerContent> | null;
+  // Read by the X-Ray `player` toolbox: the last onError/onVideoError of the current entry,
+  // and the Play Next action of the PlayerContainer showing this player.
+  public lastError: unknown = null;
+  public playNextHandler: (() => void) | null = null;
+  // The web engine the default player picked (hls.js, dash.js, shaka, video.js); null elsewhere.
+  public engine: string | null = null;
 
   protected listeners: {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
@@ -89,6 +95,7 @@ export class Player {
 
   set entry(newEntry: ZappEntry | null) {
     this._entry = newEntry;
+    this.lastError = null;
     // The live entry is scoped to the entry it overlays - see
     // `OverlaysObserver.clearLiveEntry`. No-op when there is no observer,
     // which is every non-live player.
@@ -271,6 +278,10 @@ export class Player {
 
   getEntry = (): ZappEntry | null => this.entry;
 
+  /** The entry Play Next would play now; null without one. Never creates the overlay observer. */
+  getPlayNextEntry = (): ZappEntry | null =>
+    this.overlaysObserver?.getPlayNextEntry() ?? null;
+
   logState = (text, additionalParams = {}) => {
     const isSeeking = this.playerState.seekPosition !== null;
 
@@ -492,6 +503,8 @@ export class Player {
   };
 
   onVideoError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnVideoError,
       event: error,
@@ -499,6 +512,8 @@ export class Player {
   };
 
   onError = (error: Error) => {
+    this.lastError = error;
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnError,
       event: error,

package/appUtils/playerManager/playerToolbox.ts

@@ -14,6 +14,12 @@ const toNumber = (value: unknown) =>
 
 const clamp = (value: number, max: number) => Math.min(Math.max(value, 0), max);
 
+/** Key systems the entry declares (widevine, playready, fairplay...). */
+const drmKeySystems = (drm: unknown) =>
+  drm && typeof drm === "object" && Object.keys(drm).length
+    ? Object.keys(drm)
+    : null;
+
 /** The range a seek can reach: the DVR window on live, the content on VOD. */
 const requireSeekable = (player: {
   getSeekableDuration: () => number | undefined;
@@ -38,14 +44,21 @@ const tools = (manager: PlayerManager): XrayToolSpec[] => {
     {
       name: "state",
       description:
-        "The active player: entry, position and duration in seconds, playing/buffering/ad/live/muted, " +
-        "role (Primary, Cell, Chromecast) and casting. active: false when nothing plays.",
+        "The active player: entry, position and duration in seconds (the ad's while an ad plays), " +
+        "playing/buffering/ad/live/muted, role (Primary, Cell, Chromecast) and casting; in seconds, " +
+        "seekableDuration and contentPosition/contentDuration (the content's, even during ads); " +
+        "drm key systems, lastError {message} and next {id, title}, each null when absent; " +
+        "plugin (player plugin id) and engine (the default player's web engine, else null). " +
+        "active: false when nothing plays.",
       handler: () => {
         const player = manager.getActivePlayer();
 
         if (!player) return { active: false, casting: manager.isCasting() };
 
         const entry = player.getEntry();
+        const seekableDuration = toNumber(player.getSeekableDuration());
+        const next = player.getPlayNextEntry();
+        const error: any = player.lastError;
 
         return {
           active: true,
@@ -61,7 +74,18 @@ const tools = (manager: PlayerManager): XrayToolSpec[] => {
           live: !!player.isLive(),
           muted: !!player.getIsMuted(),
           role: player.playerRole,
+          plugin: player.playerPluginId ?? null,
+          engine: player.engine ?? null,
           casting: manager.isCasting(),
+          seekableDuration,
+          contentPosition: toNumber(player.getContentPosition()),
+          contentDuration: toNumber(player.getContentDuration()),
+          drm: drmKeySystems(entry?.extensions?.drm),
+          lastError:
+            error == null
+              ? null
+              : { message: String(error?.message ?? error?.error ?? error) },
+          next: next ? { id: next.id, title: next.title } : null,
         };
       },
     },
@@ -83,6 +107,21 @@ const tools = (manager: PlayerManager): XrayToolSpec[] => {
         return "OK";
       },
     },
+    {
+      name: "next",
+      description:
+        "Play the next item, as the Play Next overlay does. Fails when there is none.",
+      handler: () => {
+        const player = requirePlayer();
+        const next = player.getPlayNextEntry();
+
+        if (!next || !player.playNextHandler) throw new Error("No next item");
+
+        player.playNextHandler();
+
+        return { id: next.id, title: next.title };
+      },
+    },
     {
       name: "seek",
       description:

package/cellUtils/__tests__/getButtonsEnabled.test.ts

@@ -0,0 +1,28 @@
+import { getButtonsEnabled } from "..";
+
+describe("getButtonsEnabled", () => {
+  it("returns true when the buttons container is enabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: true })
+    ).toBe(true);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "true" })
+    ).toBe(true);
+  });
+
+  it("returns false when the buttons container is disabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: false })
+    ).toBe(false);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "false" })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getButtonsEnabled({})).toBe(false);
+    expect(getButtonsEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getCellNavigationEnabled.test.ts

@@ -0,0 +1,36 @@
+import { getCellNavigationEnabled } from "..";
+
+describe("getCellNavigationEnabled", () => {
+  it("returns true when cell navigation is enabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "true",
+      })
+    ).toBe(true);
+  });
+
+  it("returns false when cell navigation is disabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "false",
+      })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getCellNavigationEnabled({})).toBe(false);
+    expect(getCellNavigationEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getIsCellNavigationEnabled.test.ts

@@ -0,0 +1,35 @@
+import { getIsCellNavigationEnabled } from "..";
+
+describe("getIsCellNavigationEnabled", () => {
+  it("is disabled when buttons are enabled and cell navigation is off", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+  });
+
+  it("is enabled when buttons and cell navigation are both on", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when buttons are disabled", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: false,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when the keys or styles are missing", () => {
+    expect(getIsCellNavigationEnabled({})).toBe(true);
+    expect(getIsCellNavigationEnabled(undefined)).toBe(true);
+  });
+});

package/cellUtils/__tests__/isCellNavigationEnabled.test.ts

@@ -0,0 +1,21 @@
+import { isCellNavigationEnabled } from "..";
+
+describe("isCellNavigationEnabled", () => {
+  it("is enabled when buttons are disabled, regardless of the toggle", () => {
+    expect(isCellNavigationEnabled(false, false)).toBe(true);
+    expect(isCellNavigationEnabled(false, true)).toBe(true);
+    expect(isCellNavigationEnabled(undefined, undefined)).toBe(true);
+    expect(isCellNavigationEnabled("false", false)).toBe(true);
+  });
+
+  it("is disabled when buttons are enabled and the toggle is off or missing", () => {
+    expect(isCellNavigationEnabled(true, false)).toBe(false);
+    expect(isCellNavigationEnabled(true, undefined)).toBe(false);
+    expect(isCellNavigationEnabled("true", "false")).toBe(false);
+  });
+
+  it("is enabled when buttons and the toggle are both enabled", () => {
+    expect(isCellNavigationEnabled(true, true)).toBe(true);
+    expect(isCellNavigationEnabled("true", "true")).toBe(true);
+  });
+});

package/cellUtils/index.ts

@@ -12,6 +12,7 @@ import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
+import { isTrue } from "../booleanUtils";
 
 const CUSTOM_KEY = "other";
 
@@ -572,3 +573,42 @@ export const hasTextLabelsEnabled = (
     return Boolean(value);
   });
 };
+
+/**
+ * Reads the mobile buttons container "buttons enabled" switch from cell styles.
+ */
+export const getButtonsEnabled = (styles?: Record<string, any>): boolean => {
+  return isTrue(styles?.mobile_buttons_container_buttons_enabled);
+};
+
+/**
+ * Reads the mobile buttons container "cell navigation enabled" switch from cell styles.
+ */
+export const getCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean => {
+  return isTrue(styles?.mobile_buttons_container_cell_navigation_enabled);
+};
+
+/**
+ * Whether tapping a cell outside its action buttons triggers the cell's navigation.
+ * Always true when the buttons are disabled.
+ * @param buttonsEnabled the cell's "buttons enabled" switch value
+ * @param cellNavigationEnabled the cell's "cell navigation enabled" switch value
+ */
+export const isCellNavigationEnabled = (
+  buttonsEnabled: unknown,
+  cellNavigationEnabled: unknown
+): boolean => !isTrue(buttonsEnabled) || isTrue(cellNavigationEnabled);
+
+/**
+ * Whether tapping a mobile cell outside its action buttons triggers the cell's navigation,
+ * read from the cell styles.
+ */
+export const getIsCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean =>
+  isCellNavigationEnabled(
+    getButtonsEnabled(styles),
+    getCellNavigationEnabled(styles)
+  );

package/localizationUtils/index.ts

@@ -28,17 +28,23 @@ const RTL_LOCALES = [
   "yi", // Yiddish
 ];
 
+// The strings for the UI language, else the first language present
+export const getLocalizedStrings = (
+  localizations = {},
+  languageCode = getUILanguage()
+) =>
+  localizations?.[languageCode] ||
+  Object.values(localizations).find(
+    (value) => typeof value === "object" && value !== null
+  ) ||
+  {};
+
 export function useLocalizedStrings({ localizations = {} }) {
   const languageCode = getUILanguage();
 
   // TODO: probably we can call getLocalizations here from localizationsHelper.js
   const result = useMemo(
-    () =>
-      localizations?.[languageCode] ||
-      Object.values(localizations).find(
-        (value) => typeof value === "object" && value !== null
-      ) ||
-      {},
+    () => getLocalizedStrings(localizations, languageCode),
     [languageCode, localizations]
   );
 

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -830,6 +830,14 @@ function getPlayerConfiguration({ platform, version }) {
         type: "switch",
         label_tooltip:
           "Enable this option to have a floating video player when the app is in the background.",
+      },
+      {
+        key: "vertical_video_player",
+        label: "Vertical video mode",
+        initial_value: false,
+        type: "switch",
+        label_tooltip:
+          "Enable this option to use the vertical video player layout.",
       }
     );
 

package/manifestUtils/keys.js

@@ -412,6 +412,12 @@ const mobileActionButtonContainerFields = (positionOptions) => [
     type: ZAPPIFEST_FIELDS.switch,
     suffix: "buttons enabled",
   },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "cell navigation enabled",
+    label_tooltip:
+      "Controls whether tapping on the cell (outside the buttons) triggers its navigation behavior. When disabled, only the configured buttons are interactive. Useful for Home screens (tap anywhere to open) vs. Details screens (only buttons should work).",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "position",
@@ -478,7 +484,7 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
       { text: "share", value: "native_share_action" },
       { text: "downloads", value: "offline-content-button" },
       { text: "trailer", value: "trailer_action" },
-      { text: "mute/unmute", value: "mute_unmute" },
+      { text: "mute/unmute", value: "mute_unmute_action" },
     ],
   },
   {

package/manifestUtils/mobileAction/container/__tests__/mobileActionButtonsContainer.test.js

@@ -7,6 +7,7 @@ describe("mobileActionButtonsContainer", () => {
       description: "container",
       defaults: {
         buttonsEnabled: false,
+        cellNavigationEnabled: false,
         position: ["over_image", "text_label_1", "text_label_2"],
         align: "left",
         overImagePosition: "bottom_left",
@@ -31,6 +32,26 @@ describe("mobileActionButtonsContainer", () => {
     expect(enabledField).toBeTruthy();
     expect(enabledField.type).toBe("switch");
 
+    const cellNavigationField = result.fields.find(
+      (field) =>
+        field.key === "mobile_buttons_container_cell_navigation_enabled"
+    );
+
+    expect(cellNavigationField).toMatchObject({
+      type: "switch",
+      label: "Cell navigation enabled",
+      initial_value: false,
+      label_tooltip: expect.stringContaining(
+        "Controls whether tapping on the cell"
+      ),
+      conditional_fields: [
+        {
+          key: "styles/mobile_buttons_container_buttons_enabled",
+          condition_value: true,
+        },
+      ],
+    });
+
     const positionField = result.fields.find(
       (field) => field.key === "mobile_buttons_container_position"
     );

package/manifestUtils/mobileAction/groups/defaults.js

@@ -1,5 +1,6 @@
 const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
   buttonsEnabled: false,
+  cellNavigationEnabled: false,
 
   align: "left",
   overImagePosition: "bottom_left",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.8114431136",
+  "version": "16.0.0-alpha.8225069933",
   "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-alpha.8114431136",
+    "@applicaster/applicaster-types": "16.0.0-alpha.8225069933",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -36,6 +36,7 @@
     "prop-types": "^15.0.0"
   },
   "peerDependencies": {
+    "@applicaster/quick-brick-assets": "*",
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "react": "*",

package/quickBrickAssets/__tests__/index.test.ts

@@ -0,0 +1,18 @@
+// The Jest stand-in for @applicaster/quick-brick-assets maps each existing key to itself
+import { getQuickBrickAsset } from "..";
+
+describe("getQuickBrickAsset", () => {
+  it("returns the asset for a plugin identifier and path", () => {
+    expect(
+      getQuickBrickAsset("mute_unmute_action", "action/flavour_1/mute.png")
+    ).toBe("mute_unmute_action/action/flavour_1/mute.png");
+  });
+
+  it("rejects unknown paths and plugin identifiers at compile time", () => {
+    // @ts-expect-error - no such file in mute_unmute_action
+    getQuickBrickAsset("mute_unmute_action", "action/flavour_9/mute.png");
+
+    // @ts-expect-error - no assets folder for this plugin
+    getQuickBrickAsset("unknown_plugin", "action/flavour_1/mute.png");
+  });
+});

package/quickBrickAssets/index.ts

@@ -0,0 +1,35 @@
+import assets from "@applicaster/quick-brick-assets";
+import type {
+  QuickBrickAssetKey,
+  QuickBrickAssetSource,
+} from "@applicaster/quick-brick-assets";
+
+export type { QuickBrickAssetKey, QuickBrickAssetSource };
+
+type PluginOf<K> = K extends `${infer Plugin}/${string}` ? Plugin : never;
+
+type PathOf<K, Plugin extends string> = K extends `${Plugin}/${infer Path}`
+  ? Path
+  : never;
+
+/** Plugin identifiers that have a folder in `@applicaster/quick-brick-assets`. */
+export type QuickBrickAssetPlugin = PluginOf<QuickBrickAssetKey>;
+
+/** Asset paths inside the given plugin's folder. */
+export type QuickBrickAssetPath<Plugin extends QuickBrickAssetPlugin> = PathOf<
+  QuickBrickAssetKey,
+  Plugin
+>;
+
+/**
+ * Looks up an asset of `@applicaster/quick-brick-assets` by plugin identifier
+ * and path relative to the plugin folder, e.g.
+ * `getQuickBrickAsset("mute_unmute_action", "action/flavour_1/mute.png")`.
+ * Both arguments are checked against the package's files at compile time.
+ * Density variants (`@2x` / `@3x`) are not supported.
+ */
+export const getQuickBrickAsset = <Plugin extends QuickBrickAssetPlugin>(
+  pluginIdentifier: Plugin,
+  assetPath: QuickBrickAssetPath<Plugin>
+): QuickBrickAssetSource =>
+  assets[`${pluginIdentifier}/${assetPath}` as QuickBrickAssetKey];

package/reactHooks/__tests__/getPluginConfiguration.test.ts

@@ -0,0 +1,82 @@
+import { renderHook } from "@testing-library/react-native";
+
+const plugin = {
+  identifier: "cast",
+  configuration: {
+    title: "Configured",
+    localizations: { fr: { close: "Fermer" } },
+  },
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [plugin],
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper",
+  () => ({ getUILanguage: () => "fr" })
+);
+
+import {
+  getPluginConfiguration,
+  mergeLocalizations,
+  usePluginConfiguration,
+} from "../usePluginConfiguration";
+
+const manifest = {
+  custom_configuration_fields: [
+    { key: "title", initial_value: "Default" },
+    { key: "color", initial_value: "red" },
+  ],
+  localizations: {
+    fields: [
+      { key: "close", initial_value: "Close" },
+      { key: "cancel", initial_value: "Cancel" },
+    ],
+  },
+};
+
+it("matches usePluginConfiguration outside React", () => {
+  const { result } = renderHook(() => usePluginConfiguration("cast", manifest));
+
+  expect(getPluginConfiguration(plugin, manifest)).toEqual(result.current);
+});
+
+// Expected values are what R.mergeDeepWith((l, r) => (isNil(l) ? r : l)) returned before ramda was removed
+describe("mergeLocalizations", () => {
+  const defaults = { en: { close: "Close", cancel: "Cancel" } };
+
+  it("returns the defaults when nothing is configured", () => {
+    expect(mergeLocalizations(undefined, defaults)).toEqual(defaults);
+  });
+
+  it("keeps configured values, fills nil ones and missing keys from defaults", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: null, extra: "X" }, fr: { close: "Fermer" } },
+        defaults
+      )
+    ).toEqual({
+      en: { close: "Close", extra: "X", cancel: "Cancel" },
+      fr: { close: "Fermer" },
+    });
+  });
+
+  it("does not merge arrays", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: ["a"] } },
+        { en: { close: ["b"], cancel: "C" } }
+      )
+    ).toEqual({ en: { close: ["a"], cancel: "C" } });
+  });
+});
+
+it("keeps configured languages first, so the fallback language stays the configured one", () => {
+  const merged = mergeLocalizations(
+    { he: { close: "סגור" }, en: { close: "Close it" } },
+    { en: { close: "Close" } }
+  );
+
+  expect(Object.keys(merged)).toEqual(["he", "en"]);
+});

package/reactHooks/actions/index.ts

@@ -21,17 +21,45 @@ type ActionContexts<T = unknown> = {
 };
 
 /**
- * React Hook to subscribe to the custom action context
+ * A value that changes whenever a provider is added to or removed from
+ * `uiActionsRegistry`.
+ *
+ * Providers can register after the UI that wants them has rendered - the audio
+ * player registers playback speed only once its controller has state, and
+ * plugin-backed actions are bridged in from an effect. Put this in the
+ * dependency list of anything that resolves actions, so the list is re-read
+ * instead of being frozen at first paint.
+ */
+export function useRegistryRevision(): number {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(
+    () =>
+      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
+    []
+  );
+
+  return revision;
+}
+
+/**
+ * Resolves a legacy action context or falls back to the UI action registry.
  * @param {*} plugId - subscribes to the context of that action plugin
  * @return {*} - global action provider context or context for specific action plugin
  */
 export function useActions<T = unknown>(plugId: string): any {
   const [logged, setLogged] = useState(false);
   const context = useContext<ActionContexts<T>>(ActionsContext);
+  useRegistryRevision();
+
   const actionContext = context?.actions?.[plugId]?.module?.context;
 
   if (plugId) {
     if (!actionContext) {
+      const registeredAction = uiActionsRegistry.getAction(plugId);
+
+      if (registeredAction) return registeredAction;
+
       if (!logged) {
         logger.warning({
           message: `useActions: Couldn't find an action for ${plugId} plugin`,
@@ -139,25 +167,3 @@ export function useEntryActionState(
 
   return { state, invokeAction };
 }
-
-/**
- * A value that changes whenever a provider is added to or removed from
- * `uiActionsRegistry`.
- *
- * Providers can register after the UI that wants them has rendered - the audio
- * player registers playback speed only once its controller has state, and
- * plugin-backed actions are bridged in from an effect. Put this in the
- * dependency list of anything that resolves actions, so the list is re-read
- * instead of being frozen at first paint.
- */
-export function useRegistryRevision(): number {
-  const [revision, setRevision] = useState(0);
-
-  useEffect(
-    () =>
-      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
-    []
-  );
-
-  return revision;
-}

package/reactHooks/usePluginConfiguration.ts

@@ -1,4 +1,3 @@
-import * as R from "ramda";
 import { useMemo } from "react";
 
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
@@ -6,7 +5,8 @@ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
 import { populateConfigurationValues } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { useLocalizedStrings } from "../localizationUtils";
+import { getLocalizedStrings, useLocalizedStrings } from "../localizationUtils";
+import { isNil, pathOr } from "../utils";
 
 const populateFields = (
   data,
@@ -14,16 +14,72 @@ const populateFields = (
   pathToValues: string | string[] = "configuration",
   skipDefaults = false
 ) =>
-  R.compose(
-    (config) =>
-      populateConfigurationValues(manifestFields, config, skipDefaults),
-    R.pathOr({}, R.unless(Array.isArray, Array)(pathToValues))
-  )(data);
+  populateConfigurationValues(
+    manifestFields,
+    pathOr({}, pathToValues, data),
+    skipDefaults
+  );
 
 export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
+const getDefaultLocalizations = (manifest) =>
+  manifest?.localizations?.fields?.reduce(
+    (defaults, { key, initial_value }) => ({
+      en: { ...defaults.en, [key]: initial_value },
+    }),
+    { en: {} }
+  ) || {};
+
+const isPlainObject = (value) =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+// Deep merge where configured values win, except nil ones (defaults fill the gaps)
+export const mergeLocalizations = (configured, defaults) => {
+  if (!isPlainObject(configured)) return { ...defaults };
+  if (!isPlainObject(defaults)) return { ...configured };
+
+  // Configured keys first, as R.mergeDeepWith: the first language is the fallback
+  return Object.keys({ ...configured, ...defaults }).reduce((merged, key) => {
+    const left = configured[key];
+    const right = defaults[key];
+
+    if (!(key in defaults)) {
+      merged[key] = left;
+    } else if (!(key in configured)) {
+      merged[key] = right;
+    } else if (isPlainObject(left) && isPlainObject(right)) {
+      merged[key] = mergeLocalizations(left, right);
+    } else {
+      merged[key] = isNil(left) ? right : left;
+    }
+
+    return merged;
+  }, {});
+};
+
+/**
+ * usePluginConfiguration outside React: the same result, read once instead of subscribed.
+ */
+export function getPluginConfiguration<T = any, S = Record<string, any>>(
+  plugin,
+  manifest?: any
+): { configurationFields: T; localizations: S } {
+  return {
+    configurationFields: populateFields(
+      plugin,
+      manifest?.custom_configuration_fields
+    ),
+    localizations: getLocalizedStrings(
+      mergeLocalizations(
+        plugin?.configuration?.localizations,
+        getDefaultLocalizations(manifest)
+      )
+    ),
+  };
+}
+
 export function usePluginConfiguration<T = any, S = Record<string, any>>(
   identifier: string,
   manifest?: any
@@ -31,7 +87,7 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
   const plugins = usePlugins();
 
   const plugin = useMemo(
-    () => R.find(R.propEq("identifier", identifier), plugins),
+    () => plugins?.find((item) => item?.identifier === identifier),
     [plugins, identifier]
   );
 
@@ -40,29 +96,20 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
     [plugin, manifest]
   );
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         plugin?.configuration?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [plugin?.configuration?.localizations, defaultLocalizations]);
+    }),
+    [plugin?.configuration?.localizations, defaultLocalizations]
+  );
 
   const localizations: S = useLocalizedStrings(localizationsParams);
 
@@ -105,29 +152,20 @@ export function useLayoutConfiguration<
     "localizations",
   ];
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         layoutData?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [layoutData?.localizations, defaultLocalizations]);
+    }),
+    [layoutData?.localizations, defaultLocalizations]
+  );
 
   // Always call useLocalizedStrings regardless of whether localizations is in the keys
   const localizations: L = useLocalizedStrings(localizationsParams);