@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3081324238 → 16.0.0-alpha.3202041045

package/Components/VideoLive/MuteUnmuteController.ts

@@ -0,0 +1,135 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
+import {
+  LiveImageManager,
+  type LiveImageManagerEvent,
+} from "./LiveImageManager";
+
+const { log_error } = createLogger({
+  category: "MuteUnmuteController",
+  subsystem: "MuteUnmuteController",
+});
+
+export const MUTE_UNMUTE_ACTION_IDENTIFIER = "mute_unmute_action";
+
+export type MuteUnmuteEntryState = {
+  muted: boolean;
+  activeCellId?: string;
+};
+
+export type MuteUnmuteListener = (state: MuteUnmuteEntryState) => void;
+
+type StateOptions = { audioMutedByDefault?: boolean };
+
+type MuteUnmuteManager = {
+  getEntryMuted: (entryId: string) => boolean | undefined;
+  getPlayingCellId: (entryId: string) => string | undefined;
+  addListener: (data: {
+    id: string;
+    listener: Record<LiveImageManagerEvent, () => void>;
+  }) => () => void;
+  muteAll: () => void;
+  unmuteAll: () => void;
+};
+
+type MuteUnmuteDependencies = {
+  manager?: MuteUnmuteManager;
+  getMutedPreference?: (audioMutedByDefault?: boolean) => boolean | unknown;
+};
+
+const MANAGER_EVENTS: LiveImageManagerEvent[] = [
+  "onStart",
+  "onEnd",
+  "onError",
+  "onDestroy",
+  "onRegister",
+  "onMuteChange",
+  "onPlaybackChange",
+];
+
+const sameState = (a: MuteUnmuteEntryState, b: MuteUnmuteEntryState) =>
+  a.muted === b.muted && a.activeCellId === b.activeCellId;
+
+export class MuteUnmuteController {
+  private readonly manager: MuteUnmuteManager;
+  private readonly getMutedPreference: NonNullable<
+    MuteUnmuteDependencies["getMutedPreference"]
+  >;
+
+  private subscriptionCounter = 0;
+
+  constructor({ manager, getMutedPreference }: MuteUnmuteDependencies = {}) {
+    this.manager = manager ?? LiveImageManager.instance;
+
+    this.getMutedPreference =
+      getMutedPreference ?? getUserCellPlayerMutedPreference;
+  }
+
+  public getEntryState = (
+    entryId: string,
+    options?: StateOptions
+  ): MuteUnmuteEntryState => {
+    return {
+      activeCellId: this.manager.getPlayingCellId(entryId),
+      muted:
+        this.manager.getEntryMuted(entryId) ??
+        !!this.getMutedPreference(options?.audioMutedByDefault),
+    };
+  };
+
+  public toggle = (entryId: string): void => {
+    if (this.getEntryState(entryId).muted) {
+      this.manager.unmuteAll();
+    } else {
+      this.manager.muteAll();
+    }
+  };
+
+  public subscribe = (
+    entryId: string,
+    listener: MuteUnmuteListener,
+    options?: StateOptions
+  ): (() => void) => {
+    const id = `mute-unmute-controller:${entryId}:${++this.subscriptionCounter}`;
+
+    let lastState = this.getEntryState(entryId, options);
+    let active = true;
+
+    const check = () => {
+      if (!active) return;
+
+      const next = this.getEntryState(entryId, options);
+
+      if (sameState(next, lastState)) return;
+
+      lastState = next;
+
+      try {
+        listener(next);
+      } catch (error) {
+        log_error(
+          `subscribe: listener for entry ${entryId} threw: ${error?.message}`,
+          { error }
+        );
+      }
+    };
+
+    const managerListeners = Object.fromEntries(
+      MANAGER_EVENTS.map((name) => [name, check])
+    ) as Record<LiveImageManagerEvent, () => void>;
+
+    const removeManagerListener = this.manager.addListener({
+      id,
+      listener: managerListeners,
+    });
+
+    return () => {
+      if (!active) return;
+
+      active = false;
+      removeManagerListener();
+    };
+  };
+}
+
+export const muteUnmuteController = new MuteUnmuteController();

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -7,12 +7,8 @@ import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
-import {
-  isApplePlatform,
-  isTV,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
-import { getUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import Image from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/Image";
 import { LiveImage, LiveImageManager, LiveImageType } from "./LiveImageManager";
 
@@ -57,10 +53,6 @@ const PlayerLiveImageComponent = (props: Props) => {
   const [mode, setMode] = React.useState(LiveImageType.Image);
   const [isReadyToPlay, setIsReady] = React.useState(false);
 
-  const [muted, setMuted] = React.useState(
-    isTV() ? false : getUserCellPlayerMutedPreference(props.audioMutedByDefault)
-  );
-
   const ref = React.useRef(null);
   const trackViewRef = React.useRef(null);
 
@@ -121,6 +113,7 @@ const PlayerLiveImageComponent = (props: Props) => {
 
   const liveImageItem: LiveImage = React.useMemo(() => {
     return new LiveImage({
+      audioMutedByDefault: props.audioMutedByDefault,
       playerId,
       preloadHooks,
       factoryConfig: {
@@ -132,10 +125,19 @@ const PlayerLiveImageComponent = (props: Props) => {
       },
       tag: item.title?.toString(),
     });
-  }, [playerId, preloadHooks, playerPluginId, screenConfig, item]);
-
-  // Keep the muted state in sync with user preference and player state
-  liveImageItem.initiallyMuted = muted;
+  }, [
+    playerId,
+    preloadHooks,
+    playerPluginId,
+    screenConfig,
+    item,
+    props.audioMutedByDefault,
+  ]);
+
+  const muted = React.useSyncExternalStore(
+    liveImageItem.subscribeMuted,
+    liveImageItem.getMuted
+  );
 
   React.useEffect(() => {
     liveImageItem.setMode = setModeDebounced;
@@ -202,12 +204,6 @@ const PlayerLiveImageComponent = (props: Props) => {
             setIsReady(false);
           }
         },
-        onPlayerMute: () => {
-          setMuted(true);
-        },
-        onPlayerUnmute: () => {
-          setMuted(false);
-        },
         onPlayerClose: () => {
           onLiveImageCompleted();
           setIsReady(false);

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