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

package/lib/Player/index.js

@@ -1,16 +1,17 @@
 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 _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";
 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; } }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+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 * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { Subscribe } from '@realsee/five';
 import { App } from "./App.js";
@@ -48,14 +49,6 @@ var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 =
  * ```
  */
 export var Player = /*#__PURE__*/function (_Subscribe) {
-  _inherits(Player, _Subscribe);
-  var _super = _createSuper(Player);
-  /** Five 渲染引擎实例 */
-
-  /** 内部控制器 */
-
-  /** 播放器配置（只读） */
-
   /**
    * 创建 Vreo 播放器实例
    * 
@@ -66,7 +59,12 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
     var _this;
     var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     _classCallCheck(this, Player);
-    _this = _super.call(this);
+    _this = _callSuper(this, Player);
+    /** Five 渲染引擎实例 */
+    /** 内部控制器 */
+    _defineProperty(_this, "disposers", []);
+    _defineProperty(_this, "loadGeneration", 0);
+    _defineProperty(_this, "disposed", false);
     _this.$five = five;
     generateBlankAudio(audioCacheLength);
     if (!configs.container) {
@@ -97,8 +95,8 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
       container: configs.container,
       configs: _this.configs
     });
-    var root = createRoot(configs.container);
-    root.render( /*#__PURE__*/React.createElement(ControllerContext.Provider, {
+    _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, {
@@ -114,25 +112,28 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
             return _this.off(name, callback);
           }
         },
-        five: five
+        five: five,
+        getMediaManager: function getMediaManager() {
+          return _this.getMediaManager();
+        }
       });
     })));
 
     // 监听播放情况：抛出触发时机
-    reaction(function () {
+    _this.disposers.push(reaction(function () {
       return _this.controller.ended;
     }, function (ended) {
       if (ended) {
         _this.emit('paused', true);
       }
-    });
-    reaction(function () {
+    }));
+    _this.disposers.push(reaction(function () {
       return _this.controller.playing;
     }, function (playing) {
       if (!_this.controller.ended) {
         _this.emit(playing ? 'playing' : 'paused');
       }
-    });
+    }));
     return _this;
   }
 
@@ -159,116 +160,179 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
    * await player.load(vreoUnit, 0, false, true)
    * ```
    */
