@realsee/vreo 2.6.4-alpha.1 → 2.6.4-alpha.3

package/lib/Player/Controller.js

@@ -1,15 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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; } }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { PlaybackLifecycle } from "./PlaybackLifecycle.js";
 import { Subscribe } from '@realsee/five';
 import { action, makeObservable, observable, reaction } from 'mobx';
 import * as React from 'react';
@@ -42,44 +42,57 @@ import { getMediaType } from "../shared-utils/getMediaInfo.js";
  * ```
  */
 export var Controller = /*#__PURE__*/function (_Subscribe) {
-  _inherits(Controller, _Subscribe);
-  var _super = _createSuper(Controller);
-  /**
-   * 创建 Controller 实例
-   * @param params - 构造参数对象
-   * @param params.five - Five 渲染引擎实例
-   * @param params.container - DOM 容器元素
-   * @param params.configs - 播放器配置
-   */
   function Controller(_ref) {
     var _this;
     var five = _ref.five,
       container = _ref.container,
       configs = _ref.configs;
     _classCallCheck(this, Controller);
-    _this = _super.call(this);
-    _defineProperty(_assertThisInitialized(_this), "playing", false);
-    _defineProperty(_assertThisInitialized(_this), "ended", false);
-    _defineProperty(_assertThisInitialized(_this), "loading", false);
-    _defineProperty(_assertThisInitialized(_this), "containerSize", {
+    _this = _callSuper(this, Controller);
+    _defineProperty(_this, "playing", false);
+    _defineProperty(_this, "ended", false);
+    _defineProperty(_this, "loading", false);
+    // null 表示加载失败
+    _defineProperty(_this, "containerSize", {
       width: 0,
       height: 0
     });
-    _defineProperty(_assertThisInitialized(_this), "waveAppearance", null);
-    _defineProperty(_assertThisInitialized(_this), "appearance", {
+    _defineProperty(_this, "waveAppearance", null);
+    _defineProperty(_this, "appearance", {
       waveStyle: 'wave'
     });
-    _defineProperty(_assertThisInitialized(_this), "avatar", {});
-    _defineProperty(_assertThisInitialized(_this), "waitingForBgMusic", false);
-    _defineProperty(_assertThisInitialized(_this), "visible", false);
-    _defineProperty(_assertThisInitialized(_this), "popUp", null);
-    _defineProperty(_assertThisInitialized(_this), "drawerConfig", null);
+    _defineProperty(_this, "avatar", {});
+    /**
+     * 是否正在等待背景音乐加载
+     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
+     */
+    _defineProperty(_this, "waitingForBgMusic", false);
+    _defineProperty(_this, "visible", false);
+    _defineProperty(_this, "popUp", null);
+    _defineProperty(_this, "drawerConfig", null);
+    /**
+     * 创建 Controller 实例
+     * @param params - 构造参数对象
+     * @param params.five - Five 渲染引擎实例
+     * @param params.container - DOM 容器元素
+     * @param params.configs - 播放器配置
+     */
+    _defineProperty(_this, "resumeGeneration", 0);
+    _defineProperty(_this, "disposers", []);
+    _this.playback = new PlaybackLifecycle(configs.mediaManager, function () {
+      var _this$videoAgentScene;
+      _this.resuming = undefined;
+      ++_this.resumeGeneration;
+      _this.setPlaying(false);
+      (_this$videoAgentScene = _this.videoAgentScene) === null || _this$videoAgentScene === void 0 || _this$videoAgentScene.videoAgentMesh.stop();
+      _this.setWaitingForBgMusic(false);
+    });
     _this.configs = configs;
     _this.container = container;
     _this.five = five;
     _this.appSize = configs.appSize;
     _this.appearance = _objectSpread(_objectSpread({}, _this.appearance), configs.appearance);
-    makeObservable(_assertThisInitialized(_this), {
+    makeObservable(_this, {
       visible: observable,
       setVisible: action,
       playing: observable,
@@ -104,7 +117,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
       waitingForBgMusic: observable,
       setWaitingForBgMusic: action
     });
-    reaction(function () {
+    _this.disposers.push(reaction(function () {
       return [_this.appearance.waveStyle, _this.loading];
     }, function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
@@ -135,9 +148,9 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
       }
     }, {
       fireImmediately: true
-    });
+    }));
     if (!_this.appSize) {
-      reaction(function () {
+      _this.disposers.push(reaction(function () {
         return _this.containerSize;
       }, function (containerSize) {
         if (!(containerSize !== null && containerSize !== void 0 && containerSize.width)) return;
@@ -161,7 +174,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
         });
       }, {
         fireImmediately: true
-      });
+      }));
     } else {
       setElementDataset(_this.container, {
         size: _this.appSize
@@ -169,20 +182,20 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
     }
 
     // 监听播放情况：抛出触发时机
-    reaction(function () {
+    _this.disposers.push(reaction(function () {
       return _this.ended;
     }, function (ended) {
       if (ended) {
         _this.emit('paused', true);
       }
-    });
-    reaction(function () {
+    }));
+    _this.disposers.push(reaction(function () {
       return _this.playing;
     }, function (playing) {
       if (!_this.ended) {
         _this.emit(playing ? 'playing' : 'paused');
       }
-    });
+    }));
     return _this;
   }
 
@@ -190,23 +203,17 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
    * 获取播放器是否准备就绪
    * @returns 是否有可用的视频代理场景
    */
-  _createClass(Controller, [{
+  _inherits(Controller, _Subscribe);
+  return _createClass(Controller, [{
     key: "agentType",
     get:
-    // null 表示加载失败
-
-    /**
-     * 是否正在等待背景音乐加载
-     * 当此状态为 true 时，播放流程会暂停，等待音频加载完成
-     */
-
     /**
      * 获取当前播放媒体的类型
      * @returns 'video' | 'avatar' | 'none' - 媒体类型
      */
     function get() {
-      var _this$videoAgentScene, _this$avatar;
-      var type = getMediaType((_this$videoAgentScene = this.videoAgentScene) === null || _this$videoAgentScene === void 0 ? void 0 : _this$videoAgentScene.videoAgentMesh.videoUrl);
+      var _this$videoAgentScene2, _this$avatar;
+      var type = getMediaType((_this$videoAgentScene2 = this.videoAgentScene) === null || _this$videoAgentScene2 === void 0 ? void 0 : _this$videoAgentScene2.videoAgentMesh.videoUrl);
       if ((_this$avatar = this.avatar) !== null && _this$avatar !== void 0 && _this$avatar.force) return 'avatar';
       if (type === 'video') return 'video';
       return 'none';
@@ -277,7 +284,9 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "setPlaying",
     value: function setPlaying(playing) {
+      if (playing && !this.playback.active) return;
       this.playing = playing;
+      if (playing) this.resumeMedia();
     }
 
     /**
@@ -340,8 +349,8 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "currentTime",
     get: function get() {
-      var _this$videoAgentScene2;
-      return ((_this$videoAgentScene2 = this.videoAgentScene) === null || _this$videoAgentScene2 === void 0 ? void 0 : _this$videoAgentScene2.videoAgentMesh.currentTime) || 0;
+      var _this$videoAgentScene3;
+      return ((_this$videoAgentScene3 = this.videoAgentScene) === null || _this$videoAgentScene3 === void 0 ? void 0 : _this$videoAgentScene3.videoAgentMesh.currentTime) || 0;
     }
 
     /**
@@ -375,8 +384,8 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "mediaInstance",
     get: function get() {
-      var _this$videoAgentScene3;
-      return (_this$videoAgentScene3 = this.videoAgentScene) === null || _this$videoAgentScene3 === void 0 ? void 0 : _this$videoAgentScene3.videoAgentMesh.mediaInstance;
+      var _this$videoAgentScene4;
+      return (_this$videoAgentScene4 = this.videoAgentScene) === null || _this$videoAgentScene4 === void 0 ? void 0 : _this$videoAgentScene4.videoAgentMesh.mediaInstance;
     }
 
     /**
@@ -388,51 +397,75 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "requestAnimationFrameLoop",
     value: function requestAnimationFrameLoop(callback) {
-      var _this$mediaInstance3,
-        _this$mediaInstance6,
+      var _this$mediaInstance2,
         _this3 = this;
       // 如果正在等待背景音乐加载，暂停整个播放流程
       if (this.waitingForBgMusic) {
         var _this$mediaInstance;
         if (!((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.paused)) {
-          var _this$mediaInstance2;
-          (_this$mediaInstance2 = this.mediaInstance) === null || _this$mediaInstance2 === void 0 ? void 0 : _this$mediaInstance2.pause();
+          var _this$videoAgentScene5;
+          (_this$videoAgentScene5 = this.videoAgentScene) === null || _this$videoAgentScene5 === void 0 || (_this$videoAgentScene5 = _this$videoAgentScene5.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene5 === void 0 || _this$videoAgentScene5.pause();
         }
         return;
       }
-      if ((_this$mediaInstance3 = this.mediaInstance) !== null && _this$mediaInstance3 !== void 0 && _this$mediaInstance3.ended && this.mediaInstance.currentTime !== 0) {
-        var _this$vreoUnit;
+      if ((_this$mediaInstance2 = this.mediaInstance) !== null && _this$mediaInstance2 !== void 0 && _this$mediaInstance2.ended && this.mediaInstance.currentTime !== 0) {
+        var _this$vreoUnit, _this$videoAgentScene6;
         if (this.ended) return;
-        (_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 ? void 0 : _this$vreoUnit.keyframes.forEach(function (keyframe) {
+        (_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 || _this$vreoUnit.keyframes.forEach(function (keyframe) {
           return keyframe.parsed = false;
         });
+        var media = (_this$videoAgentScene6 = this.videoAgentScene) === null || _this$videoAgentScene6 === void 0 ? void 0 : _this$videoAgentScene6.videoAgentMesh.mediaOperations;
+        media === null || media === void 0 || media.pause();
+        if (media) media.currentTime = 0;
+        this.playback.finish();
         this.setEnded(true);
         this.setPlaying(false);
-        this.mediaInstance.pause();
-        this.mediaInstance.currentTime = 0;
         return;
       }
       if (!this.playing) {
-        var _this$mediaInstance4;
-        if (!((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused)) {
-          var _this$mediaInstance5;
-          (_this$mediaInstance5 = this.mediaInstance) === null || _this$mediaInstance5 === void 0 ? void 0 : _this$mediaInstance5.pause();
+        var _this$mediaInstance3;
+        if (!((_this$mediaInstance3 = this.mediaInstance) !== null && _this$mediaInstance3 !== void 0 && _this$mediaInstance3.paused)) {
+          var _this$videoAgentScene7;
+          (_this$videoAgentScene7 = this.videoAgentScene) === null || _this$videoAgentScene7 === void 0 || (_this$videoAgentScene7 = _this$videoAgentScene7.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene7 === void 0 || _this$videoAgentScene7.pause();
         }
         return;
       }
-      if ((_this$mediaInstance6 = this.mediaInstance) !== null && _this$mediaInstance6 !== void 0 && _this$mediaInstance6.paused && this.playing) {
-        this.mediaInstance.play();
-      }
+      this.resumeMedia();
       var currentKeyframes = this.currentKeyframes;
+      var run = this.playback.capture();
       currentKeyframes.forEach(function (keyframe) {
-        if (keyframe.parsed) return;
+        if (!(run !== null && run !== void 0 && run.valid()) || keyframe.parsed) return;
         keyframe.parsed = true;
         _this3.emit(keyframe.type, keyframe, _this3.currentTime);
-        if (callback) {
+        if (callback && run.valid()) {
           callback(keyframe.type, keyframe, _this3.currentTime);
         }
       });
     }
+  }, {
+    key: "resumeMedia",
+    value: function resumeMedia() {
+      var _this$mediaInstance4,
+        _this4 = this;
+      if (this.waitingForBgMusic) return;
+      if ((_this$mediaInstance4 = this.mediaInstance) !== null && _this$mediaInstance4 !== void 0 && _this$mediaInstance4.paused && this.playing && !this.resuming) {
+        var _this$videoAgentScene8;
+        var attempt = ++this.resumeGeneration;
+        this.resuming = attempt;
+        var run = this.playback.capture();
+        var valid = function valid() {
+          return !!(run !== null && run !== void 0 && run.valid());
+        };
+        void ((_this$videoAgentScene8 = this.videoAgentScene) === null || _this$videoAgentScene8 === void 0 ? void 0 : _this$videoAgentScene8.videoAgentMesh.play().catch(function (error) {
+          if (valid()) {
+            _this4.playback.cancel();
+            console.error(error);
+          }
+        }).finally(function () {
+          if (_this4.resuming === attempt) _this4.resuming = undefined;
+        }));
+      }
+    }
 
     /**
      * 开始运行播放器逻辑循环
@@ -443,10 +476,10 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "run",
     value: function run(callback) {
-      var _this4 = this;
+      var _this5 = this;
       if (this.stopInterval) return;
       this.stopInterval = requestAnimationFrameInterval(function () {
-        return _this4.requestAnimationFrameLoop(callback);
+        return _this5.requestAnimationFrameLoop(callback);
       });
     }
 
@@ -460,7 +493,7 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
     value: function clear() {
       var _this$vreoUnit2, _this$stopInterval;
       this.setPlaying(false);
-      (_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 ? void 0 : _this$vreoUnit2.keyframes.forEach(function (keyframe) {
+      (_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 || _this$vreoUnit2.keyframes.forEach(function (keyframe) {
         return keyframe.parsed = false;
       });
 
@@ -469,10 +502,11 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
        */
       this.vreoUnit = undefined;
       if (this.mediaInstance) {
-        this.mediaInstance.pause();
-        this.mediaInstance.currentTime = 0;
+        var _this$videoAgentScene9, _this$videoAgentScene0;
+        (_this$videoAgentScene9 = this.videoAgentScene) === null || _this$videoAgentScene9 === void 0 || (_this$videoAgentScene9 = _this$videoAgentScene9.videoAgentMesh.mediaOperations) === null || _this$videoAgentScene9 === void 0 || _this$videoAgentScene9.pause();
+        if ((_this$videoAgentScene0 = this.videoAgentScene) !== null && _this$videoAgentScene0 !== void 0 && _this$videoAgentScene0.videoAgentMesh.mediaOperations) this.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = 0;
       }
-      (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 ? void 0 : _this$stopInterval.call(this);
+      (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 || _this$stopInterval.call(this);
       this.stopInterval = undefined;
     }
 
@@ -484,10 +518,13 @@ export var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "dispose",
     value: function dispose() {
+      this.disposers.splice(0).forEach(function (dispose) {
+        return dispose();
+      });
+      this.playback.dispose();
       this.clear();
     }
   }]);
-  return Controller;
 }(Subscribe);
 var ControllerContext = /*#__PURE__*/React.createContext(null);
 export { ControllerContext };

package/lib/Player/PlaybackLifecycle.d.ts

@@ -0,0 +1,25 @@
+import type { MediaOperations, PlaybackManager, PlaybackSession } from './playback-types';
+export interface PlaybackRun {
+    readonly session?: PlaybackSession;
+    readonly mediaManager?: PlaybackManager;
+    valid(): boolean;
+    bind(element: HTMLMediaElement): MediaOperations;
+}
+/** Local timeline lifetime only. Playback permission is owned by the injected manager. */
+export declare class PlaybackLifecycle {
+    private onStop;
+    private controller?;
+    private run?;
+    private generation;
+    private disposed;
+    private members;
+    constructor(manager: PlaybackManager | undefined, onStop: () => void);
+    get active(): boolean;
+    capture(): PlaybackRun | undefined;
+    begin(userAction: boolean): boolean;
+    add(stop: () => void): () => void;
+    private stop;
+    cancel(): void;
+    finish(): void;
+    dispose(): void;
+}

package/lib/Player/PlaybackLifecycle.js

@@ -0,0 +1,117 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/** Local timeline lifetime only. Playback permission is owned by the injected manager. */
+export var PlaybackLifecycle = /*#__PURE__*/function () {
+  function PlaybackLifecycle(manager, onStop) {
+    var _this = this;
+    _classCallCheck(this, PlaybackLifecycle);
+    _defineProperty(this, "generation", 0);
+    _defineProperty(this, "disposed", false);
+    _defineProperty(this, "members", new Set());
+    this.onStop = onStop;
+    this.controller = manager === null || manager === void 0 ? void 0 : manager.createController({
+      label: 'vreo',
+      onCancel: function onCancel() {
+        return _this.stop();
+      }
+    });
+  }
+  return _createClass(PlaybackLifecycle, [{
+    key: "active",
+    get: function get() {
+      var _this$run;
+      return !!((_this$run = this.run) !== null && _this$run !== void 0 && _this$run.valid());
+    }
+  }, {
+    key: "capture",
+    value: function capture() {
+      return this.run;
+    }
+  }, {
+    key: "begin",
+    value: function begin(userAction) {
+      var _this$controller$begi,
+        _this$controller,
+        _this2 = this;
+      if (this.disposed) return false;
+      if (this.active) return true;
+      var session = (_this$controller$begi = (_this$controller = this.controller) === null || _this$controller === void 0 ? void 0 : _this$controller.begin({
+        userAction: userAction,
+        audible: true
+      })) !== null && _this$controller$begi !== void 0 ? _this$controller$begi : undefined;
+      if (this.controller && !session) return false;
+      var generation = ++this.generation;
+      var mediaManager = session === null || session === void 0 ? void 0 : session.mediaManager;
+      this.run = {
+        session: session,
+        mediaManager: mediaManager,
+        valid: function valid() {
+          return generation === _this2.generation && !_this2.disposed && !(session !== null && session !== void 0 && session.signal.aborted);
+        },
+        bind: function bind(element) {
+          return session ? session.bind(element) : element;
+        }
+      };
+      return true;
+    }
+  }, {
+    key: "add",
+    value: function add(stop) {
+      var _this3 = this;
+      this.members.add(stop);
+      return function () {
+        _this3.members.delete(stop);
+      };
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      ++this.generation;
+      this.run = undefined;
+      var errors = [];
+      try {
+        this.onStop();
+      } catch (error) {
+        errors.push(error);
+      }
+      for (var _i = 0, _arr = _toConsumableArray(this.members); _i < _arr.length; _i++) {
+        var _stop = _arr[_i];
+        try {
+          _stop();
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      if (errors.length) throw errors[0];
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      var _this$controller2;
+      var generation = this.generation;
+      (_this$controller2 = this.controller) === null || _this$controller2 === void 0 || _this$controller2.cancel();
+      if (generation === this.generation) this.stop();
+    }
+  }, {
+    key: "finish",
+    value: function finish() {
+      var _this$run2;
+      var session = (_this$run2 = this.run) === null || _this$run2 === void 0 ? void 0 : _this$run2.session;
+      this.stop();
+      session === null || session === void 0 || session.finish();
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this$controller3;
+      if (this.disposed) return;
+      this.disposed = true;
+      var generation = this.generation;
+      (_this$controller3 = this.controller) === null || _this$controller3 === void 0 || _this$controller3.dispose();
+      if (generation === this.generation) this.stop();
+      this.members.clear();
+    }
+  }]);
+}();

package/lib/Player/custom/SpatialScenePanel/index.js

@@ -4,7 +4,30 @@ import { createRoot } from 'react-dom/client';
 import { Raycaster, Vector3 } from 'three';
 import { tweenProgress } from "../../../shared-utils/animationFrame/BetterTween.js";
 import { CSS3DRenderPlugin } from "../../../fivePlugins/CSS3DRenderPlugin/index.js";
-import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js";
+import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js"; // __debug__
+// const mockData: SpatialScenePanelData = {
+//   customType: 'SpatialScenePanel',
+//   "stateList": [
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___fc42f951076607a22fd5c54f005ba553.png",
+//       "text": "窗帘关闭"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___b331e7ad732debc07250a169a3393b13.png",
+//       "text": "摄像头休眠"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___2e425a81ac0ad88232d50d4e52a9abfa.png",
+//       "text": "氛围音乐"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___bff48bb81cde37aa6a319d6f5d56e3a4.png",
+//       "text": "空调打开"
+//     }
+//   ],
+//   "temperature": "27",
+//   "title": "沉浸式回家"
+// }
 // const getSphere = (position: Vector3, color = 0xffff00) => {
 //   const geometry = new SphereGeometry(0.05, 32, 16)
 //   const material = new MeshBasicMaterial({ color })
@@ -95,7 +118,7 @@ export function SpatialScenePanel(props) {
       });
       if (!container) return;
       var root = createRoot(container);
-      root.render( /*#__PURE__*/React.createElement(Panel, {
+      root.render(/*#__PURE__*/React.createElement(Panel, {
         ref: function ref(_ref3) {
           return panelRef.current = _ref3;
         },
@@ -107,15 +130,15 @@ export function SpatialScenePanel(props) {
         var progress = _ref4.progress;
         var needRotateY = Math.PI / 90 * 11 * progress;
         var rotateY = needRotateY - lastRotateY;
-        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
+        css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(rotateY);
         // css3DObject?.rotateZ
         lastRotateY = needRotateY;
       }).onStart(function () {
-        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
+        css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(startRotateY);
         render();
       }).onDispose(function () {
         var _panelRef$current;
-        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
+        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.classList.add('show');
       }).play();
 
       // Object.assign(window, {  $dispose: () => {
@@ -127,9 +150,9 @@ export function SpatialScenePanel(props) {
         end = keyframe.end;
       timeoutRef.current = setTimeout(function () {
         var _panelRef$current2;
-        (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
+        (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 || _panelRef$current2.classList.add('hide');
         timeoutRef.current = setTimeout(function () {
-          dispose === null || dispose === void 0 ? void 0 : dispose();
+          dispose === null || dispose === void 0 || dispose();
           timeoutRef.current = null;
         }, 1500);
       }, end - start);
@@ -161,10 +184,10 @@ function SpatialScenePanelBg() {
     if (!ref.current) return;
     var listener = function listener() {
       var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
       timeoutRef.current = setTimeout(function () {
         var _ref$current2;
-        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
         timeoutRef.current = null;
       }, 3000);
     };
@@ -180,7 +203,7 @@ function SpatialScenePanelBg() {
   });
 }
 var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
-  var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
+  var _props$data, _props$data2, _props$data3;
   return /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel",
     ref: myRef
@@ -194,7 +217,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
     className: "SpatialScenePanel-temperature"
   }, (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.temperature, "\u2103")), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-body"
-  }, (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : (_props$data3$stateLis = _props$data3.stateList) === null || _props$data3$stateLis === void 0 ? void 0 : _props$data3$stateLis.map(function (state, index) {
+  }, (_props$data3 = props.data) === null || _props$data3 === void 0 || (_props$data3 = _props$data3.stateList) === null || _props$data3 === void 0 ? void 0 : _props$data3.map(function (state, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "scene-".concat(state.text),
       className: "SpatialScenePanel-item index_".concat(index)

package/lib/Player/index.d.ts

@@ -29,6 +29,11 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
     $five: Five;
     /** 内部控制器 */
     private controller;
+    private root;
+    private disposers;
+    private loadGeneration;
+    private disposed;
+    getMediaManager(): import("./playback-types").PlaybackManager | undefined;
     /** 播放器配置（只读） */
     configs: Readonly<PlayerConfigs>;
     /**
@@ -61,7 +66,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
      * await player.load(vreoUnit, 0, false, true)
      * ```
      */
-    load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean): Promise<boolean>;
+    load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean, userAction?: boolean): Promise<boolean>;
     /**
      * 获取播放器是否处于暂停状态
      * @returns 是否暂停中
@@ -82,7 +87,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
      * player.play(10000) // 从10秒处开始
      * ```
      */
-    play(currentTime?: number): boolean;
+    play(currentTime?: number, userAction?: boolean): boolean;
     /**
      * 设置播放器外观
      * @param appearance - 外观配置对象