@realsee/vreo 0.2.0-alpha.2 → 0.2.0-alpha.20

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,9 +13,9 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _three = require("three");
 
-var _BetterTween = require("@realsee/dnalogel/shared-utils/animationFrame/BetterTween");
+var _BetterTween = require("../../../shared-utils/animationFrame/BetterTween");
 
-var _CSS3DRenderPlugin = require("@realsee/dnalogel/plugins/CSS3DRenderPlugin");
+var _CSS3DRenderPlugin = require("../../../fivePlugins/CSS3DRenderPlugin");
 
 var _VreoUnit = require("../../../typings/VreoUnit");
 
@@ -37,10 +37,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// const getSphere = (position: Vector3, color = 0xffff00) => {
+//   const geometry = new SphereGeometry(0.05, 32, 16)
+//   const material = new MeshBasicMaterial({ color })
+//   const sphere = new Mesh(geometry, material)
+//   sphere.position.copy(position)
+//   return sphere
+// }
 var searchV1 = function searchV1(_ref) {
   var five = _ref.five,
-      position = _ref.position,
-      rotation = _ref.rotation,
       dom = _ref.dom;
   var cameraDirection = new _three.Vector3();
   five.camera.getWorldDirection(cameraDirection);
@@ -50,7 +55,8 @@ var searchV1 = function searchV1(_ref) {
       _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
       intersect = _five$model$intersect2[0];
 
-  var point = five.project2d(intersect.point); // const width = dom!.clientWidth
+  var point = five.project2d(intersect.point);
+  var widescreen = window.innerWidth > 560 ? true : false; // const width = dom!.clientWidth
 
   var height = dom.clientHeight;
   dom.style.left = point.x + 'px';
@@ -65,14 +71,16 @@ var searchV1 = function searchV1(_ref) {
   var rightTop = new _three.Vector3(right, top);
   var rightBottom = new _three.Vector3(right, bottom);
   var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
-    point.setX(point.x / window.innerWidth * 2 - 1);
-    point.setY(-(point.y / window.innerHeight) * 2 + 1);
+    point.setX(point.x / window.innerWidth * 2 - (widescreen ? 1.25 : 1.75));
+    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
     point.setZ(0.5);
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
-  }); // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
+  }); // __debug__
+  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
+  // 判断是手机 150
 
-  var ratio = leftBottom.distanceTo(rightBottom) / 160;
+  var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
   return {
     points: points,
     ratio: ratio
@@ -85,6 +93,7 @@ var searchV1 = function searchV1(_ref) {
 
 
 function SpatialScenePanel(props) {
+  var timeoutRef = React.useRef(null);
   var ref = React.useRef(null);
   var panelRef = React.useRef(null);
   var rendererRef = React.useRef((0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(props.five));
@@ -98,19 +107,15 @@ function SpatialScenePanel(props) {
         return;
       }
 
-      var data = keyframe.data; // const data = mockData as SpatialScenePanelData
+      var data = keyframe.data; // const data = mockData
 
       var _searchV = searchV1({
         five: props.five,
-        position: new _three.Vector3(data.position.x, data.position.y, data.position.z),
-        quaternion: data.quaternion,
         dom: ref.current
       }),
           points = _searchV.points,
           ratio = _searchV.ratio;
 
-      console.log(points, ratio);
-
       var _ref2 = rendererRef.current.create3DDomContainer(points, {
         ratio: ratio,
         autoRender: false
@@ -120,6 +125,9 @@ function SpatialScenePanel(props) {
           css3DObject = _ref2.css3DObject,
           render = _ref2.render;
 
+      Object.assign(window, {
+        $css3DObject: css3DObject
+      });
       if (!container) return;
 
       _reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
@@ -135,7 +143,8 @@ 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 ? void 0 : css3DObject.rotateY(rotateY); // css3DObject?.rotateZ
+
         lastRotateY = needRotateY;
       }).onStart(function () {
         css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
@@ -144,25 +153,35 @@ function SpatialScenePanel(props) {
         var _panelRef$current;
 
         (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
-      }).play();
+      }).play(); // Object.assign(window, {  $dispose: () => {
+      //   panelRef.current?.classList.add('hide')
+      //   setTimeout(() => dispose?.(), 1500)
+      // } })
+
       var start = keyframe.start,
           end = keyframe.end;
-      setTimeout(function () {
+      timeoutRef.current = setTimeout(function () {
         var _panelRef$current2;
 
         (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
-        setTimeout(function () {
-          return dispose === null || dispose === void 0 ? void 0 : dispose();
+        timeoutRef.current = setTimeout(function () {
+          dispose === null || dispose === void 0 ? void 0 : dispose();
+          timeoutRef.current = null;
         }, 1500);
       }, end - start);
     };
 
     Object.assign(window, {
-      $SpatialScenePanelCallback: callback
-    });
+      $callback: callback
+    }); // setTimeout(() => {callback()}, 8000)
+
     props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
     return function () {
       props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -170,6 +189,38 @@ function SpatialScenePanel(props) {
     ref: ref
   });
 }
+/** 背景动画：控制延迟 */
+
+
+function SpatialScenePanelBg() {
+  var ref = React.useRef(null);
+  var timeoutRef = React.useRef(null);
+  React.useEffect(function () {
+    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');
+      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');
+        timeoutRef.current = null;
+      }, 3000);
+    };
+
+    ref.current.addEventListener('animationend', listener);
+    return function () {
+      if (ref.current) ref.current.removeEventListener('animationend', listener);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation"
+  });
+}
 
 var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
@@ -179,9 +230,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
     ref: myRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-show-area"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-bg"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SpatialScenePanelBg, null), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-title"
@@ -204,4 +253,27 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-disappear-area"
   }));
