@realsee/dnalogel 2.16.0-alpha.0 → 2.16.0-alpha.2

package/libs/PanoTagPlugin/controller/TagUtil.js

@@ -1,13 +1,13 @@
 var T = Object.defineProperty;
 var y = (c, u, e) => u in c ? T(c, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[u] = e;
-var a = (c, u, e) => (y(c, typeof u != "symbol" ? u + "" : u, e), e);
+var l = (c, u, e) => (y(c, typeof u != "symbol" ? u + "" : u, e), e);
 import D from "object-assign-deep";
 import * as C from "three";
-import { DefaultConfig as w } from "../tag.config.js";
-import { anyPositionToVector3 as E, arrayPositionToVector3 as p } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { DefaultConfig as P } from "../tag.config.js";
+import { anyPositionToVector3 as w, arrayPositionToVector3 as p } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
 import { planeNormal as g } from "../utils/planeNormal.js";
-import { tagPosition as P, getTagPosition as M } from "../utils/tagPosition.js";
-import { normalPositionToPositions as k } from "../utils/normalPositionToPositions.js";
+import { tagPosition as E, getTagPosition as k } from "../utils/tagPosition.js";
+import { normalPositionToPositions as M } from "../utils/normalPositionToPositions.js";
 import { TagCache as b } from "./TagCache.js";
 import { writable as I } from "../../vendor/svelte/store/index.js";
 import { isIOSWX as A } from "../utils/device.js";
@@ -16,6 +16,7 @@ import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "@realsee/five";
 import { isMediaPlaneTag as x, isMediaModelTag as v, isPlaneTag as V } from "../utils/tag/tagCheck.js";
 import { DomEvents as L } from "../../shared-utils/threex/domevents/index.js";
+import { VideoPlane as S } from "../utils/model/mediaPlane.js";
 import "@realsee/five/gltf-loader";
 import "../../shared-utils/three/loadTexture.js";
 import "../../shared-utils/three/centerPoint.js";
@@ -31,30 +32,40 @@ import "../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
 import "../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-class le extends b {
+import "../../shared-utils/three/Quadrangle.js";
+import "../../shared-utils/math/pointIsRectangle.js";
+import "../../shared-utils/three/loadVideoTexture.js";
+import "../Assets/Icon.js";
+import "../../shared-utils/three/getPositionsByObjectFit.js";
+import "../../shared-utils/five/FiveDomEvents.js";
+class ve extends b {
   constructor(e) {
     super(e);
-    a(this, "tags", []);
-    a(this, "config", w);
-    a(this, "mediaStore", I({
+    l(this, "tags", []);
+    l(this, "config", P);
+    l(this, "mediaStore", I({
       currentMediaElement: null
     }));
-    a(this, "css3DRenderPlugin");
-    a(this, "store", {
+    l(this, "css3DRenderPlugin");
+    l(this, "store", {
       disposers: [],
       disposed: !1,
       resizeObserverDisposerAdding: !1,
       css3DRenderDisposer: /* @__PURE__ */ new Map()
     });
-    a(this, "domEvents");
-    a(this, "mouseInfo");
-    a(this, "preventWhenMouseDown", () => {
+    l(this, "domEvents");
+    l(this, "mouseInfo");
+    l(this, "preventWhenMouseDown", () => {
       var e;
       if ((e = this.mouseInfo) != null && e.isDown)
         return !1;
     });
     const i = this.five.getElement();
-    i && (this.domEvents = new L(this.five.camera, i)), this.five.on("wantsMoveToPano", this.preventWhenMouseDown), this.five.on("wantsTapGesture", this.preventWhenMouseDown), this.store.disposers.push(() => {
+    i && (this.domEvents = new L(this.five.camera, i)), this.five.on("wantsMoveToPano", this.preventWhenMouseDown), this.five.on("wantsTapGesture", this.preventWhenMouseDown), this.mediaStore.subscribe(({ currentMediaElement: o }) => {
+      this.tags.forEach((t) => {
+        t.mediaPlane instanceof S && o !== t.mediaPlane.videoInstance && t.mediaPlane.pause();
+      });
+    }), this.store.disposers.push(() => {
       this.five.off("wantsMoveToPano", this.preventWhenMouseDown), this.five.off("wantsTapGesture", this.preventWhenMouseDown);
     });
   }
@@ -77,8 +88,8 @@ class le extends b {
     if (!e)
       return (t = this.config.globalConfig) != null ? t : {};
     const i = {};
-    this.config.contentTypeConfig && Object.keys(this.config.contentTypeConfig).forEach((l) => {
-      const r = l;
+    this.config.contentTypeConfig && Object.keys(this.config.contentTypeConfig).forEach((a) => {
+      const r = a;
       if (i[r])
         return;
       const f = r.split("-");
@@ -91,10 +102,10 @@ class le extends b {
         (e.stickType === s || s === "Any") && (e.contentType === n || n === "Any") && (i[r] = this.config.contentTypeConfig[r]);
       }
       if (f.length === 3) {
-        const [s = "Any", n, m] = f;
+        const [s = "Any", n, h] = f;
         if (n === "Audio" && e.contentType === "Audio") {
-          const h = e;
-          (h.stickType === s || s === "Any") && h.data.appearance === m && (i[r] = this.config.contentTypeConfig[r]);
+          const m = e;
+          (m.stickType === s || s === "Any") && m.data.appearance === h && (i[r] = this.config.contentTypeConfig[r]);
         }
       }
     });
@@ -129,26 +140,25 @@ class le extends b {
     return !0;
   }
   getRenderType(e) {
-    const i = this.getTagConfig(e);
-    if (!i || typeof i != "object" || !i.renderType)
-      return "Dom";
-    const o = e.data.mediaData;
-    if (!o || o.length === 0)
-      return "Dom";
-    if (i.renderType === "Mesh") {
-      if (x(e))
-        if (o.length === 1) {
-          if (o[0].type === "Image" || o[0].type === "Video")
+    const i = (() => {
+      if (e.stickType === "3DPoint")
+        return "Dom";
+      const o = this.getTagConfig(e);
+      if (!o || typeof o != "object" || !o.renderType)
+        return;
+      const t = e.data.mediaData;
+      if (!(!t || t.length === 0) && o.renderType === "Mesh") {
+        if (x(e)) {
+          if (t.length === 1 && (t[0].type === "Image" || t[0].type === "Video"))
             return "Mesh";
-        } else
-          return "Dom";
-      else if (v(e))
-        return o.length === 1 && o[0].type === "Image" ? "Mesh" : "BehindDom";
-    } else
-      return "Dom";
+        } else if (v(e))
+          return t.length === 1 && t[0].type === "Image" ? "Mesh" : "BehindDom";
+      }
+    })();
+    return i != null ? i : "Dom";
   }
   getAngle(e, i) {
-    var d, l, r;
+    var d, a, r;
     const o = (d = this.five.panoIndex) != null ? d : i;
     if (o === void 0)
       throw new Error(`getDistance(): fivePanoIndex is ${o}`);
@@ -156,21 +166,21 @@ class le extends b {
     if (t.angle !== void 0)
       return t.angle;
     {
-      const f = (r = (l = this.five.work) == null ? void 0 : l.observers[o]) == null ? void 0 : r.position;
+      const f = (r = (a = this.five.work) == null ? void 0 : a.observers[o]) == null ? void 0 : r.position;
       if (f === void 0)
         throw new Error(`getAngleRange(): observerPosition is ${f}`);
-      const s = (() => e.stickType === "3DPoint" ? E(e.normal) : g(e.position))();
+      const s = (() => e.stickType === "3DPoint" ? w(e.normal) : g(e.position))();
       if (!s)
         return;
-      const n = P(e.position);
+      const n = E(e.position);
       if (!n)
         return;
-      const m = new C.Vector3().copy(f).sub(n), h = s.angleTo(m) * 180 / Math.PI;
-      return t.angle = h, t.angle;
+      const h = new C.Vector3().copy(f).sub(n), m = s.angleTo(h) * 180 / Math.PI;
+      return t.angle = m, t.angle;
     }
   }
   getDistance(e, i) {
-    var d, l, r;
+    var d, a, r;
     const o = (d = this.five.panoIndex) != null ? d : i;
     if (o === void 0)
       throw new Error(`getDistance(): fivePanoIndex is ${o}`);
@@ -178,10 +188,10 @@ class le extends b {
     if (t.distance !== void 0)
       return t.distance;
     {
-      const f = (r = (l = this.five.work) == null ? void 0 : l.observers[o]) == null ? void 0 : r.position;
+      const f = (r = (a = this.five.work) == null ? void 0 : a.observers[o]) == null ? void 0 : r.position;
       if (f === void 0)
         throw new Error(`getDistance(): observerPosition is ${f}`);
-      const s = M(e);
+      const s = k(e);
       if (!s)
         return -1;
       const n = f.distanceTo(s);
@@ -194,7 +204,7 @@ class le extends b {
     if (v(e))
       return e.data.mediaPosition;
     const i = e;
-    return k(
+    return M(
       this.five.camera.position,
       p(i.position),
       p(i.normal)
@@ -216,7 +226,7 @@ class le extends b {
         isDown: !0,
         mouseDownTimestamp: Date.now()
       };
-    }, l = (s) => {
+    }, a = (s) => {
       if (!t()) {
         this.mouseInfo = void 0;
         return;
@@ -243,8 +253,8 @@ class le extends b {
       const n = s.origDomEvent;
       !this.mouseInfo || (this.mouseInfo.isDown && this.mouseInfo.x === Math.floor(n.changedTouches[n.changedTouches.length - 1].clientX) && this.mouseInfo.y === Math.floor(n.changedTouches[n.changedTouches.length - 1].clientY) && Date.now() - this.mouseInfo.mouseDownTimestamp < 400 && o(n), this.mouseInfo = void 0);
     };
-    return this.domEvents.addEventListener(i, "mousedown", d, !1), this.domEvents.addEventListener(i, "mouseup", l, !1), this.domEvents.addEventListener(i, "touchstart", r, !1), this.domEvents.addEventListener(i, "touchend", f, !1), () => {
-      !this.domEvents || (this.mouseInfo = void 0, this.domEvents.removeEventListener(i, "mousedown", d), this.domEvents.removeEventListener(i, "mouseup", l), this.domEvents.removeEventListener(i, "touchstart", r), this.domEvents.removeEventListener(i, "touchend", f));
+    return this.domEvents.addEventListener(i, "mousedown", d, !1), this.domEvents.addEventListener(i, "mouseup", a, !1), this.domEvents.addEventListener(i, "touchstart", r, !1), this.domEvents.addEventListener(i, "touchend", f, !1), () => {
+      !this.domEvents || (this.mouseInfo = void 0, this.domEvents.removeEventListener(i, "mousedown", d), this.domEvents.removeEventListener(i, "mouseup", a), this.domEvents.removeEventListener(i, "touchstart", r), this.domEvents.removeEventListener(i, "touchend", f));
     };
   }
   getTagNormal(e) {
@@ -286,5 +296,5 @@ class le extends b {
   }
 }
 export {
-  le as TagUtil
+  ve as TagUtil
 };

package/libs/PanoTagPlugin/controller/index.js

@@ -73,6 +73,13 @@ import "../../base/BasePlugin.js";
 import "../../vendor/svelte/store/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../utils/device.js";
+import "../utils/model/mediaPlane.js";
+import "../../shared-utils/three/Quadrangle.js";
+import "../../shared-utils/math/pointIsRectangle.js";
+import "../../shared-utils/three/loadVideoTexture.js";
+import "../Assets/Icon.js";
+import "../../shared-utils/three/getPositionsByObjectFit.js";
+import "../../shared-utils/five/FiveDomEvents.js";
 import "../Components/TagContainer.js";
 import "../Components/TagItem.js";
 import "../Components/Tag/index.js";
@@ -89,7 +96,6 @@ import "animejs";
 import "../utils/search.js";
 import "../utils/constants.js";
 import "../Components/Common/Arrow.js";
-import "../Assets/Icon.js";
 import "../utils/doUtil.js";
 import "../../shared-utils/svelte/resizeObserver.js";
 import "../../vendor/resize-observer-polyfill/dist/ResizeObserver.es.js";
@@ -144,12 +150,6 @@ import "../utils/getImageInfo.js";
 import "../Components/Tag/CustomTag.js";
 import "classnames";
 import "../Components/Common/TagPoint.js";
-import "../utils/model/mediaPlane.js";
-import "../../shared-utils/three/Quadrangle.js";
-import "../../shared-utils/math/pointIsRectangle.js";
-import "../../shared-utils/three/loadVideoTexture.js";
-import "../../shared-utils/three/getPositionsByObjectFit.js";
-import "../../shared-utils/five/FiveDomEvents.js";
 import "../../CSS3DRenderPlugin/index.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";

package/libs/PanoTagPlugin/index.js

@@ -48,6 +48,13 @@ import "../base/BasePlugin.js";
 import "../vendor/svelte/store/index.js";
 import "../vendor/svelte/internal/index.js";
 import "./utils/device.js";
+import "./utils/model/mediaPlane.js";
+import "../shared-utils/three/Quadrangle.js";
+import "../shared-utils/math/pointIsRectangle.js";
+import "../shared-utils/three/loadVideoTexture.js";
+import "./Assets/Icon.js";
+import "../shared-utils/three/getPositionsByObjectFit.js";
+import "../shared-utils/five/FiveDomEvents.js";
 import "./Components/TagContainer.js";
 import "./Components/TagItem.js";
 import "./Components/Tag/index.js";
@@ -64,7 +71,6 @@ import "animejs";
 import "./utils/search.js";
 import "./utils/constants.js";
 import "./Components/Common/Arrow.js";
-import "./Assets/Icon.js";
 import "./utils/doUtil.js";
 import "../shared-utils/svelte/resizeObserver.js";
 import "../vendor/resize-observer-polyfill/dist/ResizeObserver.es.js";
@@ -119,12 +125,6 @@ import "./utils/getImageInfo.js";
 import "./Components/Tag/CustomTag.js";
 import "classnames";
 import "./Components/Common/TagPoint.js";
-import "./utils/model/mediaPlane.js";
-import "../shared-utils/three/Quadrangle.js";
-import "../shared-utils/math/pointIsRectangle.js";
-import "../shared-utils/three/loadVideoTexture.js";
-import "../shared-utils/three/getPositionsByObjectFit.js";
-import "../shared-utils/five/FiveDomEvents.js";
 import "../CSS3DRenderPlugin/index.js";
 import "../CSS3DRenderPlugin/Controller.js";
 import "../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";

package/libs/PanoTagPlugin/utils/model/mediaPlane.d.ts

@@ -20,20 +20,22 @@ declare class ImagePlane extends MediaPlane {
 declare class VideoPlane extends MediaPlane {
     readonly isVideoPlane = true;
     name: string;
+    videoInstance: HTMLVideoElement;
     private objectFit;
     private buttonSrc;
+    private paused;
     private videoCoverSrc?;
     private domEvents?;
     private disposers;
     private domEventsListenerTemporaryList;
     private cornerPoints;
-    private videoInstance?;
     private videoMesh?;
     private coverMesh?;
     private buttonMesh?;
     private videoTextureMap;
     private ImageTextureMap;
     constructor(videoSrc: string, cornerPoints: Vector3[], params?: {
+        videoInstance?: HTMLVideoElement;
         playButton?: 'withText' | 'withoutText' | string;
         videoCoverSrc?: string;
         objectFit?: 'contain' | 'fill';

package/libs/PanoTagPlugin/utils/model/mediaPlane.js

@@ -1,8 +1,8 @@
 var S = Object.defineProperty;
-var H = (p, d, e) => d in p ? S(p, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[d] = e;
-var a = (p, d, e) => (H(p, typeof d != "symbol" ? d + "" : d, e), e);
-var u = (p, d, e) => new Promise((t, s) => {
-  var h = (i) => {
+var H = (v, c, e) => c in v ? S(v, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[c] = e;
+var h = (v, c, e) => (H(v, typeof c != "symbol" ? c + "" : c, e), e);
+var u = (v, c, e) => new Promise((t, s) => {
+  var a = (i) => {
     try {
       n(e.next(i));
     } catch (o) {
@@ -14,12 +14,12 @@ var u = (p, d, e) => new Promise((t, s) => {
     } catch (o) {
       s(o);
     }
-  }, n = (i) => i.done ? t(i.value) : Promise.resolve(i.value).then(h, r);
-  n((e = e.apply(p, d)).next());
+  }, n = (i) => i.done ? t(i.value) : Promise.resolve(i.value).then(a, r);
+  n((e = e.apply(v, c)).next());
 });
 import * as m from "three";
 import { Vector3 as f } from "three";
-import { centerPoint as l } from "../../../shared-utils/three/centerPoint.js";
+import { centerPoint as g } from "../../../shared-utils/three/centerPoint.js";
 import { loadTexture as w } from "../../../shared-utils/three/loadTexture.js";
 import { QuadrangleGeometry as y } from "../../../shared-utils/three/Quadrangle.js";
 import { loadVideoTexture as F } from "../../../shared-utils/three/loadVideoTexture.js";
@@ -32,31 +32,31 @@ import "../../../shared-utils/threex/domevents/index.js";
 class V extends m.Mesh {
   constructor() {
     super(...arguments);
-    a(this, "name", "MediaPlane");
-    a(this, "src");
+    h(this, "name", "MediaPlane");
+    h(this, "src");
   }
   removeFromParent() {
     const e = this.parent;
     return e !== null && e.remove(this), this;
   }
   setMatrixByCornerPoints(e) {
-    const t = new f().subVectors(e[1], e[0]), s = new f().subVectors(e[3], e[0]), h = l(...e), r = new f().crossVectors(t, s).normalize();
+    const t = new f().subVectors(e[1], e[0]), s = new f().subVectors(e[3], e[0]), a = g(...e), r = new f().crossVectors(t, s).normalize();
     this.lookAt(r);
     const n = this.up.clone().applyQuaternion(this.quaternion), i = s.clone(), o = new f().crossVectors(n, i).normalize();
-    this.rotateOnWorldAxis(o, n.angleTo(i)), this.position.copy(h);
+    this.rotateOnWorldAxis(o, n.angleTo(i)), this.position.copy(a);
   }
 }
 class J extends V {
   constructor(e, t) {
     super();
-    a(this, "name", "PanoTagPluginImagePlane");
+    h(this, "name", "PanoTagPluginImagePlane");
     this.src = e, w(e).then((s) => {
-      const h = s.image.width, r = s.image.height, n = new m.MeshBasicMaterial({ map: s, transparent: !0 }), i = new m.PlaneGeometry(h, r);
+      const a = s.image.width, r = s.image.height, n = new m.MeshBasicMaterial({ map: s, transparent: !0 }), i = new m.PlaneGeometry(a, r);
       this.geometry = i, this.material = n;
-      const o = t[0].distanceTo(t[1]), c = t[1].distanceTo(t[2]);
-      this.scale.set(o / h, c / r, 1);
-      const M = h / r, g = o / c;
-      M > g ? this.scale.set(o / h, o / h, 1) : M < g ? this.scale.set(c / r, c / r, 1) : this.scale.set(o / h, c / r, 1);
+      const o = t[0].distanceTo(t[1]), d = t[1].distanceTo(t[2]);
+      this.scale.set(o / a, d / r, 1);
+      const l = a / r, M = o / d;
+      l > M ? this.scale.set(o / a, o / a, 1) : l < M ? this.scale.set(d / r, d / r, 1) : this.scale.set(o / a, d / r, 1);
     }).catch((s) => {
       console.error({ e: s });
     }), this.setMatrixByCornerPoints(t);
@@ -64,49 +64,55 @@ class J extends V {
 }
 class K extends V {
   constructor(e, t, s) {
-    const { videoCoverSrc: h, objectFit: r = "contain", playButton: n = "withText", videoTextureMap: i, ImageTextureMap: o } = s != null ? s : {};
+    const {
+      videoCoverSrc: a,
+      objectFit: r = "contain",
+      playButton: n = "withText",
+      videoTextureMap: i,
+      ImageTextureMap: o,
+      videoInstance: d = document.createElement("video")
+    } = s != null ? s : {};
     super();
-    a(this, "isVideoPlane", !0);
-    a(this, "name", "PanoTagPluginImagePlane");
-    a(this, "objectFit");
-    a(this, "buttonSrc");
-    a(this, "videoCoverSrc");
-    a(this, "domEvents");
-    a(this, "disposers", []);
-    a(this, "domEventsListenerTemporaryList", []);
-    a(this, "cornerPoints");
-    a(this, "videoInstance");
-    a(this, "videoMesh");
-    a(this, "coverMesh");
-    a(this, "buttonMesh");
-    a(this, "videoTextureMap");
-    a(this, "ImageTextureMap");
-    this.cornerPoints = t, this.src = e, this.buttonSrc = (() => n === "withText" ? R : n === "withoutText" ? P : typeof n == "string" ? n : P)(), this.videoCoverSrc = h, this.objectFit = r, this.videoTextureMap = i, this.ImageTextureMap = o, this.position.copy(l(...t)), this.videoCoverSrc ? this.addCoverMesh().then(() => this.addButtonMesh()) : this.addVideoMesh().then(() => this.addButtonMesh()), this.addEventListener("dispose", () => {
-      var c;
-      this.domEventsListenerTemporaryList = [], (c = this.disposers) == null || c.forEach((M) => M == null ? void 0 : M());
+    h(this, "isVideoPlane", !0);
+    h(this, "name", "PanoTagPluginImagePlane");
+    h(this, "videoInstance");
+    h(this, "objectFit");
+    h(this, "buttonSrc");
+    h(this, "paused", !0);
+    h(this, "videoCoverSrc");
+    h(this, "domEvents");
+    h(this, "disposers", []);
+    h(this, "domEventsListenerTemporaryList", []);
+    h(this, "cornerPoints");
+    h(this, "videoMesh");
+    h(this, "coverMesh");
+    h(this, "buttonMesh");
+    h(this, "videoTextureMap");
+    h(this, "ImageTextureMap");
+    this.cornerPoints = t, this.src = e, this.buttonSrc = (() => n === "withText" ? R : n === "withoutText" ? P : typeof n == "string" ? n : P)(), this.videoInstance = d, this.videoCoverSrc = a, this.objectFit = r, this.videoTextureMap = i, this.ImageTextureMap = o, this.position.copy(g(...t)), this.videoCoverSrc ? this.addCoverMesh().then(() => this.addButtonMesh()) : this.addVideoMesh().then(() => this.addButtonMesh()), this.addEventListener("dispose", () => {
+      var l;
+      this.domEventsListenerTemporaryList = [], (l = this.disposers) == null || l.forEach((M) => M == null ? void 0 : M());
     });
   }
   play() {
     return u(this, null, function* () {
-      var e;
-      this.coverMesh && (this.coverMesh.visible = !1), this.remove(this.buttonMesh), yield this.addVideoMesh(), this.videoMesh && (this.videoMesh.visible = !0), (e = this.videoInstance) == null || e.play(), this.render();
+      !this.paused || (this.paused = !1, this.coverMesh && (this.coverMesh.visible = !1), this.remove(this.buttonMesh), this.videoMesh || (yield this.addVideoMesh()), this.videoMesh.visible = !0, this.videoInstance.play(), this.videoInstance.muted = !1, this.render());
     });
   }
   pause() {
-    var e;
-    this.coverMesh && (this.coverMesh.visible = !0), this.videoMesh && (this.videoMesh.visible = !1), this.addButtonMesh(), (e = this.videoInstance) == null || e.pause(), this.render();
+    this.paused || (this.paused = !0, this.coverMesh && (this.coverMesh.visible = !0, this.videoMesh && (this.videoMesh.visible = !1)), this.addButtonMesh(), this.videoInstance.pause(), this.render());
   }
   initialDomEvents(e) {
     this.domEvents || (this.domEvents = new D(e), this.domEventsListenerTemporaryList.forEach((t) => this.addDomEventListener(...t)), this.domEventsListenerTemporaryList = []);
   }
   initialRenderHooks(e) {
     const t = () => {
-      this.videoMesh && this.videoInstance && (this.videoInstance.paused || (this.videoMesh.needsRender = !0));
+      this.videoMesh && (this.videoInstance.paused || (this.videoMesh.needsRender = !0));
     };
     e.on("renderFrame", t), this.disposers.push(() => e.off("renderFrame", t));
   }
   render() {
-    this.videoMesh && (this.videoMesh.needsRender = !0), this.coverMesh && (this.coverMesh.needsRender = !0), this.buttonMesh && (this.buttonMesh.needsRender = !0), this.videoInstance && this.videoMesh && (this.videoInstance.paused || (this.videoMesh.needsRender = !0));
+    this.videoMesh && (this.videoMesh.needsRender = !0), this.coverMesh && (this.coverMesh.needsRender = !0), this.buttonMesh && (this.buttonMesh.needsRender = !0), this.videoMesh && (this.videoInstance.paused || (this.videoMesh.needsRender = !0));
   }
   addDomEventListener(...e) {
     this.domEvents ? (this.domEvents.addEventListener(...e), this.disposers.push(() => {
@@ -145,17 +151,17 @@ class K extends V {
     return u(this, null, function* () {
       if (this.coverMesh)
         return this.coverMesh;
-      const e = yield this.getCoverTexture(), t = new m.MeshBasicMaterial({ transparent: !0, map: e }), s = T(this.objectFit, this.cornerPoints, e.image.width / e.image.height), h = l(...s), r = s.map((o) => o.clone().sub(h)), n = new y(r, 1), i = new m.Mesh(n, t);
-      return i.name = "videoCoverMesh", i.position.copy(h.clone().sub(this.position)), this.coverMesh = i, i;
+      const e = yield this.getCoverTexture(), t = new m.MeshBasicMaterial({ transparent: !0, map: e }), s = T(this.objectFit, this.cornerPoints, e.image.width / e.image.height), a = g(...s), r = s.map((o) => o.clone().sub(a)), n = new y(r, 1), i = new m.Mesh(n, t);
+      return i.name = "videoCoverMesh", i.position.copy(a.clone().sub(this.position)), this.coverMesh = i, i;
     });
   }
   getVideoMesh() {
     return u(this, null, function* () {
       if (this.videoMesh)
         return this.videoMesh;
-      const e = yield this.getVideoTexture(), t = new m.MeshBasicMaterial({ transparent: !0, map: e }), s = T(this.objectFit, this.cornerPoints, e.image.videoWidth / e.image.videoHeight), h = l(...s), r = s.map((c) => c.clone().sub(h)), n = new y(r, 1), i = new m.Mesh(n, t);
-      i.name = "videoMesh", i.position.copy(h.clone().sub(this.position)), this.addDomEventListener(i, "click", (c) => {
-        console.log("pause"), this.pause();
+      const e = yield this.getVideoTexture(), t = new m.MeshBasicMaterial({ transparent: !0, map: e }), s = T(this.objectFit, this.cornerPoints, e.image.videoWidth / e.image.videoHeight), a = g(...s), r = s.map((d) => d.clone().sub(a)), n = new y(r, 1), i = new m.Mesh(n, t);
+      i.name = "videoMesh", i.position.copy(a.clone().sub(this.position)), this.addDomEventListener(i, "click", (d) => {
+        this.pause();
       });
       const o = e.image;
       return this.videoMesh = i, this.videoInstance = o, i;
@@ -166,18 +172,18 @@ class K extends V {
       var b, E, I, L;
       if (this.buttonMesh)
         return this.buttonMesh;
-      const e = (E = (b = this.videoMesh) == null ? void 0 : b.geometry.points[0].distanceTo(this.videoMesh.geometry.points[3])) != null ? E : 1 / 0, t = (L = (I = this.coverMesh) == null ? void 0 : I.geometry.points[0].distanceTo(this.coverMesh.geometry.points[3])) != null ? L : 1 / 0, s = this.cornerPoints[0].distanceTo(this.cornerPoints[3]), r = Math.min(e, t, s) / s * 0.3, n = yield this.getButtonTexture(), i = new m.MeshBasicMaterial({ transparent: !0, map: n }), o = T("contain", this.cornerPoints, n.image.width / n.image.height), c = l(...o), M = o.map((B) => B.clone().sub(c)), g = new y(M), v = new m.Mesh(g, i);
-      v.name = "buttonMesh", v.scale.set(r, r, r);
+      const e = (E = (b = this.videoMesh) == null ? void 0 : b.geometry.points[0].distanceTo(this.videoMesh.geometry.points[3])) != null ? E : 1 / 0, t = (L = (I = this.coverMesh) == null ? void 0 : I.geometry.points[0].distanceTo(this.coverMesh.geometry.points[3])) != null ? L : 1 / 0, s = this.cornerPoints[0].distanceTo(this.cornerPoints[3]), r = Math.min(e, t, s) / s * 0.3, n = yield this.getButtonTexture(), i = new m.MeshBasicMaterial({ transparent: !0, map: n }), o = T("contain", this.cornerPoints, n.image.width / n.image.height), d = g(...o), l = o.map((B) => B.clone().sub(d)), M = new y(l), p = new m.Mesh(M, i);
+      p.name = "buttonMesh", p.scale.set(r, r, r);
       const x = () => {
-        console.log("play", v.visible, v.parent), this.play();
+        this.play();
       };
-      v.addEventListener("added", () => {
-        this.addDomEventListener(v, "click", x);
-      }), v.addEventListener("removed", () => {
-        this.removeDomEventListener(v, "click", x);
+      p.addEventListener("added", () => {
+        this.addDomEventListener(p, "click", x);
+      }), p.addEventListener("removed", () => {
+        this.removeDomEventListener(p, "click", x);
       });
       const C = new m.Vector3().crossVectors(new m.Vector3().subVectors(o[0], o[1]), new m.Vector3().subVectors(o[0], o[3])).normalize().multiplyScalar(1e-4);
-      return v.position.copy(C), this.buttonMesh = v, v;
+      return p.position.copy(C), this.buttonMesh = p, p;
     });
   }
   getButtonTexture() {
@@ -203,7 +209,7 @@ class K extends V {
       var t, s;
       if ((t = this.videoTextureMap) != null && t.has(this.src))
         return this.videoTextureMap.get(this.src);
-      const e = yield F(this.src);
+      const e = yield F(this.src, this.videoInstance);
       return (s = this.videoTextureMap) == null || s.set(this.src, e), e;
     });
   }

package/libs/base/BasePlugin.js

@@ -4,7 +4,7 @@ var s = (e, r, t) => (a(e, typeof r != "symbol" ? r + "" : r, t), t);
 import { Subscribe as c } from "../shared-utils/Subscribe.js";
 class o {
   constructor(r, t) {
-    s(this, "VERSION", "2.16.0-alpha.0");
+    s(this, "VERSION", "2.16.0-alpha.2");
     s(this, "five");
     s(this, "hooks", new c());
     s(this, "staticPrefix", "//vrlab-static.ljcdn.com");

package/libs/index.js

@@ -243,6 +243,13 @@ import "./PanoTagPlugin/utils/planeNormal.js";
 import "./PanoTagPlugin/utils/normalPositionToPositions.js";
 import "./PanoTagPlugin/controller/TagCache.js";
 import "./PanoTagPlugin/utils/device.js";
+import "./PanoTagPlugin/utils/model/mediaPlane.js";
+import "./shared-utils/three/Quadrangle.js";
+import "./shared-utils/math/pointIsRectangle.js";
+import "./shared-utils/three/loadVideoTexture.js";
+import "./PanoTagPlugin/Assets/Icon.js";
+import "./shared-utils/three/getPositionsByObjectFit.js";
+import "./shared-utils/five/FiveDomEvents.js";
 import "./PanoTagPlugin/Components/TagContainer.js";
 import "./PanoTagPlugin/Components/TagItem.js";
 import "./PanoTagPlugin/Components/Tag/index.js";
@@ -256,7 +263,6 @@ import "animejs";
 import "./PanoTagPlugin/utils/search.js";
 import "./PanoTagPlugin/utils/constants.js";
 import "./PanoTagPlugin/Components/Common/Arrow.js";
-import "./PanoTagPlugin/Assets/Icon.js";
 import "./PanoTagPlugin/utils/doUtil.js";
 import "./PanoTagPlugin/Components/Tag/TextTag/TextPlaneTag.js";
 import "./PanoTagPlugin/Components/Common/Text/MText.js";
@@ -308,12 +314,6 @@ import "./PanoTagPlugin/Components/Common/Icon/Icon.js";
 import "./PanoTagPlugin/utils/getImageInfo.js";
 import "./PanoTagPlugin/Components/Tag/CustomTag.js";
 import "./PanoTagPlugin/Components/Common/TagPoint.js";
-import "./PanoTagPlugin/utils/model/mediaPlane.js";
-import "./shared-utils/three/Quadrangle.js";
-import "./shared-utils/math/pointIsRectangle.js";
-import "./shared-utils/three/loadVideoTexture.js";
-import "./shared-utils/three/getPositionsByObjectFit.js";
-import "./shared-utils/five/FiveDomEvents.js";
 import "./shared-utils/three/GLTFLoader.js";
 import "./shared-utils/Object3DHelper/Helper/MoveHelper.js";
 import "./shared-utils/Object3DHelper/Base/BaseHelper.js";

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.info(
-    "%c %c@realsee/dnalogel %cv2.16.0-alpha.0",
+    "%c %c@realsee/dnalogel %cv2.16.0-alpha.2",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",

package/libs/shared-utils/three/loadVideoTexture.d.ts

@@ -1,4 +1,4 @@
 import * as THREE from 'three';
-export default function loadVideoTexture(src: string): Promise<Omit<THREE.VideoTexture, 'image'> & {
+export default function loadVideoTexture(src: string, videoElement?: HTMLVideoElement): Promise<Omit<THREE.VideoTexture, 'image'> & {
     image: HTMLVideoElement;
 }>;

package/libs/shared-utils/three/loadVideoTexture.js

@@ -1,14 +1,14 @@
-import * as r from "three";
-function i(o) {
-  return new Promise((a, n) => {
-    const e = document.createElement("video");
-    e.preload = "metadata", e.crossOrigin = "anonymous", e.muted = !0, e.loop = !0, e.playsInline = !0, e.autoplay = !0, e.src = o;
-    const t = new r.VideoTexture(e);
-    t.minFilter = r.LinearFilter, t.magFilter = r.LinearFilter, t.format = r.RGBFormat, e.onloadedmetadata = () => {
-      a(t);
+import * as t from "three";
+function u(a, o) {
+  return new Promise((n, i) => {
+    const e = o != null ? o : document.createElement("video");
+    e.preload = "metadata", e.crossOrigin = "anonymous", e.muted = !0, e.loop = !0, e.playsInline = !0, e.autoplay = !0, e.src = a;
+    const r = new t.VideoTexture(e);
+    r.minFilter = t.LinearFilter, r.magFilter = t.LinearFilter, r.encoding = t.sRGBEncoding, e.onloadedmetadata = () => {
+      n(r);
     };
   });
 }
 export {
-  i as loadVideoTexture
+  u as loadVideoTexture
 };

package/package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.16.0-alpha.0",
+  "version": "2.16.0-alpha.2",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "clean": "rm -rf components dist docs libs types ./vite.config.js.timestamp*",