@ericchen1990/pano-view 3.1.1 → 3.1.2

package/dist/index.cjs

@@ -2352,6 +2352,22 @@ function cn(...values) {
 
 // src/audio/howl.ts
 var import_howler = __toESM(require_howler());
+
+// src/media-activation-event.ts
+function isMediaActivationEvent(event) {
+  switch (event.type) {
+    case "keydown":
+      return event instanceof KeyboardEvent && event.key !== "Escape";
+    case "pointerdown":
+      return event instanceof PointerEvent && event.pointerType === "mouse";
+    case "pointerup":
+      return event instanceof PointerEvent && event.pointerType !== "mouse";
+    default:
+      return false;
+  }
+}
+
+// src/audio/howl.ts
 import_howler.Howler.autoUnlock = true;
 function resumePanoAudio() {
   if (!import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running") {
@@ -2359,6 +2375,9 @@ function resumePanoAudio() {
   }
   return import_howler.Howler.ctx.resume();
 }
+function isPanoAudioUnlocked() {
+  return !import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running";
+}
 function sourceList(src) {
   if (src == null) {
     return [];
@@ -2424,7 +2443,10 @@ function createUnlockingHowl({
         blockedNotified = true;
         onPlayError?.(error);
       }
-      const retry = () => {
+      const retry = (event) => {
+        if (!isMediaActivationEvent(event)) {
+          return;
+        }
         removeUnlockListeners();
         if (!disposed && isActive() && shouldRetryPlay()) {
           void resumePanoAudio();
@@ -2433,8 +2455,10 @@ function createUnlockingHowl({
       };
       removeUnlockListeners();
       unlockListeners.push({ type: "pointerdown", listener: retry });
+      unlockListeners.push({ type: "pointerup", listener: retry });
       unlockListeners.push({ type: "keydown", listener: retry });
       window.addEventListener("pointerdown", retry, { capture: true });
+      window.addEventListener("pointerup", retry, { capture: true });
       window.addEventListener("keydown", retry, { capture: true });
     }
   });
@@ -7165,12 +7189,15 @@ var PanoViewer = (0, import_react26.forwardRef)(
       }),
       [bgmHost, videoHost]
     );
-    const activateMedia = (0, import_react26.useCallback)(() => {
-      setMediaActivated(true);
+    const runMediaActivation = (0, import_react26.useCallback)(() => {
       const resume = mediaActivationControls.resumeAudio();
       mediaActivationOptions?.onActivate?.(mediaActivationControls);
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
+    const activateMedia = (0, import_react26.useCallback)(() => {
+      setMediaActivated(true);
+      return runMediaActivation();
+    }, [runMediaActivation]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
     const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
     (0, import_react26.useEffect)(() => {
@@ -7181,18 +7208,39 @@ var PanoViewer = (0, import_react26.forwardRef)(
         void activateMedia();
         return;
       }
-      const handleGesture = () => {
-        removeListeners();
-        void activateMedia();
-      };
+      let cancelled = false;
+      let activating = false;
       const removeListeners = () => {
         window.removeEventListener("pointerdown", handleGesture, true);
+        window.removeEventListener("pointerup", handleGesture, true);
         window.removeEventListener("keydown", handleGesture, true);
       };
+      const handleGesture = (event) => {
+        if (!isMediaActivationEvent(event) || activating || cancelled) {
+          return;
+        }
+        activating = true;
+        try {
+          const resume = runMediaActivation();
+          void resume.then(() => {
+            if (cancelled || !isPanoAudioUnlocked()) {
+              return;
+            }
+            removeListeners();
+            setMediaActivated(true);
+          });
+        } finally {
+          activating = false;
+        }
+      };
       window.addEventListener("pointerdown", handleGesture, { capture: true });
+      window.addEventListener("pointerup", handleGesture, { capture: true });
       window.addEventListener("keydown", handleGesture, { capture: true });
-      return removeListeners;
-    }, [activateMedia, shouldActivateMedia]);
+      return () => {
+        cancelled = true;
+        removeListeners();
+      };
+    }, [activateMedia, runMediaActivation, shouldActivateMedia]);
     const fallbackViewRef = (0, import_react26.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(