@applicaster/zapp-react-native-ui-components 16.0.0-rc.121 → 16.0.0-rc.123

package/Components/VideoLive/__tests__/LiveImageMuteState.test.ts

@@ -0,0 +1,311 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
+import { LiveImage, LiveImageManager } from "../LiveImageManager";
+import { MuteUnmuteController } from "../MuteUnmuteController";
+import * as reactUtils from "@applicaster/zapp-react-native-utils/reactUtils";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory",
+  () => ({ playerFactory: jest.fn() })
+);
+
+let mockPreference: boolean | undefined;
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference",
+  () => ({
+    getUserCellPlayerMutedPreference: (defaultMuted = true) =>
+      mockPreference ?? defaultMuted,
+    setUserCellPlayerMutedPreference: (muted: boolean) => {
+      mockPreference = muted;
+    },
+  })
+);
+
+const createImage = (audioMutedByDefault = true) =>
+  new LiveImage({
+    audioMutedByDefault,
+    playerId: "preview",
+    tag: "preview",
+    factoryConfig: {
+      player: { current: null },
+      playerId: "preview",
+      playerPluginId: "test-player",
+      screenConfig: {},
+      entry: { id: "entry" },
+    },
+  });
+
+const factory = jest.mocked(playerFactory);
+
+beforeEach(() => {
+  mockPreference = undefined;
+  factory.mockReset();
+
+  factory.mockImplementation(async (props) => ({
+    controller: new Player(props),
+    Component: () => null,
+  }));
+});
+
+it("keeps a pre-playback toggle in the domain snapshot and factory input", async () => {
+  const image = createImage();
+  const listener = jest.fn();
+  const remove = image.subscribeMuted(listener);
+
+  image.unmute();
+  image.unmute();
+
+  expect(image.getMuted()).toBe(false);
+  expect(listener).toHaveBeenCalledTimes(1);
+
+  await image.prepareForPlayback();
+
+  expect(factory).toHaveBeenCalledWith(
+    expect.objectContaining({ muted: false })
+  );
+
+  expect(image.getPlayer()?.getIsMuted()).toBe(false);
+
+  remove();
+  image.mute();
+  expect(listener).toHaveBeenCalledTimes(1);
+});
+
+it.each([true, false])(
+  "reconciles a toggle during async creation from muted=%s",
+  async (initialMuted) => {
+    let finishFactory!: () => void;
+
+    factory.mockImplementation(
+      (props) =>
+        new Promise((resolve) => {
+          finishFactory = () =>
+            resolve({
+              controller: new Player(props),
+              Component: () => null,
+            });
+        })
+    );
+
+    const image = createImage(initialMuted);
+    const preparation = image.prepareForPlayback();
+
+    initialMuted ? image.unmute() : image.mute();
+    finishFactory();
+    await preparation;
+
+    expect(image.getMuted()).toBe(!initialMuted);
+    expect(image.getPlayer()?.getIsMuted()).toBe(!initialMuted);
+  }
+);
+
+it("publishes direct player mute changes through the same snapshot", async () => {
+  const image = createImage();
+  await image.prepareForPlayback();
+  const listener = jest.fn();
+  image.subscribeMuted(listener);
+
+  image.getPlayer()?.unmute();
+  expect(image.getMuted()).toBe(false);
+  image.getPlayer()?.mute();
+  expect(image.getMuted()).toBe(true);
+  expect(listener).toHaveBeenCalledTimes(2);
+});
+
+it("uses the registered cell default for action reads and the first toggle", () => {
+  const manager = new LiveImageManager();
+  const controller = new MuteUnmuteController({ manager });
+  const listener = jest.fn();
+  controller.subscribe("entry", listener);
+
+  const image = createImage(false);
+  const unregister = manager.register(image);
+
+  expect(listener).toHaveBeenLastCalledWith({ muted: false });
+  expect(controller.getEntryState("entry")).toEqual({ muted: false });
+
+  controller.toggle("entry");
+
+  expect(mockPreference).toBe(true);
+  expect(image.getMuted()).toBe(true);
+  expect(listener).toHaveBeenLastCalledWith({ muted: true });
+
+  unregister();
+  listener.mockClear();
+  image.unmute();
+  expect(listener).not.toHaveBeenCalled();
+});
+
+it("updates every deferred preview when another cell toggles the session", () => {
+  const manager = new LiveImageManager();
+  const controller = new MuteUnmuteController({ manager });
+  const first = createImage();
+  const second = createImage();
+  const removeFirst = manager.register(first);
+  const removeSecond = manager.register(second);
+
+  controller.toggle("entry");
+
+  expect(first.getMuted()).toBe(false);
+  expect(second.getMuted()).toBe(false);
+  expect(controller.getEntryState("entry")).toEqual({ muted: false });
+
+  removeFirst();
+  removeSecond();
+});
+
+it("applies a session toggle that happens between construction and registration", () => {
+  const manager = new LiveImageManager();
+  const image = createImage();
+
+  manager.unmuteAll();
+  const unregister = manager.register(image);
+
+  expect(image.getMuted()).toBe(false);
+  expect(manager.getEntryMuted("entry")).toBe(false);
+  unregister();
+});
+
+it("keeps TV previews initially unmuted regardless of the mobile preference", () => {
+  const isTV = jest.spyOn(reactUtils, "isTV").mockReturnValue(true);
+  mockPreference = true;
+
+  expect(createImage().getMuted()).toBe(false);
+  isTV.mockRestore();
+});
+
+it("continues notifying and updating the player if a mute subscriber throws", async () => {
+  const image = createImage();
+  await image.prepareForPlayback();
+
+  image.subscribeMuted(() => {
+    throw new Error("broken subscriber");
+  });
+
+  const listener = jest.fn();
+  image.subscribeMuted(listener);
+
+  image.unmute();
+
+  expect(listener).toHaveBeenCalledTimes(1);
+  expect(image.getPlayer()?.getIsMuted()).toBe(false);
+});
+
+it("reports playback only after readiness and hides on pause, end, close and errors", async () => {
+  const image = createImage();
+  expect(image.isPlaying()).toBe(false);
+  await image.prepareForPlayback();
+  const player = image.getPlayer()!;
+  expect(image.isPlaying()).toBe(false);
+
+  player.onVideoLoad({ currentTime: 0, duration: 30, seekableDuration: 30 });
+  player.onPlayerResume({});
+  expect(image.isPlaying()).toBe(true);
+
+  player.onPlayerPause({});
+  expect(image.isPlaying()).toBe(false);
+  player.onPlayerResume({});
+  expect(image.isPlaying()).toBe(true);
+
+  player.onVideoEnd({});
+  // Player.onVideoEnd does not clear readiness or mark the controller paused.
+  expect(player.isReadyToPlay()).toBe(true);
+  expect(player.isPlaying()).toBe(true);
+  expect(image.isPlaying()).toBe(false);
+
+  player.onPlayerResume({});
+  expect(image.isPlaying()).toBe(true);
+  player.onError(new Error("preview failed"));
+  expect(image.isPlaying()).toBe(false);
+
+  player.onPlayerResume({});
+  player.onVideoError(new Error("video failed"));
+  expect(image.isPlaying()).toBe(false);
+
+  player.onPlayerResume({});
+  player.onPlayerClose();
+  expect(image.isPlaying()).toBe(false);
+});
+
+it("scopes playback visibility to the current cell and original entry id", async () => {
+  const manager = new LiveImageManager();
+  const image = createImage();
+  const unregister = manager.register(image);
+  manager.playLiveImage(image);
+  await image.prepareForPlayback();
+  const player = image.getPlayer()!;
+
+  // Preload may substitute the entry passed to the player controller.
+  jest.spyOn(player, "getEntry").mockReturnValue({ id: "processed-entry" });
+  player.onVideoLoad({ currentTime: 0, duration: 30, seekableDuration: 30 });
+  player.onPlayerResume({});
+
+  expect(manager.getPlayingCellId("entry")).toBe("preview");
+  expect(manager.getPlayingCellId("processed-entry")).toBeUndefined();
+  player.onVideoEnd({});
+  expect(manager.getPlayingCellId("entry")).toBeUndefined();
+  unregister();
+});
+
+it("delivers real player transitions through manager-only action subscriptions", async () => {
+  const manager = LiveImageManager.instance;
+  const controller = new MuteUnmuteController({ manager });
+  const image = createImage();
+  const unregister = manager.register(image);
+  manager.playLiveImage(image);
+  await image.prepareForPlayback();
+  const player = image.getPlayer()!;
+  const listener = jest.fn();
+  const unsubscribe = controller.subscribe("entry", listener);
+
+  player.onVideoLoad({ currentTime: 0, duration: 30, seekableDuration: 30 });
+  player.onPlayerResume({});
+
+  expect(listener).toHaveBeenLastCalledWith({
+    muted: true,
+    activeCellId: "preview",
+  });
+
+  player.unmute();
+
+  expect(listener).toHaveBeenLastCalledWith({
+    muted: false,
+    activeCellId: "preview",
+  });
+
+  player.onPlayerPause({});
+
+  expect(listener).toHaveBeenLastCalledWith({
+    muted: false,
+    activeCellId: undefined,
+  });
+
+  player.onPlayerResume({});
+
+  expect(listener).toHaveBeenLastCalledWith({
+    muted: false,
+    activeCellId: "preview",
+  });
+
+  player.onVideoEnd({});
+
+  expect(listener).toHaveBeenLastCalledWith({
+    muted: false,
+    activeCellId: undefined,
+  });
+
+  unsubscribe();
+  unregister();
+});
+
+it("notifies session-only toggles through the real manager exactly once", () => {
+  const manager = new LiveImageManager();
+  const controller = new MuteUnmuteController({ manager });
+  const listener = jest.fn();
+  const unsubscribe = controller.subscribe("entry", listener);
+  controller.toggle("entry");
+  expect(listener).toHaveBeenCalledTimes(1);
+  expect(listener).toHaveBeenCalledWith({ muted: false });
+  unsubscribe();
+});

