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

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -96,6 +96,14 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
+
+  if (
+    actionState?.visibleInCells &&
+    !actionState.visibleInCells.includes(cellUUID)
+  ) {
+    return null;
+  }
+
   const AssetComponent = actionState?.asset;
 
   // Default state is not yet ready
@@ -109,6 +117,11 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
       accessibilityRole="button"
+      accessibilityState={
+        typeof actionState.checked === "boolean"
+          ? { checked: actionState.checked }
+          : undefined
+      }
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -11,6 +11,7 @@ type Props = {
   accessibilityHint?: string;
   onPress?: () => void;
   testOnly_pressed?: boolean;
+  checked?: boolean;
 };
 
 export function PressableView({
@@ -22,11 +23,13 @@ export function PressableView({
   pressedStyle,
   onPress,
   testOnly_pressed = false,
+  checked,
 }: Props) {
   return (
     <Pressable
       testOnly_pressed={testOnly_pressed}
       onPress={onPress}
+      accessibilityState={checked === undefined ? undefined : { checked }}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}

package/Components/MasterCell/DefaultComponents/__tests__/ActionButton.test.tsx

@@ -0,0 +1,288 @@
+import React from "react";
+import { act, fireEvent, render } from "@testing-library/react-native";
+
+import { ActionButton } from "../ActionButton";
+import { ActionButton as MobileActionButton } from "../mobile/MobileActionButtons/ActionButton";
+import { Text } from "react-native";
+
+type EntryStateListener = (state: CellActionEntryState) => void;
+
+const PLUGIN_ASSETS = {
+  mute: ["plugin_mute_1", "plugin_mute_2"],
+  unmute: ["plugin_unmute_1", "plugin_unmute_2"],
+};
+
+// Fake of the mute_unmute_action context, following its entry state contract.
+type FakeState = {
+  available: boolean;
+  muted: boolean;
+  visibleInCells?: string[];
+};
+
+const createFakeContext = (initial: FakeState) => {
+  let current = initial;
+  const listeners = new Set<EntryStateListener>();
+
+  const toEntryState = ({
+    available,
+    muted,
+    visibleInCells,
+  }: FakeState): CellActionEntryState => ({
+    state: muted ? 1 : 0,
+    asset: available
+      ? muted
+        ? PLUGIN_ASSETS.unmute
+        : PLUGIN_ASSETS.mute
+      : undefined,
+    label: muted ? "Unmute" : "Mute",
+    mobileButtonAssets: muted ? PLUGIN_ASSETS.unmute : PLUGIN_ASSETS.mute,
+    visibleInCells,
+  });
+
+  const emit = (next: FakeState) => {
+    current = next;
+    listeners.forEach((listener) => listener(toEntryState(current)));
+  };
+
+  const context = {
+    initialEntryState: jest.fn(() => toEntryState(current)),
+    addListener: jest.fn((_id: string, listener: EntryStateListener) => {
+      listeners.add(listener);
+
+      return () => listeners.delete(listener);
+    }),
+    invokeAction: jest.fn((_item, options) => {
+      if (!current.available) return;
+
+      current = { ...current, muted: !current.muted };
+      options?.updateState?.(toEntryState(current));
+      listeners.forEach((listener) => listener(toEntryState(current)));
+    }),
+  };
+
+  return { context, emit, listeners };
+};
+
+let mockContext: ReturnType<typeof createFakeContext>["context"];
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => mockContext),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext",
+  () => ({ useUIComponentContext: jest.fn(() => undefined) })
+);
+
+jest.mock("../Image", () => {
+  const { Text: MockText } = require("react-native");
+
+  return {
+    __esModule: true,
+    default: ({ uri }) => <MockText testID="asset">{uri}</MockText>,
+  };
+});
+
+const item = { id: "entry-1" } as unknown as ZappEntry;
+
+it("keeps the standalone button visible and limits actions to the playing cell instance", () => {
+  const fake = createFakeContext({
+    available: true,
+    muted: true,
+    visibleInCells: [],
+  });
+
+  mockContext = fake.context;
+
+  const Label = ({
+    children,
+    testID,
+  }: {
+    children?: React.ReactNode;
+    testID?: string;
+    mobileActionRole?: string;
+  }) => <Text testID={testID}>{children}</Text>;
+
+  const { getByTestId, queryByTestId } = render(
+    <>
+      {["first", "second"].map((cellUUID) => (
+        <ActionButton
+          key={cellUUID}
+          item={item}
+          action={{ identifier: "mute_unmute_action" }}
+          cellUUID={cellUUID}
+          testID={`cell-${cellUUID}`}
+          style={{}}
+        />
+      ))}
+      <MobileActionButton
+        action={{ identifier: "mute_unmute_action" }}
+        entry={item}
+        testID="standalone"
+        style={{}}
+        focusedStyles={{}}
+      >
+        <Label mobileActionRole="label">Toggle sound</Label>
+      </MobileActionButton>
+    </>
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+  fireEvent.press(getByTestId("standalone"));
+  expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["first"] })
+  );
+
+  expect(getByTestId("cell-first")).toBeTruthy();
+  expect(queryByTestId("cell-second")).toBeNull();
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["second"] })
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(getByTestId("cell-second")).toBeTruthy();
+
+  act(() => fake.emit({ available: true, muted: false, visibleInCells: [] }));
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+});
+
+const renderButton = (
+  flavour: "flavour_1" | "flavour_2",
+  asset?: React.ComponentProps<typeof ActionButton>["asset"]
+) =>
+  render(
+    <ActionButton
+      item={item}
+      flavour={flavour}
+      action={{ identifier: "mute_unmute_action" }}
+      asset={asset}
+      style={{}}
+      testID="mute-button"
+    />
+  );
+
+const cellAsset = {
+  props: {},
+  src: { active: "cell_selected", inactive: "cell_unselected" },
+  style: {},
+  type: "Image",
+} as const;
+
+describe.each([
+  ["flavour_1", 0],
+  ["flavour_2", 1],
+] as const)("mute_unmute_action cell action (%s)", (flavour, index) => {
+  let fake: ReturnType<typeof createFakeContext>;
+
+  const setup = (state: { available: boolean; muted: boolean }, asset?) => {
+    fake = createFakeContext(state);
+    mockContext = fake.context;
+
+    return renderButton(flavour, asset);
+  };
+
+  it("renders nothing while the preview has not started", () => {
+    const { queryByTestId } = setup({ available: false, muted: false });
+
+    expect(queryByTestId("mute-button")).toBeNull();
+    expect(queryByTestId("asset")).toBeNull();
+  });
+
+  it("shows the Mute icon while the preview plays with sound on", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("shows the Unmute icon while the preview plays muted", () => {
+    const { getByTestId } = setup({ available: true, muted: true });
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+  });
+
+  it("toggles the sound and updates the icon on tap", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("follows state emitted through addListener", () => {
+    const { getByTestId, queryByTestId } = setup({
+      available: false,
+      muted: false,
+    });
+
+    act(() => fake.emit({ available: true, muted: false }));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+
+    act(() => fake.emit({ available: true, muted: true }));
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+  });
+
+  it("hides again when the preview stops or another cell starts", () => {
+    const { queryByTestId } = setup({ available: true, muted: false });
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+
+    act(() => fake.emit({ available: false, muted: false }));
+
+    expect(queryByTestId("mute-button")).toBeNull();
+  });
+
+  it("unsubscribes from the context on unmount", () => {
+    const { unmount } = setup({ available: true, muted: false });
+
+    expect(fake.listeners.size).toBe(1);
+
+    unmount();
+
+    expect(fake.listeners.size).toBe(0);
+  });
+
+  it("prefers the cell's selected icon when muted (state 1)", () => {
+    const { getByTestId } = setup({ available: true, muted: true }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_selected");
+  });
+
+  it("prefers the cell's unselected icon when sound is on (state 0)", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_unselected");
+  });
+
+  it("uses the plugin asset when the cell has no icons", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, {
+      ...cellAsset,
+      src: { active: undefined, inactive: undefined },
+    } as any);
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -169,6 +169,7 @@ export const ActionButton = ({
           style={[style, props.alignment]}
           pressedStyle={focusedStyles}
           onPress={renderProps.onPress}
+          checked={renderProps.actionState?.checked}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
           accessibilityHint={props.accessibilityHint}
         >

package/Components/VideoLive/LiveImageManager.ts

@@ -3,7 +3,10 @@ import {
   PlayerLifecycleListener,
   playerManager,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
-import { setUserCellPlayerMutedPreference } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
+import {
+  getUserCellPlayerMutedPreference,
+  setUserCellPlayerMutedPreference,
+} from "@applicaster/zapp-react-native-utils/appUtils/playerManager/userCellPlayerMutedPreference";
 import { playerFactory } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 import { loggerLiveImageManager } from "./loggerHelper";
@@ -21,13 +24,15 @@ export type LiveImageManagerEvent =
   | "onEnd"
   | "onStart"
   | "onError"
-  | "onDestroy";
+  | "onDestroy"
+  | "onRegister"
+  | "onPlaybackChange"
+  | "onMuteChange";
 
 export type LiveImageManagerListenerData = {
   id: string;
-  listener: Record<
-    LiveImageManagerEvent,
-    (event?: Record<string, any>) => void
+  listener: Partial<
+    Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
   >;
 };
 
@@ -54,6 +59,7 @@ type PlayerFactoryConfig = {
 };
 
 type LiveImageProps = {
+  audioMutedByDefault?: boolean;
   playerId: string;
   setMode?: (type: LiveImageType) => void;
   preloadHooks?: PreloadHookConfig[];
@@ -81,9 +87,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   protected listeners: Record<
     string,
-    Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
+    LiveImageManagerListenerData["listener"]
   > = {};
 
+  private mutedSubscriptions = new Map<LiveImage, () => void>();
+
   constructor() {
     playerManager.addLifecycleListener(this);
     this.listeners = {};
@@ -96,8 +104,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
   }
 
   public register = (item: LiveImage): (() => void) => {
+    if (!isTV()) {
+      const muted = !!getUserCellPlayerMutedPreference(item.getMuted());
+
+      if (muted !== item.getMuted()) {
+        muted ? item.mute() : item.unmute();
+      }
+    }
+
     this.items.push(item);
+
+    this.mutedSubscriptions.set(
+      item,
+      item.subscribeMuted(() =>
+        this.invokeListenersUpdate({ callbackName: "onMuteChange" })
+      )
+    );
+
     log_debug(`register: live image ${item.playerId} - ${item.tag}`);
+    this.invokeListenersUpdate({ callbackName: "onRegister" });
 
     // TV only Start playing video once registered
     if (isTV()) {
@@ -109,6 +134,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
 
   public unregister = (item: LiveImage) => {
     log_debug(`unregister: live-image ${item.playerId} - ${item.tag}`);
+    this.mutedSubscriptions.get(item)?.();
+    this.mutedSubscriptions.delete(item);
 
     if (this.currentlyPlaying === item) {
       this.currentlyPlaying = null;
@@ -172,6 +199,25 @@ export class LiveImageManager implements PlayerLifecycleListener {
     return this.currentlyPlaying;
   };
 
+  public getEntryMuted = (entryId: string): boolean | undefined => {
+    const matches = (item: LiveImage) => String(item.getEntryId()) === entryId;
+
+    const item =
+      this.currentlyPlaying && matches(this.currentlyPlaying)
+        ? this.currentlyPlaying
+        : this.items.find(matches);
+
+    return item?.getMuted();
+  };
+
+  public getPlayingCellId = (entryId: string): string | undefined => {
+    const item = this.currentlyPlaying;
+
+    return item && String(item.getEntryId()) === entryId && item.isPlaying()
+      ? item.playerId
+      : undefined;
+  };
+
   private findNextPlayableItem = () => {
     if (isTV()) {
       return this.items[this.items.length - 1];
@@ -302,6 +348,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     setUserCellPlayerMutedPreference(true);
 
     this.items.forEach((liveImage) => liveImage.mute());
+    this.invokeListenersUpdate({ callbackName: "onMuteChange" });
   };
 
   public unmuteAll = () => {
@@ -310,6 +357,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
     setUserCellPlayerMutedPreference(false);
 
     this.items.forEach((liveImage) => liveImage.unmute());
+    this.invokeListenersUpdate({ callbackName: "onMuteChange" });
   };
 
   public onViewPositionChanged = (item: LiveImage) => {
@@ -579,20 +627,67 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     left: 0,
   };
 
-  // Keeps muted state in sync: updates the initial value for deferred
-  // player creation and forwards to the player if it already exists.
-  public initiallyMuted: boolean = true;
+  private muted: boolean;
+  private mutedListeners = new Set<() => void>();
+  private playbackEnded = false;
+
+  getMuted = (): boolean => this.muted;
+
+  getEntryId = () => this.factoryConfig.entry.id;
+
+  isPlaying = (): boolean =>
+    !this.playbackEnded &&
+    !!this.player?.isReadyToPlay() &&
+    this.player.isPlaying();
+
+  subscribeMuted = (listener: () => void): (() => void) => {
+    this.mutedListeners.add(listener);
+
+    return () => this.mutedListeners.delete(listener);
+  };
+
+  private setMuted = (muted: boolean) => {
+    if (this.muted === muted) return;
+
+    this.muted = muted;
+
+    this.mutedListeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (error) {
+        log_error(`Mute listener failed for ${this.playerId}`, { error });
+      }
+    });
+  };
 
   mute = () => {
-    this.initiallyMuted = true;
+    this.setMuted(true);
     this.player?.mute();
   };
 
   unmute = () => {
-    this.initiallyMuted = false;
+    this.setMuted(false);
     this.player?.unmute();
   };
 
+  onPlayerMute = () => this.setMuted(true);
+
+  onPlayerUnmute = () => this.setMuted(false);
+
+  onPlayerResume = () => {
+    this.playbackEnded = false;
+
+    LiveImageManager.instance.invokeListenersUpdate({
+      callbackName: "onPlaybackChange",
+    });
+  };
+
+  onPlayerPause = () => {
+    LiveImageManager.instance.invokeListenersUpdate({
+      callbackName: "onPlaybackChange",
+    });
+  };
+
   positionToString() {
     if (!this.position) {
       return "position not set";
@@ -617,6 +712,10 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     this.preloadHooks = props.preloadHooks;
     this.factoryConfig = props.factoryConfig;
     this.tag = props.tag || "untagged";
+
+    this.muted = isTV()
+      ? false
+      : !!getUserCellPlayerMutedPreference(props.audioMutedByDefault);
   }
 
   async prepareForPlayback(): Promise<boolean> {
@@ -670,7 +769,7 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
       playerId: this.factoryConfig.playerId,
       autoplay: false,
       entry,
-      muted: this.initiallyMuted,
+      muted: this.muted,
       playerPluginId: this.factoryConfig.playerPluginId,
       screenConfig: this.factoryConfig.screenConfig,
       playerRole: PlayerRole.Cell,
@@ -686,6 +785,11 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     this.component = factoryItem.Component;
     this.player.addListener({ id: "live-image", listener: this });
 
+    // A user toggle may have arrived while the async factory was pending.
+    if (this.player.getIsMuted() !== this.muted) {
+      this.muted ? this.player.mute() : this.player.unmute();
+    }
+
     return true;
   }
 
@@ -694,6 +798,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onLoad = (_event) => {
+    this.playbackEnded = false;
+
     log_info(
       `onLoad: live-image, video loaded, switching to video, ${playerInfo(
         this.player
@@ -704,6 +810,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onError = (error: Error) => {
+    this.playbackEnded = true;
+
     log_error(
       `onError: live-image, fail to play, switching back to image. error: ${
         error?.message
@@ -714,6 +822,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onVideoError = (error: Error) => {
+    this.playbackEnded = true;
+
     log_error(
       `onVideoError: live-image, fail to play, switching back to image. error: ${
         error?.message
@@ -724,6 +834,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onVideoEnd = (_event) => {
+    this.playbackEnded = true;
+
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(
         this.player
@@ -734,6 +846,8 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
   };
 
   onPlayerClose = () => {
+    this.playbackEnded = true;
+
     log_info(
       `onPlayerClose: live-image, player closed, switching back to image, ${playerInfo(
         this.player

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

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.122",
+  "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.122",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.122",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.122",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.122",
+    "@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",