-});
+}); // export function SpatialScenePanel() {
+//   // const data = mockData
+//   return (
+//     <div className="SpatialScenePanel" >
+//     <div className="SpatialScenePanel-show-area">
+//       <SpatialScenePanelBg />
+//       <div className="SpatialScenePanel-header">
+//         <div className="SpatialScenePanel-title">{data?.title}</div>
+//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
+//       </div>
+//       <div className="SpatialScenePanel-body">
+//         {data?.stateList?.map((state, index) => (
+//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
+//             <div className="SpatialScenePanel-text">{state.text}</div>
+//             <div className="SpatialScenePanel-dot"></div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//     <div className="SpatialScenePanel-disappear-area"></div>
+//   </div>
+//   )
+// }

package/lib/Player/index.d.ts

@@ -6,11 +6,12 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
     private controller;
     configs: Readonly<PlayerConfigs>;
     constructor(five: Five, configs?: Partial<PlayerConfigs>);
-    load(vreoUnit: VreoUnit, currentTime?: number): Promise<boolean>;
+    load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean): Promise<boolean>;
     get paused(): boolean;
-    play(): boolean;
+    play(currentTime?: number): boolean;
     pause(): void;
     show(): void;
     hide(): void;
+    getCurrentTime(): number;
     dispose(): void;
 }

package/lib/Player/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -17,10 +17,14 @@ var _App = require("./App");
 
 var _Controller = require("./Controller");
 
+var _VreoUnit = require("../typings/VreoUnit");
+
 var _mobx = require("mobx");
 
 var _Drawer = require("./modules/Drawer");
 