package/Components/VideoLive/__tests__/MuteUnmuteController.test.ts

@@ -0,0 +1,135 @@
+import { MuteUnmuteController } from "../MuteUnmuteController";
+import type { LiveImageManagerListenerData } from "../LiveImageManager";
+
+jest.mock("../LiveImageManager", () => ({
+  LiveImageManager: { instance: {} },
+}));
+
+const setup = () => {
+  let preference = true;
+  const listeners = new Map<string, LiveImageManagerListenerData["listener"]>();
+
+  const emit = (event: keyof LiveImageManagerListenerData["listener"]) =>
+    listeners.forEach((listener) => listener[event]?.());
+
+  const manager = {
+    getEntryMuted: jest.fn((): boolean | undefined => undefined),
+    getPlayingCellId: jest.fn((): string | undefined => undefined),
+    addListener: jest.fn(({ id, listener }: LiveImageManagerListenerData) => {
+      listeners.set(id, listener);
+
+      return () => listeners.delete(id);
+    }),
+    muteAll: jest.fn(() => {
+      preference = true;
+      emit("onMuteChange");
+    }),
+    unmuteAll: jest.fn(() => {
+      preference = false;
+      emit("onMuteChange");
+    }),
+  };
+
+  const controller = new MuteUnmuteController({
+    manager,
+    getMutedPreference: (cellDefault) => cellDefault ?? preference,
+  });
+
+  return { controller, manager, listeners, emit };
+};
+
+it("uses the registered preview snapshot, otherwise the session/cell default", () => {
+  const { controller, manager } = setup();
+  expect(controller.getEntryState("1").muted).toBe(true);
+
+  expect(
+    controller.getEntryState("1", { audioMutedByDefault: false }).muted
+  ).toBe(false);
+
+  manager.getEntryMuted.mockReturnValue(false);
+  expect(controller.getEntryState("1").muted).toBe(false);
+  controller.toggle("1");
+  expect(manager.muteAll).toHaveBeenCalledTimes(1);
+});
+
+it("toggles and notifies all entries without any registered preview", () => {
+  const { controller, manager } = setup();
+  const first = jest.fn();
+  const second = jest.fn();
+  controller.subscribe("1", first);
+  controller.subscribe("2", second);
+  controller.toggle("1");
+  expect(manager.unmuteAll).toHaveBeenCalledTimes(1);
+  expect(first).toHaveBeenCalledTimes(1);
+  expect(second).toHaveBeenCalledWith({ muted: false });
+  controller.toggle("1");
+  expect(first).toHaveBeenLastCalledWith({ muted: true });
+});
+
+it.each([
+  "onRegister",
+  "onMuteChange",
+  "onStart",
+  "onEnd",
+  "onError",
+  "onDestroy",
+] as const)(
+  "reads domain state on %s and filters unchanged notifications",
+  (event) => {
+    const { controller, manager, emit } = setup();
+    const listener = jest.fn();
+    controller.subscribe("1", listener);
+    expect(listener).not.toHaveBeenCalled();
+    manager.getEntryMuted.mockReturnValue(false);
+    emit(event);
+    emit(event);
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith({ muted: false });
+  }
+);
+
+it("follows pause, resume and duplicate-entry cell transfers through the manager", () => {
+  const { controller, manager, emit } = setup();
+  const listener = jest.fn();
+  controller.subscribe("1", listener);
+
+  for (const cell of ["first-cell", undefined, "second-cell"]) {
+    manager.getPlayingCellId.mockReturnValue(cell);
+    emit("onPlaybackChange");
+
+    expect(listener).toHaveBeenLastCalledWith({
+      muted: true,
+      activeCellId: cell,
+    });
+  }
+});
+
+it("cleans up independent subscribers idempotently", () => {
+  const { controller, manager, listeners, emit } = setup();
+  const first = jest.fn();
+  const second = jest.fn();
+  const remove = controller.subscribe("1", first);
+  controller.subscribe("1", second);
+  expect(listeners.size).toBe(2);
+  remove();
+  remove();
+  manager.getEntryMuted.mockReturnValue(false);
+  emit("onMuteChange");
+  expect(first).not.toHaveBeenCalled();
+  expect(second).toHaveBeenCalledTimes(1);
+  expect(listeners.size).toBe(1);
+});
+
+it("isolates throwing subscribers", () => {
+  const { controller, manager, emit } = setup();
+  const second = jest.fn();
+
+  controller.subscribe("1", () => {
+    throw new Error("boom");
+  });
+
+  controller.subscribe("1", second);
+  manager.getEntryMuted.mockReturnValue(false);
+  expect(() => emit("onMuteChange")).not.toThrow();
+  expect(second).toHaveBeenCalledTimes(1);
+});

