@ericchen1990/pano-view 3.1.1 → 3.1.3

package/dist/index.cjs

@@ -2352,6 +2352,25 @@ 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;
+  }
+}
+function isAutoplayPolicyError(error) {
+  return typeof error === "object" && error !== null && "name" in error && error.name === "NotAllowedError";
+}
+
+// src/audio/howl.ts
 import_howler.Howler.autoUnlock = true;
 function resumePanoAudio() {
   if (!import_howler.Howler.ctx || import_howler.Howler.ctx.state === "running") {
@@ -2359,6 +2378,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 +2446,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 +2458,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 });
     }
   });
@@ -3873,7 +3900,7 @@ function hasPanoMediaActivationIntent(host) {
   return host.intents.size > 0;
 }
 function needsMediaGesture() {
-  if (typeof navigator !== "undefined" && navigator.userActivation?.hasBeenActive) {
+  if (typeof navigator !== "undefined" && navigator.userActivation?.isActive) {
     return false;
   }
   if (import_howler2.Howler.ctx?.state === "running") {
@@ -7165,34 +7192,91 @@ 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)(() => {
       if (!shouldActivateMedia) {
         return;
       }
-      if (!needsMediaGesture()) {
-        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 completeIfUnlocked = (requestedVideo, videoOk) => {
+        if (cancelled || !isPanoAudioUnlocked()) {
+          return;
+        }
+        if (requestedVideo && videoHost.controller && !videoOk) {
+          return;
+        }
+        removeListeners();
+        setMediaActivated(true);
+      };
+      const tryActivate = () => {
+        if (activating || cancelled) {
+          return;
+        }
+        activating = true;
+        let videoPlay;
+        const controls2 = {
+          resumeAudio: mediaActivationControls.resumeAudio,
+          playVideo: (options) => {
+            const result = mediaActivationControls.playVideo(options);
+            videoPlay = result;
+            return result;
+          },
+          playBackgroundAudio: mediaActivationControls.playBackgroundAudio
+        };
+        try {
+          const resume = controls2.resumeAudio();
+          mediaActivationOptions?.onActivate?.(controls2);
+          const requestedVideo = videoPlay !== void 0;
+          void Promise.all([resume, videoPlay ?? Promise.resolve(true)]).then(
+            ([, videoOk]) => {
+              completeIfUnlocked(requestedVideo, videoOk);
+            },
+            () => {
+              completeIfUnlocked(requestedVideo, false);
+            }
+          );
+        } finally {
+          activating = false;
+        }
+      };
+      const handleGesture = (event) => {
+        if (!isMediaActivationEvent(event)) {
+          return;
+        }
+        tryActivate();
+      };
       window.addEventListener("pointerdown", handleGesture, { capture: true });
+      window.addEventListener("pointerup", handleGesture, { capture: true });
       window.addEventListener("keydown", handleGesture, { capture: true });
-      return removeListeners;
-    }, [activateMedia, shouldActivateMedia]);
+      if (!needsMediaGesture()) {
+        tryActivate();
+      }
+      return () => {
+        cancelled = true;
+        removeListeners();
+      };
+    }, [
+      mediaActivationControls,
+      mediaActivationOptions,
+      shouldActivateMedia,
+      videoHost
+    ]);
     const fallbackViewRef = (0, import_react26.useRef)(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
@@ -10483,8 +10567,10 @@ function PanoVideo({
         try {
           await video.play();
         } catch (error) {
-          blockedRef.current = true;
-          onPlaybackStateChangeRef.current?.("blocked");
+          if (isAutoplayPolicyError(error)) {
+            blockedRef.current = true;
+            onPlaybackStateChangeRef.current?.("blocked");
+          }
           onErrorRef.current?.({ source: "video", error });
           emitSnapshot();
         }