+var _PopUp = require("./modules/PopUp");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,9 +37,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -66,11 +70,20 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     _this.$five = _this.controller.$five = five;
 
     if (!configs.containter) {
-      var containter = document.querySelector('#vreo-app') || document.createElement('div');
+      var _five$getElement;
+
+      var containter = document.getElementById('vreo-app') || document.createElement('div');
       ReactDOM.unmountComponentAtNode(containter);
       containter.setAttribute('id', 'vreo-app');
       configs.containter = containter;
-      document.body.append(containter);
+      var fiveCanvasDomParent = (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : _five$getElement.parentNode;
+
+      if (fiveCanvasDomParent) {
+        fiveCanvasDomParent.append(containter);
+      } else {
+        document.body.append(containter);
+      } // document.body.append(containter)
+
     }
 
     _this.configs = Object.freeze(Object.assign({
@@ -79,7 +92,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     _this.controller.configs = _this.configs;
     ReactDOM.render( /*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
       value: _this.controller
-    }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
+    }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null), /*#__PURE__*/React.createElement(_PopUp.PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
       return /*#__PURE__*/React.createElement(CustomCmpt, {
         key: key,
         subscribe: {
@@ -97,10 +110,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
       });
     })), configs.containter); // 监听播放情况：抛出触发时机
 
+    (0, _mobx.reaction)(function () {
+      return _this.controller.ended;
+    }, function (ended) {
+      if (ended) {
+        _this.emit('paused', true);
+      }
+    });
     (0, _mobx.reaction)(function () {
       return _this.controller.playing;
     }, function (playing) {
-      _this.emit(playing ? 'playing' : 'paused');
+      if (!_this.controller.ended) {
+        _this.emit(playing ? 'playing' : 'paused');
+      }
     });
     return _this;
   }
@@ -110,66 +132,123 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function () {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$vide,
+            _this$configs$imageOp,
+            _this$controller$vide2,
+            _this$controller$vide3,
             _this2 = this;
 
         var currentTime,
-            _this$controller$vide2,
-            _this$controller$vide3,
+            preload,
+            force,
+            panoIndexMap,
+            panoIndexs,
+            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;
+
+                if (force) {
+                  vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
+                }
 
                 if (this.controller.visible) {
-                  _context.next = 5;
+                  _context.next = 8;
                   break;
                 }
 
                 this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
 
-                _context.next = 5;
+                _context.next = 8;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
 
-              case 5:
+              case 8:
                 if (this.controller.stopInterval) {
                   this.controller.stopInterval();
                   this.controller.stopInterval = undefined;
                 }
 
                 this.controller.vreoUnit = vreoUnit;
-                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 新数据载入就绪
+                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 预载逻辑
+                // 是否降低图片分辨率
 
-                this.emit('loaded', vreoUnit);
+                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 = 22;
+                  break;
+                }
+
+                panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
+                  if (vreoKeyframe.type !== _VreoUnit.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 (!vreoUnit.video.url) {
-                  _context.next = 14;
+                  if (!accu[panoIndex]) {
+                    accu[panoIndex] = true;
+                  }
+
+                  return accu;
+                }, {});
+                panoIndexs = Object.keys(panoIndexMap);
+                i = 0;
+
+              case 16:
+                if (!(i < panoIndexs.length)) {
+                  _context.next = 22;
                   break;
                 }
 
+                _context.next = 19;
+                return this.$five.preloadPano(Number(panoIndexs[i]));
+
+              case 19:
+                i++;
+                _context.next = 16;
+                break;
+
+              case 22:
+                // 新数据载入就绪
+                this.emit('loaded', vreoUnit);
+                this.controller.emit('loaded', vreoUnit);
+
                 if ((_this$controller$vide2 = this.controller.videoAgentScene) !== null && _this$controller$vide2 !== void 0 && _this$controller$vide2.videoAgentMesh.videoInstance) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 13;
-                return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
+                _context.next = 27;
+                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 13:
+              case 27:
+                this.controller.setEnded(false);
                 this.play();
-
-              case 14:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 16:
+              case 31:
               case "end":
                 return _context.stop();
             }
@@ -190,8 +269,16 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     }
   }, {
     key: "play",
-    value: function play() {
+    value: function play(currentTime) {
       if (this.controller.playing) return true;
+
+      if (currentTime && this.controller.videoInstance) {
+        this.controller.videoInstance.currentTime = currentTime / 1000;
+      }
+
+      Object.assign(window, {
+        $vreoController: this.controller
+      });
       this.controller.setPlaying(true);
       return true;
     }
@@ -210,6 +297,11 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function hide() {
       this.controller.setVisible(false);
     }
+  }, {
+    key: "getCurrentTime",
+    value: function getCurrentTime() {
+      return this.controller.currentTime;
+    }
   }, {
     key: "dispose",
     value: function dispose() {

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/Player/modules/PopUp/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PopUp(): JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopUp = PopUp;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _mobxReact = require("mobx-react");
+
+var _hooks = require("../../hooks");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PopUpView = (0, _mobxReact.observer)(function (_ref) {
+  var controller = _ref.controller;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])('vreo-PopUp', {
+      'vreo-PopUp-visible': controller.popUp
+    }),
+    onClick: function onClick() {
+      return controller.openPopUp(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-PopUp-inner"
+  }, controller.popUp || ''));
+});
+
+function PopUp() {
+  var controller = (0, _hooks.useController)();
+  return /*#__PURE__*/React.createElement(PopUpView, {
+    controller: controller
+  });
+}

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

@@ -1,6 +1,20 @@
 import * as THREE from 'three';
+import AudioLike from '../../../shared-utils/AduioLike';
 export interface VideoAgentMeshOptions {
+    /**
+     * 自定义视频实例。
+     */
     videoInstance?: HTMLVideoElement;
+    /**
+     * 自定义音频实例。
+     */
+    audioInstance?: HTMLAudioElement;
+    /**
+     * 是否开启音频预载能力。**仅对`.mp3`有效**。
+     *
+     * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音频文件下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音（`muted` 为 `false`，但是没有声音）。
+     */
+    preload?: boolean;
 }
 /**
  * 视频经纪人MESH
@@ -11,8 +25,9 @@ export declare class VideoAgentMesh extends THREE.Mesh {
     freeze: boolean;
     paused: boolean;
     audioInstance: HTMLAudioElement;
+    audioLikeInstance: AudioLike;
     $removeEventListener: () => void;
-    get videoInstance(): HTMLAudioElement;
+    get videoInstance(): HTMLAudioElement | AudioLike;
     /**
      *
      * @param width
@@ -23,7 +38,7 @@ export declare class VideoAgentMesh extends THREE.Mesh {
      */
     constructor(width: number, height: number, widthSegments: number, heightSegments: number, options?: VideoAgentMeshOptions);
     private update;
-    play(videoUrl?: string): Promise<unknown>;
+    play(videoUrl?: string, currentTime?: number, duration?: number): Promise<unknown>;
     /**
      * 转成毫秒，保障精准度
      */