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

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