@realsee/dnalogel 2.10.5-alpha.0 → 2.10.6

package/libs/PanoTagPlugin/Components/Tag/index.js

@@ -81,8 +81,8 @@ import "../../../shared-utils/animationFrame/BetterTween.js";
 import "../../../shared-utils/animationFrame/index.js";
 import "./AudioTag/AudioTag.js";
 import "../Common/Audio.js";
-import "../../utils/audio/SharedAudio.js";
 import "../../../shared-utils/audio.js";
+import "../../utils/audio/SharedAudio.js";
 import "../Common/Icon/audioIcon.js";
 import "./AudioTag/AudioPlaneTag.js";
 import "../Common/Icon/Icon.js";

package/libs/PanoTagPlugin/Components/TagContainer.js

@@ -80,8 +80,8 @@ import "../utils/tag/tagCheck.js";
 import "./Tag/AudioTag/index.js";
 import "./Tag/AudioTag/AudioTag.js";
 import "./Common/Audio.js";
-import "../utils/audio/SharedAudio.js";
 import "../../shared-utils/audio.js";
+import "../utils/audio/SharedAudio.js";
 import "./Common/Icon/audioIcon.js";
 import "./Tag/AudioTag/AudioPlaneTag.js";
 import "./Tag/MediaPlane.js";

package/libs/PanoTagPlugin/Components/TagItem.js

@@ -80,8 +80,8 @@ import "../utils/tag/tagCheck.js";
 import "./Tag/AudioTag/index.js";
 import "./Tag/AudioTag/AudioTag.js";
 import "./Common/Audio.js";
-import "../utils/audio/SharedAudio.js";
 import "../../shared-utils/audio.js";
+import "../utils/audio/SharedAudio.js";
 import "./Common/Icon/audioIcon.js";
 import "./Tag/AudioTag/AudioPlaneTag.js";
 import "./Tag/MediaPlane.js";

package/libs/PanoTagPlugin/controller/index.js

@@ -1,15 +1,15 @@
-var L = Object.defineProperty, V = Object.defineProperties;
-var B = Object.getOwnPropertyDescriptors;
+var B = Object.defineProperty, G = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
 var F = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, G = Object.prototype.propertyIsEnumerable;
