@ericchen1990/pano-view 3.1.0 → 3.1.1

package/dist/index.mjs

@@ -40,7 +40,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         init: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           self._counter = 1e3;
           self._html5AudioPool = [];
           self.html5PoolSize = 10;
@@ -65,7 +65,7 @@ var require_howler = __commonJS({
          * @return {Howler/Float}     Returns self or current volume.
          */
         volume: function(vol) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           vol = parseFloat(vol);
           if (!self.ctx) {
             setupAudioContext();
@@ -76,7 +76,7 @@ var require_howler = __commonJS({
               return self;
             }
             if (self.usingWebAudio) {
-              self.masterGain.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
+              self.masterGain.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
             }
             for (var i = 0; i < self._howls.length; i++) {
               if (!self._howls[i]._webAudio) {
@@ -98,13 +98,13 @@ var require_howler = __commonJS({
          * @param  {Boolean} muted Is muted or not.
          */
         mute: function(muted) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (!self.ctx) {
             setupAudioContext();
           }
           self._muted = muted;
           if (self.usingWebAudio) {
-            self.masterGain.gain.setValueAtTime(muted ? 0 : self._volume, Howler3.ctx.currentTime);
+            self.masterGain.gain.setValueAtTime(muted ? 0 : self._volume, Howler4.ctx.currentTime);
           }
           for (var i = 0; i < self._howls.length; i++) {
             if (!self._howls[i]._webAudio) {
@@ -123,7 +123,7 @@ var require_howler = __commonJS({
          * Handle stopping all sounds globally.
          */
         stop: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           for (var i = 0; i < self._howls.length; i++) {
             self._howls[i].stop();
           }
@@ -134,7 +134,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         unload: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           for (var i = self._howls.length - 1; i >= 0; i--) {
             self._howls[i].unload();
           }
@@ -151,14 +151,14 @@ var require_howler = __commonJS({
          * @return {Boolean}
          */
         codecs: function(ext) {
-          return (this || Howler3)._codecs[ext.replace(/^x-/, "")];
+          return (this || Howler4)._codecs[ext.replace(/^x-/, "")];
         },
         /**
          * Setup various state values for global tracking.
          * @return {Howler}
          */
         _setup: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           self.state = self.ctx ? self.ctx.state || "suspended" : "suspended";
           self._autoSuspend();
           if (!self.usingWebAudio) {
@@ -192,7 +192,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _setupCodecs: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           var audioTest = null;
           try {
             audioTest = typeof Audio !== "undefined" ? new Audio() : null;
@@ -235,7 +235,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _unlockAudio: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (self._audioUnlocked || !self.ctx) {
             return;
           }
@@ -305,7 +305,7 @@ var require_howler = __commonJS({
          * @return {Audio} HTML5 Audio object.
          */
         _obtainHtml5Audio: function() {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (self._html5AudioPool.length) {
             return self._html5AudioPool.pop();
           }
@@ -322,7 +322,7 @@ var require_howler = __commonJS({
          * @return {Howler}
          */
         _releaseHtml5Audio: function(audio) {
-          var self = this || Howler3;
+          var self = this || Howler4;
           if (audio._unlocked) {
             self._html5AudioPool.push(audio);
           }
@@ -335,7 +335,7 @@ var require_howler = __commonJS({
          */
         _autoSuspend: function() {
           var self = this;
-          if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === "undefined" || !Howler3.usingWebAudio) {
+          if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === "undefined" || !Howler4.usingWebAudio) {
             return;
           }
           for (var i = 0; i < self._howls.length; i++) {
@@ -373,7 +373,7 @@ var require_howler = __commonJS({
          */
         _autoResume: function() {
           var self = this;
-          if (!self.ctx || typeof self.ctx.resume === "undefined" || !Howler3.usingWebAudio) {
+          if (!self.ctx || typeof self.ctx.resume === "undefined" || !Howler4.usingWebAudio) {
             return;
           }
           if (self.state === "running" && self.ctx.state !== "interrupted" && self._suspendTimer) {
@@ -396,7 +396,7 @@ var require_howler = __commonJS({
           return self;
         }
       };
-      var Howler3 = new HowlerGlobal2();
+      var Howler4 = new HowlerGlobal2();
       var Howl3 = function(o) {
         var self = this;
         if (!o.src || o.src.length === 0) {
@@ -413,7 +413,7 @@ var require_howler = __commonJS({
          */
         init: function(o) {
           var self = this;
-          if (!Howler3.ctx) {
+          if (!Howler4.ctx) {
             setupAudioContext();
           }
           self._autoplay = o.autoplay || false;
@@ -452,11 +452,11 @@ var require_howler = __commonJS({
           self._onseek = o.onseek ? [{ fn: o.onseek }] : [];
           self._onunlock = o.onunlock ? [{ fn: o.onunlock }] : [];
           self._onresume = [];
-          self._webAudio = Howler3.usingWebAudio && !self._html5;
-          if (typeof Howler3.ctx !== "undefined" && Howler3.ctx && Howler3.autoUnlock) {
-            Howler3._unlockAudio();
+          self._webAudio = Howler4.usingWebAudio && !self._html5;
+          if (typeof Howler4.ctx !== "undefined" && Howler4.ctx && Howler4.autoUnlock) {
+            Howler4._unlockAudio();
           }
-          Howler3._howls.push(self);
+          Howler4._howls.push(self);
           if (self._autoplay) {
             self._queue.push({
               event: "play",
@@ -477,7 +477,7 @@ var require_howler = __commonJS({
         load: function() {
           var self = this;
           var url = null;
-          if (Howler3.noAudio) {
+          if (Howler4.noAudio) {
             self._emit("loaderror", null, "No audio support.");
             return;
           }
@@ -505,7 +505,7 @@ var require_howler = __commonJS({
             if (!ext) {
               console.warn('No file extension was found. Consider using the "format" property or specify an extension.');
             }
-            if (ext && Howler3.codecs(ext)) {
+            if (ext && Howler4.codecs(ext)) {
               url = self._src[i];
               break;
             }
@@ -583,7 +583,7 @@ var require_howler = __commonJS({
             return sound._id;
           }
           if (self._webAudio) {
-            Howler3._autoResume();
+            Howler4._autoResume();
           }
           var seek = Math.max(0, sound._seek > 0 ? sound._seek : self._sprite[sprite][0] / 1e3);
           var duration = Math.max(0, (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1e3 - seek);
@@ -610,8 +610,8 @@ var require_howler = __commonJS({
               setParams();
               self._refreshBuffer(sound);
               var vol = sound._muted || self._muted ? 0 : sound._volume;
-              node.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
-              sound._playStart = Howler3.ctx.currentTime;
+              node.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
+              sound._playStart = Howler4.ctx.currentTime;
               if (typeof node.bufferSource.start === "undefined") {
                 sound._loop ? node.bufferSource.noteGrainOn(0, seek, 86400) : node.bufferSource.noteGrainOn(0, seek, duration);
               } else {
@@ -627,7 +627,7 @@ var require_howler = __commonJS({
                 }, 0);
               }
             };
-            if (Howler3.state === "running" && Howler3.ctx.state !== "interrupted") {
+            if (Howler4.state === "running" && Howler4.ctx.state !== "interrupted") {
               playWebAudio();
             } else {
               self._playLock = true;
@@ -637,8 +637,8 @@ var require_howler = __commonJS({
           } else {
             var playHtml5 = function() {
               node.currentTime = seek;
-              node.muted = sound._muted || self._muted || Howler3._muted || node.muted;
-              node.volume = sound._volume * Howler3.volume();
+              node.muted = sound._muted || self._muted || Howler4._muted || node.muted;
+              node.volume = sound._volume * Howler4.volume();
               node.playbackRate = sound._rate;
               try {
                 var play = node.play();
@@ -686,7 +686,7 @@ var require_howler = __commonJS({
               node.src = self._src;
               node.load();
             }
-            var loadedNoReadyState = window && window.ejecta || !node.readyState && Howler3._navigator.isCocoonJS;
+            var loadedNoReadyState = window && window.ejecta || !node.readyState && Howler4._navigator.isCocoonJS;
             if (node.readyState >= 3 || loadedNoReadyState) {
               playHtml5();
             } else {
@@ -695,9 +695,9 @@ var require_howler = __commonJS({
               var listener = function() {
                 self._state = "loaded";
                 playHtml5();
-                node.removeEventListener(Howler3._canPlayEvent, listener, false);
+                node.removeEventListener(Howler4._canPlayEvent, listener, false);
               };
-              node.addEventListener(Howler3._canPlayEvent, listener, false);
+              node.addEventListener(Howler4._canPlayEvent, listener, false);
               self._clearTimer(sound._id);
             }
           }
@@ -835,9 +835,9 @@ var require_howler = __commonJS({
                 self._stopFade(sound._id);
               }
               if (self._webAudio && sound._node) {
-                sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler3.ctx.currentTime);
+                sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler4.ctx.currentTime);
               } else if (sound._node) {
-                sound._node.muted = Howler3._muted ? true : muted;
+                sound._node.muted = Howler4._muted ? true : muted;
               }
               self._emit("mute", sound._id);
             }
@@ -893,9 +893,9 @@ var require_howler = __commonJS({
                   self._stopFade(id[i]);
                 }
                 if (self._webAudio && sound._node && !sound._muted) {
-                  sound._node.gain.setValueAtTime(vol, Howler3.ctx.currentTime);
+                  sound._node.gain.setValueAtTime(vol, Howler4.ctx.currentTime);
                 } else if (sound._node && !sound._muted) {
-                  sound._node.volume = vol * Howler3.volume();
+                  sound._node.volume = vol * Howler4.volume();
                 }
                 self._emit("volume", sound._id);
               }
@@ -937,7 +937,7 @@ var require_howler = __commonJS({
                 self._stopFade(ids[i]);
               }
               if (self._webAudio && !sound._muted) {
-                var currentTime = Howler3.ctx.currentTime;
+                var currentTime = Howler4.ctx.currentTime;
                 var end = currentTime + len / 1e3;
                 sound._volume = from;
                 sound._node.gain.setValueAtTime(from, currentTime);
@@ -1003,7 +1003,7 @@ var require_howler = __commonJS({
           var sound = self._soundById(id);
           if (sound && sound._interval) {
             if (self._webAudio) {
-              sound._node.gain.cancelScheduledValues(Howler3.ctx.currentTime);
+              sound._node.gain.cancelScheduledValues(Howler4.ctx.currentTime);
             }
             clearInterval(sound._interval);
             sound._interval = null;
@@ -1105,11 +1105,11 @@ var require_howler = __commonJS({
               if (sound) {
                 if (self.playing(id[i])) {
                   sound._rateSeek = self.seek(id[i]);
-                  sound._playStart = self._webAudio ? Howler3.ctx.currentTime : sound._playStart;
+                  sound._playStart = self._webAudio ? Howler4.ctx.currentTime : sound._playStart;
                 }
                 sound._rate = rate;
                 if (self._webAudio && sound._node && sound._node.bufferSource) {
-                  sound._node.bufferSource.playbackRate.setValueAtTime(rate, Howler3.ctx.currentTime);
+                  sound._node.bufferSource.playbackRate.setValueAtTime(rate, Howler4.ctx.currentTime);
                 } else if (sound._node) {
                   sound._node.playbackRate = rate;
                 }
@@ -1203,7 +1203,7 @@ var require_howler = __commonJS({
               }
             } else {
               if (self._webAudio) {
-                var realTime = self.playing(id) ? Howler3.ctx.currentTime - sound._playStart : 0;
+                var realTime = self.playing(id) ? Howler4.ctx.currentTime - sound._playStart : 0;
                 var rateSeek = sound._rateSeek ? sound._rateSeek - sound._seek : 0;
                 return sound._seek + (rateSeek + realTime * Math.abs(sound._rate));
               } else {
@@ -1266,20 +1266,20 @@ var require_howler = __commonJS({
             if (!self._webAudio) {
               self._clearSound(sounds[i]._node);
               sounds[i]._node.removeEventListener("error", sounds[i]._errorFn, false);
-              sounds[i]._node.removeEventListener(Howler3._canPlayEvent, sounds[i]._loadFn, false);
+              sounds[i]._node.removeEventListener(Howler4._canPlayEvent, sounds[i]._loadFn, false);
               sounds[i]._node.removeEventListener("ended", sounds[i]._endFn, false);
-              Howler3._releaseHtml5Audio(sounds[i]._node);
+              Howler4._releaseHtml5Audio(sounds[i]._node);
             }
             delete sounds[i]._node;
             self._clearTimer(sounds[i]._id);
           }
-          var index = Howler3._howls.indexOf(self);
+          var index = Howler4._howls.indexOf(self);
           if (index >= 0) {
-            Howler3._howls.splice(index, 1);
+            Howler4._howls.splice(index, 1);
           }
           var remCache = true;
-          for (i = 0; i < Howler3._howls.length; i++) {
-            if (Howler3._howls[i]._src === self._src || self._src.indexOf(Howler3._howls[i]._src) >= 0) {
+          for (i = 0; i < Howler4._howls.length; i++) {
+            if (Howler4._howls[i]._src === self._src || self._src.indexOf(Howler4._howls[i]._src) >= 0) {
               remCache = false;
               break;
             }
@@ -1287,7 +1287,7 @@ var require_howler = __commonJS({
           if (cache && remCache) {
             delete cache[self._src];
           }
-          Howler3.noAudio = false;
+          Howler4.noAudio = false;
           self._state = "unloaded";
           self._sounds = [];
           self = null;
@@ -1420,7 +1420,7 @@ var require_howler = __commonJS({
             self._emit("play", sound._id);
             sound._seek = sound._start || 0;
             sound._rateSeek = 0;
-            sound._playStart = Howler3.ctx.currentTime;
+            sound._playStart = Howler4.ctx.currentTime;
             var timeout = (sound._stop - sound._start) * 1e3 / Math.abs(sound._rate);
             self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);
           }
@@ -1431,7 +1431,7 @@ var require_howler = __commonJS({
             sound._rateSeek = 0;
             self._clearTimer(sound._id);
             self._cleanBuffer(sound._node);
-            Howler3._autoSuspend();
+            Howler4._autoSuspend();
           }
           if (!self._webAudio && !loop) {
             self.stop(sound._id, true);
@@ -1539,7 +1539,7 @@ var require_howler = __commonJS({
          */
         _refreshBuffer: function(sound) {
           var self = this;
-          sound._node.bufferSource = Howler3.ctx.createBufferSource();
+          sound._node.bufferSource = Howler4.ctx.createBufferSource();
           sound._node.bufferSource.buffer = cache[self._src];
           if (sound._panner) {
             sound._node.bufferSource.connect(sound._panner);
@@ -1551,7 +1551,7 @@ var require_howler = __commonJS({
             sound._node.bufferSource.loopStart = sound._start || 0;
             sound._node.bufferSource.loopEnd = sound._stop || 0;
           }
-          sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate, Howler3.ctx.currentTime);
+          sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate, Howler4.ctx.currentTime);
           return self;
         },
         /**
@@ -1561,16 +1561,16 @@ var require_howler = __commonJS({
          */
         _cleanBuffer: function(node) {
           var self = this;
-          var isIOS = Howler3._navigator && Howler3._navigator.vendor.indexOf("Apple") >= 0;
+          var isIOS = Howler4._navigator && Howler4._navigator.vendor.indexOf("Apple") >= 0;
           if (!node.bufferSource) {
             return self;
           }
-          if (Howler3._scratchBuffer && node.bufferSource) {
+          if (Howler4._scratchBuffer && node.bufferSource) {
             node.bufferSource.onended = null;
             node.bufferSource.disconnect(0);
             if (isIOS) {
               try {
-                node.bufferSource.buffer = Howler3._scratchBuffer;
+                node.bufferSource.buffer = Howler4._scratchBuffer;
               } catch (e) {
               }
             }
@@ -1583,7 +1583,7 @@ var require_howler = __commonJS({
          * @param  {Object} node Audio node to clear.
          */
         _clearSound: function(node) {
-          var checkIE = /MSIE |Trident\//.test(Howler3._navigator && Howler3._navigator.userAgent);
+          var checkIE = /MSIE |Trident\//.test(Howler4._navigator && Howler4._navigator.userAgent);
           if (!checkIE) {
             node.src = "data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA";
           }
@@ -1609,7 +1609,7 @@ var require_howler = __commonJS({
           self._paused = true;
           self._ended = true;
           self._sprite = "__default";
-          self._id = ++Howler3._counter;
+          self._id = ++Howler4._counter;
           parent._sounds.push(self);
           self.create();
           return self;
@@ -1621,23 +1621,23 @@ var require_howler = __commonJS({
         create: function() {
           var self = this;
           var parent = self._parent;
-          var volume = Howler3._muted || self._muted || self._parent._muted ? 0 : self._volume;
+          var volume = Howler4._muted || self._muted || self._parent._muted ? 0 : self._volume;
           if (parent._webAudio) {
-            self._node = typeof Howler3.ctx.createGain === "undefined" ? Howler3.ctx.createGainNode() : Howler3.ctx.createGain();
-            self._node.gain.setValueAtTime(volume, Howler3.ctx.currentTime);
+            self._node = typeof Howler4.ctx.createGain === "undefined" ? Howler4.ctx.createGainNode() : Howler4.ctx.createGain();
+            self._node.gain.setValueAtTime(volume, Howler4.ctx.currentTime);
             self._node.paused = true;
-            self._node.connect(Howler3.masterGain);
-          } else if (!Howler3.noAudio) {
-            self._node = Howler3._obtainHtml5Audio();
+            self._node.connect(Howler4.masterGain);
+          } else if (!Howler4.noAudio) {
+            self._node = Howler4._obtainHtml5Audio();
             self._errorFn = self._errorListener.bind(self);
             self._node.addEventListener("error", self._errorFn, false);
             self._loadFn = self._loadListener.bind(self);
-            self._node.addEventListener(Howler3._canPlayEvent, self._loadFn, false);
+            self._node.addEventListener(Howler4._canPlayEvent, self._loadFn, false);
             self._endFn = self._endListener.bind(self);
             self._node.addEventListener("ended", self._endFn, false);
             self._node.src = parent._src;
             self._node.preload = parent._preload === true ? "auto" : parent._preload;
-            self._node.volume = volume * Howler3.volume();
+            self._node.volume = volume * Howler4.volume();
             self._node.load();
           }
           return self;
@@ -1658,7 +1658,7 @@ var require_howler = __commonJS({
           self._paused = true;
           self._ended = true;
           self._sprite = "__default";
-          self._id = ++Howler3._counter;
+          self._id = ++Howler4._counter;
           return self;
         },
         /**
@@ -1684,7 +1684,7 @@ var require_howler = __commonJS({
             parent._emit("load");
             parent._loadQueue();
           }
-          self._node.removeEventListener(Howler3._canPlayEvent, self._loadFn, false);
+          self._node.removeEventListener(Howler4._canPlayEvent, self._loadFn, false);
         },
         /**
          * HTML5 Audio ended listener callback.
@@ -1766,10 +1766,10 @@ var require_howler = __commonJS({
             error();
           }
         };
-        if (typeof Promise !== "undefined" && Howler3.ctx.decodeAudioData.length === 1) {
-          Howler3.ctx.decodeAudioData(arraybuffer).then(success).catch(error);
+        if (typeof Promise !== "undefined" && Howler4.ctx.decodeAudioData.length === 1) {
+          Howler4.ctx.decodeAudioData(arraybuffer).then(success).catch(error);
         } else {
-          Howler3.ctx.decodeAudioData(arraybuffer, success, error);
+          Howler4.ctx.decodeAudioData(arraybuffer, success, error);
         }
       };
       var loadSound = function(self, buffer) {
@@ -1786,59 +1786,59 @@ var require_howler = __commonJS({
         }
       };
       var setupAudioContext = function() {
-        if (!Howler3.usingWebAudio) {
+        if (!Howler4.usingWebAudio) {
           return;
         }
         try {
           if (typeof AudioContext !== "undefined") {
-            Howler3.ctx = new AudioContext();
+            Howler4.ctx = new AudioContext();
           } else if (typeof webkitAudioContext !== "undefined") {
-            Howler3.ctx = new webkitAudioContext();
+            Howler4.ctx = new webkitAudioContext();
           } else {
-            Howler3.usingWebAudio = false;
+            Howler4.usingWebAudio = false;
           }
         } catch (e) {
-          Howler3.usingWebAudio = false;
+          Howler4.usingWebAudio = false;
         }
-        if (!Howler3.ctx) {
-          Howler3.usingWebAudio = false;
+        if (!Howler4.ctx) {
+          Howler4.usingWebAudio = false;
         }
-        var iOS = /iP(hone|od|ad)/.test(Howler3._navigator && Howler3._navigator.platform);
-        var appVersion = Howler3._navigator && Howler3._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
+        var iOS = /iP(hone|od|ad)/.test(Howler4._navigator && Howler4._navigator.platform);
+        var appVersion = Howler4._navigator && Howler4._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
         var version = appVersion ? parseInt(appVersion[1], 10) : null;
         if (iOS && version && version < 9) {
-          var safari = /safari/.test(Howler3._navigator && Howler3._navigator.userAgent.toLowerCase());
-          if (Howler3._navigator && !safari) {
-            Howler3.usingWebAudio = false;
+          var safari = /safari/.test(Howler4._navigator && Howler4._navigator.userAgent.toLowerCase());
+          if (Howler4._navigator && !safari) {
+            Howler4.usingWebAudio = false;
           }
         }
-        if (Howler3.usingWebAudio) {
-          Howler3.masterGain = typeof Howler3.ctx.createGain === "undefined" ? Howler3.ctx.createGainNode() : Howler3.ctx.createGain();
-          Howler3.masterGain.gain.setValueAtTime(Howler3._muted ? 0 : Howler3._volume, Howler3.ctx.currentTime);
-          Howler3.masterGain.connect(Howler3.ctx.destination);
+        if (Howler4.usingWebAudio) {
+          Howler4.masterGain = typeof Howler4.ctx.createGain === "undefined" ? Howler4.ctx.createGainNode() : Howler4.ctx.createGain();
+          Howler4.masterGain.gain.setValueAtTime(Howler4._muted ? 0 : Howler4._volume, Howler4.ctx.currentTime);
+          Howler4.masterGain.connect(Howler4.ctx.destination);
         }
-        Howler3._setup();
+        Howler4._setup();
       };
       if (typeof define === "function" && define.amd) {
         define([], function() {
           return {
-            Howler: Howler3,
+            Howler: Howler4,
             Howl: Howl3
           };
         });
       }
       if (typeof exports !== "undefined") {
-        exports.Howler = Howler3;
+        exports.Howler = Howler4;
         exports.Howl = Howl3;
       }
       if (typeof global !== "undefined") {
         global.HowlerGlobal = HowlerGlobal2;
-        global.Howler = Howler3;
+        global.Howler = Howler4;
         global.Howl = Howl3;
         global.Sound = Sound2;
       } else if (typeof window !== "undefined") {
         window.HowlerGlobal = HowlerGlobal2;
-        window.Howler = Howler3;
+        window.Howler = Howler4;
         window.Howl = Howl3;
         window.Sound = Sound2;
       }
@@ -3807,8 +3807,8 @@ function isProduction2() {
 }
 
 // src/media-activation.tsx
+var import_howler2 = __toESM(require_howler());
 import { createContext as createContext8, useContext as useContext7, useEffect as useEffect6, useRef as useRef6 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
 var PanoMediaActivationHostContext = createContext8(null);
 function createPanoMediaActivationHost() {
   return { intents: /* @__PURE__ */ new Set(), listeners: /* @__PURE__ */ new Set(), revision: 0 };
@@ -3831,6 +3831,15 @@ function subscribePanoMediaActivation(host, listener) {
 function hasPanoMediaActivationIntent(host) {
   return host.intents.size > 0;
 }
+function needsMediaGesture() {
+  if (typeof navigator !== "undefined" && navigator.userActivation?.hasBeenActive) {
+    return false;
+  }
+  if (import_howler2.Howler.ctx?.state === "running") {
+    return false;
+  }
+  return true;
+}
 function usePanoMediaActivationIntent(required) {
   const host = useContext7(PanoMediaActivationHostContext);
   const keyRef = useRef6(null);
@@ -3850,23 +3859,6 @@ function usePanoMediaActivationIntent(required) {
     };
   }, [host, required]);
 }
-function PanoMediaActivationOverlay({
-  ariaLabel = "Enable sound",
-  className,
-  message = "Tap to enable sound",
-  onActivate
-}) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("pano-media-activation", className), children: /* @__PURE__ */ jsx2(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: "pano-media-activation-button",
-      onClick: onActivate,
-      type: "button",
-      children: message
-    }
-  ) });
-}
 
 // src/pano-context-menu.tsx
 import {
@@ -3880,7 +3872,7 @@ import {
   useRef as useRef7,
   useState as useState2
 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DEFAULT_ICON_SIZE = 16;
 var MENU_EDGE_PADDING = 8;
 var MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
@@ -4054,7 +4046,7 @@ function DefaultContextMenuPanel({
       style: panelStyle,
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             "aria-hidden": true,
@@ -4066,9 +4058,9 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsx3("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ jsx2("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
-            return /* @__PURE__ */ jsx3(
+            return /* @__PURE__ */ jsx2(
               "div",
               {
                 "aria-hidden": true,
@@ -4085,7 +4077,7 @@ function DefaultContextMenuPanel({
             );
           }
           const disabled = item.disabled === true;
-          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx3(
+          const iconNode = item.icon ?? (item.image ? /* @__PURE__ */ jsx2(
             "img",
             {
               alt: item.imageAlt ?? "",
@@ -4135,7 +4127,7 @@ function DefaultContextMenuPanel({
               tabIndex: disabled ? -1 : activeIndex === index ? 0 : -1,
               type: "button",
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   "span",
                   {
                     "aria-hidden": true,
@@ -4147,7 +4139,7 @@ function DefaultContextMenuPanel({
                     children: iconNode
                   }
                 ),
-                /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: item.label })
+                /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: item.label })
               ]
             },
             item.id
@@ -4200,7 +4192,7 @@ function PositionedMenuShell({
       top: Math.min(Math.max(rawTop, MENU_EDGE_PADDING), maxTop)
     });
   }, [clientX, clientY, overlayElement, children, viewportRevision]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "pano-context-menu-shell",
@@ -4259,7 +4251,7 @@ function usePanoContextMenuOverlay() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [session2]);
-  const overlay = /* @__PURE__ */ jsx3(
+  const overlay = /* @__PURE__ */ jsx2(
     "div",
     {
       ref: setOverlayNode,
@@ -4270,7 +4262,7 @@ function usePanoContextMenuOverlay() {
         position: "absolute",
         zIndex: 20
       },
-      children: session2 ? /* @__PURE__ */ jsx3(
+      children: session2 ? /* @__PURE__ */ jsx2(
         PositionedMenuShell,
         {
           clientX: session2.event.clientX,
@@ -4363,9 +4355,9 @@ function PanoContextMenu({
         view,
         render: () => {
           if (hasCustomChildren && current.children) {
-            return /* @__PURE__ */ jsx3("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
+            return /* @__PURE__ */ jsx2("div", { "data-pano-context-menu": true, style: { pointerEvents: "auto" }, children: current.children({ event, view, close }) });
           }
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx2(
             DefaultContextMenuPanel,
             {
               appearance: current.appearance,
@@ -4416,14 +4408,14 @@ function ResetViewIcon() {
       viewBox: "0 0 16 16",
       width: "100%",
       children: [
-        /* @__PURE__ */ jsx3("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
-        /* @__PURE__ */ jsx3("path", { d: "M3.5 3.5v3h3" })
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 6.5A4.5 4.5 0 1 1 4 10" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3.5 3.5v3h3" })
       ]
     }
   );
 }
 function FullscreenIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
       "aria-hidden": true,
@@ -4435,12 +4427,12 @@ function FullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx3("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
+      children: /* @__PURE__ */ jsx2("path", { d: "M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3" })
     }
   );
 }
 function ExitFullscreenIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
       "aria-hidden": true,
@@ -4452,7 +4444,7 @@ function ExitFullscreenIcon() {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "100%",
-      children: /* @__PURE__ */ jsx3("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
+      children: /* @__PURE__ */ jsx2("path", { d: "M6 3v3H3M10 3v3h3M3 10h3v3M10 10h3v3" })
     }
   );
 }
@@ -4461,7 +4453,7 @@ function createPanoContextMenuPresets(actions) {
   const resetView = {
     id: "pano-reset-view",
     label: "Reset view",
-    icon: /* @__PURE__ */ jsx3(ResetViewIcon, {}),
+    icon: /* @__PURE__ */ jsx2(ResetViewIcon, {}),
     onSelect: () => {
       actions.reset();
     }
@@ -4469,7 +4461,7 @@ function createPanoContextMenuPresets(actions) {
   const fullscreen = {
     id: "pano-fullscreen",
     label: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-    icon: isFullscreen ? /* @__PURE__ */ jsx3(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx3(FullscreenIcon, {}),
+    icon: isFullscreen ? /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx2(FullscreenIcon, {}),
     onSelect: () => {
       actions.toggleFullscreen();
     }
@@ -4574,7 +4566,7 @@ import {
   useMemo as useMemo4,
   useRef as useRef8
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var DEFAULT_PANO_CURSORS = {
   default: "grab",
   dragging: "grabbing",
@@ -4716,7 +4708,7 @@ function PanoCursorController({
       release(PANO_DRAG_CLAIM_ID);
     };
   }, [claim, eventBus, release]);
-  return /* @__PURE__ */ jsx4(PanoCursorContext.Provider, { value: api, children });
+  return /* @__PURE__ */ jsx3(PanoCursorContext.Provider, { value: api, children });
 }
 
 // src/pano-events.tsx
@@ -5077,7 +5069,7 @@ var DEFAULT_PANORAMA_CAMERA_NEAR = 0.1;
 var DEFAULT_PANORAMA_CAMERA_FAR = DEFAULT_PANORAMA_RADIUS * 2;
 
 // src/panorama-event-surface.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var EVENT_SURFACE_RADIUS = DEFAULT_PANORAMA_RADIUS - 1;
 function makePanoramaPointerEvent(event) {
   const nativeEvent = event.nativeEvent;
@@ -5145,8 +5137,8 @@ function PanoramaEventSurface() {
       onPointerUp: (event) => emit("pointerup", event),
       onPointerMove: (event) => emit("pointermove", event),
       children: [
-        /* @__PURE__ */ jsx5("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4("sphereGeometry", { args: [EVENT_SURFACE_RADIUS, 64, 32] }),
+        /* @__PURE__ */ jsx4(
           "meshBasicMaterial",
           {
             colorWrite: false,
@@ -5328,7 +5320,7 @@ function TouchControls({
 
 // src/video/chrome-overlay.tsx
 import { createContext as createContext12, useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var PanoChromeOverlayContext = createContext12(null);
 function usePanoChromeOverlay() {
   const [overlayElement, setOverlayElement] = useState3(
@@ -5341,7 +5333,7 @@ function usePanoChromeOverlay() {
     () => ({ overlayElement }),
     [overlayElement]
   );
-  const overlay = /* @__PURE__ */ jsx6(
+  const overlay = /* @__PURE__ */ jsx5(
     "div",
     {
       className: "pano-chrome-overlay",
@@ -5418,7 +5410,7 @@ import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/video/pano-video-captions.tsx
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CAPTION_APPEARANCE = {
   color: "#ffffff",
   background: "rgba(0, 0, 0, 0.55)",
@@ -5466,13 +5458,13 @@ function PanoVideoCaptionsOverlay({
     textShadow: snapshot.captionAppearance.textShadow,
     whiteSpace: "pre-wrap"
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
-      children: /* @__PURE__ */ jsx7("div", { style: textStyle, children: snapshot.captionText })
+      children: /* @__PURE__ */ jsx6("div", { style: textStyle, children: snapshot.captionText })
     }
   );
 }
@@ -5624,7 +5616,7 @@ function cueText(cue) {
 }
 
 // src/video/pano-video-controls.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_PANO_VIDEO_CONTROLS_APPEARANCE = {
   background: "rgba(16, 16, 16, 0.88)",
   color: "#f4f4f4",
@@ -5685,7 +5677,7 @@ function volumeFromClientY(clientY, track) {
   return Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
 }
 function Icon({ path }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "svg",
     {
       "aria-hidden": true,
@@ -5697,7 +5689,7 @@ function Icon({ path }) {
       strokeWidth: "1.75",
       viewBox: "0 0 16 16",
       width: "16",
-      children: /* @__PURE__ */ jsx8("path", { d: path })
+      children: /* @__PURE__ */ jsx7("path", { d: path })
     }
   );
 }
@@ -5709,7 +5701,7 @@ function ChromeButton({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       "aria-label": label,
@@ -5735,14 +5727,14 @@ function ChromeMenu({
   labelledBy,
   items
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     ChromeMenuSurface,
     {
       appearance,
       id,
       labelledBy,
       role: "menu",
-      children: items.map((item) => /* @__PURE__ */ jsx8(
+      children: items.map((item) => /* @__PURE__ */ jsx7(
         ChromeMenuRadioItem,
         {
           active: item.active,
@@ -5762,7 +5754,7 @@ function ChromeMenuSurface({
   labelledBy,
   role
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "aria-labelledby": labelledBy,
@@ -5786,7 +5778,7 @@ function ChromeMenuRadioItem({
   label,
   onClick
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       "aria-checked": active,
@@ -5826,7 +5818,7 @@ function ChromeMenuActionItem({
       },
       type: "button",
       children: [
-        /* @__PURE__ */ jsx8("span", { children: label }),
+        /* @__PURE__ */ jsx7("span", { children: label }),
         secondary
       ]
     }
@@ -5835,10 +5827,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-label", children });
+  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ jsx8("div", { className: "pano-video-chrome-menu-divider" });
+  return /* @__PURE__ */ jsx7("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -5851,7 +5843,7 @@ function CaptionsMenu({
   panel,
   snapshot
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     ChromeMenuSurface,
     {
       appearance,
@@ -5860,7 +5852,7 @@ function CaptionsMenu({
       role: "menu",
       children: panel === "tracks" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsxs3("div", { className: "pano-video-chrome-menu-list", children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             ChromeMenuRadioItem,
             {
               active: snapshot.trackId === null,
@@ -5873,7 +5865,7 @@ function CaptionsMenu({
           ),
           snapshot.tracks.map((track) => {
             const trackItemId = panoVideoTrackId(track);
-            return /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsx7(
               ChromeMenuRadioItem,
               {
                 active: snapshot.trackId === trackItemId,
@@ -5887,29 +5879,29 @@ function CaptionsMenu({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Settings",
             onClick: onOpenSettings,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u203A" })
+            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u203A" })
           }
         )
       ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeMenuActionItem,
           {
             appearance,
             label: "Back",
             onClick: onShowTracks,
-            secondary: /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\u2039" })
+            secondary: /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\u2039" })
           }
         ),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Font size" }),
-        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Font size" }),
+        CAPTION_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
           ChromeMenuRadioItem,
           {
             active: Number(snapshot.captionAppearance.fontSize) === option.value,
@@ -5921,9 +5913,9 @@ function CaptionsMenu({
           },
           option.id
         )),
-        /* @__PURE__ */ jsx8(ChromeMenuDivider, {}),
-        /* @__PURE__ */ jsx8(ChromeMenuSectionLabel, { children: "Background" }),
-        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(ChromeMenuDivider, {}),
+        /* @__PURE__ */ jsx7(ChromeMenuSectionLabel, { children: "Background" }),
+        CAPTION_BACKGROUND_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
           ChromeMenuRadioItem,
           {
             active: snapshot.captionAppearance.background === option.value,
@@ -5978,7 +5970,7 @@ function VerticalVolumeSlider({
         pointerEvents: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": true,
@@ -5990,7 +5982,7 @@ function VerticalVolumeSlider({
             children: percentLabel
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -6030,7 +6022,7 @@ function VerticalVolumeSlider({
                 },
                 tabIndex: 0,
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx7(
                     "div",
                     {
                       style: {
@@ -6045,7 +6037,7 @@ function VerticalVolumeSlider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx7(
                     "div",
                     {
                       style: {
@@ -6104,13 +6096,13 @@ function VolumeControl({
     };
   }, [open, volumeAdjustable]);
   if (!volumeAdjustable) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance,
         label: mutedOrSilent ? "Unmute" : "Mute",
         onClick: onToggleMuted,
-        children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+        children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
       }
     );
   }
@@ -6142,7 +6134,7 @@ function VolumeControl({
       },
       ref: rootRef,
       children: [
-        open ? /* @__PURE__ */ jsx8(
+        open ? /* @__PURE__ */ jsx7(
           VerticalVolumeSlider,
           {
             appearance,
@@ -6150,7 +6142,7 @@ function VolumeControl({
             volume: displayVolume
           }
         ) : null,
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance,
@@ -6161,7 +6153,7 @@ function VolumeControl({
               }
               onToggleMuted();
             },
-            children: mutedOrSilent ? /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
+            children: mutedOrSilent ? /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.2 6.2l3.2 3.6M13.4 6.2l-3.2 3.6" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3 6.5h2.2L8.5 4v8L5.2 9.5H3zM10.5 5.5a3 3 0 0 1 0 5" })
           }
         )
       ]
@@ -6321,7 +6313,7 @@ function PanoVideoControlsHud({
   let menuNode = null;
   switch (menu) {
     case "rate":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6340,7 +6332,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "variant":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6359,7 +6351,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "captions":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         CaptionsMenu,
         {
           appearance: resolved,
@@ -6383,7 +6375,7 @@ function PanoVideoControlsHud({
       );
       break;
     case "more":
-      menuNode = /* @__PURE__ */ jsx8(
+      menuNode = /* @__PURE__ */ jsx7(
         ChromeMenu,
         {
           appearance: resolved,
@@ -6451,7 +6443,7 @@ function PanoVideoControlsHud({
   };
   const rateButton = /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6459,13 +6451,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
   const variantButton = canSwitchVariant ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6473,13 +6465,13 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ jsx8("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ jsx7("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
   const captionsButton = showCaptionsMenu ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       ChromeButton,
       {
         appearance: resolved,
@@ -6487,7 +6479,7 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("captions");
         },
-        children: /* @__PURE__ */ jsx8("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx8(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
+        children: /* @__PURE__ */ jsx7("span", { id: `${barId}-captions-btn`, children: /* @__PURE__ */ jsx7(Icon, { path: "M2.5 4.5h11v7h-11zM5 7.2h2.4M5 9.2h5.5" }) })
       }
     )
   ] }) : null;
@@ -6498,7 +6490,7 @@ function PanoVideoControlsHud({
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance: resolved,
@@ -6506,11 +6498,11 @@ function PanoVideoControlsHud({
             onClick: () => {
               controller.togglePlay();
             },
-            children: snapshot.playing ? /* @__PURE__ */ jsx8(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx8(Icon, { path: "M5 3.2v9.6L13 8z" })
+            children: snapshot.playing ? /* @__PURE__ */ jsx7(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ jsx7(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             "aria-label": "Seek",
@@ -6532,8 +6524,8 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ jsx8("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ jsx8(
+        hideTime ? null : /* @__PURE__ */ jsx7("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
+        /* @__PURE__ */ jsx7(
           VolumeControl,
           {
             appearance: resolved,
@@ -6551,7 +6543,7 @@ function PanoVideoControlsHud({
         ),
         compact ? /* @__PURE__ */ jsxs3("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             ChromeButton,
             {
               appearance: resolved,
@@ -6560,7 +6552,7 @@ function PanoVideoControlsHud({
               onClick: () => {
                 toggleMenu("more");
               },
-              children: /* @__PURE__ */ jsx8(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
+              children: /* @__PURE__ */ jsx7(Icon, { path: "M3 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M7 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11 8a1 1 0 1 0 2 0 1 1 0 1 0-2 0" })
             }
           )
         ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -6568,7 +6560,7 @@ function PanoVideoControlsHud({
           variantButton,
           captionsButton
         ] }),
-        showFullscreen ? /* @__PURE__ */ jsx8(
+        showFullscreen ? /* @__PURE__ */ jsx7(
           ChromeButton,
           {
             appearance: resolved,
@@ -6576,7 +6568,7 @@ function PanoVideoControlsHud({
             onClick: () => {
               fullscreen?.toggleFullscreen();
             },
-            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx8(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx8(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
+            children: fullscreen?.isFullscreen ? /* @__PURE__ */ jsx7(Icon, { path: "M6 3.5H3.5V6M10 3.5h2.5V6M6 12.5H3.5V10M10 12.5h2.5V10" }) : /* @__PURE__ */ jsx7(Icon, { path: "M3.5 6V3.5H6M10 3.5h2.5V6M3.5 10v2.5H6M10 12.5h2.5V10" })
           }
         ) : null
       ]
@@ -6593,7 +6585,7 @@ function PanoVideoControls({ appearance }) {
 }
 
 // src/video/pano-video-chrome-bridge.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function PanoVideoChromeBridge({
   fullscreen,
   host,
@@ -6609,7 +6601,7 @@ function PanoVideoChromeBridge({
   }
   const showDefaultControls = host.controller !== null && host.controls !== false && host.controlClaims === 0;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    showDefaultControls ? /* @__PURE__ */ jsx9(
+    showDefaultControls ? /* @__PURE__ */ jsx8(
       PanoVideoControlsHud,
       {
         appearance: typeof host.controls === "object" ? host.controls : void 0,
@@ -6618,7 +6610,7 @@ function PanoVideoChromeBridge({
         overlayElement
       }
     ) : null,
-    host.captions !== false && host.controller ? /* @__PURE__ */ jsx9(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
+    host.captions !== false && host.controller ? /* @__PURE__ */ jsx8(PanoVideoCaptionsOverlay, { controller: host.controller }) : null
   ] });
 }
 
@@ -6771,7 +6763,7 @@ function clamp2(value, min, max) {
 }
 
 // src/webvr/chrome.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolveAppearance(value) {
   return {
     ...DEFAULT_WEBVR_CHROME_APPEARANCE,
@@ -6783,7 +6775,7 @@ function ChromeButton2({
   children,
   onClick
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       className: "pano-webvr-button",
@@ -6828,11 +6820,11 @@ function SetupPanel({
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ jsx10("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ jsx9("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
         /* @__PURE__ */ jsxs5("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Decrease screen size",
@@ -6844,8 +6836,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Increase screen size",
@@ -6860,9 +6852,9 @@ function SetupPanel({
           ] })
         ] }),
         /* @__PURE__ */ jsxs5("fieldset", { className: "pano-webvr-setup-fieldset", children: [
-          /* @__PURE__ */ jsx10("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ jsx9("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
           /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-setup-row", children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Previous headset preset",
@@ -6872,8 +6864,8 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx10("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx9("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 "aria-label": "Next headset preset",
@@ -6885,7 +6877,7 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           ChromeButton2,
           {
             appearance,
@@ -6909,8 +6901,8 @@ function WebVRChromeBridge({ host }) {
   }
   const appearance = resolveAppearance(chrome);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx10("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
-      mode !== "webxr" ? /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ jsxs5("div", { className: "pano-webvr-toolbar-actions", children: [
+      mode !== "webxr" ? /* @__PURE__ */ jsx9(
         ChromeButton2,
         {
           appearance,
@@ -6918,7 +6910,7 @@ function WebVRChromeBridge({ host }) {
           children: "VR Setup"
         }
       ) : null,
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx9(
         ChromeButton2,
         {
           appearance,
@@ -6926,7 +6918,7 @@ function WebVRChromeBridge({ host }) {
           children: "Exit VR"
         }
       )
-    ] }) : /* @__PURE__ */ jsx10(
+    ] }) : /* @__PURE__ */ jsx9(
       ChromeButton2,
       {
         appearance,
@@ -6934,7 +6926,7 @@ function WebVRChromeBridge({ host }) {
         children: available ? "Enter VR" : "VR unavailable"
       }
     ) }),
-    mode === "fake" ? /* @__PURE__ */ jsx10(
+    mode === "fake" ? /* @__PURE__ */ jsx9(
       "p",
       {
         className: "pano-webvr-hint",
@@ -6942,7 +6934,7 @@ function WebVRChromeBridge({ host }) {
         children: "Simulated VR Mode \xB7 Click the view to lock the mouse, then move to look around. Use a headset or phone for real VR."
       }
     ) : null,
-    setupOpen ? /* @__PURE__ */ jsx10(
+    setupOpen ? /* @__PURE__ */ jsx9(
       SetupPanel,
       {
         appearance,
@@ -6984,7 +6976,7 @@ import { useFrame as useFrame5, useThree as useThree8 } from "@react-three/fiber
 import { useXR as useXR2, XROrigin } from "@react-three/xr";
 import { useRef as useRef12 } from "react";
 import { Vector3 as Vector34 } from "three";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function PanoramaXROrigin() {
   const originRef = useRef12(null);
   const localHeadPositionRef = useRef12(new Vector34());
@@ -7000,11 +6992,11 @@ function PanoramaXROrigin() {
     origin.position.copy(localHeadPositionRef.current).multiplyScalar(-1);
     origin.updateMatrixWorld();
   }, -100);
-  return /* @__PURE__ */ jsx11(XROrigin, { ref: originRef });
+  return /* @__PURE__ */ jsx10(XROrigin, { ref: originRef });
 }
 
 // src/pano-viewer.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_VIEW = {
   yaw: 0,
   pitch: 0,
@@ -7049,7 +7041,7 @@ function PanoCursorTree({
   if (!cursors) {
     return children;
   }
-  return /* @__PURE__ */ jsx12(PanoCursorController, { cursors, children });
+  return /* @__PURE__ */ jsx11(PanoCursorController, { cursors, children });
 }
 function PanoVideoHostReset() {
   const host = useContext15(PanoVideoHostContext);
@@ -7070,9 +7062,9 @@ function DefaultControlChannels({
     return null;
   }
   return /* @__PURE__ */ jsxs6(DefaultControlChannelContext.Provider, { value: true, children: [
-    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx12(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
-    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx12(TouchControls, { ...touchChannel.props }) : null,
-    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx12(
+    userControlsEnabled && mouseChannel.mount && claims.mouse === 0 ? /* @__PURE__ */ jsx11(MouseControls, { ...mouseChannel.props, fovSpeed }) : null,
+    userControlsEnabled && touchChannel.mount && claims.touch === 0 ? /* @__PURE__ */ jsx11(TouchControls, { ...touchChannel.props }) : null,
+    userControlsEnabled && keyboardChannel.mount && claims.keyboard === 0 ? /* @__PURE__ */ jsx11(
       KeyboardControls,
       {
         ...keyboardChannel.props,
@@ -7165,7 +7157,27 @@ var PanoViewer = forwardRef2(
       return resume;
     }, [mediaActivationControls, mediaActivationOptions]);
     const hasMediaActivationIntent = mediaActivationRevision >= 0 && hasPanoMediaActivationIntent(mediaActivationHost);
-    const shouldShowMediaActivation = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    const shouldActivateMedia = mediaActivationOptions !== null && hasMediaActivationIntent && !mediaActivated;
+    useEffect13(() => {
+      if (!shouldActivateMedia) {
+        return;
+      }
+      if (!needsMediaGesture()) {
+        void activateMedia();
+        return;
+      }
+      const handleGesture = () => {
+        removeListeners();
+        void activateMedia();
+      };
+      const removeListeners = () => {
+        window.removeEventListener("pointerdown", handleGesture, true);
+        window.removeEventListener("keydown", handleGesture, true);
+      };
+      window.addEventListener("pointerdown", handleGesture, { capture: true });
+      window.addEventListener("keydown", handleGesture, { capture: true });
+      return removeListeners;
+    }, [activateMedia, shouldActivateMedia]);
     const fallbackViewRef = useRef13(DEFAULT_VIEW);
     const normalizedMinFov = Math.max(1, Math.min(minFov, maxFov - 1));
     const normalizedMaxFov = Math.min(
@@ -7428,7 +7440,7 @@ var PanoViewer = forwardRef2(
         "aria-label": ariaLabel,
         style: rootStyle,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             Canvas,
             {
               "aria-label": `${ariaLabel} canvas`,
@@ -7450,23 +7462,23 @@ var PanoViewer = forwardRef2(
                 ...DEFAULT_CANVAS_STYLE,
                 touchAction: userControlsEnabled ? "none" : "auto"
               },
-              children: /* @__PURE__ */ jsx12(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
+              children: /* @__PURE__ */ jsx11(XR, { store: xrStore, children: /* @__PURE__ */ jsxs6(
                 WebVRRuntimeContext.Provider,
                 {
                   value: { host: webVRHost, xrStore, stereoView },
                   children: [
-                    /* @__PURE__ */ jsx12(PanoramaXROrigin, {}),
-                    /* @__PURE__ */ jsx12(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx12(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx12(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx12(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx12(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx11(PanoramaXROrigin, {}),
+                    /* @__PURE__ */ jsx11(HotspotAccessibilityContext.Provider, { value: registry, children: /* @__PURE__ */ jsx11(HotspotTargetRegistryContext.Provider, { value: hotspotTargetRegistry, children: /* @__PURE__ */ jsx11(PanoEventBusContext.Provider, { value: eventBus, children: /* @__PURE__ */ jsx11(PanoCursorTree, { cursors: resolvedCursors, children: /* @__PURE__ */ jsx11(PanoramaViewContext.Provider, { value: controlsRef, children: /* @__PURE__ */ jsx11(
                       PanoContextMenuOverlayContext.Provider,
                       {
                         value: contextMenuOverlayApi,
-                        children: /* @__PURE__ */ jsx12(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx12(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx12(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx12(
+                        children: /* @__PURE__ */ jsx11(PanoChromeOverlayContext.Provider, { value: chromeOverlayApi, children: /* @__PURE__ */ jsx11(PanoVideoHostContext.Provider, { value: videoHost, children: /* @__PURE__ */ jsx11(PanoFilterHostContext.Provider, { value: filterHost, children: /* @__PURE__ */ jsx11(
                           PanoContextMenuActionsContext.Provider,
                           {
                             value: contextMenuActions,
-                            children: /* @__PURE__ */ jsx12(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx12(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
-                              /* @__PURE__ */ jsx12(PanoVideoHostReset, {}),
-                              /* @__PURE__ */ jsx12(
+                            children: /* @__PURE__ */ jsx11(ScenesHostContext.Provider, { value: scenesHost, children: /* @__PURE__ */ jsx11(BackgroundAudioHostContext.Provider, { value: bgmHost, children: /* @__PURE__ */ jsxs6(PanoMediaActivationHostContext.Provider, { value: mediaActivationHost, children: [
+                              /* @__PURE__ */ jsx11(PanoVideoHostReset, {}),
+                              /* @__PURE__ */ jsx11(
                                 PanoramaViewRuntime,
                                 {
                                   ref: controlsRef,
@@ -7477,7 +7489,7 @@ var PanoViewer = forwardRef2(
                                   options: controlOptions
                                 }
                               ),
-                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx12(
+                              (onViewChange || onPanoramaClick || onPanoramaDoubleClick || onPanoramaPointerMove) && /* @__PURE__ */ jsx11(
                                 PanoEvents,
                                 {
                                   onViewChange,
@@ -7486,18 +7498,18 @@ var PanoViewer = forwardRef2(
                                   onPointerMove: onPanoramaPointerMove
                                 }
                               ),
-                              /* @__PURE__ */ jsx12(
+                              /* @__PURE__ */ jsx11(
                                 AutoRotate,
                                 {
                                   enabled: legacyAutoRotate,
                                   speed: legacyAutoRotateOptions.autoRotateSpeed
                                 }
                               ),
-                              /* @__PURE__ */ jsx12(PanoramaEventSurface, {}),
-                              contextMenuChannel.mount ? /* @__PURE__ */ jsx12(PanoContextMenu, { ...contextMenuChannel.props }) : null,
+                              /* @__PURE__ */ jsx11(PanoramaEventSurface, {}),
+                              contextMenuChannel.mount ? /* @__PURE__ */ jsx11(PanoContextMenu, { ...contextMenuChannel.props }) : null,
                               /* @__PURE__ */ jsxs6(ControlClaimsContext.Provider, { value: controlClaims, children: [
                                 children,
-                                /* @__PURE__ */ jsx12(
+                                /* @__PURE__ */ jsx11(
                                   DefaultControlChannels,
                                   {
                                     fovSpeed: controlOptions.fovSpeed,
@@ -7525,7 +7537,7 @@ var PanoViewer = forwardRef2(
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
               children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   PanoVideoChromeBridge,
                   {
                     fullscreen: contextMenuActions,
@@ -7533,21 +7545,12 @@ var PanoViewer = forwardRef2(
                     overlayElement
                   }
                 ),
-                /* @__PURE__ */ jsx12(WebVRChromeBridge, { host: webVRHost })
+                /* @__PURE__ */ jsx11(WebVRChromeBridge, { host: webVRHost })
               ]
             }
           ),
           contextMenuOverlay,
-          hotspotAccessibilityControls,
-          shouldShowMediaActivation ? /* @__PURE__ */ jsx12(
-            PanoMediaActivationOverlay,
-            {
-              ...mediaActivationOptions,
-              onActivate: () => {
-                void activateMedia();
-              }
-            }
-          ) : null
+          hotspotAccessibilityControls
         ]
       }
     );
@@ -8477,7 +8480,7 @@ import {
   Vector2 as Vector22,
   Vector3 as Vector37
 } from "three";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var CENTER_NDC = new Vector22(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
@@ -8652,8 +8655,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_LENGTH, CROSSHAIR_THICKNESS, 1e-3] }),
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8673,8 +8676,8 @@ function WebVRReticle({
             raycast: noopRaycast,
             renderOrder: RETICLE_RENDER_ORDER + 1,
             children: [
-              /* @__PURE__ */ jsx13("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12("boxGeometry", { args: [CROSSHAIR_THICKNESS, CROSSHAIR_LENGTH, 1e-3] }),
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -8696,7 +8699,7 @@ function WebVRReticle({
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12(
                 "ringGeometry",
                 {
                   args: [
@@ -8709,7 +8712,7 @@ function WebVRReticle({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx12(
                 "meshBasicMaterial",
                 {
                   color: "#ffffff",
@@ -9161,7 +9164,7 @@ function useWebVRWakeLock(enabled) {
 }
 
 // src/webvr/webvr.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function initializeSettings(screensize, profile) {
   const stored = loadWebVRSettings();
   return {
@@ -9495,7 +9498,7 @@ var WebVR = forwardRef4(function WebVR2({
     wakelock && (mode === "mobilevr" || mode === "fake")
   );
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       Gyro,
       {
         ref: gyroRef,
@@ -9509,7 +9512,7 @@ var WebVR = forwardRef4(function WebVR2({
         touchMode: "off"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       WebVRStereoRenderer,
       {
         mode,
@@ -9517,7 +9520,7 @@ var WebVR = forwardRef4(function WebVR2({
         screensize: settings.screensize
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       WebVRReticle,
       {
         dwellMs: cursorDwellMs,
@@ -9801,7 +9804,7 @@ diffuseColor.rgb = mix(diffuseColor.rgb, applyPanoFilter(diffuseColor.rgb), clam
 }
 
 // src/pano-filter/pano-basic-material.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function PanoBasicMaterial({
   map,
   side,
@@ -9848,7 +9851,7 @@ function PanoBasicMaterial({
       intensityUniformRef.current.value = snapshot.intensity;
     }
   }, [snapshot.intensity]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx14(
     "meshBasicMaterial",
     {
       ref: materialRef,
@@ -9864,7 +9867,7 @@ function PanoBasicMaterial({
 }
 
 // src/sphere.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function useEquirectTexture(url, anisotropy, generateMipmaps, onLoad, onError) {
   const [texture, setTexture] = useState9(null);
   const onLoadRef = useRef22(onLoad);
@@ -9969,8 +9972,8 @@ function Sphere({
       rotation: [0, MathUtils5.degToRad(90 + yawOffset), 0],
       visible,
       children: [
-        /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx15("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+        /* @__PURE__ */ jsx15(
           PanoBasicMaterial,
           {
             map: displayTexture,
@@ -10004,7 +10007,7 @@ import {
   TextureLoader as TextureLoader2,
   VideoTexture
 } from "three";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
 function createEmptySnapshot() {
@@ -10725,8 +10728,8 @@ function PanoVideo({
         rotation: [0, MathUtils6.degToRad(90 + yawOffset), 0],
         visible,
         children: [
-          /* @__PURE__ */ jsx17("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx16("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
+          /* @__PURE__ */ jsx16(
             PanoBasicMaterial,
             {
               map: activeTexture,
@@ -10737,7 +10740,7 @@ function PanoVideo({
         ]
       }
     ) : null,
-    captionsEnabled ? /* @__PURE__ */ jsx17(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
+    captionsEnabled ? /* @__PURE__ */ jsx16(PanoVideoCaptions, { appearance: typeof captions === "object" ? captions : void 0 }) : null
   ] });
 }
 
@@ -10869,7 +10872,7 @@ function overlayProgress(elapsedTime, duration, startTime) {
 }
 
 // src/scene-transitions/particle-overlay.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PARTICLE_GRID = 48;
 var PARTICLE_COUNT = PARTICLE_GRID * PARTICLE_GRID;
 var PARTICLE_VERTEX_SHADER = `
@@ -10991,7 +10994,7 @@ function ParticleOverlay({
       onFinish();
     }
   });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "mesh",
     {
       ref: meshRef,
@@ -11285,7 +11288,7 @@ function createSnapshotMaterial(preset, texture) {
 }
 
 // src/scene-transitions/snapshot-overlay.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function SnapshotOverlay({
   snapshot,
   transition,
@@ -11335,20 +11338,20 @@ function SnapshotOverlay({
     return null;
   }
   return /* @__PURE__ */ jsxs11("mesh", { ref: meshRef, renderOrder: OVERLAY_RENDER_ORDER, frustumCulled: false, children: [
-    /* @__PURE__ */ jsx19("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
-    /* @__PURE__ */ jsx19("primitive", { attach: "material", object: material })
+    /* @__PURE__ */ jsx18("primitive", { attach: "geometry", object: FULLSCREEN_PLANE }),
+    /* @__PURE__ */ jsx18("primitive", { attach: "material", object: material })
   ] });
 }
 
 // src/scene-transitions/transition-overlay.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function TransitionOverlay(props) {
   const { preset } = props.transition;
   switch (preset) {
     case "none":
       return null;
     case "particles":
-      return /* @__PURE__ */ jsx20(ParticleOverlay, { ...props });
+      return /* @__PURE__ */ jsx19(ParticleOverlay, { ...props });
     case "crossfade":
     case "zoom":
     case "blackout":
@@ -11376,7 +11379,7 @@ function TransitionOverlay(props) {
     case "zoomBlur":
     case "hexDissolve":
     case "filmBurn":
-      return /* @__PURE__ */ jsx20(SnapshotOverlay, { ...props });
+      return /* @__PURE__ */ jsx19(SnapshotOverlay, { ...props });
     default: {
       const exhaustive = preset;
       void exhaustive;
@@ -11621,7 +11624,7 @@ var TileTextureManager = class {
 };
 
 // src/tile/texture-manager-context.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var TileTextureManagerContext = createContext15(
   null
 );
@@ -11645,7 +11648,7 @@ function TileTextureManagerProvider({
     manager.resume();
     return () => manager.dispose();
   }, [manager]);
-  return /* @__PURE__ */ jsx21(TileTextureManagerContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsx20(TileTextureManagerContext.Provider, { value: manager, children });
 }
 function useSharedTileTextureManager() {
   return useContext22(TileTextureManagerContext);
@@ -11854,7 +11857,7 @@ function resolveTemplateUrl(template, address) {
 }
 
 // src/tile/tile.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_LOD_UPDATE_INTERVAL_MS = 100;
 var FAST_ROTATION_THRESHOLD_RADIANS = Math.PI / 180;
 var FAST_FOV_THRESHOLD_DEGREES = 0.5;
@@ -11941,14 +11944,14 @@ function PreviewFace({
     [geometry]
   );
   const transform = getFaceTransform(face, PREVIEW_RADIUS);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry,
       position: transform.position,
       renderOrder: -100,
       rotation: transform.rotation,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -11964,7 +11967,7 @@ function PreviewCube({
   texture,
   faceOrder
 }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx22(
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx21(
     PreviewFace,
     {
       face,
@@ -12009,14 +12012,14 @@ var TileMesh = memo(function TileMesh2({
   if (!snapshot.texture) {
     return null;
   }
-  return /* @__PURE__ */ jsx22("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21("group", { position: transform.position, rotation: transform.rotation, children: /* @__PURE__ */ jsx21(
     "mesh",
     {
       geometry: SHARED_TILE_GEOMETRY,
       position: [layout.x, layout.y, 0],
       renderOrder,
       scale: [layout.width, layout.height, 1],
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx21(
         PanoBasicMaterial,
         {
           depthTest: false,
@@ -12033,7 +12036,7 @@ var TileLayerMeshes = memo(function TileLayerMeshes2({
   manager,
   resolveUrl
 }) {
-  return layer.addresses.map((address) => /* @__PURE__ */ jsx22(
+  return layer.addresses.map((address) => /* @__PURE__ */ jsx21(
     TileMesh,
     {
       address,
@@ -12371,14 +12374,14 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ jsxs12("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx22(
+    previewTexture ? /* @__PURE__ */ jsx21(
       PreviewCube,
       {
         texture: previewTexture,
         faceOrder: previewFaceOrder
       }
     ) : null,
-    layers.map((layer) => /* @__PURE__ */ jsx22(
+    layers.map((layer) => /* @__PURE__ */ jsx21(
       TileLayerMeshes,
       {
         layer,
@@ -12391,7 +12394,7 @@ function Tile({
 }
 
 // src/scenes.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function SceneSource({
   scene,
   visible,
@@ -12404,7 +12407,7 @@ function SceneSource({
   }
   switch (scene.type) {
     case "sphere":
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         Sphere,
         {
           src: scene.src,
@@ -12417,7 +12420,7 @@ function SceneSource({
       );
     case "tile": {
       const { id: _id, type: _type, ...tileProps } = scene;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         Tile,
         {
           ...tileProps,
@@ -12685,7 +12688,7 @@ function ScenesController({
   const renderedScene = slots[liveSlot];
   const snapshotVisible = snapshot !== null && (phase === "transitioning" || phase === "recapturing" || phase === "preloading");
   return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22(
       SnapshotCapture,
       {
         requestId: captureRequestId,
@@ -12697,7 +12700,7 @@ function ScenesController({
       const source = slots[slot];
       const isLive = slot === liveSlot;
       const isPending = slot === pendingSlot;
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx22(
         SceneSource,
         {
           scene: source,
@@ -12713,7 +12716,7 @@ function ScenesController({
         `${slot}:${source?.id ?? "empty"}:${recoveryKey}`
       );
     }),
-    snapshotVisible ? /* @__PURE__ */ jsx23(
+    snapshotVisible ? /* @__PURE__ */ jsx22(
       TransitionOverlay,
       {
         snapshot,
@@ -12806,12 +12809,12 @@ function Scenes({
       }
     };
   }, [host, requestSceneChange]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     TileTextureManagerProvider,
     {
       maxTextureMemoryMb,
       maxConcurrentLoads: maxConcurrentTileLoads,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx22(
         ScenesController,
         {
           ...rest,
@@ -12864,7 +12867,7 @@ import { useEffect as useEffect28, useMemo as useMemo21, useState as useState13
 // src/webvr/stereo-html.tsx
 import { Html } from "@react-three/drei";
 import { useContext as useContext24, useSyncExternalStore as useSyncExternalStore7 } from "react";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function useFallbackStereoView() {
   const runtime = useContext24(WebVRRuntimeContext);
   const host = runtime?.host ?? null;
@@ -12889,10 +12892,10 @@ function stereoCalculatePosition(eye, stereoView) {
 function PanoHtml({ children, ...htmlProps }) {
   const stereoView = useFallbackStereoView();
   if (!stereoView) {
-    return /* @__PURE__ */ jsx24(Html, { ...htmlProps, children });
+    return /* @__PURE__ */ jsx23(Html, { ...htmlProps, children });
   }
   return /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx23(
       Html,
       {
         ...htmlProps,
@@ -12900,7 +12903,7 @@ function PanoHtml({ children, ...htmlProps }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx23(
       Html,
       {
         ...htmlProps,
@@ -12913,7 +12916,7 @@ function PanoHtml({ children, ...htmlProps }) {
 }
 
 // src/hotspot/hotspot-tooltip.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
 var DEFAULT_HOTSPOT_TOOLTIP_APPEARANCE = {
   background: "rgba(22, 22, 22, 0.72)",
@@ -13010,14 +13013,14 @@ function HotspotTooltip({
   if (!showImage && !content.text) {
     return null;
   }
-  return /* @__PURE__ */ jsx25(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx24(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ jsxs15(
     "div",
     {
       className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
-        showImage ? /* @__PURE__ */ jsx25(
+        showImage ? /* @__PURE__ */ jsx24(
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
@@ -13026,14 +13029,14 @@ function HotspotTooltip({
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ jsx25("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
+        content.text ? /* @__PURE__ */ jsx24("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
 }
 
 // src/hotspot/hotspot-anchor.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_FLOATING_DISTANCE = 10;
 var PANORAMA_RADIUS = DEFAULT_PANORAMA_RADIUS;
 var PANORAMA_SURFACE_INSET = 4;
@@ -13680,18 +13683,18 @@ function HotspotAnchor({
       } : void 0,
       onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
       children: [
-        focused ? focusContent ?? /* @__PURE__ */ jsx26(
+        focused ? focusContent ?? /* @__PURE__ */ jsx25(
           "lineSegments",
           {
             geometry: focusGeometry,
             position: [0, 0, 0.01],
             renderOrder: renderOrder + 1,
             scale: [1.12, 1.12, 1],
-            children: /* @__PURE__ */ jsx26("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
+            children: /* @__PURE__ */ jsx25("lineBasicMaterial", { color: "#f5fbfc", depthTest: false })
           }
         ) : null,
         children,
-        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
+        tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx25("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx25(
           HotspotTooltip,
           {
             appearance: tooltipAppearance,
@@ -13712,7 +13715,7 @@ import {
   MeshBasicMaterial,
   Vector2 as Vector26
 } from "three";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
 var SAMPLE_UV = new Vector26();
 var RAYCAST_HITS = [];
@@ -13815,8 +13818,8 @@ function HotspotPlane({
   opacity
 }) {
   return /* @__PURE__ */ jsxs17("mesh", { raycast: hotspotPlaneRaycast, children: [
-    /* @__PURE__ */ jsx27("planeGeometry", { args: [1, 1] }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26("planeGeometry", { args: [1, 1] }),
+    /* @__PURE__ */ jsx26(
       "meshBasicMaterial",
       {
         alphaTest: HOTSPOT_ALPHA_CUTOFF,
@@ -13832,7 +13835,7 @@ function HotspotPlane({
 }
 
 // src/hotspot/image-hotspot.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function useHotspotImageTexture(src, onLoad, onError) {
   const gl = useThree21((state) => state.gl);
   const [texture, setTexture] = useState15(null);
@@ -13896,7 +13899,7 @@ function ImageHotspot({
   ...anchorProps
 }) {
   const texture = useHotspotImageTexture(src, onLoad, onError);
-  return /* @__PURE__ */ jsx28(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx28(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx27(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx27(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/polygon-hotspot.tsx
@@ -13921,7 +13924,7 @@ import {
   PerspectiveCamera as PerspectiveCamera6,
   Vector3 as Vector314
 } from "three";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var LINE_WORLD_POSITION = new Vector314();
 function applyScreenSpaceDashScale(object, camera, viewportHeight) {
   const material = object?.material;
@@ -13967,7 +13970,7 @@ function HotspotStrokeLine({
     }
     applyScreenSpaceDashScale(lineRef.current, state.camera, state.size.height);
   });
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     Line,
     {
       ref: lineRef,
@@ -13989,7 +13992,7 @@ function HotspotStrokeLine({
 }
 
 // src/hotspot/polygon-hotspot.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var POLYGON_RADIUS = 990;
 var MAX_FILL_SEGMENT_DEGREES = 7;
 function cloneVertices(vertices) {
@@ -14292,7 +14295,7 @@ function PolygonHotspot({
       draggable,
       interactive,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx30(
+      focusContent: /* @__PURE__ */ jsx29(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14314,7 +14317,7 @@ function PolygonHotspot({
         startVerticesRef.current = null;
       },
       children: [
-        /* @__PURE__ */ jsx30("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29("mesh", { geometry: fillGeometry, renderOrder, children: /* @__PURE__ */ jsx29(
           "meshBasicMaterial",
           {
             color: fill,
@@ -14324,7 +14327,7 @@ function PolygonHotspot({
             transparent: true
           }
         ) }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           HotspotStrokeLine,
           {
             color: stroke,
@@ -14349,7 +14352,7 @@ import {
   Quaternion as Quaternion5,
   Vector3 as Vector316
 } from "three";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var POLYLINE_RADIUS = 990;
 var MAX_SEGMENT_DEGREES = 7;
 function cloneVertices2(vertices) {
@@ -14489,7 +14492,7 @@ function PolylineHotspot({
       startPosition: event.startPosition
     });
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(
     HotspotAnchor,
     {
       ...anchorProps,
@@ -14503,7 +14506,7 @@ function PolylineHotspot({
       renderOrder,
       draggable,
       useAngularScale: false,
-      focusContent: /* @__PURE__ */ jsx31(
+      focusContent: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: "#75cbd3",
@@ -14524,7 +14527,7 @@ function PolylineHotspot({
         emitVerticesChange(event, onDragEnd);
         startVerticesRef.current = null;
       },
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx30(
         HotspotStrokeLine,
         {
           color: stroke,
@@ -14549,7 +14552,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter4,
   SRGBColorSpace as SRGBColorSpace6
 } from "three";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var GRAPHIC_TEXTURE_SIZE = 512;
 function resolveStrokeWidth(value) {
   return Number.isFinite(value) ? Math.max(value, 0) : 8;
@@ -14769,15 +14772,15 @@ function CanvasGraphicHotspot({
   ...anchorProps
 }) {
   const texture = useGraphicTexture(graphic, width, height, onLoad, onError);
-  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx31(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx31(HotspotPlane, { map: texture, opacity }) });
 }
 function GraphicHotspot(props) {
   const { graphic, ...restProps } = props;
   if (graphic.kind === "svg") {
     const imageProps = restProps;
-    return /* @__PURE__ */ jsx32(ImageHotspot, { ...imageProps, src: graphic.src });
+    return /* @__PURE__ */ jsx31(ImageHotspot, { ...imageProps, src: graphic.src });
   }
-  return /* @__PURE__ */ jsx32(CanvasGraphicHotspot, { ...restProps, graphic });
+  return /* @__PURE__ */ jsx31(CanvasGraphicHotspot, { ...restProps, graphic });
 }
 
 // src/hotspot/sequence-hotspot.tsx
@@ -14790,7 +14793,7 @@ import {
   SRGBColorSpace as SRGBColorSpace7,
   TextureLoader as TextureLoader6
 } from "three";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DEFAULT_SEQUENCE_FPS = 12;
 function resolveFps(value) {
   return Number.isFinite(value) && value > 0 ? value : DEFAULT_SEQUENCE_FPS;
@@ -14966,7 +14969,7 @@ function SequenceHotspot({
       onFrameChangeRef.current?.({ id, index: nextIndex, src });
     }
   });
-  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx32(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx32(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/video-hotspot.tsx
@@ -14980,7 +14983,7 @@ import {
   TextureLoader as TextureLoader7,
   VideoTexture as VideoTexture2
 } from "three";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function clampVolume2(volume) {
   if (!Number.isFinite(volume)) {
     return 1;
@@ -15205,7 +15208,7 @@ function VideoHotspot({
     };
   }, [playing, resource]);
   const activeTexture = resource?.ready ? resource.texture : posterTexture;
-  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx34(HotspotPlane, { map: activeTexture, opacity }) });
+  return /* @__PURE__ */ jsx33(HotspotAnchor, { ...anchorProps, id, height, width, children: /* @__PURE__ */ jsx33(HotspotPlane, { map: activeTexture, opacity }) });
 }
 
 // src/hotspot/audio-hotspot.tsx
@@ -15219,7 +15222,7 @@ import {
   SRGBColorSpace as SRGBColorSpace9,
   TextureLoader as TextureLoader8
 } from "three";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var SPEAKER_TEXTURE_SIZE = 512;
 function paintSpeakerBody(context, center) {
   context.fillStyle = "#f5fbfc";
@@ -15504,7 +15507,7 @@ function AudioHotspot({
     howl.mute(mutedRef.current);
     howl.volume(clampAudioVolume(volumeRef.current) * spatial.gain);
   });
-  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx35(HotspotPlane, { map: markerTexture, opacity }) : null });
+  return /* @__PURE__ */ jsx34(HotspotAnchor, { ...anchorProps, id, height, width, children: marker ? /* @__PURE__ */ jsx34(HotspotPlane, { map: markerTexture, opacity }) : null });
 }
 
 // src/hotspot/text-hotspot.tsx
@@ -15516,7 +15519,7 @@ import {
   LinearMipmapLinearFilter as LinearMipmapLinearFilter8,
   SRGBColorSpace as SRGBColorSpace10
 } from "three";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TEXT_TEXTURE_LONG_SIDE = 1024;
 var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
 var DEFAULT_FONT_SIZE = 96;
@@ -15834,13 +15837,13 @@ function TextHotspot({
     whiteSpace
   };
   const texture = useTextTexture(text, width, height, style, onLoad, onError);
-  return /* @__PURE__ */ jsx36(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx36(HotspotPlane, { map: texture, opacity }) });
+  return /* @__PURE__ */ jsx35(HotspotAnchor, { ...anchorProps, height, width, children: /* @__PURE__ */ jsx35(HotspotPlane, { map: texture, opacity }) });
 }
 
 // src/hotspot/iframe-hotspot.tsx
 import { Html as Html2 } from "@react-three/drei";
 import { DoubleSide as DoubleSide6 } from "three";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 var IFRAME_LONG_SIDE = 800;
 var CSS3D_DISTANCE_FACTOR = 400;
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-forms";
@@ -15907,8 +15910,8 @@ function IframeHotspot({
       width,
       children: [
         /* @__PURE__ */ jsxs19("mesh", { children: [
-          /* @__PURE__ */ jsx37("planeGeometry", { args: [1, 1] }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36("planeGeometry", { args: [1, 1] }),
+          /* @__PURE__ */ jsx36(
             "meshBasicMaterial",
             {
               depthWrite: false,
@@ -15919,7 +15922,7 @@ function IframeHotspot({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx36(
           Html2,
           {
             distanceFactor: CSS3D_DISTANCE_FACTOR,
@@ -15934,7 +15937,7 @@ function IframeHotspot({
             },
             transform: true,
             zIndexRange: [10, 0],
-            children: /* @__PURE__ */ jsx37(
+            children: /* @__PURE__ */ jsx36(
               "iframe",
               {
                 allow,