@realsee/vreo 2.6.4 → 3.0.0-webgpu-react18.8

package/lib/Player/index.js

@@ -1,142 +1,1666 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _location$search$matc, _location$search$matc2;
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-// 下面这一行不能删
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Subscribe } from '@realsee/five';
-import { App } from "./App.js";
-import { Controller, ControllerContext } from "./Controller.js";
-import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
-import { reaction } from 'mobx';
-import { Drawer } from "./modules/Drawer/index.js";
-import { PopUp } from "./modules/PopUp/index.js";
-import { generateBlankAudio, waitForBlankAudioGenerated } from "../shared-utils/Audio.js";
-var DefaultAudioCacheLength = 3;
-var id = "vreo-app-dhjskadhksahdjskahdjksa";
-var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 = location.search.match(/audio_cache=(\d+)/)) === null || _location$search$matc2 === void 0 ? void 0 : _location$search$matc2[1]) !== null && _location$search$matc !== void 0 ? _location$search$matc : DefaultAudioCacheLength);
-
-/**
- * Vreo 播放器核心类
- * 
- * 提供 VR 视频播放、剧本执行、相机运镜等功能的主要接口。
- * 基于 Five 渲染引擎和 React 构建的 3D 空间剧本播放器。
- * 
- * @example
- * ```typescript
- * import { Five } from '@realsee/five'
- * import { Player } from '@realsee/vreo'
- * 
- * const five = new Five({
- *   // Five 配置选项
- * })
- * const player = new Player(five, {
- *   autoPreload: true,
- *   imageOptions: { size: 1024 }
- * })
- * 
- * await player.load(vreoUnit)
- * player.play()
- * ```
- */
-export var Player = /*#__PURE__*/function (_Subscribe) {
-  _inherits(Player, _Subscribe);
-  var _super = _createSuper(Player);
+var Se = Object.defineProperty;
+var Te = (t, i, e) => i in t ? Se(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e;
+var u = (t, i, e) => Te(t, typeof i != "symbol" ? i + "" : i, e);
+import { jsx as d, Fragment as C, jsxs as L } from "react/jsx-runtime";
+import { createRoot as oe } from "react-dom/client";
+import { Subscribe as ce, parseWork as J } from "@realsee/five-webgpu";
+import D from "classnames";
+import { observer as ne } from "mobx-react-lite";
+import * as A from "react";
+import X, { useRef as Le, useState as de, useEffect as Ie, useCallback as ue } from "react";
+import { makeObservable as be, action as R, observable as N, observableRef as Q, reaction as j, runInAction as Z } from "mobx";
+import { T as Ce, r as le } from "../chunks/index-CunyJn6H.js";
+import { C as Re, a as Ve } from "../chunks/index-BgPSzRSs.js";
+import { VreoKeyframeEnum as P, InfoPanelStyleEnum as Ne, InfoPanelTypeEnum as ee } from "../types/index.js";
+import * as M from "three/webgpu";
+import { Vector3 as q, Quaternion as qe, Scene as ze, OrthographicCamera as Be, WebGPURenderer as Ue, Raycaster as Oe } from "three/webgpu";
+import { ModelTVVideoPlugin as $e } from "../plugins/ModelTVVideoPlugin.js";
+import { Line2 as We } from "three/addons/lines/webgpu/Line2.js";
+import { LineGeometry as Fe } from "three/addons/lines/LineGeometry.js";
+import * as se from "@tweenjs/tween.js";
+import { PanoTagPlugin as De } from "@realsee/dnalogel/plugins/pano-tag";
+import { CSS3DRenderPlugin as we } from "../plugins/CSS3DRenderPlugin.js";
+import { uniform as je, texture as Ge, uv as He, float as Ke, smoothstep as Je, max as Qe } from "three/tsl";
+class Ye {
+  constructor(i, e) {
+    u(this, "controller");
+    u(this, "run");
+    u(this, "generation", 0);
+    u(this, "disposed", !1);
+    u(this, "members", /* @__PURE__ */ new Set());
+    this.onStop = e, this.controller = i == null ? void 0 : i.createController({ label: "vreo", onCancel: () => this.stop() });
+  }
+  get active() {
+    var i;
+    return !!((i = this.run) != null && i.valid());
+  }
+  capture() {
+    return this.run;
+  }
+  begin(i) {
+    var s;
+    if (this.disposed) return !1;
+    if (this.active) return !0;
+    const e = ((s = this.controller) == null ? void 0 : s.begin({ userAction: i, audible: !0 })) ?? void 0;
+    if (this.controller && !e) return !1;
+    const n = ++this.generation, r = e == null ? void 0 : e.mediaManager;
+    return this.run = {
+      session: e,
+      mediaManager: r,
+      valid: () => n === this.generation && !this.disposed && !(e != null && e.signal.aborted),
+      bind: (a) => e ? e.bind(a) : a
+    }, !0;
+  }
+  add(i) {
+    return this.members.add(i), () => {
+      this.members.delete(i);
+    };
+  }
+  stop() {
+    ++this.generation, this.run = void 0;
+    const i = [];
+    try {
+      this.onStop();
+    } catch (e) {
+      i.push(e);
+    }
+    for (const e of [...this.members])
+      try {
+        e();
+      } catch (n) {
+        i.push(n);
+      }
+    if (i.length) throw i[0];
+  }
+  cancel() {
+    var e;
+    const i = this.generation;
+    (e = this.controller) == null || e.cancel(), i === this.generation && this.stop();
+  }
+  finish() {
+    var e;
+    const i = (e = this.run) == null ? void 0 : e.session;
+    this.stop(), i == null || i.finish();
+  }
+  dispose() {
+    var e;
+    if (this.disposed) return;
+    this.disposed = !0;
+    const i = this.generation;
+    (e = this.controller) == null || e.dispose(), i === this.generation && this.stop(), this.members.clear();
+  }
+}
+function ie(t, i) {
+  t && Object.keys(i).forEach((e) => {
+    const n = i[e].toString();
+    t instanceof Element ? t.setAttribute(`data-${e}`, n) : t instanceof Document ? t.documentElement.setAttribute(`data-${e}`, n) : t instanceof HTMLElement ? t.dataset[e] = n : t.setAttribute(`data-${e}`, n);
+  });
+}
+function Ze(t) {
+  if (!t) return "";
+  const i = t.lastIndexOf(".");
+  return t.substring(i + 1).toLowerCase();
+}
+function Y(t) {
+  const i = Ze(t);
+  return _e(i);
+}
+function _e(t) {
+  return t ? /jpg|jpeg|png$/.test(t) ? "image" : /mp3|wav$/.test(t) ? "audio" : /avi|wmv|mpeg|mp4|m4v|mov|asf|flv|f4v|rmvb|rm|3gp|vob$/.test(t) ? "video" : "unknown" : "unknown";
+}
+class Xe extends ce {
+  constructor({ five: e, container: n, configs: r }) {
+    super();
+    u(this, "five");
+    u(this, "configs");
+    u(this, "videoAgentScene");
+    u(this, "vreoUnit");
+    u(this, "stopInterval");
+    u(this, "playing", !1);
+    u(this, "ended", !1);
+    u(this, "loading", !1);
+    // null 表示加载失败
+    u(this, "containerSize", { width: 0, height: 0 });
+    u(this, "appSize");
+    u(this, "container");
+    u(this, "waveAppearance", null);
+    u(this, "appearance", {
+      waveStyle: "wave"
+    });
+    u(this, "avatar", {});
+    /**
+     * 是否正在等待背景音乐加载
+     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
+     */
+    u(this, "waitingForBgMusic", !1);
+    u(this, "visible", !1);
+    u(this, "popUp", null);
+    u(this, "drawerConfig", null);
+    /**
+     * 创建 Controller 实例
+     * @param params - 构造参数对象
+     * @param params.five - Five 渲染引擎实例
+     * @param params.container - DOM 容器元素
+     * @param params.configs - 播放器配置
+     */
+    u(this, "resumeGeneration", 0);
+    u(this, "resuming");
+    u(this, "disposers", []);
+    u(this, "playback");
+    u(this, "timeline", new Ce());
+    this.playback = new Ye(r.mediaManager, () => {
+      var s;
+      this.resuming = void 0, ++this.resumeGeneration, this.setPlaying(!1), (s = this.videoAgentScene) == null || s.videoAgentMesh.stop(), this.setWaitingForBgMusic(!1);
+    }), this.configs = r, this.container = n, this.five = e, this.appSize = r.appSize, this.appearance = { ...this.appearance, ...r.appearance }, be(this, {
+      visible: N,
+      setVisible: R,
+      playing: N,
+      setPlaying: R,
+      loading: N,
+      videoAgentScene: Q,
+      setLoading: R,
+      popUp: Q,
+      openPopUp: R,
+      drawerConfig: Q,
+      openDrawer: R,
+      ended: N,
+      waveAppearance: N,
+      avatar: N,
+      containerSize: N,
+      setContainerSize: R,
+      appearance: N,
+      setAppearance: R,
+      configs: Q,
+      setEnded: R,
+      setAvatar: R,
+      waitingForBgMusic: N,
+      setWaitingForBgMusic: R
+    }), this.disposers.push(j(
+      () => [this.appearance.waveStyle, this.loading],
+      ([s, a]) => {
+        if (a === null) {
+          this.waveAppearance = null;
+          return;
+        }
+        if (s === "wave")
+          switch (a) {
+            case !0:
+              this.waveAppearance = "double";
+              break;
+            case !1:
+              this.waveAppearance = "solid";
+              break;
+          }
+        else if (s === "solid")
+          switch (a) {
+            case !0:
+              this.waveAppearance = "swap";
+              break;
+            case !1:
+              this.waveAppearance = "expand";
+              break;
+          }
+      },
+      { fireImmediately: !0 }
+    )), this.appSize ? ie(this.container, { size: this.appSize }) : this.disposers.push(j(
+      () => this.containerSize,
+      (s) => {
+        if (!(s != null && s.width)) return;
+        const a = s.width, o = s.height, l = a <= 500 ? "S" : a <= 1024 ? "M" : a <= 2048 ? "L" : "XL", c = o > a ? "portrait" : "landscape";
+        ie(this.container, { size: l }), ie(this.container, { orientation: c });
+      },
+      { fireImmediately: !0 }
+    )), this.disposers.push(j(
+      () => this.ended,
+      (s) => {
+        s && this.emit("paused", !0);
+      }
+    )), this.disposers.push(j(
+      () => this.playing,
+      (s) => {
+        this.ended || this.emit(s ? "playing" : "paused");
+      }
+    ));
+  }
   /**
-   * 创建 Vreo 播放器实例
+   * 获取当前播放媒体的类型
+   * @returns 'video' | 'avatar' | 'none' - 媒体类型
+   */
+  get agentType() {
+    var n, r;
+    const e = Y((n = this.videoAgentScene) == null ? void 0 : n.videoAgentMesh.videoUrl);
+    return (r = this.avatar) != null && r.force ? "avatar" : e === "video" ? "video" : "none";
+  }
+  /**
+   * 打开或关闭弹窗
+   * @param popUp - 弹窗内容，可以是字符串、JSX元素或false（关闭弹窗）
+   */
+  openPopUp(e) {
+    if (!e) {
+      this.popUp = null;
+      return;
+    }
+    this.popUp = e;
+  }
+  /**
+   * 设置加载状态
+   * @param loading - 加载状态：true（加载中）、false（加载完成）、null（加载失败）
+   */
+  setLoading(e) {
+    this.loading = e;
+  }
+  /**
+   * 设置虚拟形象配置
+   * @param avatar - 虚拟形象配置对象
+   */
+  setAvatar(e) {
+    this.avatar = e;
+  }
+  /**
+   * 设置容器尺寸
+   * @param width - 容器宽度
+   * @param height - 容器高度
+   */
+  setContainerSize(e, n) {
+    this.containerSize = { width: e, height: n };
+  }
+  /**
+   * 设置播放器可见性
+   * @param v - 是否可见
+   */
+  setVisible(e) {
+    this.visible = e;
+  }
+  /**
+   * 设置播放状态
+   * @param playing - 是否正在播放
+   */
+  setPlaying(e) {
+    e && !this.playback.active || (this.playing = e, e && this.resumeMedia());
+  }
+  /**
+   * 设置结束状态
+   * @param ended - 是否已结束
+   */
+  setEnded(e) {
+    this.ended = e;
+  }
+  /**
+   * 设置是否正在等待背景音乐加载
+   * @param waiting - 是否正在等待
+   */
+  setWaitingForBgMusic(e) {
+    this.waitingForBgMusic = e;
+  }
+  /**
+   * 设置播放器外观
+   * @param appearance - 外观配置对象
+   */
+  setAppearance(e) {
+    this.appearance = { ...this.appearance, ...e };
+  }
+  /**
+   * 打开或关闭抽屉
+   * @param drawerConfig - 抽屉配置对象，false表示关闭抽屉
+   */
+  openDrawer(e) {
+    var n;
+    if (!e) {
+      this.drawerConfig = {
+        content: "",
+        height: (n = this.drawerConfig) == null ? void 0 : n.height
+      };
+      return;
+    }
+    this.drawerConfig = e;
+  }
+  /**
+   * 获取播放器是否准备就绪
+   * @returns 是否有可用的视频代理场景
+   */
+  get ready() {
+    return !!this.videoAgentScene;
+  }
+  /**
+   * 获取当前播放时间（毫秒）
+   * @returns 当前播放时间戳
+   */
+  get currentTime() {
+    var e;
+    return ((e = this.videoAgentScene) == null ? void 0 : e.videoAgentMesh.currentTime) || 0;
+  }
+  /**
+   * 获取当前时间点应该触发的关键帧
+   * @returns 当前应该执行的关键帧数组
+   */
+  loadTimeline(e) {
+    this.timeline.load(e);
+  }
+  seekTimeline(e) {
+    this.timeline.seek(e);
+  }
+  resetTimeline(e) {
+    this.timeline.reset(e);
+  }
+  get currentKeyframes() {
+    return this.timeline.pendingAt(this.currentTime);
+  }
+  /**
+   * 获取当前媒体实例（音频或视频元素）
+   * @returns HTML媒体元素实例
+   */
+  get mediaInstance() {
+    var e;
+    return (e = this.videoAgentScene) == null ? void 0 : e.videoAgentMesh.mediaInstance;
+  }
+  /**
+   * 逐帧任务循环处理
    * 
-   * @param five - Five 渲染引擎实例
-   * @param configs - 播放器配置选项
+   * 在每个动画帧中检查播放状态、处理关键帧触发等
+   * @param callback - 关键帧触发时的回调函数
    */
-  function Player(five) {
-    var _this;
-    var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    _classCallCheck(this, Player);
-    _this = _super.call(this);
-    _defineProperty(_assertThisInitialized(_this), "disposers", []);
-    _defineProperty(_assertThisInitialized(_this), "loadGeneration", 0);
-    _defineProperty(_assertThisInitialized(_this), "disposed", false);
-    _this.$five = five;
-    generateBlankAudio(audioCacheLength);
-    if (!configs.container) {
-      configs.container = configs.containter;
+  requestAnimationFrameLoop(e) {
+    var s, a, o, l, c, V, f, h;
+    if (this.waitingForBgMusic) {
+      (s = this.mediaInstance) != null && s.paused || (o = (a = this.videoAgentScene) == null ? void 0 : a.videoAgentMesh.mediaOperations) == null || o.pause();
+      return;
     }
-    if (!configs.container) {
-      var _five$getElement;
-      var oldElement = document.getElementById(id);
-      if (oldElement) {
-        oldElement.remove();
-      }
-      var container = document.createElement('div');
-      container.id = id;
-      configs.container = container;
-      var fiveCanvasDomParent = (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : _five$getElement.parentNode;
-      if (fiveCanvasDomParent) {
-        fiveCanvasDomParent.append(container);
-      } else {
-        document.body.append(container);
-      }
+    if ((l = this.mediaInstance) != null && l.ended && this.mediaInstance.currentTime !== 0) {
+      if (this.ended) return;
+      this.timeline.reset();
+      const p = (c = this.videoAgentScene) == null ? void 0 : c.videoAgentMesh.mediaOperations;
+      p == null || p.pause(), p && (p.currentTime = 0), this.playback.finish(), this.setEnded(!0), this.setPlaying(!1);
+      return;
     }
-    if (!configs.container.classList.contains('vreo-app')) configs.container.classList.add('vreo-app');
-    _this.configs = Object.freeze(Object.assign({
-      keyframeMap: {}
-    }, configs));
-    _this.controller = new Controller({
-      five: five,
-      container: configs.container,
-      configs: _this.configs
+    if (!this.playing) {
+      (V = this.mediaInstance) != null && V.paused || (h = (f = this.videoAgentScene) == null ? void 0 : f.videoAgentMesh.mediaOperations) == null || h.pause();
+      return;
+    }
+    this.resumeMedia();
+    const n = this.playback.capture();
+    if (!(n != null && n.valid())) return;
+    const r = this.currentTime;
+    this.timeline.take(r).forEach((p) => {
+      this.emit(p.type, p, r), n.valid() && e(p.type, p, r);
     });
-    _this.root = createRoot(configs.container);
-    _this.root.render( /*#__PURE__*/React.createElement(ControllerContext.Provider, {
-      value: _this.controller
-    }, /*#__PURE__*/React.createElement(App, null), /*#__PURE__*/React.createElement(Drawer, null), /*#__PURE__*/React.createElement(PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
-      return /*#__PURE__*/React.createElement(CustomCmpt, {
-        key: key,
-        subscribe: {
-          on: function on(name, callback) {
-            return _this.on(name, callback);
-          },
-          once: function once(name, callback) {
-            return _this.once(name, callback);
+  }
+  resumeMedia() {
+    var e, n;
+    if (!this.waitingForBgMusic && (e = this.mediaInstance) != null && e.paused && this.playing && !this.resuming) {
+      const r = ++this.resumeGeneration;
+      this.resuming = r;
+      const s = this.playback.capture(), a = () => !!(s != null && s.valid());
+      (n = this.videoAgentScene) == null || n.videoAgentMesh.play().catch((o) => {
+        a() && (this.playback.cancel(), console.error(o));
+      }).finally(() => {
+        this.resuming === r && (this.resuming = void 0);
+      });
+    }
+  }
+  /**
+   * 开始运行播放器逻辑循环
+   * 
+   * 启动帧循环，持续监听并处理关键帧事件
+   * @param callback - 关键帧触发时的回调函数
+   */
+  run(e) {
+    this.stopInterval || (this.stopInterval = le(() => this.requestAnimationFrameLoop(e)));
+  }
+  /**
+   * 清理播放器状态
+   * 
+   * 停止播放、重置关键帧状态、清理数据和定时器
+   */
+  clear() {
+    var e, n, r, s;
+    this.setPlaying(!1), this.timeline.reset(), this.vreoUnit = void 0, this.timeline.clear(), this.mediaInstance && ((n = (e = this.videoAgentScene) == null ? void 0 : e.videoAgentMesh.mediaOperations) == null || n.pause(), (r = this.videoAgentScene) != null && r.videoAgentMesh.mediaOperations && (this.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = 0)), (s = this.stopInterval) == null || s.call(this), this.stopInterval = void 0;
+  }
+  /**
+   * 销毁控制器实例
+   * 
+   * 清理所有状态和资源，释放内存
+   */
+  dispose() {
+    this.disposers.splice(0).forEach((e) => e()), this.playback.dispose(), this.clear();
+  }
+}
+const ye = A.createContext(null);
+function T() {
+  const t = X.useContext(ye);
+  if (!t)
+    throw new Error('没有找到 "ControllerContext"');
+  return t;
+}
+function U() {
+  const t = T();
+  if (!t.five)
+    throw new Error('没有找到 "five" 实例');
+  return t.five;
+}
+function et() {
+  const t = U();
+  return (i) => t.project2d(i, !1);
+}
+function tt() {
+  const t = T(), i = U(), e = A.useRef(void 0);
+  return A.useEffect(() => {
+    const n = async (r) => {
+      e.current || (e.current = Re(i));
+      const { start: s, end: a, data: o } = r, l = o, c = l.effect;
+      c === Ve.Rotate ? await e.current.rotate(o, a - s) : c === Ve.Move ? await e.current.move(o, a - s) : l.panoIndex !== void 0 && l.panoIndex !== i.panoIndex ? await e.current.move(o, a - s) : await e.current.rotate(o, a - s);
+    };
+    return t.on(P.CameraMovement, n), () => {
+      t.off(P.CameraMovement, n);
+    };
+  }, [t]), /* @__PURE__ */ d(C, {});
+}
+const G = /* @__PURE__ */ new Map();
+function fe(t) {
+  G.set(t, (G.get(t) ?? 0) + 1);
+}
+function he(t) {
+  const i = (G.get(t) ?? 1) - 1;
+  i > 0 ? G.set(t, i) : G.delete(t);
+}
+function xe(t, i, e = !0) {
+  if (!t) return () => {
+  };
+  e && i(t.clientWidth, t.clientHeight);
+  let n = !1;
+  if (typeof ResizeObserver < "u") {
+    const o = new ResizeObserver(() => i(t.clientWidth, t.clientHeight));
+    return o.observe(t), fe(t), () => {
+      n || (n = !0, o.disconnect(), he(t));
+    };
+  }
+  const r = document.createElement("iframe");
+  r.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;visibility:hidden;margin:0;border:0;padding:0;z-index:-1;", r.classList.add("resize-sensor-iframe"), t.appendChild(r);
+  const s = r.contentWindow;
+  if (!s)
+    return r.remove(), () => {
+    };
+  const a = () => i(r.clientWidth, r.clientHeight);
+  return s.addEventListener("resize", a), fe(t), () => {
+    n || (n = !0, s.removeEventListener("resize", a), r.remove(), he(t));
+  };
+}
+function nt(t) {
+  return !!t && (G.get(t) ?? 0) > 0;
+}
+function it() {
+  const t = X.useRef(null), i = T();
+  return X.useEffect(() => {
+    if (!t.current) return;
+    const e = i.container.parentElement;
+    if (nt(e)) return;
+    const n = xe(e, (r, s) => {
+      i.setContainerSize(r, s);
+    });
+    return () => {
+      n();
+    };
+  }, []), /* @__PURE__ */ d("div", { className: "resizeObserver-element", ref: t });
+}
+function pe({ url: t, children: i }) {
+  return /* @__PURE__ */ d("div", { className: "vreo-infoPanel-container", children: /* @__PURE__ */ L("div", { className: "vreo-infoPanel", children: [
+    i,
+    /* @__PURE__ */ d("img", { src: t })
+  ] }) });
+}
+function Ae({ url: t, children: i }) {
+  const e = A.useRef(null), n = T();
+  return A.useEffect(() => {
+    var h, p;
+    const r = ((p = (h = n.configs) == null ? void 0 : h.videos) == null ? void 0 : p.videoPanel) || document.createElement("video"), s = n.playback.capture(), a = () => !!(s != null && s.valid());
+    if (!(s != null && s.valid())) return;
+    const o = s.bind(r);
+    let l = !1;
+    r.playsInline = !0, o.muted = !0;
+    const c = () => {
+      l = !0, o.muted = !0, o.pause(), r.removeEventListener("canplaythrough", f);
+    };
+    if (!e.current) return;
+    const V = n.playback.add(c);
+    o.src = t, e.current.contains(r) || e.current.appendChild(r);
+    const f = () => {
+      r.removeEventListener("canplaythrough", f), !(l || !a()) && (o.muted = !1, o.play().catch((w) => {
+        a() && !l && (c(), n.playback.cancel(), console.error(w));
+      }));
+    };
+    return r.addEventListener("canplaythrough", f), o.load(), () => {
+      var w;
+      c(), V(), (w = e.current) != null && w.contains(r) && e.current.removeChild(r);
+    };
+  }, [n, t]), /* @__PURE__ */ d("div", { className: "vreo-infoPanel-container", children: /* @__PURE__ */ L("div", { className: "vreo-infoPanel", children: [
+    i,
+    /* @__PURE__ */ d("div", { className: "vreo-infoPanel-inner", ref: e })
+  ] }) });
+}
+const te = (t) => !t.title && !t.subTitle ? null : /* @__PURE__ */ d(C, { children: /* @__PURE__ */ L("div", { className: "vreo-infoPanel-title", children: [
+  /* @__PURE__ */ d("div", { className: "vreo-infoPanel-t1", children: t.title }),
+  /* @__PURE__ */ d("div", { className: "vreo-infoPanel-t2", children: t.subTitle })
+] }) });
+function rt() {
+  const t = A.useRef(null), i = T();
+  return A.useEffect(() => {
+    var s;
+    if (((s = i.configs) == null ? void 0 : s.keyframeMap.InfoPanel) === !1)
+      return;
+    const e = (a) => {
+      const { start: o, end: l, data: c } = a, V = c, { title: f, subTitle: h, style: p } = V;
+      do {
+        if (p === Ne.PopUp) {
+          V.type === ee.Image ? i.openPopUp(
+            /* @__PURE__ */ d(pe, { url: V.url, children: /* @__PURE__ */ d(te, { title: f, subTitle: h }) })
+          ) : V.type === ee.Video && i.openPopUp(
+            /* @__PURE__ */ d(Ae, { url: V.url, children: /* @__PURE__ */ d(te, { title: f, subTitle: h }) })
+          );
+          break;
+        }
+        V.type === ee.Image ? i.openDrawer({
+          content: /* @__PURE__ */ d(pe, { url: V.url, children: /* @__PURE__ */ d(te, { title: f, subTitle: h }) }),
+          height: "60vh"
+        }) : V.type === ee.Video && i.openDrawer({
+          content: /* @__PURE__ */ d(Ae, { url: V.url, children: /* @__PURE__ */ d(te, { title: f, subTitle: h }) }),
+          height: "60vh"
+        });
+      } while (!1);
+      t.current = setTimeout(() => {
+        i.openDrawer(!1), i.openPopUp(!1);
+      }, l - o);
+    };
+    i.on(P.InfoPanel, e);
+    const n = () => {
+      t.current && clearTimeout(t.current), i.openDrawer(!1), i.openPopUp(!1);
+    }, r = i.playback.add(n);
+    return () => {
+      r(), n(), i.off(P.InfoPanel, e), t.current && clearTimeout(t.current);
+    };
+  }, [i]), /* @__PURE__ */ d(C, {});
+}
+function st(t) {
+  const i = new M.Matrix4();
+  return i.fromArray(t), (e) => {
+    const n = new M.Vector3(...e);
+    return n.applyMatrix4(i), n.toArray();
+  };
+}
+function at() {
+  const t = T(), i = U(), e = A.useRef(void 0), n = A.useRef(null);
+  return A.useEffect(() => {
+    let r = 0;
+    const s = () => {
+      var l;
+      ++r, n.current && clearTimeout(n.current), (l = e.current) == null || l.dispose(), e.current = void 0;
+    }, a = t.playback.add(s), o = async (l) => {
+      var x, I;
+      s();
+      const c = r, V = t.playback.capture(), f = () => !!(V != null && V.valid());
+      if (!f()) return;
+      const h = e.current = $e(i, { mediaManager: V == null ? void 0 : V.mediaManager }), { start: p, end: w } = l, { videoSrc: y, videoPosterSrc: v, vertexs: m, matrixWorld: k } = l.data, b = (() => {
+        if (m.length < 4)
+          throw new Error("ModelVideo: 顶点数据集合不够，无法组成矩形 ....");
+        if (m.length === 4)
+          return m;
+        const E = new M.Box3();
+        return m.forEach((S) => E.expandByPoint(new M.Vector3(S.x, S.y, S.z))), [
+          new M.Vector3(E.min.x, E.max.y, E.max.z),
+          new M.Vector3(E.min.x, E.min.y, E.max.z),
+          new M.Vector3(E.max.x, E.min.y, E.max.z),
+          new M.Vector3(E.max.x, E.max.y, E.max.z)
+        ];
+      })(), g = (() => {
+        if (k) {
+          const E = st(k);
+          return [
+            b.map((S) => {
+              const z = E([S.x, S.y, S.z]);
+              return { x: z[0], y: z[1], z: z[2] };
+            })
+          ];
+        }
+        return [b];
+      })();
+      h.disable();
+      try {
+        await h.load(
+          {
+            video_src: y,
+            video_poster_src: v,
+            points: g
           },
-          off: function off(name, callback) {
-            return _this.off(name, callback);
-          }
-        },
-        five: five,
-        getMediaManager: function getMediaManager() {
-          return _this.getMediaManager();
+          (I = (x = t.configs) == null ? void 0 : x.videos) == null ? void 0 : I.modelTVVideo
+        );
+      } catch (E) {
+        c === r && f() && (t.playback.cancel(), console.error(E));
+        return;
+      }
+      c !== r || !f() || (h.enable(), n.current = setTimeout(s, w - p));
+    };
+    return t.on(P.ModelVideo, o), () => {
+      var l;
+      s(), a(), (l = e.current) == null || l.dispose(), e.current = void 0, t.off(P.ModelVideo, o), n.current && clearTimeout(n.current);
+    };
+  }, [t]), /* @__PURE__ */ d(C, {});
+}
+class ot extends se.Tween {
+  constructor() {
+    super(...arguments);
+    u(this, "disposeMethods", []);
+    u(this, "animationFrameDisposer");
+    u(this, "onDispose", (e) => (this.disposeMethods.push(e), this));
+    u(this, "play", () => (this.start(), this.animationFrameDisposer = le(() => this.update()), this));
+    u(this, "dispose", () => {
+      var e;
+      this.stop(), (e = this.animationFrameDisposer) == null || e.call(this), this.disposeMethods.forEach((n) => n()), this.disposeMethods = [], se.remove(this);
+    });
+  }
+}
+function ke(t, i = se.Easing.Linear.None) {
+  const e = new ot({ progress: 0 }).to({ progress: 1 });
+  return t !== void 0 && e.duration(t), i !== void 0 && e.easing(i), e;
+}
+function ct(t, i, e) {
+  const r = new M.TextureLoader().load("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg=="), s = new Fe(), a = new M.Line2NodeMaterial({ color: 16777215, linewidth: 2, depthTest: !1 }), o = new We(s, a), l = new M.BufferGeometry(), c = new M.PointsNodeMaterial({ color: 16777215, map: r, transparent: !0 }), V = new M.Points(l, c), f = new M.Group();
+  f.add(o, V);
+  const h = (p, w) => {
+    const y = [...p.toArray(), ...w.toArray()];
+    s.setPositions(y), l.setAttribute("position", new M.Float32BufferAttribute(y, 3));
+  };
+  return h(i, e), ke().onUpdate(({ progress: p }) => {
+    h(i.clone().lerp(e, 0.5 - p / 2), i.clone().lerp(e, 0.5 + p / 2)), t.needsRender = !0;
+  }).onStart(() => t.scene.add(f)).onDispose(() => {
+    t.scene.remove(f), s.dispose(), a.dispose(), l.dispose(), c.dispose(), r.dispose(), t.needsRender = !0;
+  });
+}
+function lt() {
+  const [t, i] = A.useState(null), e = U(), n = A.useRef(null), [r, s] = A.useState(null), a = A.useRef(null), o = T(), l = et(), c = () => {
+    n.current && n.current.dispose();
+  };
+  return A.useEffect(() => {
+    const V = (f) => {
+      const { start: h, end: p, data: w } = f, y = w, [v, m] = y.twoVertexs, k = new q(v.x, v.y, v.z), b = new q(m.x, m.y, m.z);
+      n.current = ct(e, k.clone(), b.clone()), n.current.play();
+      const g = k.lerp(b, 0.5), x = k.distanceTo(b), I = l(g);
+      if (!I) return;
+      const { x: E, y: S } = I;
+      i({ center: g, distance: x }), s({ left: E, top: S }), a.current = setTimeout(() => {
+        i(null), s(null), c();
+      }, p - h);
+    };
+    return o.on(P.PanoEffect, V), () => {
+      o.off(P.PanoEffect, V), a.current && clearTimeout(a.current), c();
+    };
+  }, [o]), A.useEffect(() => {
+    const V = () => {
+      if (!(t != null && t.center)) return;
+      const { x: f, y: h, z: p } = t.center, w = l(new q(f, h, p));
+      if (!w) return;
+      const { x: y, y: v } = w;
+      s({ left: y, top: v });
+    };
+    return e.on("currentStateChange", V), () => {
+      e.off("currentStateChange", V);
+    };
+  }, [t == null ? void 0 : t.center]), /* @__PURE__ */ d(C, { children: /* @__PURE__ */ d(
+    "div",
+    {
+      className: D("PanoEffect", {
+        "PanoEffect--notHidden": t
+      }),
+      style: {
+        left: ((r == null ? void 0 : r.left) || 0) + "px",
+        top: ((r == null ? void 0 : r.top) || 0) + "px"
+      },
+      children: (t == null ? void 0 : t.distance.toFixed(4)) + "m"
+    }
+  ) });
+}
+function dt() {
+  const t = T(), i = U();
+  return A.useEffect(() => {
+    var V;
+    if (((V = t.configs) == null ? void 0 : V.keyframeMap.PanoTag) === !1)
+      return;
+    const e = De(i, {
+      config: {
+        globalConfig: {
+          visibleConfig: { keep: "visible" },
+          unfoldedConfig: { autoUnfold: !1, unfoldDistance: { max: 100 } }
+        }
+      }
+    });
+    let n, r = !1, s = 0;
+    const a = (f) => {
+      f.released || (f.released = !0, f.timer !== void 0 && clearTimeout(f.timer), n === f && (n = void 0), e.destroyTagById(f.id));
+    }, o = () => {
+      n && a(n);
+    }, l = t.playback.add(o), c = (f, h = f.start) => {
+      const p = t.playback.capture();
+      if (r || !(p != null && p.valid())) return;
+      o();
+      const { end: w, data: y } = f, v = y;
+      s = Math.max(Date.now(), s + 1);
+      const m = s.toString(), k = [v.vertex.x, v.vertex.y, v.vertex.z], b = v.imgUrl ? { id: m, position: k, contentType: "ImageText", stickType: "2DPoint", data: { title: v.text, mediaData: [{ type: "Image", url: v.imgUrl }] } } : { id: m, position: k, contentType: "Text", stickType: "2DPoint", data: { title: v.text } }, g = { id: m, released: !1, expired: !1 };
+      n = g, g.timer = setTimeout(() => {
+        var x;
+        if (!g.released) {
+          if (r || !p.valid()) return a(g);
+          g.expired = !0, (x = e.getTagById(m)) == null || x.fold(), g.timer = setTimeout(() => a(g), 1500);
         }
+      }, Math.max(0, w - h)), e.load({ tagList: [b] }).then(() => {
+        if (r || g.released || g.expired || n !== g || !p.valid()) {
+          a(g);
+          return;
+        }
+        const x = e.getTagById(m);
+        if (!x) return a(g);
+        x.setMediaManager(p.mediaManager), x.unfold();
+      }).catch((x) => {
+        a(g), console.error("Vreo PanoTag failed to load", x);
       });
-    })));
-
-    // 监听播放情况：抛出触发时机
-    _this.disposers.push(reaction(function () {
-      return _this.controller.ended;
-    }, function (ended) {
-      if (ended) {
-        _this.emit('paused', true);
+    };
+    return t.on(P.PanoTag, c), () => {
+      r = !0, t.off(P.PanoTag, c), l(), o(), e.dispose();
+    };
+  }, [t]), null;
+}
+const ut = (t, i, e, n) => {
+  const r = e / 375, s = n / 375, a = new M.PlaneGeometry(r, s);
+  if (i) {
+    const c = new M.Vector3(i.x + t.x, i.y + t.y, i.z + t.z);
+    a.lookAt(c);
+  }
+  const o = a.getAttribute("position"), l = (c) => t.clone().add(
+    new M.Vector3().fromBufferAttribute(o, c)
+  );
+  return [l(2), l(3), l(1), l(0)];
+};
+function Vt() {
+  const t = T(), i = U(), e = A.useRef(void 0);
+  return A.useEffect(() => {
+    var o;
+    if (((o = t.configs) == null ? void 0 : o.keyframeMap.PanoTextLabel) === !1)
+      return;
+    const n = /* @__PURE__ */ new Set(), r = () => {
+      for (const l of [...n]) l();
+    }, s = t.playback.add(r), a = (l, c = l.start) => {
+      var $, B, K;
+      const { end: V, data: f } = l, h = f;
+      if (f.text === "") return;
+      const { x: p, y: w, z: y } = h.vertex, v = new q(p, w, y), m = new q(($ = h.normal) == null ? void 0 : $.x, (B = h.normal) == null ? void 0 : B.y, (K = h.normal) == null ? void 0 : K.z), g = ut(v, h.normal && m, 200, 30);
+      e.current || (e.current = we(i));
+      const x = e.current.create3DDomContainer(g), I = x == null ? void 0 : x.css3DObject;
+      if (f.quaternion) {
+        const W = new qe(f.quaternion.x, f.quaternion.y, f.quaternion.z, f.quaternion.w);
+        I == null || I.quaternion.copy(W);
       }
-    }));
-    _this.disposers.push(reaction(function () {
-      return _this.controller.playing;
-    }, function (playing) {
-      if (!_this.controller.ended) {
-        _this.emit(playing ? 'playing' : 'paused');
+      if (!(x != null && x.container)) return;
+      const E = oe(x.container);
+      let S, z = !1;
+      const O = () => {
+        z || (z = !0, S !== void 0 && clearTimeout(S), n.delete(O), x.dispose(), queueMicrotask(() => E.unmount()));
+      };
+      n.add(O), E.render(
+        /* @__PURE__ */ d("div", { className: "PanoTextLabel PanoTextLabel--notHidden", children: /* @__PURE__ */ d("div", { className: "PanoTextLabel-wrapper", children: /* @__PURE__ */ d("div", { style: { fontSize: `${f.fontSize || 16}px` }, className: "PanoText-innerText", children: f.text || "" }) }) })
+      ), S = setTimeout(O, Math.max(0, V - c));
+    };
+    return t.on(P.PanoTextLabel, a), () => {
+      t.off(P.PanoTextLabel, a), s(), r(), e.current = void 0;
+    };
+  }, [t]), /* @__PURE__ */ d(C, {});
+}
+function ft() {
+  const [t, i] = A.useState(""), [e, n] = A.useState(!0), r = A.useRef(null), s = T();
+  return A.useEffect(() => {
+    var c;
+    if (((c = s.configs) == null ? void 0 : c.keyframeMap.Prompter) === !1)
+      return;
+    const a = () => {
+      r.current !== null && clearTimeout(r.current), r.current = null, n(!0), i("");
+    }, o = s.playback.add(a), l = (V, f = V.start) => {
+      const { end: h, data: p } = V;
+      i(p.text), n(!1), r.current && (clearTimeout(r.current), r.current = null), r.current = setTimeout(a, Math.max(0, h - f));
+    };
+    return s.on(P.Prompter, l), () => {
+      s.off(P.Prompter, l), o(), a();
+    };
+  }, [s]), /* @__PURE__ */ d(
+    "div",
+    {
+      className: D("vreo-prompter", {
+        "vreo-prompter--hidden": e,
+        [`vreo-prompter-left--${s.agentType}`]: !0
+      }),
+      children: /* @__PURE__ */ d("div", { className: "vreo-prompter-text", children: /* @__PURE__ */ d("div", { className: "vreo-prompter-innerText", children: t }) })
+    }
+  );
+}
+function ht() {
+  const t = T(), i = U(), e = A.useRef(null), n = A.useRef(null), r = A.useCallback(() => {
+    if (n.current = null, e.current) {
+      const o = J(e.current);
+      i.load(o);
+    }
+  }, []), s = A.useCallback(() => {
+    if (e.current) {
+      const o = J(e.current);
+      Object.assign(window, { $rawWork: o }), i.load(o);
+    }
+  }, []), a = A.useCallback(() => {
+    n.current && i.load(n.current);
+  }, []);
+  return A.useEffect(() => {
+    const o = (l) => {
+      var f, h, p, w, y;
+      !e.current && ((h = (f = i.work) == null ? void 0 : f.raw) != null && h.works) && (e.current = i.work.raw.works);
+      const c = l.data;
+      if (c.work) {
+        n.current = J(c.work), i.load(n.current);
+        return;
       }
-    }));
-    return _this;
+      const V = (y = (w = (p = i.work) == null ? void 0 : p.raw) == null ? void 0 : w.works) == null ? void 0 : y[0];
+      if (!V) {
+        console.warn("UpdateVRPanorama: 没有可用的 work 数据");
+        return;
+      }
+      if (c.dynamic_scene && !c.panorama) {
+        const m = JSON.parse(V).panorama, k = c.dynamic_scene.images.index;
+        m.list[k] = c.dynamic_scene.images, c.panorama = m, delete c.dynamic_scene;
+      }
+      Object.assign(window, { $work1: JSON.parse(V), $work2: c, parseWork: J }), n.current = J([V, c]), i.load(n.current);
+    };
+    return t.on(P.UpdateVRPanorama, o), t.on(P.Exit, r), t.on("loaded", r), t.on("paused", s), t.on("playing", a), () => {
+      t.off(P.UpdateVRPanorama, o), t.off(P.Exit, r), t.off("loaded", r), t.off("paused", s), t.off("playing", a);
+    };
+  }, []), /* @__PURE__ */ d(C, {});
+}
+const pt = Math.PI, re = pt * 2;
+function At() {
+  const t = A.useRef(null), i = A.useRef(null), e = T(), n = A.useRef(null), [r, s] = A.useState(!1), a = U();
+  return A.useEffect(() => {
+    let o, l = 0, c;
+    const V = async (p) => {
+      const { start: w, end: y } = p, { videoSrc: v, fov: m, direction: k, panoIndex: b, vector: g } = p.data, [x, I] = (() => {
+        if (g)
+          return [g.longitude, g.latitude];
+        if (!k)
+          return [0, 0];
+        let W = -Math.atan2(k.x, -k.z);
+        W = (W % re + re) % re;
+        const Me = -Math.asin(k.y / 1);
+        return [W, Me];
+      })();
+      f();
+      const E = l;
+      a.setState({ fov: m, panoIndex: b, longitude: x, latitude: I }, !0), c == null || c();
+      const S = e.playback.capture(), z = () => !!(S != null && S.valid()), O = () => E === l && z(), $ = i.current;
+      if (!$ || !O()) return;
+      const B = o = S.bind($);
+      B.muted = !0, B.src = v;
+      const K = () => {
+        c == null || c(), O() && (B.muted = !1, B.play().catch((W) => {
+          O() && (e.playback.cancel(), console.error(W));
+        }));
+      };
+      c = () => $.removeEventListener("canplaythrough", K), $.addEventListener("canplaythrough", K), B.load(), s(!0), n.current = setTimeout(f, Math.max(0, y - w));
+    };
+    e.on(P.VideoEffect, V);
+    const f = () => {
+      ++l, n.current && clearTimeout(n.current), c == null || c(), o && (o.muted = !0, o.pause(), o.src = ""), o = void 0, s(!1);
+    }, h = e.playback.add(f);
+    return () => {
+      f(), h(), e.off(P.VideoEffect, V), n.current && clearTimeout(n.current);
+    };
+  }, [e]), A.useEffect(() => {
+    var l, c;
+    if (!t.current) return;
+    const o = ((c = (l = e.configs) == null ? void 0 : l.videos) == null ? void 0 : c.videoEffect) || document.createElement("video");
+    return o.setAttribute("playsinline", "true"), o.setAttribute("webkit-playsinline", "true"), o.autoplay = !1, o.muted = !0, o.setAttribute("key", "VideoEffect-video"), o.setAttribute("class", "VideoEffect-video"), i.current = o, t.current.append(i.current), () => {
+      o.muted = !0, o.pause(), o.remove();
+    };
+  }, []), /* @__PURE__ */ d(
+    "div",
+    {
+      ref: t,
+      className: D("VideoEffect", {
+        "VideoEffect--visible": r
+      })
+    }
+  );
+}
+const mt = {
+  blob: (t) => {
+    const i = () => null;
+    return new Promise((e, n) => {
+      const r = new XMLHttpRequest(), s = () => {
+        r.ontimeout = i, r.onreadystatechange = i, r.onprogress = i, r.onabort = i;
+      };
+      r.ontimeout = () => {
+        n(new Error("timeout")), s();
+      }, r.onreadystatechange = () => {
+        r.readyState === 4 && (r.status === 0 && !r.response || (r.status === 200 || r.status === 0 ? (e(r.response), s()) : (n(new Error("status:" + r.status)), s())));
+      }, r.open("GET", t, !0), r.responseType = "blob", r.send(null);
+    });
+  }
+};
+class vt extends ce {
+  constructor({ duration: e } = {}) {
+    super();
+    u(this, "$timestamp", null);
+    u(this, "$currentTime", 0);
+    u(this, "$duration", 0);
+    u(this, "stopInterval");
+    u(this, "muted", !1);
+    u(this, "src", "");
+    e && (this.$duration = e);
+  }
+  setAttribute(e, n) {
+  }
+  play() {
+    this.stopInterval || (this.$currentTime === this.$duration && (this.$currentTime = 0), this.$timestamp === null && (this.$timestamp = performance.now()), this.stopInterval = le(() => this.requestAnimationFrameLoop()), this.emit("play"));
+  }
+  pause() {
+    this.stopInterval && (this.stopInterval(), this.emit("pause"), this.stopInterval = void 0), this.$timestamp = null;
+  }
+  requestAnimationFrameLoop() {
+    if (this.$timestamp === null) return;
+    const e = performance.now();
+    this.$currentTime += e - this.$timestamp, this.$timestamp = e, this.emit("timeupdate"), this.$currentTime >= this.$duration - 10 && (this.$currentTime = this.$duration, this.pause(), this.emit("ended"));
+  }
+  get currentTime() {
+    return this.$currentTime / 1e3;
+  }
+  set currentTime(e) {
+    this.$currentTime = e * 1e3;
+  }
+  get duration() {
+    return this.$duration;
+  }
+  set duration(e) {
+    this.$duration = e;
+  }
+  get ended() {
+    return this.$currentTime === this.$duration;
+  }
+  get paused() {
+    return !this.stopInterval;
+  }
+  addEventListener(e, n, r = !1) {
+    this.on(e, n);
+  }
+  removeEventListener(e, n, r = !1) {
+    this.off(e, n);
+  }
+}
+class gt extends M.Mesh {
+  /**
+   * 创建视频经纪人贴片实例
+   * 
+   * @param width - 网格宽度
+   * @param height - 网格高度  
+   * @param widthSegments - 宽度方向分段数
+   * @param heightSegments - 高度方向分段数
+   * @param options - 配置选项
+   * 
+   * @example
+   * ```typescript
+   * const mesh = new VideoAgentMesh(1920, 1080, 32, 18, {
+   *   preload: true,
+   *   videoInstance: document.getElementById('video')
+   * })
+   * ```
+   */
+  constructor(e, n, r, s, a = {
+    preload: !0
+  }) {
+    var k, b;
+    const o = !a.videoInstance;
+    if (!a.videoInstance) {
+      const g = document.createElement("video");
+      g.style.display = "none", g.playsInline = !0, g.muted = !0, document.body.append(g), a.videoInstance = g;
+    }
+    const l = new M.PlaneGeometry(e, n, r, s), c = new M.VideoTexture(a.videoInstance);
+    c.colorSpace = M.SRGBColorSpace;
+    const V = je(0), h = Ge(c).sample(He()), p = Ke(1).sub(
+      Je(0.1, 0.3, h.g.sub(Qe(h.r, h.b)).add(0.1))
+    ), w = new M.MeshBasicNodeMaterial({ transparent: !0 });
+    w.colorNode = h.rgb, w.opacityNode = p.mul(V);
+    super(l, w);
+    u(this, "videoTexture");
+    u(this, "enableNode");
+    /** 配置选项 */
+    u(this, "options");
+    /** 当前视频URL */
+    u(this, "videoUrl");
+    /** 是否冻结状态 */
+    u(this, "freeze");
+    /** 是否暂停状态 */
+    u(this, "paused");
+    /** 音频实例 */
+    u(this, "outputs", /* @__PURE__ */ new Map());
+    u(this, "ownsVideo", !1);
+    u(this, "ownsAudio", !1);
+    u(this, "generation", 0);
+    u(this, "removeStart");
+    u(this, "objectURL");
+    u(this, "audioInstance");
+    /** AudioLike 实例 */
+    u(this, "audioLikeInstance");
+    /** 移除事件监听器的函数 */
+    u(this, "$removeEventListener");
+    this.videoTexture = c, this.enableNode = V, this.ownsVideo = o, this.ownsAudio = !a.audioInstance, this.options = a, this.freeze = !1, this.paused = !0, a.audioInstance ? this.audioInstance = a.audioInstance : (this.audioInstance = document.createElement("audio"), this.audioInstance.crossOrigin = "", this.audioInstance.muted = !0, this.audioInstance.autoplay = !1), this.audioLikeInstance = new vt(), be(this, { paused: N, videoUrl: Q });
+    const y = (g) => Z(() => this.paused = g), v = () => y(!0), m = () => y(!1);
+    this.audioInstance.addEventListener("pause", v), this.audioInstance.addEventListener("play", m), (k = this.options.videoInstance) == null || k.addEventListener("pause", v), (b = this.options.videoInstance) == null || b.addEventListener("play", m), this.audioLikeInstance.addEventListener("pause", v), this.audioLikeInstance.addEventListener("play", m), this.$removeEventListener = () => {
+      var g, x;
+      this.audioInstance.removeEventListener("pause", v), this.audioInstance.removeEventListener("play", m), (g = this.options.videoInstance) == null || g.removeEventListener("pause", v), (x = this.options.videoInstance) == null || x.removeEventListener("play", m), this.audioLikeInstance.removeEventListener("pause", v), this.audioLikeInstance.removeEventListener("play", m);
+    };
+  }
+  operations(e, n) {
+    const r = e ? e.bind(n) : n;
+    return this.outputs.set(n, r), r;
+  }
+  /**
+   * 获取当前的媒体实例
+   * 
+   * 根据媒体类型自动返回对应的播放实例：
+   * - 无媒体时返回 AudioLike 实例
+   * - 音频文件返回 HTMLAudioElement
+   * - 视频文件返回 HTMLVideoElement
+   * 
+   * @returns 当前活跃的媒体播放实例
+   */
+  get mediaInstance() {
+    return this.videoUrl ? Y(this.videoUrl) === "audio" ? this.audioInstance : this.videoTexture.image : this.audioLikeInstance;
+  }
+  /**
+   * 更新媒体资源
+   * 
+   * 内部方法，负责加载新的视频/音频资源，处理预载逻辑和着色器设置
+   * @param videoUrl - 媒体文件URL
+   * @private
+   */
+  async update(e, n, r) {
+    if (this.videoUrl === e) return;
+    this.stop(), this.freeze = !0;
+    const s = Y(e) === "audio" ? this.audioInstance : this.options.videoInstance, a = this.operations(r, s);
+    a.muted = !0;
+    const o = this.options.preload !== !1 || Y(e) === "video" ? URL.createObjectURL(await mt.blob(e)) : e;
+    if (!n()) {
+      o !== e && URL.revokeObjectURL(o);
+      return;
+    }
+    Z(() => {
+      this.videoUrl = e;
+    }), this.objectURL && URL.revokeObjectURL(this.objectURL), this.objectURL = o !== e ? o : void 0, a.src = o, s.setAttribute("data-src", e);
+    const l = () => {
+      var c;
+      !n() || a.currentTime === 0 || (this.freeze = !1, a.muted = !1, this.enableNode.value = Y(e) ? 1 : 0, (c = this.removeStart) == null || c.call(this));
+    };
+    this.removeStart = () => s.removeEventListener("timeupdate", l), s.addEventListener("timeupdate", l);
+  }
+  /**
+   * 播放媒体内容
+   * 
+   * 支持多种播放模式：
+   * - 播放指定视频/音频文件
+   * - 仅设置时长（无媒体文件）
+   * - 继续播放当前媒体
+   * 
+   * @param videoUrl - 媒体文件URL，默认为空字符串
+   * @param currentTime - 播放起始时间（秒），默认为 0
+   * @param duration - 媒体总时长（秒），可选
+   * @returns Promise<boolean> 播放是否成功
+   * 
+   * @example
+   * ```typescript
+   * // 播放视频文件
+   * await mesh.play('video.mp4', 10, 120)
+   * 
+   * // 仅设置时长（音频跟踪）
+   * await mesh.play('', 0, 60)
+   * 
+   * // 继续播放当前媒体
+   * await mesh.play()
+   * ```
+   */
+  async play(e = "", n = 0, r) {
+    var c, V;
+    const s = (V = (c = this.options).getPlayback) == null ? void 0 : V.call(c);
+    if (this.options.getPlayback && !(s != null && s.valid())) return !1;
+    e && e !== this.videoUrl && this.stop();
+    let a = this.generation;
+    const o = () => a === this.generation && (!this.options.getPlayback || !!(s != null && s.valid()));
+    if (e && e !== this.videoUrl && (a++, await this.update(e, o, s)), !o()) return !1;
+    r && !e && (Z(() => {
+      this.videoUrl = "";
+    }), this.audioLikeInstance.duration = r);
+    const l = this.videoUrl ? this.operations(s, this.mediaInstance) : this.audioLikeInstance;
+    return (e || r) && (l.currentTime = n), l.muted = !0, await l.play(), o() ? (l.muted = !1, !0) : !1;
+  }
+  get mediaOperations() {
+    var n, r;
+    const e = (r = (n = this.options).getPlayback) == null ? void 0 : r.call(n);
+    if (!(this.options.getPlayback && !(e != null && e.valid())))
+      return this.videoUrl ? this.operations(e, this.mediaInstance) : this.audioLikeInstance;
+  }
+  stop() {
+    var e;
+    ++this.generation, (e = this.removeStart) == null || e.call(this), this.removeStart = void 0;
+    for (const n of this.outputs.values())
+      n.muted = !0, n.pause();
+    this.outputs.clear(), this.audioLikeInstance.pause();
+  }
+  /**
+   * 获取当前播放时间（毫秒）
+   * 
+   * 将媒体实例的秒级时间转换为毫秒，提供更高精度的时间控制
+   * @returns 当前播放时间戳（毫秒）
+   */
+  get currentTime() {
+    return this.mediaInstance.currentTime * 1e3;
+  }
+  /**
+   * 销毁视频经纪人贴片实例
+   * 
+   * 清理所有事件监听器、DOM元素和缓存实例，释放内存资源
+   * 
+   * @example
+   * ```typescript
+   * // 在组件卸载时调用
+   * videoMesh.dispose()
+   * ```
+   */
+  dispose() {
+    var e;
+    this.stop(), this.$removeEventListener(), this.ownsVideo && ((e = this.options.videoInstance) == null || e.remove()), this.ownsAudio && this.audioInstance.remove(), this.objectURL && URL.revokeObjectURL(this.objectURL), this.geometry.dispose(), this.videoTexture.dispose(), this.material.dispose();
+  }
+}
+class bt {
+  constructor(i, e, n = !1) {
+    u(this, "videoAgentMesh");
+    u(this, "scene", new ze());
+    u(this, "camera", new Be(-240, 240, 135, -135));
+    u(this, "renderer");
+    u(this, "frame");
+    u(this, "disposed", !1);
+    u(this, "disposers", []);
+    u(this, "fail", (i) => {
+      this.disposed || (this.dispose(), console.error("VideoAgent renderer initialization failed", i));
+    });
+    u(this, "run", () => {
+      this.disposed || (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1e3 && this.renderer.render(this.scene, this.camera), this.frame = requestAnimationFrame(this.run));
+    });
+    u(this, "dispose", () => {
+      this.disposed || (this.disposed = !0, this.frame !== void 0 && cancelAnimationFrame(this.frame), this.frame = void 0, this.disposers.splice(0).forEach((i) => i()), this.videoAgentMesh.dispose(), this.renderer.dispose(), this.renderer.domElement.remove());
+    });
+    if (this.renderer = new Ue({ alpha: !0, forceWebGL: n }), this.videoAgentMesh = new gt(480, 270, 1, 1, e), !i) return;
+    this.camera.position.set(0, 0, 10), this.camera.lookAt(0, 0, 0);
+    const r = this.renderer.domElement;
+    r.classList.add("VideoAgent-canvas");
+    const s = xe(i, (a, o) => {
+      this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(a, o, !1), r.style.width = `${a}px`, r.style.height = `${o}px`;
+    });
+    this.disposers.push(s), i.append(r), this.scene.add(this.videoAgentMesh), this.renderer.init().then(() => {
+      if (this.disposed) return;
+      const a = this.renderer.backend;
+      if (!a.isWebGPUBackend && !a.isWebGLBackend)
+        throw new Error("VideoAgent renderer initialized with an unsupported backend");
+      this.run();
+    }).catch(this.fail);
+  }
+}
+const wt = ne(function(i) {
+  var a, o, l;
+  const e = A.useRef(null), n = T(), r = ((a = n.avatar) == null ? void 0 : a.url) && n.avatar.force === !0, s = !r && ((o = n.videoAgentScene) == null ? void 0 : o.videoAgentMesh.mediaInstance) instanceof HTMLVideoElement;
+  return A.useEffect(() => {
+    var f, h;
+    if (!e.current) throw new Error("React 渲染异常，请稍后重试 ...");
+    if (n.videoAgentScene) {
+      console.warn('VideoAgentScene" 重复初始化，已被过滤');
+      return;
+    }
+    const c = ((h = (f = n.five.renderer) == null ? void 0 : f.backend) == null ? void 0 : h.isWebGLBackend) === !0, V = new bt(e.current, { ...i.options, getPlayback: () => n.playback.capture() }, c);
+    return Z(() => {
+      n.videoAgentScene = V;
+    }), () => {
+      V.dispose(), n.videoAgentScene === V && Z(() => {
+        n.videoAgentScene = void 0;
+      });
+    };
+  }, [n]), /* @__PURE__ */ L(C, { children: [
+    /* @__PURE__ */ d("div", { className: "Avatar", style: { display: r ? "block" : "none" }, children: /* @__PURE__ */ d("div", { className: "Avatar-wrapper ratio-1-1", children: /* @__PURE__ */ d("img", { className: "Avatar-img", src: (l = n.avatar) == null ? void 0 : l.url, onClick: () => {
+      var c;
+      return (c = i.onClick) == null ? void 0 : c.call(i);
+    } }) }) }),
+    /* @__PURE__ */ d("div", { className: D("VideoAgent", { hide: !s }), children: /* @__PURE__ */ d("div", { className: "VideoAgent-container", children: /* @__PURE__ */ d("div", { className: "VideoAgent-wrapper ratio-16-9", children: /* @__PURE__ */ d("div", { className: "VideoAgent-inner", ref: e, children: /* @__PURE__ */ d("div", { className: "VideoAgent-play", onClick: () => {
+      var c;
+      return (c = i.onClick) == null ? void 0 : c.call(i);
+    } }) }) }) }) })
+  ] });
+}), F = "data:audio/mpeg;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAADAAAGhgBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr///////////////////////////////////////////8AAAA5TEFNRTMuOThyAc0AAAAAAAAAABSAJAiqQgAAgAAABobxtI73AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//uQxAACFEII9ACZ/sJZwWEoEb8w/////N//////JcxjHjf+7/v/H2PzCCFAiDtGeyBCIx7bJJ1mmEEMy6g8mm2c8nrGABB4h2Mkmn//4z/73u773R5qHHu/j/w7Kxkzh5lWRWdsifCkNAnY9Zc1HvDAhjhSHdFkHFzLmabt/AQxSg2wwzLhHIJOBnAWwVY4zrhIYhhc2kvhYDfQ4hDi2Gmh5KyFn8EcGIrHAngNgIwVIEMf5bzbAiTRoAD///8z/KVhkkWEle6IX+d/z4fvH3BShK1e5kmjkCMoxVmXhd4ROlTKo3iipasvTilY21q19ta30/v/0/idPX1v8PNxJL6ramnOVsdvMv2akO0iSYIzdJFirtzWXCZicS9vHqvSKyqm5XJBdqBwPxyfJdykhWTZ0G0ZyTZGpLKxsNwwoRhsx3tZfhwmeOBVISm3impAC/IT/8hP/EKEM1KMdVdVKM2rHV4x7HVXZvbVVKN/qq8CiV9VL9jjH/6l6qf7MBCjZmOqsAibjcP+qqqv0oxqpa/NVW286hPo1nz2L/h8+jXt//uSxCmDU2IK/ECN98KKtE5IYzNoCfbw+u9i5r8PoadUMFPKqWL4LK3T/LCraMSHGkW4bpLXR/E6LlHOVQxmslKVJ8IULktMN06N0FKCpHCoYsjC4F+Z0NVqdNFoGSTjSiyjzLdnZ2fNqTi2eHKONONKLMPMKLONKLMPQRJGlFxZRoKcJFAYEeIFiRQkUWUeYfef//Ko04soswso40UJAgMw8wosososy0EalnZyjQUGBRQGIFggOWUacWUeYmuadrZziQKKEgQsQLAhQkUJAgMQDghltLO1onp0cpkNInSFMqlYeSEJ5AHsqFdOwy1DA2sRmRJKxdKRfLhfLw5BzUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUxBTUUzLjk4LjJVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7ksRRA8AAAaQAAAAgAAA0gAAABFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU=", H = [], yt = typeof Audio > "u" ? class {
+} : Audio;
+function xt(t) {
+  let i = H.find((e) => !e.realSrc || e.realSrc === F);
+  return i || (i = new Pe(F), H.push(i)), i;
+}
+async function kt(t = 100, i = 2e3) {
+  console.log("waitForBlankAudioGenerated, needGenerate: ", H.some((r) => !r.ended && r.src === F));
+  const e = Date.now();
+  let n = !1;
+  for (; H.some((r) => !r.ended && r.src === F) && !n; ) {
+    if (Date.now() - e > i)
+      return n = !0, Promise.resolve();
+    await new Promise((r) => setTimeout(r, t));
+  }
+}
+function Pt(t) {
+  const i = t - H.length;
+  if (!(i <= 0))
+    for (let e = 0; e < i; e++)
+      H.push(new Pe(F));
+}
+function Et(t) {
+  t.inited || (t.src && (t.inited = !0, t.removeDocumentEventListener()), t.src === F && t.play());
+}
+class Pe extends yt {
+  constructor(e) {
+    super(e);
+    u(this, "preload", "auto");
+    u(this, "realSrc", "");
+    u(this, "inited", !1);
+    u(this, "removeDocumentEventListener");
+    this.realSrc = e ?? "", this.muted = !0, super.addEventListener("ended", () => {
+      this.src === F && (this.src = "");
+    });
+    const n = () => Et(this);
+    document.addEventListener("click", n), document.addEventListener("touchend", n), this.removeDocumentEventListener = () => {
+      document.removeEventListener("click", n), document.removeEventListener("touchend", n);
+    };
+  }
+  /**
+   * 获取音频源 URL
+   * @returns {string} 当前音频源 URL
+   */
+  get src() {
+    return this.getAttribute("src") || "";
+  }
+  /**
+   * 设置音频源 URL
+   * @param paramsSrc - 音频源 URL
+   */
+  set src(e) {
+    if (this.muted = !0, e === "") {
+      this.removeAttribute("src"), this.realSrc = "", this.load();
+      return;
+    }
+    this.setAttribute("src", e), this.realSrc = e;
+  }
+}
+function Mt() {
+  const t = T();
+  return A.useEffect(() => {
+    const i = /* @__PURE__ */ new Set(), e = (n, r) => {
+      const s = t.playback.capture(), a = () => !!(s != null && s.valid());
+      if (!a()) return;
+      const o = xt(), l = s.bind(o);
+      let c = !1;
+      const V = () => {
+        c || (c = !0, o.removeEventListener("canplay", h), o.removeEventListener("ended", V), l.muted = !0, l.pause(), l.src = "", f(), i.delete(V), t.setWaitingForBgMusic(!1));
+      }, f = t.playback.add(V);
+      i.add(V);
+      const h = () => {
+        o.removeEventListener("canplay", h), !(!a() || c) && (l.muted = !1, l.play().catch((p) => {
+          a() && !c && (V(), t.playback.cancel(), console.error(p));
+        }), t.setWaitingForBgMusic(!1));
+      };
+      l.muted = !0, l.src = n.data.url, l.currentTime = Math.max(0, (r - n.start) / 1e3), o.addEventListener("ended", V), t.configs.waitForBgMusicLoaded && o.readyState < 3 ? (t.setWaitingForBgMusic(!0), o.addEventListener("canplay", h)) : h();
+    };
+    return t.on(P.BgMusic, e), () => {
+      t.off(P.BgMusic, e);
+      for (const n of [...i]) n();
+    };
+  }, [t]), /* @__PURE__ */ d(C, {});
+}
+const Ee = "https://vr-public.realsee-cdn.cn/release/static/image/release/", St = {
+  single: {
+    width: 766,
+    height: 60,
+    frames: 20,
+    hevc: "vapor/static/wave-single.140d197f4838c130b69e87dfd0705479.mov",
+    vp9: "vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm",
+    png: "vapor/static/wave-single.f51aade2a6e1c59211698a1a24e6135f.png"
+  },
+  double: {
+    width: 766,
+    height: 60,
+    frames: 16,
+    hevc: "vapor/static/wave-double.3e6d73050ee6958cc3060b107ebe5f39.mov",
+    vp9: "/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm",
+    png: "/vapor/static/wave-double.ab4fe7d8a70395109ca4f759af7bd53f.png"
+  },
+  solid: {
+    width: 1126,
+    height: 90,
+    frames: 48,
+    hevc: "vapor/static/wave-solid.cf68912a93275d07aa6b5097ea11fdda.mov",
+    vp9: "vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm",
+    png: "vapor/static/wave-solid.6969d7f3f2f44f7ac1ade30e65660cb1.png"
+  },
+  swap: {
+    width: 2250,
+    height: 180,
+    frames: 41,
+    hevc: "vapor/static/wave-swap.b38f22e2cf84ee21e9be35f7f56c9cfc.mov",
+    vp9: "vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm",
+    png: "vapor/static/wave-swap.772ba526a7210dcc01567062c6319545.png"
+  },
+  expand: {
+    width: 2250,
+    height: 180,
+    frames: 45,
+    hevc: "vapor/static/wave-expand.9529956c5954740cd4c9d07d51e32822.mov",
+    vp9: "vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm",
+    png: "vapor/static/wave-expand.62fcf27b445533e6eb1b17bab5eafa0d.png"
+  }
+}, _ = typeof navigator < "u" ? navigator.userAgent : "", Tt = /(iPhone|iPad|iPod)/i.test(_), Lt = /safari/i.test(_) && !/chrome/i.test(_) && /version/i.test(_), It = /microMessenger/i.test(_), Ct = Tt || Lt, Rt = typeof MediaSource < "u" && MediaSource.isTypeSupported("video/webm; codecs=vp9");
+function Nt(t) {
+  const i = X.useMemo(() => {
+    const r = (t == null ? void 0 : t.appearance) ?? "solid";
+    return St[r];
+  }, [t == null ? void 0 : t.appearance]), e = X.useMemo(() => i.height / i.width, [i]);
+  let n = null;
+  return It ? n = /* @__PURE__ */ d(ae, { wave: i, prefix: t == null ? void 0 : t.staticPrefix }) : Ct ? n = /* @__PURE__ */ d(me, { format: "hevc", wave: i, prefix: t == null ? void 0 : t.staticPrefix }) : Rt ? n = /* @__PURE__ */ d(me, { format: "vp9", wave: i, prefix: t == null ? void 0 : t.staticPrefix }) : n = /* @__PURE__ */ d(ae, { wave: i, prefix: t == null ? void 0 : t.staticPrefix }), /* @__PURE__ */ d("div", { className: "vreo-wave", onClick: t == null ? void 0 : t.onClick, children: /* @__PURE__ */ d("div", { style: { position: "relative", width: "100%", paddingTop: `${e * 100}%` }, children: /* @__PURE__ */ d("div", { style: { position: "absolute", width: "100%", height: "100%", left: 0, top: 0 }, children: n }) }) });
+}
+const me = ({
+  wave: t,
+  format: i,
+  prefix: e = Ee
+}) => {
+  const n = Le(null), [r, s] = de(!1), [a, o] = de(!1), l = e + t[i];
+  Ie(() => {
+    s(!1);
+  }, [l]);
+  const c = ue(() => {
+    n.current && n.current.play(), s(!0);
+  }, []), V = ue(() => {
+    o(!0);
+  }, []);
+  return a ? /* @__PURE__ */ d(ae, { wave: t, prefix: e }) : /* @__PURE__ */ d(
+    "video",
+    {
+      style: { opacity: r ? 1 : 0 },
+      preload: "auto",
+      ref: n,
+      width: "100%",
+      height: "100%",
+      playsInline: !0,
+      autoPlay: !0,
+      onCanPlay: c,
+      onError: V,
+      muted: !0,
+      loop: !0,
+      src: l
+    }
+  );
+}, ae = ({
+  wave: t,
+  prefix: i = Ee
+}) => {
+  const e = i + t.png;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        backgroundImage: `url(${e})`,
+        backgroundSize: "100%",
+        animationName: "vreo-wave-keyframes",
+        animationTimingFunction: `steps(${t.frames - 1})`,
+        animationDuration: `${t.frames / 25}s`,
+        animationIterationCount: "infinite"
+      }
+    }
+  );
+}, qt = ne(({ controller: t }) => {
+  var i, e, n;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: D("vreo-panel", {
+        "vreo-panel--hidden": !t.visible
+      }),
+      children: /* @__PURE__ */ L("div", { className: "vreo-panel-inner", children: [
+        /* @__PURE__ */ d(Nt, { onClick: (i = t.configs) == null ? void 0 : i.onWaveClick, appearance: t.waveAppearance ?? "single", staticPrefix: t.configs.waveStaticPrefix }),
+        /* @__PURE__ */ d(
+          wt,
+          {
+            onClick: () => {
+              var r;
+              if ((r = t.configs) != null && r.onAvatarClick) {
+                t.configs.onAvatarClick();
+                return;
+              }
+              t.playing ? t.playback.cancel() : t.playback.begin(!0) && t.setPlaying(!0);
+            },
+            options: ((e = t.configs) == null ? void 0 : e.videoAgentMeshOptions) || {}
+          }
+        ),
+        /* @__PURE__ */ d(ft, {}),
+        (n = t.configs) == null ? void 0 : n.customPanelChildren
+      ] })
+    }
+  );
+});
+function zt() {
+  const t = T();
+  return /* @__PURE__ */ L(C, { children: [
+    /* @__PURE__ */ L(C, { children: [
+      /* @__PURE__ */ d(it, {}),
+      /* @__PURE__ */ d(tt, {}),
+      /* @__PURE__ */ d(at, {}),
+      /* @__PURE__ */ d(ht, {}),
+      /* @__PURE__ */ d(At, {}),
+      /* @__PURE__ */ d(dt, {}),
+      /* @__PURE__ */ d(Vt, {}),
+      /* @__PURE__ */ d(rt, {}),
+      /* @__PURE__ */ d(lt, {}),
+      /* @__PURE__ */ d(Mt, {})
+    ] }),
+    /* @__PURE__ */ d(qt, { controller: t })
+  ] });
+}
+const Bt = ne(({ controller: t }) => {
+  var n;
+  const i = "400px", e = (() => {
+    var s;
+    const r = (s = t.drawerConfig) == null ? void 0 : s.height;
+    return r ? typeof r == "number" ? r + "px" : r : "max-content";
+  })();
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: D("vreo-drawer", {
+        "vreo-drawer-visible": t.drawerConfig && t.drawerConfig.content
+      }),
+      onClick: () => t.openDrawer(!1),
+      children: /* @__PURE__ */ d("div", { className: "vreo-drawer-inner", style: { height: e, maxHeight: i }, children: ((n = t.drawerConfig) == null ? void 0 : n.content) || "" })
+    }
+  );
+});
+function Ut() {
+  const t = T();
+  return /* @__PURE__ */ d(Bt, { controller: t });
+}
+const Ot = ne(({ controller: t }) => /* @__PURE__ */ d(
+  "div",
+  {
+    className: D("vreo-PopUp", {
+      "vreo-PopUp-visible": t.popUp
+    }),
+    onClick: () => t.openPopUp(!1),
+    children: /* @__PURE__ */ d("div", { className: "vreo-PopUp-inner", children: t.popUp || "" })
+  }
+));
+function $t() {
+  const t = T();
+  return /* @__PURE__ */ d(Ot, { controller: t });
+}
+const Wt = ({ five: t, dom: i }) => {
+  const e = new q();
+  t.camera.getWorldDirection(e);
+  const n = t.camera.position, [r] = t.model.intersectRaycaster(new Oe(n, e)), s = t.project2d(r.point), a = window.innerWidth > 560, o = i.clientHeight;
+  i.style.left = s.x + "px", i.style.top = s.y - o / 2 + "px";
+  const l = i.getBoundingClientRect(), { left: c, top: V, bottom: f, right: h } = l, p = new q(c, f), w = new q(c, V), y = new q(h, V), v = new q(h, f), m = [p, v, y, w].map((b) => (b.setX(b.x / window.innerWidth * 2 - (a ? 1.25 : 1.75)), b.setY(-(b.y / window.innerHeight) * 2 + (a ? 1.35 : 1.125)), b.setZ(0.5), b.unproject(t.camera).addScaledVector(e, 0.2))), k = p.distanceTo(v) / (a ? 150 : 120);
+  return { points: m, ratio: k };
+};
+function dn(t) {
+  const i = A.useRef(null), e = A.useRef(null), n = A.useRef(null), r = A.useRef(we(t.five));
+  return A.useEffect(() => {
+    if (!e.current)
+      return;
+    const s = (a) => {
+      if (a.data.customType !== "SpatialScenePanel")
+        return;
+      const o = a.data, { points: l, ratio: c } = Wt({
+        five: t.five,
+        dom: e.current
+      }), { container: V, dispose: f, css3DObject: h, render: p } = r.current.create3DDomContainer(l, { ratio: c, autoRender: !1 }) || {};
+      if (Object.assign(window, { $css3DObject: h }), !V) return;
+      oe(V).render(/* @__PURE__ */ d(Dt, { ref: (b) => {
+        n.current = b;
+      }, data: o }));
+      const y = -(Math.PI * 2) / 9;
+      let v = 0;
+      ke(1e3).onUpdate(({ progress: b }) => {
+        const g = Math.PI / 90 * 11 * b, x = g - v;
+        h == null || h.rotateY(x), v = g;
+      }).onStart(() => {
+        h == null || h.rotateY(y), p();
+      }).onDispose(() => {
+        var b;
+        (b = n.current) == null || b.classList.add("show");
+      }).play();
+      const { start: m, end: k } = a;
+      i.current = setTimeout(() => {
+        var b;
+        (b = n.current) == null || b.classList.add("hide"), i.current = setTimeout(() => {
+          f == null || f(), i.current = null;
+        }, 1500);
+      }, k - m);
+    };
+    return Object.assign(window, { $callback: s }), t.subscribe.on(P.Custom, s), () => {
+      t.subscribe.off(P.Custom, s), i.current && clearTimeout(i.current);
+    };
+  }, []), /* @__PURE__ */ d("div", { className: "vreo-SpatialScenePanel", ref: e });
+}
+function Ft() {
+  const t = A.useRef(null), i = A.useRef(null);
+  return A.useEffect(() => {
+    if (!t.current) return;
+    const e = () => {
+      var n;
+      (n = t.current) == null || n.setAttribute("class", "SpatialScenePanel-bg"), i.current = setTimeout(() => {
+        var r;
+        (r = t.current) == null || r.setAttribute("class", "SpatialScenePanel-bg SpatialScenePanel-bg--animation"), i.current = null;
+      }, 3e3);
+    };
+    return t.current.addEventListener("animationend", e), () => {
+      t.current && t.current.removeEventListener("animationend", e), i.current && clearTimeout(i.current);
+    };
+  }, []), /* @__PURE__ */ d("div", { ref: t, className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation" });
+}
+const Dt = A.forwardRef(
+  (t, i) => {
+    var e, n, r, s;
+    return /* @__PURE__ */ L("div", { className: "SpatialScenePanel", ref: i, children: [
+      /* @__PURE__ */ L("div", { className: "SpatialScenePanel-show-area", children: [
+        /* @__PURE__ */ d(Ft, {}),
+        /* @__PURE__ */ L("div", { className: "SpatialScenePanel-header", children: [
+          /* @__PURE__ */ d("div", { className: "SpatialScenePanel-title", children: (e = t.data) == null ? void 0 : e.title }),
+          /* @__PURE__ */ L("div", { className: "SpatialScenePanel-temperature", children: [
+            (n = t.data) == null ? void 0 : n.temperature,
+            "℃"
+          ] })
+        ] }),
+        /* @__PURE__ */ d("div", { className: "SpatialScenePanel-body", children: (s = (r = t.data) == null ? void 0 : r.stateList) == null ? void 0 : s.map((a, o) => /* @__PURE__ */ L("div", { className: `SpatialScenePanel-item index_${o}`, children: [
+          /* @__PURE__ */ d("img", { className: "SpatialScenePanel-icon", src: a.icon, alt: `${a.text}` }),
+          /* @__PURE__ */ d("div", { className: "SpatialScenePanel-text", children: a.text }),
+          /* @__PURE__ */ d("div", { className: "SpatialScenePanel-dot" })
+        ] }, `scene-${a.text}`)) })
+      ] }),
+      /* @__PURE__ */ d("div", { className: "SpatialScenePanel-disappear-area" })
+    ] });
+  }
+), ve = 3, ge = "vreo-app-dhjskadhksahdjskahdjksa";
+function jt() {
+  var t;
+  return typeof location > "u" ? ve : Number(((t = location.search.match(/audio_cache=(\d+)/)) == null ? void 0 : t[1]) ?? ve);
+}
+class un extends ce {
+  /**
+   * 创建 Vreo 播放器实例
+   * 
+   * @param five - Five 渲染引擎实例
+   * @param configs - 播放器配置选项
+   */
+  constructor(e, n = {}) {
+    var r;
+    super();
+    /** Five 渲染引擎实例 */
+    u(this, "$five");
+    /** 内部控制器 */
+    u(this, "controller");
+    u(this, "root");
+    u(this, "disposers", []);
+    u(this, "loadGeneration", 0);
+    u(this, "disposed", !1);
+    /** 播放器配置（只读） */
+    u(this, "configs");
+    if (this.$five = e, Pt(jt()), n.container || (n.container = n.containter), !n.container) {
+      const s = document.getElementById(ge);
+      s && s.remove();
+      const a = document.createElement("div");
+      a.id = ge, n.container = a;
+      const o = (r = e.getElement()) == null ? void 0 : r.parentNode;
+      o ? o.append(a) : document.body.append(a);
+    }
+    n.container.classList.contains("vreo-app") || n.container.classList.add("vreo-app"), this.configs = Object.freeze(Object.assign({ keyframeMap: {} }, n)), this.controller = new Xe({ five: e, container: n.container, configs: this.configs }), this.root = oe(n.container), this.root.render(
+      /* @__PURE__ */ L(ye.Provider, { value: this.controller, children: [
+        /* @__PURE__ */ d(zt, {}),
+        /* @__PURE__ */ d(Ut, {}),
+        /* @__PURE__ */ d($t, {}),
+        this.configs.customKeyframes && this.configs.customKeyframes.map((s, a) => /* @__PURE__ */ d(
+          s,
+          {
+            subscribe: {
+              on: (o, l) => this.on(o, l),
+              once: (o, l) => this.once(o, l),
+              off: (o, l) => this.off(o, l)
+            },
+            five: e,
+            getMediaManager: () => this.getMediaManager()
+          },
+          a
+        ))
+      ] })
+    ), this.disposers.push(j(
+      () => this.controller.ended,
+      (s) => {
+        s && this.emit("paused", !0);
+      }
+    )), this.disposers.push(j(
+      () => this.controller.playing,
+      (s) => {
+        this.controller.ended || this.emit(s ? "playing" : "paused");
+      }
+    ));
+  }
+  getMediaManager() {
+    var e;
+    return (e = this.controller.playback.capture()) == null ? void 0 : e.mediaManager;
   }
-
   /**
    * 加载剧本数据
    * 
@@ -160,316 +1684,125 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
    * await player.load(vreoUnit, 0, false, true)
    * ```
    */
-  _createClass(Player, [{
-    key: "getMediaManager",
-    value: /** Five 渲染引擎实例 */
-
-    /** 内部控制器 */
-
-    function getMediaManager() {
-      var _this$controller$play;
-      return (_this$controller$play = this.controller.playback.capture()) === null || _this$controller$play === void 0 ? void 0 : _this$controller$play.mediaManager;
-    }
-    /** 播放器配置（只读） */
-  }, {
-    key: "load",
-    value: function () {
-      var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(vreoUnit) {
-        var _this2 = this;
-        var currentTime,
-          preload,
-          force,
-          userAction,
-          generation,
-          run,
-          valid,
-          _this$controller$vide,
-          _this$controller$vide2,
-          _this$configs$imageOp,
-          _this$controller$vide3,
-          _this$controller$vide4,
-          panoIndexMap,
-          panoIndexes,
-          i,
-          _args = arguments;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
-                preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
-                force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
-                userAction = _args.length > 4 && _args[4] !== undefined ? _args[4] : false;
-                generation = ++this.loadGeneration;
-                this.controller.playback.cancel();
-                if (!(this.disposed || !this.controller.playback.begin(userAction))) {
-                  _context.next = 8;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 8:
-                run = this.controller.playback.capture();
-                valid = function valid() {
-                  return run.valid();
-                };
-                _context.prev = 10;
-                this.controller.clear();
-                this.controller.setLoading(true);
-                if (force) {
-                  vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
-                }
-                // if (!this.controller.visible) {
-                //     this.controller.setVisible(true)
-                //     // 延迟 500ms 规避跟 DOM 动画冲突
-                //     await new Promise((resolve) => {
-                //         setTimeout(() => resolve(true), 500)
-                //     })
-                // }
-
-                if (this.controller.stopInterval) {
-                  this.controller.stopInterval();
-                  this.controller.stopInterval = undefined;
-                }
-                this.controller.vreoUnit = vreoUnit;
-                (_this$controller$vide = this.controller.videoAgentScene) === null || _this$controller$vide === void 0 ? void 0 : (_this$controller$vide2 = _this$controller$vide.videoAgentMesh.mediaOperations) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.pause();
-
-                // 预载逻辑
-                // 是否降低图片分辨率
-                if (this.$five.imageOptions.size && (_this$configs$imageOp = this.configs.imageOptions) !== null && _this$configs$imageOp !== void 0 && _this$configs$imageOp.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
-                  this.$five.imageOptions.size = this.configs.imageOptions.size;
-                }
-
-                // 预载数据中的点位
-                if (!(preload || preload === undefined && this.configs.autoPreload)) {
-                  _context.next = 30;
-                  break;
-                }
-                panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
-                  if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
-                    return false;
-                  }
-                  var data = vreoKeyframe.data;
-                  if (data.panoIndex === undefined) {
-                    return false;
-                  }
-                  return true;
-                }).reduce(function (accu, curr) {
-                  var panoIndex = curr.data.panoIndex;
-                  if (!accu[panoIndex]) {
-                    accu[panoIndex] = true;
-                  }
-                  return accu;
-                }, {});
-                panoIndexes = Object.keys(panoIndexMap);
-                i = 0;
-              case 22:
-                if (!(i < panoIndexes.length)) {
-                  _context.next = 30;
-                  break;
-                }
-                _context.next = 25;
-                return this.$five.preloadPano(Number(panoIndexes[i]));
-              case 25:
-                if (!(!valid() || generation !== this.loadGeneration)) {
-                  _context.next = 27;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 27:
-                i++;
-                _context.next = 22;
-                break;
-              case 30:
-                // 新数据载入就绪
-                this.emit('loaded', vreoUnit);
-                this.controller.emit('loaded', vreoUnit);
-                if (!(!valid() || generation !== this.loadGeneration)) {
-                  _context.next = 34;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 34:
-                if ((_this$controller$vide3 = this.controller.videoAgentScene) !== null && _this$controller$vide3 !== void 0 && _this$controller$vide3.videoAgentMesh.mediaOperations) {
-                  this.controller.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = currentTime / 1000;
-                }
-                this.controller.setAvatar(vreoUnit.video.avatar);
-                _context.next = 38;
-                return waitForBlankAudioGenerated();
-              case 38:
-                if (!(!valid() || generation !== this.loadGeneration)) {
-                  _context.next = 40;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 40:
-                _context.next = 42;
-                return (_this$controller$vide4 = this.controller.videoAgentScene) === null || _this$controller$vide4 === void 0 ? void 0 : _this$controller$vide4.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
-              case 42:
-                if (!(!valid() || generation !== this.loadGeneration)) {
-                  _context.next = 44;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 44:
-                this.controller.setEnded(false);
-                this.play(undefined, userAction);
-                this.controller.run(function (type, keyframe) {
-                  return _this2.emit(type, keyframe, _this2.controller.currentTime);
-                });
-                this.controller.setLoading(false);
-                return _context.abrupt("return", true);
-              case 51:
-                _context.prev = 51;
-                _context.t0 = _context["catch"](10);
-                if (valid()) {
-                  _context.next = 55;
-                  break;
-                }
-                return _context.abrupt("return", false);
-              case 55:
-                this.controller.playback.cancel();
-                throw _context.t0;
-              case 57:
-                _context.prev = 57;
-                if (generation === this.loadGeneration) this.controller.setLoading(false);
-                return _context.finish(57);
-              case 60:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[10, 51, 57, 60]]);
-      }));
-      function load(_x) {
-        return _load.apply(this, arguments);
-      }
-      return load;
-    }()
-    /**
-     * 获取播放器是否处于暂停状态
-     * @returns 是否暂停中
-     */
-  }, {
-    key: "paused",
-    get: function get() {
-      return !this.controller.playing;
-    }
-
-    /**
-     * 开始播放
-     * 
-     * @param currentTime - 可选的播放起始时间（毫秒）
-     * @returns 是否开始播放成功
-     * 
-     * @example
-     * ```typescript
-     * // 从当前位置播放
-     * player.play()
-     * 
-     * // 从指定时间开始播放
-     * player.play(10000) // 从10秒处开始
-     * ```
-     */
-  }, {
-    key: "play",
-    value: function play(currentTime) {
-      var _this$controller$vide5, _this$controller$vreo;
-      var userAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      if (this.disposed || !this.controller.playback.begin(userAction)) return false;
-      if (this.controller.playing) return true;
-      if (currentTime && (_this$controller$vide5 = this.controller.videoAgentScene) !== null && _this$controller$vide5 !== void 0 && _this$controller$vide5.videoAgentMesh.mediaOperations) {
-        this.controller.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = currentTime / 1000;
+  async load(e, n = 0, r = !1, s = !1, a = !1) {
+    var V, f, h, p, w;
+    const o = ++this.loadGeneration;
+    if (this.controller.playback.cancel(), this.disposed || !this.controller.playback.begin(a)) return !1;
+    const l = this.controller.playback.capture(), c = () => l.valid();
+    try {
+      if (this.controller.clear(), this.controller.setLoading(!0), s && (e = JSON.parse(JSON.stringify(e))), this.controller.stopInterval && (this.controller.stopInterval(), this.controller.stopInterval = void 0), this.controller.vreoUnit = e, this.controller.loadTimeline(e.keyframes), (f = (V = this.controller.videoAgentScene) == null ? void 0 : V.videoAgentMesh.mediaOperations) == null || f.pause(), this.$five.imageOptions.size && ((h = this.configs.imageOptions) != null && h.size) && this.$five.imageOptions.size > this.configs.imageOptions.size && (this.$five.imageOptions.size = this.configs.imageOptions.size), r || r === void 0 && this.configs.autoPreload) {
+        const y = e.keyframes.filter((m) => !(m.type !== P.CameraMovement || m.data.panoIndex === void 0)).reduce((m, k) => {
+          const b = k.data.panoIndex;
+          return m[b] || (m[b] = !0), m;
+        }, {}), v = Object.keys(y);
+        for (let m = 0; m < v.length; m++)
+          if (await this.$five.preloadPano(Number(v[m])), !c() || o !== this.loadGeneration) return !1;
       }
-      Object.assign(window, {
-        $vreoController: this.controller
-      });
-      this.controller.setEnded(false);
-      this.controller.setPlaying(true);
-      (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 ? void 0 : _this$controller$vreo.keyframes.forEach(function (keyframe) {
-        if (keyframe.type === VreoKeyframeEnum.BgMusic) {
-          keyframe.parsed = false;
-        }
-      });
-      return true;
-    }
-
-    /**
-     * 设置播放器外观
-     * @param appearance - 外观配置对象
-     * 
-     * @example
-     * ```typescript
-     * player.setAppearance({
-     *   waveStyle: 'solid'
-     * })
-     * ```
-     */
-  }, {
-    key: "setAppearance",
-    value: function setAppearance(appearance) {
-      this.controller.setAppearance(appearance);
-    }
-
-    /**
-     * 暂停播放
-     */
-  }, {
-    key: "pause",
-    value: function pause() {
-      ++this.loadGeneration;
-      this.controller.playback.cancel();
-      this.controller.setLoading(false);
-    }
-
-    /**
-     * 显示播放器界面
-     */
-  }, {
-    key: "show",
-    value: function show() {
-      this.controller.setVisible(true);
-    }
-
-    /**
-     * 隐藏播放器界面
-     */
-  }, {
-    key: "hide",
-    value: function hide() {
-      this.controller.setVisible(false);
+      return this.emit("loaded", e), this.controller.emit("loaded", e), !c() || o !== this.loadGeneration || ((p = this.controller.videoAgentScene) != null && p.videoAgentMesh.mediaOperations && (this.controller.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = n / 1e3), this.controller.setAvatar(e.video.avatar), await kt(), !c() || o !== this.loadGeneration) || (await ((w = this.controller.videoAgentScene) == null ? void 0 : w.videoAgentMesh.play(
+        e.video.url,
+        n / 1e3,
+        e.video.duration
+      )), !c() || o !== this.loadGeneration) ? !1 : (this.controller.setEnded(!1), this.play(void 0, a), this.controller.run((y, v) => this.emit(y, v, this.controller.currentTime)), this.controller.setLoading(!1), !0);
+    } catch (y) {
+      if (!c()) return !1;
+      throw this.controller.playback.cancel(), y;
+    } finally {
+      o === this.loadGeneration && this.controller.setLoading(!1);
     }
-
-    /**
-     * 获取当前播放时间
-     * @returns 当前播放时间（毫秒）
-     */
-  }, {
-    key: "getCurrentTime",
-    value: function getCurrentTime() {
-      return this.controller.currentTime;
-    }
-
-    /**
-     * 销毁播放器实例
-     * 
-     * 清理所有资源、事件监听器和DOM元素
-     */
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      if (this.disposed) return;
-      this.disposed = true;
-      ++this.loadGeneration;
-      this.disposers.forEach(function (dispose) {
-        return dispose();
-      });
-      this.controller.dispose();
-      this.root.unmount();
+  }
+  /**
+   * 获取播放器是否处于暂停状态
+   * @returns 是否暂停中
+   */
+  get paused() {
+    return !this.controller.playing;
+  }
+  /**
+   * 开始播放
+   * 
+   * @param currentTime - 可选的播放起始时间（毫秒）
+   * @returns 是否开始播放成功
+   * 
+   * @example
+   * ```typescript
+   * // 从当前位置播放
+   * player.play()
+   * 
+   * // 从指定时间开始播放
+   * player.play(10000) // 从10秒处开始
+   * ```
+   */
+  play(e, n = !1) {
+    var r, s;
+    if (this.disposed || !this.controller.playback.begin(n)) return !1;
+    if (e !== void 0) {
+      const a = (r = this.controller.videoAgentScene) == null ? void 0 : r.videoAgentMesh.mediaOperations;
+      a && (a.currentTime = e / 1e3), this.controller.seekTimeline(e);
     }
-  }]);
-  return Player;
-}(Subscribe);
-
-// 导出自定义组件
-export { SpatialScenePanel } from "./custom/SpatialScenePanel/index.js";
-console.log("\n    \u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n    \u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n    \u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n    \u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
+    return this.controller.playing || (typeof window < "u" && Object.assign(window, { $vreoController: this.controller }), this.controller.setEnded(!1), this.controller.setPlaying(!0), (s = this.controller.vreoUnit) == null || s.keyframes.forEach((a) => {
+      a.type === P.BgMusic && this.controller.resetTimeline(P.BgMusic);
+    })), !0;
+  }
+  /**
+   * 设置播放器外观
+   * @param appearance - 外观配置对象
+   * 
+   * @example
+   * ```typescript
+   * player.setAppearance({
+   *   waveStyle: 'solid'
+   * })
+   * ```
+   */
+  setAppearance(e) {
+    this.controller.setAppearance(e);
+  }
+  /**
+   * 暂停播放
+   */
+  pause() {
+    ++this.loadGeneration, this.controller.playback.cancel(), this.controller.setLoading(!1);
+  }
+  /**
+   * 显示播放器界面
+   */
+  show() {
+    this.controller.setVisible(!0);
+  }
+  /**
+   * 隐藏播放器界面
+   */
+  hide() {
+    this.controller.setVisible(!1);
+  }
+  /**
+   * 获取当前播放时间
+   * @returns 当前播放时间（毫秒）
+   */
+  getCurrentTime() {
+    return this.controller.currentTime;
+  }
+  /**
+   * 销毁播放器实例
+   * 
+   * 清理所有资源、事件监听器和DOM元素
+   */
+  dispose() {
+    this.disposed || (this.disposed = !0, ++this.loadGeneration, this.disposers.splice(0).forEach((e) => e()), this.controller.dispose(), queueMicrotask(() => this.root.unmount()));
+  }
+}
+console.log(`
+    ┏━━━┓━━━━━━━━━┏┓━━━━━━━━━━━━━
+    ┃┏━┓┃━━━━━━━━━┃┃━━━━━━━━━━━━━
+    ┃┗━┛┃┏━━┓┏━━┓━┃┃━┏━━┓┏━━┓┏━━┓
+    ┃┏┓┏┛┃┏┓┃┗━┓┃━┃┃━┃━━┫┃┏┓┃┃┏┓┃
+    ┃┃┃┗┓┃┃━┫┃┗┛┗┓┃┗┓┣━━┃┃┃━┫┃┃━┫
+    ┗┛┗━┛┗━━┛┗━━━┛┗━┛┗━━┛┗━━┛┗━━┛
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`);
+export {
+  un as Player,
+  dn as SpatialScenePanel
+};
+//# sourceMappingURL=index.js.map