-var P = (h, d, e) => d in h ? L(h, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[d] = e, p = (h, d) => {
+var N = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var P = (h, d, e) => d in h ? B(h, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[d] = e, p = (h, d) => {
   for (var e in d || (d = {}))
-    x.call(d, e) && P(h, e, d[e]);
+    N.call(d, e) && P(h, e, d[e]);
   if (F)
     for (var e of F(d))
-      G.call(d, e) && P(h, e, d[e]);
+      W.call(d, e) && P(h, e, d[e]);
   return h;
-}, T = (h, d) => V(h, B(d));
+}, T = (h, d) => G(h, x(d));
 var l = (h, d, e) => (P(h, typeof d != "symbol" ? d + "" : d, e), e);
 var c = (h, d, e) => new Promise((t, i) => {
   var s = (n) => {
@@ -27,26 +27,26 @@ var c = (h, d, e) => new Promise((t, i) => {
   }, r = (n) => n.done ? t(n.value) : Promise.resolve(n.value).then(s, o);
   r((e = e.apply(h, d)).next());
 });
-import { Subscribe as N } from "@realsee/five";
-import { Group as E, Vector3 as A, Matrix4 as S, Quaternion as W } from "three";
+import { Subscribe as z } from "@realsee/five";
+import { Group as E, Vector3 as A, Matrix4 as S, Quaternion as _ } from "three";
 import v from "object-assign-deep";
-import { writable as z } from "../../vendor/svelte/store/index.js";
-import _ from "../Components/TagContainer.js";
-import $ from "../Components/Tag/index.js";
+import { writable as $ } from "../../vendor/svelte/store/index.js";
+import q from "../Components/TagContainer.js";
+import H from "../Components/Tag/index.js";
 import { arrayPositionToVector3 as C } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { addDebugPoints as q } from "../utils/addDebugPoints.js";
+import { addDebugPoints as J } from "../utils/addDebugPoints.js";
 import { planeNormal as k } from "../utils/planeNormal.js";
 import "@realsee/five/gltf-loader";
 import { isMediaModelTag as f } from "../utils/tag/tagCheck.js";
-import { waitFiveModelLoaded as H } from "../utils/actionAfterFiveModelLoad.js";
-import { normalPositionToPositions as J } from "../utils/normalPositionToPositions.js";
+import { waitFiveModelLoaded as Q } from "../utils/actionAfterFiveModelLoad.js";
+import { normalPositionToPositions as X } from "../utils/normalPositionToPositions.js";
 import { debounce as j } from "../utils/debounce.js";
-import { throttle as Q } from "../utils/throttle.js";
+import { throttle as K } from "../utils/throttle.js";
 import { resizeObserver as I } from "../utils/resizeObserver.js";
-import { TagComputer as X } from "./TagComputer.js";
-import { CSS3DRenderPlugin as K } from "../../CSS3DRenderPlugin/index.js";
-import Y from "../utils/tag/format.js";
-import { generateBlankAudio as Z, AudioNamespace as ee } from "../../shared-utils/audio.js";
+import { TagComputer as Y } from "./TagComputer.js";
+import { CSS3DRenderPlugin as Z } from "../../CSS3DRenderPlugin/index.js";
+import ee from "../utils/tag/format.js";
+import { generateBlankAudio as U, AudioNamespace as L } from "../../shared-utils/audio.js";
 import { loadGLTF as te } from "../../shared-utils/three/GLTFLoader.js";
 import "../../vendor/svelte/internal/index.js";
 import "../Components/TagItem.js";
@@ -140,18 +140,18 @@ import "./TagCacheController.js";
 import "../../base/BasePlugin.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
-const U = "3.0.0", M = `DnalogelPlugin-PanoTagPlugin@${U}`, ie = !1, li = (h) => `${M}--${h}`;
-class hi extends X {
+const V = "3.0.0", M = `DnalogelPlugin-PanoTagPlugin@${V}`, ie = !1, li = (h) => `${M}--${h}`;
+class hi extends Y {
   constructor(e, t) {
     super(e);
-    l(this, "version", U);
+    l(this, "version", V);
     l(this, "state", { enabled: !0, visible: !0 });
     l(this, "params");
     l(this, "debug");
     l(this, "css3DRenderPlugin");
     l(this, "TagContainerSvelte");
     l(this, "temporaryState", { visible: !0 });
-    l(this, "mediaStore", z({
+    l(this, "mediaStore", $({
       currentMediaElement: null
     }));
     l(this, "group", new E());
@@ -195,7 +195,7 @@ class hi extends X {
       const r = this.gltfObjectGroup.children.find((a) => a.customID === e.id);
       return r && this.gltfObjectGroup.remove(r), this.gltfObjectGroup.add(s), this.updateTagCss3DObjectMatrix(e, s), s;
     }));
-    this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.group.add(this.gltfObjectGroup), this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, Z(1, { namespace: ee.PlayAudio }), Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this }), this.state.enabled && this.five.scene.add(this.group);
+    this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.group.add(this.gltfObjectGroup), this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, U(1, { namespace: L.GetAudioDuration }), U(1, { namespace: L.PlayAudio }), Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this }), this.state.enabled && this.five.scene.add(this.group);
   }
   load(e, t) {
     return c(this, null, function* () {
@@ -207,7 +207,7 @@ class hi extends X {
       const i = yield this.addTag(e.tagList, t);
       if (this.debug)
         try {
-          q(this.five, this.tags);
+          J(this.five, this.tags);
         } catch (r) {
           console.error(r);
         }
@@ -220,12 +220,12 @@ class hi extends X {
         const r = this.getTagConfig(o);
         return T(p({}, o), {
           state: p({ visible: void 0, unfolded: ie }, r.initialState),
-          hooks: new N(),
+          hooks: new z(),
           clickable: r.clickable,
           mergedConfig: r
         });
       }).filter((o) => o.position);
-      return s.forEach(Y), this.tags.push(...s), H(this.five).then(() => {
+      return s.forEach(ee), this.tags.push(...s), Q(this.five).then(() => {
         var o, r, n;
         return this.store.eventListenerDisposer && ((r = (o = this.store).eventListenerDisposer) == null || r.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (n = t == null ? void 0 : t.withAnimation) != null ? n : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), this.addMediaModelTag(s);
       });
@@ -386,7 +386,7 @@ class hi extends X {
     }, i = () => {
       !this.state.enabled || this.hide();
     }, { observe: s, unobserve: o } = I(
-      Q(() => {
+      K(() => {
         !this.store.resizeObserverDisposer || i();
       }, 500),
       e
@@ -477,7 +477,7 @@ class hi extends X {
       const i = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
       if (!i)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new _({
+      this.TagContainerSvelte = new q({
         target: i,
         props: { hooks: this.hooks, tags: e, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
       });
@@ -494,16 +494,16 @@ class hi extends X {
           state: this.state,
           temporaryState: this.temporaryState
         }), !b.equals(u)) {
-          const D = new W().setFromUnitVectors(b, u);
+          const D = new _().setFromUnitVectors(b, u);
           y.css3DObject.setRotationFromQuaternion(D);
         }
         return;
       }
       if (((m = t.state) == null ? void 0 : m.visible) === !1)
         return;
-      if (this.css3DRenderPlugin || (this.css3DRenderPlugin = K(this.five)), t.stickType === "3DPoint" && !t.normal)
+      if (this.css3DRenderPlugin || (this.css3DRenderPlugin = Z(this.five)), t.stickType === "3DPoint" && !t.normal)
         return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
-      const i = (() => t.stickType === "Plane" ? t.position : f(t) ? t.data.mediaPosition : J(
+      const i = (() => t.stickType === "Plane" ? t.position : f(t) ? t.data.mediaPosition : X(
         this.five.camera.position,
         C(t.position),
         C(t.normal)
@@ -522,7 +522,7 @@ class hi extends X {
         return;
       const o = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(i, o);
       !r || (this.updateTagCss3DObjectVisible(t), this.store.css3DRenderDisposer.set(t.id, r.dispose), t.tag3DContentSvelte = {
-        svelteApp: new $({
+        svelteApp: new H({
           target: r.container,
           props: {
             tag: t,

package/libs/PanoTagPlugin/index.js

@@ -87,8 +87,8 @@ import "./utils/tag/tagCheck.js";
 import "./Components/Tag/AudioTag/index.js";
 import "./Components/Tag/AudioTag/AudioTag.js";
 import "./Components/Common/Audio.js";
-import "./utils/audio/SharedAudio.js";
 import "../shared-utils/audio.js";
+import "./utils/audio/SharedAudio.js";
 import "./Components/Common/Icon/audioIcon.js";
 import "./Components/Tag/AudioTag/AudioPlaneTag.js";
 import "./Components/Tag/MediaPlane.js";

package/libs/PanoTagPlugin/utils/audio/SharedAudio.d.ts

@@ -1,6 +1,6 @@
 export declare class SharedAudio extends Audio {
     sharedAudioSrc?: string;
-    private sharedAudioPaused;
+    sharedAudioPaused: boolean;
     get paused(): boolean;
     get currentTime(): number;
     private sharedAudioCurrentTime;

package/libs/PanoTagPlugin/utils/audio/SharedAudio.js

@@ -1,16 +1,32 @@
-var m = Object.defineProperty;
-var y = (r, a, e) => a in r ? m(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e;
-var n = (r, a, e) => (y(r, typeof a != "symbol" ? a + "" : a, e), e);
-import { getAudio as L, AudioNamespace as A } from "../../../shared-utils/audio.js";
-class I extends Audio {
+var y = Object.defineProperty;
+var L = (r, a, e) => a in r ? y(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e;
+var u = (r, a, e) => (L(r, typeof a != "symbol" ? a + "" : a, e), e);
+var m = (r, a, e) => new Promise((o, d) => {
+  var i = (n) => {
+    try {
+      h(e.next(n));
+    } catch (c) {
+      d(c);
+    }
+  }, p = (n) => {
+    try {
+      h(e.throw(n));
+    } catch (c) {
+      d(c);
+    }
+  }, h = (n) => n.done ? o(n.value) : Promise.resolve(n.value).then(i, p);
+  h((e = e.apply(r, a)).next());
+});
+import { getAudio as E, AudioNamespace as A } from "../../../shared-utils/audio.js";
+class f extends Audio {
   constructor(e) {
     super();
-    n(this, "sharedAudioSrc");
-    n(this, "sharedAudioPaused", !0);
-    n(this, "sharedAudioCurrentTime", 0);
-    n(this, "tryplaying", !1);
-    n(this, "audioInstance");
-    n(this, "eventListenerDisposer");
+    u(this, "sharedAudioSrc");
+    u(this, "sharedAudioPaused", !0);
+    u(this, "sharedAudioCurrentTime", 0);
+    u(this, "tryplaying", !1);
+    u(this, "audioInstance");
+    u(this, "eventListenerDisposer");
     this.sharedAudioSrc = e;
   }
   get paused() {
@@ -21,22 +37,27 @@ class I extends Audio {
     return this.sharedAudioCurrentTime;
   }
   play() {
-    var e, d, o;
-    this.tryplaying || (this.tryplaying = !0, (!this.audioInstance || ((e = this.audioInstance) == null ? void 0 : e.realSrc) !== this.sharedAudioSrc) && (this.audioInstance = L(this.sharedAudioSrc, { namespace: A.PlayAudio })), (d = this.eventListenerDisposer) == null || d.call(this), this.eventListenerDisposer = this.addEventListeners(), this.audioInstance.currentTime = (o = this.currentTime) != null ? o : 0, this.audioInstance.play().catch((i) => {
-      var u;
-      console.warn("Error playing media in Safari", i), (u = this.onerror) == null || u.call(this, i);
-    }).then(() => {
-      var i;
-      this.audioInstance.muted = !1, this.audioInstance.currentTime = (i = this.currentTime) != null ? i : 0, this.sharedAudioPaused = !1;
-    }).finally(() => {
-      this.tryplaying = !1;
-    }));
+    return m(this, null, function* () {
+      var e, o, d;
+      this.tryplaying || (this.tryplaying = !0, (!this.audioInstance || ((e = this.audioInstance) == null ? void 0 : e.realSrc) !== this.sharedAudioSrc) && (this.audioInstance = E(this.sharedAudioSrc, { namespace: A.PlayAudio })), (o = this.eventListenerDisposer) == null || o.call(this), this.eventListenerDisposer = this.addEventListeners(), this.audioInstance.currentTime = (d = this.currentTime) != null ? d : 0, this.audioInstance.play().then(() => {
+        var i;
+        this.audioInstance.currentTime = (i = this.currentTime) != null ? i : 0, this.sharedAudioPaused = !1;
+      }).catch((i) => {
+        this.pause(), console.warn(i);
+      }).finally(() => {
+        this.tryplaying = !1;
+      }));
+    });
   }
   pause() {
-    !this.audioInstance || this.paused || (this.sharedAudioPaused = !0, this.audioInstance.addEventListener("pause", () => {
-      var e;
-      return (e = this.eventListenerDisposer) == null ? void 0 : e.call(this);
-    }, { once: !0 }), this.audioInstance.pause());
+    !this.audioInstance || this.paused || (this.sharedAudioPaused = !0, this.audioInstance.addEventListener(
+      "pause",
+      () => {
+        var e;
+        (e = this.eventListenerDisposer) == null || e.call(this);
+      },
+      { once: !0 }
+    ), this.audioInstance.pause());
   }
   dispose() {
     this.clear(), this.audioInstance = void 0;
@@ -49,25 +70,25 @@ class I extends Audio {
     const e = this.audioInstance;
     if (!e)
       return;
-    const d = (s) => {
+    const o = (s) => {
       var t;
-      this.sharedAudioCurrentTime = e.currentTime, e.currentTime === 0 && (this.sharedAudioPaused = e.paused), (t = this.ontimeupdate) == null || t.call(this, s);
-    }, o = (s) => {
+      this.sharedAudioCurrentTime = e.currentTime, this.sharedAudioPaused = e.paused, (t = this.ontimeupdate) == null || t.call(this, s);
+    }, d = (s) => {
       var t;
-      e.isBlankAudio || (this.sharedAudioPaused = !1, (t = this.onplay) == null || t.call(this, s));
+      return (t = this.onplay) == null ? void 0 : t.call(this, s);
     }, i = (s) => {
       var t;
-      (t = this.onpause) == null || t.call(this, s), !this.sharedAudioPaused && (this.pause(), this.sharedAudioPaused = !0, this.clear());
-    }, u = (s) => {
+      (t = this.onpause) == null || t.call(this, s), this.sharedAudioPaused = !0, this.clear();
+    }, p = (s) => {
       var t;
       (t = this.onended) == null || t.call(this, s), this.sharedAudioPaused = !0, this.sharedAudioCurrentTime = 0;
     }, h = (s) => {
       var t;
-      this.sharedAudioPaused = !0, (t = this.onerror) == null || t.call(this, s);
-    }, c = (s) => {
+      return (t = this.onerror) == null ? void 0 : t.call(this, s);
+    }, n = (s) => {
       var t;
       return (t = this.oncanplay) == null ? void 0 : t.call(this, s);
-    }, p = (s) => {
+    }, c = (s) => {
       var t;
       return (t = this.oncanplaythrough) == null ? void 0 : t.call(this, s);
     }, l = (s) => {
@@ -77,11 +98,11 @@ class I extends Audio {
       var t;
       return (t = this.onloadedmetadata) == null ? void 0 : t.call(this, s);
     };
-    return e.addEventListener("timeupdate", d), e.addEventListener("play", o), e.addEventListener("pause", i), e.addEventListener("ended", u), e.addEventListener("error", h), e.addEventListener("canplay", c), e.addEventListener("canplaythrough", p), e.addEventListener("loadeddata", l), e.addEventListener("loadedmetadata", v), () => {
-      e.removeEventListener("timeupdate", d), e.removeEventListener("play", o), e.removeEventListener("pause", i), e.removeEventListener("ended", u), e.removeEventListener("error", h), e.removeEventListener("canplay", c), e.removeEventListener("canplaythrough", p), e.removeEventListener("loadeddata", l), e.removeEventListener("loadedmetadata", v);
+    return e.addEventListener("timeupdate", o), e.addEventListener("play", d), e.addEventListener("pause", i), e.addEventListener("ended", p), e.addEventListener("error", h), e.addEventListener("canplay", n), e.addEventListener("canplaythrough", c), e.addEventListener("loadeddata", l), e.addEventListener("loadedmetadata", v), () => {
+      e.removeEventListener("timeupdate", o), e.removeEventListener("play", d), e.removeEventListener("pause", i), e.removeEventListener("ended", p), e.removeEventListener("error", h), e.removeEventListener("canplay", n), e.removeEventListener("canplaythrough", c), e.removeEventListener("loadeddata", l), e.removeEventListener("loadedmetadata", v);
     };
   }
 }
 export {
-  I as SharedAudio
+  f as SharedAudio
 };

package/libs/PanoVideoPlugin/VideoMeshController.d.ts

@@ -36,6 +36,8 @@ export declare class VideoMeshController {
     private videoMesh;
     private _enabled;
     private _disposed;
+    /** 视频资源是否满足播放条件 */
+    private videoDataLoaded;
     /** 视频是否曾经播放过 */
     private hasVideoEverPlayed;
     /** 自动 render five 的销毁函数
@@ -80,7 +82,10 @@ export declare class VideoMeshController {
     private onFiveModeChange;
     /** Five mode change 动画结束 */
     private onFiveInitAnimationEnded;
+    /** Five Canvas 点击 */
     private onFiveWantsTapGesture;
+    /** video canplaythrough 事件触发 */
+    private onVideoDataLoaded;
     /** video playing 事件触发
      * @remarks
      * 事件触发时机：
@@ -89,6 +94,8 @@ export declare class VideoMeshController {
      * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
      */
     private onVideoPlaying;
+    /** 触发 playing 和 canplaythrough */
+    private onVideoPlayingAndLoaded;
     /** video pause 事件触发 */
     private onVideoPaused;
     /** 控制台打印警告 */

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -1,15 +1,15 @@
-var F = Object.defineProperty;
-var I = (d, e, i) => e in d ? F(d, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : d[e] = i;
-var t = (d, e, i) => (I(d, typeof e != "symbol" ? e + "" : e, i), i);
-import { vertexShader as E, fragmentShader as M } from "./utils/shader.js";
+var g = Object.defineProperty;
+var F = (h, e, i) => e in h ? g(h, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : h[e] = i;
+var t = (h, e, i) => (F(h, typeof e != "symbol" ? e + "" : e, i), i);
+import { vertexShader as E, fragmentShader as I } from "./utils/shader.js";
 import "hammerjs";
-import { VideoTexture as P, LinearFilter as m, ShaderMaterial as A, Vector4 as x, SphereBufferGeometry as D, Mesh as b, Vector3 as f, Quaternion as C } from "three";
+import { VideoTexture as D, LinearFilter as m, ShaderMaterial as P, Vector4 as A, SphereBufferGeometry as M, Mesh as x, Vector3 as f, Quaternion as C } from "three";
 import "@realsee/five";
 import "@tweenjs/tween.js";
 import "../CSS3DRenderPlugin/CSS3DRender.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { requestAnimationFrameInterval as y } from "../shared-utils/animationFrame/index.js";
-import B from "./utils/index.js";
+import { requestAnimationFrameInterval as L } from "../shared-utils/animationFrame/index.js";
+import V from "./utils/index.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
@@ -23,7 +23,7 @@ import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
 import "../shared-utils/animationFrame/BetterTween.js";
-class Z {
+class Y {
   constructor(e, i) {
     t(this, "_id");
     t(this, "url");
@@ -35,24 +35,31 @@ class Z {
     t(this, "videoMesh");
     t(this, "_enabled", !0);
     t(this, "_disposed", !1);
+    t(this, "videoDataLoaded", !1);
     t(this, "hasVideoEverPlayed", !1);
     t(this, "renderFiveDisposer");
     t(this, "uv2Position", (e, i) => {
-      var p;
-      const o = Math.PI, s = Math.PI * 2, u = -1 * Math.cos(s * e) * Math.sin(o * i), r = 1 * Math.cos(o * i), a = 1 * Math.sin(s * e) * Math.sin(o * i), h = new f(u, r, a), v = (p = this.five.work) == null ? void 0 : p.observers[this.panoIndex];
-      if (!v)
+      var c;
+      const o = Math.PI, a = Math.PI * 2, d = e, s = 1 - i, r = new f(
+        -1 * Math.cos(a * d) * Math.sin(o * s),
+        1 * Math.cos(o * s),
+        1 * Math.sin(a * d) * Math.sin(o * s)
+      );
+      r.setX(-r.x);
+      const u = (c = this.five.work) == null ? void 0 : c.observers[this.panoIndex];
+      if (!u)
         return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
-      const c = v.position.clone(), g = v.quaternion.clone(), l = h.clone();
-      return l.add(c), l.applyAxisAngle(new f(0, 1, 0), -Math.PI / 2), l.applyQuaternion(g), l;
+      const l = u.position.clone(), p = u.quaternion.clone(), v = r.clone();
+      return v.applyAxisAngle(new f(0, 1, 0), Math.PI / 2), v.applyQuaternion(p), v.add(l), v;
     });
     t(this, "onFiveDataLoaded", () => {
-      var a;
-      const e = (a = this.five.work) == null ? void 0 : a.observers[this.panoIndex];
+      var r;
+      const e = (r = this.five.work) == null ? void 0 : r.observers[this.panoIndex];
       if (!e)
         return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
       this.observer = e;
-      const { x: i, y: n, z: o, w: s } = e.quaternion, u = new C(i, n, o, s), r = e.position;
-      this.videoMesh.position.fromArray([r.x, r.y, r.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new f(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(u);
+      const { x: i, y: n, z: o, w: a } = e.quaternion, d = new C(i, n, o, a), s = e.position;
+      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new f(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(d);
     });
     t(this, "onFiveWantsMoveToPano", (e) => {
       e === this.panoIndex && (this.hasVideoEverPlayed || this.video.play().catch((i) => {
@@ -89,36 +96,52 @@ class Z {
       if (this.checkIntersectionInBounding(this.origin, i))
         return this.video.muted = !this.video.muted, !1;
     });
+    t(this, "onVideoDataLoaded", () => {
+      this.videoDataLoaded = !0, this.video.paused === !1 && this.video.src !== "" && this.onVideoPlayingAndLoaded();
+    });
     t(this, "onVideoPlaying", () => {
-      this.hasVideoEverPlayed = !0, this.video.src !== "" && (this.renderFiveDisposer = y(() => {
-        this.five.needsRender = !0;
-      }), this.five.scene.add(this.videoMesh));
+      this.hasVideoEverPlayed = !0, this.video.src !== "" && this.videoDataLoaded && this.onVideoPlayingAndLoaded();
+    });
+    t(this, "onVideoPlayingAndLoaded", () => {
+      if (!this.videoDataLoaded)
+        return this.logWarning("\u89C6\u9891\u6570\u636E\u672A\u52A0\u8F7D");
+      if (this.video.paused === !0)
+        return this.logWarning("\u89C6\u9891\u5DF2\u6682\u505C");
+      this.video.addEventListener(
+        "timeupdate",
+        () => {
+          this.video.src !== "" && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = L(() => {
+            this.five.needsRender = !0;
+          }, 30)), this.five.scene.add(this.videoMesh));
+        },
+        { once: !0 }
+      );
     });
     t(this, "onVideoPaused", () => {
       var e;
-      (e = this.renderFiveDisposer) == null || e.call(this);
+      (e = this.renderFiveDisposer) == null || e.call(this), this.renderFiveDisposer = void 0;
     });
-    var a, h;
-    this.five = e, this.panoIndex = i.panoIndex, this._id = i.renderID, this.url = i.url, this.origin = i.origin.slice(), this._enabled = (h = (a = i.initialState) == null ? void 0 : a.enabled) != null ? h : !0;
+    var r, u;
+    this.five = e, this.panoIndex = i.panoIndex, this._id = i.renderID, this.url = i.url, this.origin = i.origin.slice(), this._enabled = (u = (r = i.initialState) == null ? void 0 : r.enabled) != null ? u : !0;
     const n = document.createElement("video");
     n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n;
-    const o = new P(this.video);
+    const o = new D(this.video);
     o.minFilter = m, o.magFilter = m;
-    const s = new A({
+    const a = new P({
       vertexShader: E,
-      fragmentShader: M,
+      fragmentShader: I,
       uniforms: {
         map: { value: o },
         size: {
-          value: new x(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
+          value: new A(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
         }
       },
       depthTest: !0,
       transparent: !0
-    }), u = new D(1, 64, 64);
-    u.scale(-1, 1, 1);
-    const r = new b(u, s);
-    r.name = "pano-video", this.videoMesh = r, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
+    }), d = new M(1, 64, 64);
+    d.scale(-1, 1, 1);
+    const s = new x(d, a);
+    s.name = "pano-video", this.videoMesh = s, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
   }
   get renderID() {
     return this._id;
@@ -147,8 +170,8 @@ class Z {
     const i = this.uv2Position(e[0], e[1]);
     if (!i)
       return;
-    const n = new f().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: s } = B(n);
-    this.five.setState({ panoIndex: this.panoIndex, longitude: o, latitude: s }), this.onFiveWantsMoveToPano(this.panoIndex);
+    const n = new f().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: a } = V(n);
+    this.five.setState({ panoIndex: this.panoIndex, longitude: o, latitude: a }), this.onFiveWantsMoveToPano(this.panoIndex);
   }
   getUVCenter() {
     if (!this.origin)
@@ -157,10 +180,10 @@ class Z {
     return [e, i];
   }
   addEventListeners() {
-    this.five.on("loaded", this.onFiveDataLoaded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.on("wantsTapGesture", this.onFiveWantsTapGesture), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.addEventListener("playing", this.onVideoPlaying), this.video.addEventListener("pause", this.onVideoPaused);
+    this.five.on("loaded", this.onFiveDataLoaded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.on("wantsTapGesture", this.onFiveWantsTapGesture), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.addEventListener("canplaythrough", this.onVideoDataLoaded), this.video.addEventListener("playing", this.onVideoPlaying), this.video.addEventListener("pause", this.onVideoPaused);
   }
   removeEventListeners() {
-    this.five.off("loaded", this.onFiveDataLoaded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.off("wantsTapGesture", this.onFiveWantsTapGesture), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.removeEventListener("playing", this.onVideoPlaying), this.video.removeEventListener("pause", this.onVideoPaused);
+    this.five.off("loaded", this.onFiveDataLoaded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.off("wantsTapGesture", this.onFiveWantsTapGesture), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.removeEventListener("canplaythrough", this.onVideoDataLoaded), this.video.removeEventListener("playing", this.onVideoPlaying), this.video.removeEventListener("pause", this.onVideoPaused);
   }
   mountIfNeeded() {
     const e = this.five.getCurrentState();
@@ -191,10 +214,10 @@ class Z {
   checkIntersectionInBounding(e, i) {
     if (!i.uv)
       return !1;
-    const [n, o] = i.uv.toArray(), [s, u, r, a] = e, h = 1 - u - a, v = s + r, c = h + a;
-    return n >= s && n <= v && o >= h && o <= c;
+    const [n, o] = i.uv.toArray(), [a, d, s, r] = e, u = 1 - d - r, l = a + s, p = u + r;
+    return n >= a && n <= l && o >= u && o <= p;
   }
 }
 export {
-  Z as VideoMeshController
+  Y as VideoMeshController
 };

package/libs/index.js

@@ -277,8 +277,8 @@ import "./PanoTagPlugin/utils/tag/tagCheck.js";
 import "./PanoTagPlugin/Components/Tag/AudioTag/index.js";
 import "./PanoTagPlugin/Components/Tag/AudioTag/AudioTag.js";
 import "./PanoTagPlugin/Components/Common/Audio.js";
-import "./PanoTagPlugin/utils/audio/SharedAudio.js";
 import "./shared-utils/audio.js";
+import "./PanoTagPlugin/utils/audio/SharedAudio.js";
 import "./PanoTagPlugin/Components/Common/Icon/audioIcon.js";
 import "./PanoTagPlugin/Components/Tag/AudioTag/AudioPlaneTag.js";
 import "./PanoTagPlugin/Components/Tag/MediaPlane.js";

package/libs/shared-utils/audio.d.ts

@@ -22,8 +22,6 @@ export declare class IAudio extends Audio {
     get isBlankAudio(): boolean;
     get src(): string;
     set src(paramsSrc: string);
-    get muted(): boolean;
-    set muted(muted: boolean);
     realSrc: string;
     inited: boolean;
     removeDocumentEventListener: () => void;