-  _createClass(Player, [{
+  _inherits(Player, _Subscribe);
+  return _createClass(Player, [{
+    key: "getMediaManager",
+    value: 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 _this$controller$medi,
-          _this$configs$imageOp,
-          _this$controller$vide,
-          _this$controller$vide2,
-          _this2 = this;
+    value: (function () {
+      var _load = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(vreoUnit) {
+        var _this2 = this;
         var currentTime,
           preload,
           force,
+          userAction,
+          generation,
+          run,
+          valid,
+          _this$controller$vide,
+          _this$configs$imageOp,
+          _this$controller$vide2,
+          _this$controller$vide3,
           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;
-                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)
-                //     })
-                // }
+          _args = arguments,
+          _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            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.n = 1;
+                break;
+              }
+              return _context.a(2, false);
+            case 1:
+              run = this.controller.playback.capture();
+              valid = function valid() {
+                return run.valid();
+              };
+              _context.p = 2;
+              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$medi = this.controller.mediaInstance) === null || _this$controller$medi === void 0 ? void 0 : _this$controller$medi.pause();
+              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 || (_this$controller$vide = _this$controller$vide.videoAgentMesh.mediaOperations) === null || _this$controller$vide === void 0 || _this$controller$vide.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 (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 = 20;
-                  break;
+              // 预载数据中的点位
+              if (!(preload || preload === undefined && this.configs.autoPreload)) {
+                _context.n = 6;
+                break;
+              }
+              panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
+                if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+                  return false;
                 }
-                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 14:
-                if (!(i < panoIndexes.length)) {
-                  _context.next = 20;
-                  break;
+                var data = vreoKeyframe.data;
+                if (data.panoIndex === undefined) {
+                  return false;
                 }
-                _context.next = 17;
-                return this.$five.preloadPano(Number(panoIndexes[i]));
-              case 17:
-                i++;
-                _context.next = 14;
-                break;
-              case 20:
-                // 新数据载入就绪
-                this.emit('loaded', vreoUnit);
-                this.controller.emit('loaded', vreoUnit);
-                if ((_this$controller$vide = this.controller.videoAgentScene) !== null && _this$controller$vide !== void 0 && _this$controller$vide.videoAgentMesh.mediaInstance) {
-                  this.controller.videoAgentScene.videoAgentMesh.mediaInstance.currentTime = currentTime / 1000;
+                return true;
+              }).reduce(function (accu, curr) {
+                var panoIndex = curr.data.panoIndex;
+                if (!accu[panoIndex]) {
+                  accu[panoIndex] = true;
                 }
-                this.controller.setAvatar(vreoUnit.video.avatar);
-                _context.next = 26;
-                return waitForBlankAudioGenerated();
-              case 26:
-                _context.next = 28;
-                return (_this$controller$vide2 = this.controller.videoAgentScene) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
-              case 28:
-                this.controller.setEnded(false);
-                this.play();
-                this.controller.run(function (type, keyframe) {
-                  return _this2.emit(type, keyframe, _this2.controller.currentTime);
-                });
-                this.controller.setLoading(false);
-                return _context.abrupt("return", true);
-              case 33:
-              case "end":
-                return _context.stop();
-            }
+                return accu;
+              }, {});
+              panoIndexes = Object.keys(panoIndexMap);
+              i = 0;
+            case 3:
+              if (!(i < panoIndexes.length)) {
+                _context.n = 6;
+                break;
+              }
+              _context.n = 4;
+              return this.$five.preloadPano(Number(panoIndexes[i]));
+            case 4:
+              if (!(!valid() || generation !== this.loadGeneration)) {
+                _context.n = 5;
+                break;
+              }
+              return _context.a(2, false);
+            case 5:
+              i++;
+              _context.n = 3;
+              break;
+            case 6:
+              // 新数据载入就绪
+              this.emit('loaded', vreoUnit);
+              this.controller.emit('loaded', vreoUnit);
+              if (!(!valid() || generation !== this.loadGeneration)) {
+                _context.n = 7;
+                break;
+              }
+              return _context.a(2, false);
+            case 7:
+              if ((_this$controller$vide2 = this.controller.videoAgentScene) !== null && _this$controller$vide2 !== void 0 && _this$controller$vide2.videoAgentMesh.mediaOperations) {
+                this.controller.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = currentTime / 1000;
+              }
+              this.controller.setAvatar(vreoUnit.video.avatar);
+              _context.n = 8;
+              return waitForBlankAudioGenerated();
+            case 8:
+              if (!(!valid() || generation !== this.loadGeneration)) {
+                _context.n = 9;
+                break;
+              }
+              return _context.a(2, false);
+            case 9:
+              _context.n = 10;
+              return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
+            case 10:
+              if (!(!valid() || generation !== this.loadGeneration)) {
+                _context.n = 11;
+                break;
+              }
+              return _context.a(2, false);
+            case 11:
+              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.a(2, true);
+            case 12:
+              _context.p = 12;
+              _t = _context.v;
+              if (valid()) {
+                _context.n = 13;
+                break;
+              }
+              return _context.a(2, false);
+            case 13:
+              this.controller.playback.cancel();
+              throw _t;
+            case 14:
+              _context.p = 14;
+              if (generation === this.loadGeneration) this.controller.setLoading(false);
+              return _context.f(14);
+            case 15:
+              return _context.a(2);
           }
-        }, _callee, this);
+        }, _callee, this, [[2, 12, 14, 15]]);
       }));
       function load(_x) {
         return _load.apply(this, arguments);
@@ -279,6 +343,7 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
      * 获取播放器是否处于暂停状态
      * @returns 是否暂停中
      */
+    )
   }, {
     key: "paused",
     get: function get() {
@@ -303,17 +368,19 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "play",
     value: function play(currentTime) {
-      var _this$controller$vreo;
+      var _this$controller$vide4, _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.mediaInstance) {
-        this.controller.mediaInstance.currentTime = currentTime / 1000;
+      if (currentTime && (_this$controller$vide4 = this.controller.videoAgentScene) !== null && _this$controller$vide4 !== void 0 && _this$controller$vide4.videoAgentMesh.mediaOperations) {
+        this.controller.videoAgentScene.videoAgentMesh.mediaOperations.currentTime = currentTime / 1000;
       }
       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) {
+      (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 || _this$controller$vreo.keyframes.forEach(function (keyframe) {
         if (keyframe.type === VreoKeyframeEnum.BgMusic) {
           keyframe.parsed = false;
         }
@@ -344,7 +411,9 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "pause",
     value: function pause() {
-      this.controller.setPlaying(false);
+      ++this.loadGeneration;
+      this.controller.playback.cancel();
+      this.controller.setLoading(false);
     }
 
     /**
@@ -383,13 +452,16 @@ export var Player = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "dispose",
     value: function dispose() {
+      if (this.disposed) return;
+      this.disposed = true;
+      ++this.loadGeneration;
+      this.disposers.forEach(function (dispose) {
+        return dispose();
+      });
       this.controller.dispose();
-      if (this.configs.container) {
-        ReactDOM.unmountComponentAtNode(this.configs.container);
-      }
+      this.root.unmount();
     }
   }]);
-  return Player;
 }(Subscribe);
 
 // 导出自定义组件

package/lib/Player/modules/Drawer/index.js

@@ -6,8 +6,7 @@ var DrawerView = observer(function (_ref) {
   var _controller$drawerCon2;
   var controller = _ref.controller;
   var maxHeight = '400px';
-  var height = function () {
-    var _controller$drawerCon;
+  var height = function (_controller$drawerCon) {
     var height = (_controller$drawerCon = controller.drawerConfig) === null || _controller$drawerCon === void 0 ? void 0 : _controller$drawerCon.height;
     if (!height) {
       return 'max-content';

package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts

@@ -1,9 +1,12 @@
+import type { PlaybackRun } from '../../PlaybackLifecycle';
+import type { MediaOperations } from '../../playback-types';
 import * as THREE from 'three';
 import AudioLike from '../../../shared-utils/AudioLike';
 /**
  * 视频经纪人贴片的配置选项
  */
 export interface VideoAgentMeshOptions {
+    getPlayback?: () => PlaybackRun | undefined;
     /**
      * 自定义视频实例。
      */
@@ -58,6 +61,13 @@ export declare class VideoAgentMesh extends THREE.Mesh {
     /** 是否暂停状态 */
     paused: boolean;
     /** 音频实例 */
+    private outputs;
+    private operations;
+    private ownsVideo;
+    private ownsAudio;
+    private generation;
+    private removeStart?;
+    private objectURL?;
     audioInstance: HTMLAudioElement;
     /** AudioLike 实例 */
     audioLikeInstance: AudioLike;
@@ -125,7 +135,9 @@ export declare class VideoAgentMesh extends THREE.Mesh {
      * await mesh.play()
      * ```
      */
-    play(videoUrl?: string, currentTime?: number, duration?: number): Promise<unknown>;
+    play(videoUrl?: string, currentTime?: number, duration?: number): Promise<boolean>;
+    get mediaOperations(): MediaOperations | AudioLike | undefined;
+    stop(): void;
     /**
      * 获取当前播放时间（毫秒）
      *