@ericchen1990/pano-view 2.5.0 → 2.5.1

package/dist/index.cjs

@@ -2330,6 +2330,20 @@ function subscribeBackgroundAudioHost(host, listener) {
     host.listeners.delete(listener);
   };
 }
+function subscribeBackgroundAudioStore(host, onStoreChange) {
+  let unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+  });
+  const unsubscribeHost = subscribeBackgroundAudioHost(host, () => {
+    unsubscribeController();
+    unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+    });
+    onStoreChange();
+  });
+  return () => {
+    unsubscribeController();
+    unsubscribeHost();
+  };
+}
 
 // src/cn.ts
 function cn(...values) {
@@ -5047,6 +5061,20 @@ function subscribePanoVideoHost(host, onStoreChange) {
     host.listeners.delete(onStoreChange);
   };
 }
+function subscribePanoVideoStore(host, onStoreChange) {
+  let unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+  });
+  const unsubscribeHost = subscribePanoVideoHost(host, () => {
+    unsubscribeController();
+    unsubscribeController = host.controller?.subscribe(onStoreChange) ?? (() => {
+    });
+    onStoreChange();
+  });
+  return () => {
+    unsubscribeController();
+    unsubscribeHost();
+  };
+}
 function getPanoVideoHostRevision(host) {
   return host.revision;
 }
@@ -6969,7 +6997,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         requestVRPermission: () => webVRHost.controller?.requestPermission() ?? Promise.resolve(false),
         // -- Video --
         getVideo: () => videoHost.controller,
-        subscribeVideo: (onStoreChange) => subscribePanoVideoHost(videoHost, onStoreChange),
+        subscribeVideo: (onStoreChange) => subscribePanoVideoStore(videoHost, onStoreChange),
         playVideo: () => videoHost.controller?.play() ?? Promise.resolve(),
         pauseVideo: () => videoHost.controller?.pause(),
         toggleVideo: () => videoHost.controller?.togglePlay(),
@@ -6979,7 +7007,7 @@ var PanoViewer = (0, import_react24.forwardRef)(
         toggleVideoMuted: () => videoHost.controller?.toggleMuted(),
         // -- Background Audio --
         getBackgroundAudio: () => bgmHost.controller,
-        subscribeBackgroundAudio: (onStoreChange) => subscribeBackgroundAudioHost(bgmHost, onStoreChange),
+        subscribeBackgroundAudio: (onStoreChange) => subscribeBackgroundAudioStore(bgmHost, onStoreChange),
         playBackgroundAudio: () => {
           bgmHost.controller?.play();
           return Promise.resolve();
@@ -7343,6 +7371,8 @@ function BackgroundAudio({
   const loopRef = (0, import_react25.useRef)(loop);
   const mutedRef = (0, import_react25.useRef)(muted);
   const volumeRef = (0, import_react25.useRef)(volume);
+  const mutedPropRef = (0, import_react25.useRef)(muted);
+  const volumePropRef = (0, import_react25.useRef)(volume);
   const fadeMsRef = (0, import_react25.useRef)(resolveFadeMs(fadeMs));
   const onPlaybackStateChangeRef = (0, import_react25.useRef)(onPlaybackStateChange);
   const onPlaybackErrorRef = (0, import_react25.useRef)(onPlaybackError);
@@ -7350,9 +7380,15 @@ function BackgroundAudio({
   const onErrorRef = (0, import_react25.useRef)(onError);
   playingRef.current = playing;
   loopRef.current = loop;
-  mutedRef.current = muted;
-  volumeRef.current = volume;
   fadeMsRef.current = resolveFadeMs(fadeMs);
+  if (mutedPropRef.current !== muted) {
+    mutedPropRef.current = muted;
+    mutedRef.current = muted;
+  }
+  if (volumePropRef.current !== volume) {
+    volumePropRef.current = volume;
+    volumeRef.current = volume;
+  }
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
   onPlaybackErrorRef.current = onPlaybackError;
   onEndedRef.current = onEnded;
@@ -7406,20 +7442,17 @@ function BackgroundAudio({
         if (isControlledRef.current) {
           return;
         }
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.volume(clampAudioVolume(vol));
-        }
-        notifySnapshot({ volume: clampAudioVolume(vol) });
+        const next = clampAudioVolume(vol);
+        volumeRef.current = next;
+        currentRef.current?.handle.howl.volume(next);
+        notifySnapshot({ volume: next });
       },
       setMuted: (m) => {
         if (isControlledRef.current) {
           return;
         }
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.mute(m);
-        }
+        mutedRef.current = m;
+        currentRef.current?.handle.howl.mute(m);
         notifySnapshot({ muted: m });
       },
       toggleMuted: () => {
@@ -7427,10 +7460,8 @@ function BackgroundAudio({
           return;
         }
         const next = !snapshotRef.current.muted;
-        const howl = currentRef.current?.handle.howl;
-        if (howl) {
-          howl.mute(next);
-        }
+        mutedRef.current = next;
+        currentRef.current?.handle.howl.mute(next);
         notifySnapshot({ muted: next });
       }
     }),
@@ -7497,6 +7528,9 @@ function BackgroundAudio({
           shouldRetryPlay: () => currentRef.current?.key === trackKey && playingRef.current,
           onEnded: () => {
             notifySnapshot({ playing: false, ended: true });
+            if (!isControlledRef.current) {
+              setInternalPlaying(false);
+            }
             onPlaybackStateChangeRef.current?.("ended");
             onEndedRef.current?.();
           },
@@ -7569,7 +7603,9 @@ function BackgroundAudio({
     }
     if (!playing) {
       fadingInRef.current = false;
-      howl.pause();
+      if (howl.playing()) {
+        howl.pause();
+      }
       for (const slot of outgoingRef.current) {
         slot.handle.dispose();
       }
@@ -7584,11 +7620,14 @@ function BackgroundAudio({
       return;
     }
     slot.handle.howl.loop(loop);
-    slot.handle.howl.mute(muted);
+    slot.handle.howl.mute(mutedRef.current);
     if (!fadingInRef.current) {
-      slot.handle.howl.volume(clampAudioVolume(volume));
+      slot.handle.howl.volume(clampAudioVolume(volumeRef.current));
     }
-    notifySnapshot({ muted, volume: clampAudioVolume(volume) });
+    notifySnapshot({
+      muted: mutedRef.current,
+      volume: clampAudioVolume(volumeRef.current)
+    });
   }, [loop, muted, trackKey, volume]);
   (0, import_react25.useEffect)(() => {
     if (!pauseWhenHidden) {