package/Components/VideoLive/__tests__/PlayerLiveImageComponent.test.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
-import { render } from "@testing-library/react-native";
+import { act, render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { LiveImageManager, LiveImageType } from "../LiveImageManager";
 
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
@@ -153,4 +154,65 @@ describe("PlayerLiveImageComponent", () => {
     const isPlayerRegistered = playerManager.isPlayerRegistered(props.playerId);
     expect(isPlayerRegistered).toBe(false);
   });
+
+  it("renders domain mute state after a pre-playback toggle and later player events", async () => {
+    jest.useFakeTimers();
+    const nativeView = jest.fn((_props: { muted: boolean }) => null);
+
+    const Player = jest.requireActual(
+      "@applicaster/zapp-react-native-utils/appUtils/playerManager/player"
+    ).Player;
+
+    const factory = jest
+      .spyOn(PlayerFactory, "playerFactory")
+      .mockImplementation(async (props) => ({
+        controller: new Player(props),
+        Component: nativeView,
+      }));
+
+    const register = jest.spyOn(LiveImageManager.instance, "register");
+
+    const view = render(
+      <Wrapper>
+        <PlayerLiveImage {...defaultProps} audioMutedByDefault />
+      </Wrapper>
+    );
+
+    const image = register.mock.calls[register.mock.calls.length - 1][0];
+
+    act(() => image.unmute());
+
+    view.rerender(
+      <Wrapper>
+        <PlayerLiveImage
+          {...defaultProps}
+          audioMutedByDefault
+          style={{ opacity: 1 }}
+        />
+      </Wrapper>
+    );
+
+    expect(image.getMuted()).toBe(false);
+
+    await act(async () => {
+      await image.prepareForPlayback();
+      image.setMode?.(LiveImageType.Video);
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(
+      nativeView.mock.calls[nativeView.mock.calls.length - 1][0].muted
+    ).toBe(false);
+
+    act(() => image.getPlayer()?.mute());
+
+    expect(
+      nativeView.mock.calls[nativeView.mock.calls.length - 1][0].muted
+    ).toBe(true);
+
+    view.unmount();
+    register.mockRestore();
+    factory.mockRestore();
+    jest.useRealTimers();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.121",
+  "version": "16.0.0-rc.123",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "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-utils": "16.0.0-rc.121",
+    "@applicaster/applicaster-types": "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-utils": "16.0.0-rc.123",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",