@realsee/vreo 0.1.6 → 0.2.0-alpha.11

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

@@ -0,0 +1,279 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpatialScenePanel = SpatialScenePanel;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _three = require("three");
+
+var _BetterTween = require("@realsee/dnalogel/shared-utils/animationFrame/BetterTween");
+
+var _CSS3DRenderPlugin = require("@realsee/dnalogel/plugins/CSS3DRenderPlugin");
+
+var _VreoUnit = require("../../../typings/VreoUnit");
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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,
+      dom = _ref.dom;
+  var cameraDirection = new _three.Vector3();
+  five.camera.getWorldDirection(cameraDirection);
+  var cameraPosition = five.camera.position;
+
+  var _five$model$intersect = five.model.intersectRaycaster(new _three.Raycaster(cameraPosition, cameraDirection)),
+      _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
+      intersect = _five$model$intersect2[0];
+
+  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';
+  dom.style.top = point.y - height / 2 + 'px';
+  var rect = dom.getBoundingClientRect();
+  var left = rect.left,
+      top = rect.top,
+      bottom = rect.bottom,
+      right = rect.right;
+  var leftBottom = new _three.Vector3(left, bottom);
+  var leftTop = new _three.Vector3(left, top);
+  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 - (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);
+  }); // __debug__
+  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
+  // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
+  // 判断是手机 150
+
+  var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
+  return {
+    points: points,
+    ratio: ratio
+  };
+};
+/**
+ * 空间场景面板
+ * @returns
+ */
+
+
+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));
+  React.useEffect(function () {
+    if (!ref.current) {
+      return;
+    }
+
+    var callback = function callback(keyframe) {
+      if (keyframe.data.customType !== 'SpatialScenePanel') {
+        return;
+      }
+
+      var data = keyframe.data; // const data = mockData
+
+      var _searchV = searchV1({
+        five: props.five,
+        dom: ref.current
+      }),
+          points = _searchV.points,
+          ratio = _searchV.ratio;
+
+      var _ref2 = rendererRef.current.create3DDomContainer(points, {
+        ratio: ratio,
+        autoRender: false
+      }) || {},
+          container = _ref2.container,
+          dispose = _ref2.dispose,
+          css3DObject = _ref2.css3DObject,
+          render = _ref2.render;
+
+      Object.assign(window, {
+        $css3DObject: css3DObject
+      });
+      if (!container) return;
+
+      _reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
+        ref: function ref(_ref3) {
+          return panelRef.current = _ref3;
+        },
+        data: data
+      }), container);
+
+      var startRotateY = -(Math.PI * 2) / 9;
+      var lastRotateY = 0;
+      (0, _BetterTween.tweenProgress)(1000).onUpdate(function (_ref4) {
+        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?.rotateZ
+
+        lastRotateY = needRotateY;
+      }).onStart(function () {
+        css3DObject === null || css3DObject === void 0 ? 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');
+      }).play(); // Object.assign(window, {  $dispose: () => {
+      //   panelRef.current?.classList.add('hide')
+      //   setTimeout(() => dispose?.(), 1500)
+      // } })
+
+      var start = keyframe.start,
+          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');
+        timeoutRef.current = setTimeout(function () {
+          dispose === null || dispose === void 0 ? void 0 : dispose();
+          timeoutRef.current = null;
+        }, 1500);
+      }, end - start);
+    };
+
+    Object.assign(window, {
+      $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", {
+    className: "vreo-SpatialScenePanel",
+    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;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "SpatialScenePanel",
+    ref: myRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "SpatialScenePanel-show-area"
+  }, /*#__PURE__*/React.createElement(SpatialScenePanelBg, null), /*#__PURE__*/React.createElement("div", {
+    className: "SpatialScenePanel-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "SpatialScenePanel-title"
+  }, (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.title), /*#__PURE__*/React.createElement("div", {
+    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) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "scene-".concat(state.text),
+      className: "SpatialScenePanel-item index_".concat(index)
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "SpatialScenePanel-icon",
+      src: state.icon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "SpatialScenePanel-text"
+    }, state.text), /*#__PURE__*/React.createElement("div", {
+      className: "SpatialScenePanel-dot"
+    }));
+  }))), /*#__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,7 +6,7 @@ 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;
     pause(): void;

package/lib/Player/index.js

@@ -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; }
@@ -79,7 +83,23 @@ 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)), configs.containter); // 监听播放情况：抛出触发时机
+    }, /*#__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: {
+          on: function on(name, callback) {
+            return _this.on(name, callback);
+          },
+          once: function once(name, callback) {
+            return _this.once(name, callback);
+          },
+          off: function off(name, callback) {
+            return _this.off(name, callback);
+          }
+        },
+        five: five
+      });
+    })), configs.containter); // 监听播放情况：抛出触发时机
 
     (0, _mobx.reaction)(function () {
       return _this.controller.playing;
@@ -94,9 +114,15 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function () {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$vide,
+            _this$configs$imageOp,
             _this2 = this;
 
         var currentTime,
+            preload,
+            force,
+            panoIndexMap,
+            panoIndexs,
+            i,
             _this$controller$vide2,
             _this$controller$vide3,
             _args = arguments;
@@ -106,31 +132,92 @@ var Player = /*#__PURE__*/function (_Subscribe) {
             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);
-                _context.next = 5;
+                this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
+
+                _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(); // 预载逻辑
+                // 是否降低图片分辨率
+
+                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 (!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 (!vreoUnit.video.url) {
-                  _context.next = 13;
+                  _context.next = 29;
                   break;
                 }
 
@@ -138,19 +225,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 12;
+                _context.next = 28;
                 return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
 
-              case 12:
+              case 28:
                 this.play();
 
-              case 13:
+              case 29:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 15:
+              case 31:
               case "end":
                 return _context.stop();
             }

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

@@ -25,7 +25,7 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
   var _controller$drawerCon2;
 
   var controller = _ref.controller;
-  var maxHeight = '540px';
+  var maxHeight = '400px';
 
   var height = function () {
     var _controller$drawerCon;

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"; 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); }
+
+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,7 @@
 import * as THREE from 'three';
 export interface VideoAgentMeshOptions {
     videoInstance?: HTMLVideoElement;
+    audioInstance?: HTMLAudioElement;
 }
 /**
  * 视频经纪人MESH

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -106,7 +106,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _this.options = options;
     _this.freeze = false;
     _this.paused = true;
-    {
+
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         _this.audioInstance = cacheInstance.audioInstance;
       } else {
@@ -122,7 +123,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
       }
+    } else {
+      _this.audioInstance = options.audioInstance;
     }
+
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });
@@ -247,7 +251,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
-                videoUrl = (videoUrl || '').replace(/https*:/, '');
+                videoUrl = videoUrl || '';
 
                 if (videoUrl) {
                   _context3.next = 10;

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

@@ -6,7 +6,10 @@ export declare class VideoAgentScene {
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
     container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean);
+    constructor(container: HTMLElement, needRender?: boolean, options?: {
+        videoInstance?: HTMLVideoElement;
+        audioInstance?: HTMLAudioElement;
+    });
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -23,6 +23,7 @@ var VideoAgentScene = function VideoAgentScene(container) {
   var _this = this;
 
   var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
   _classCallCheck(this, VideoAgentScene);
 
@@ -35,9 +36,19 @@ var VideoAgentScene = function VideoAgentScene(container) {
   }));
 
   _defineProperty(this, "run", function () {
-    // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+    var _this$videoAgentMesh$;
+
+    var domElement = _this.renderer.domElement; // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+
     if (!(_this.videoAgentMesh.paused || _this.videoAgentMesh.freeze) && _this.videoAgentMesh.currentTime > 1000) {
       _this.renderer.render(_this.scene, _this.camera);
+    } // 兼容非视频场景
+
+
+    if (!((_this$videoAgentMesh$ = _this.videoAgentMesh.videoUrl) !== null && _this$videoAgentMesh$ !== void 0 && _this$videoAgentMesh$.endsWith('.mp4'))) {
+      if (domElement.style.display !== 'none') domElement.style.display = 'none';
+    } else {
+      if (domElement.style.display !== 'block') domElement.style.display = 'block';
     }
 
     requestAnimationFrame(_this.run);
@@ -56,14 +67,18 @@ var VideoAgentScene = function VideoAgentScene(container) {
     width: container.offsetWidth,
     height: container.offsetHeight
   };
-  var domElement = this.renderer.domElement;
-  domElement.classList.add('VideoAgent-canvas');
+  var _domElement = this.renderer.domElement;
+
+  _domElement.classList.add('VideoAgent-canvas');
+
   this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-  domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
+
+  _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
+
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
 
   if (needRender) {
-    container.append(domElement);
+    container.append(_domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare function VideoAgent(props: {
     onClick?: () => void;
+    options?: VideoAgentMeshOptions;
 }): JSX.Element;

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

@@ -28,7 +28,7 @@ function VideoAgent(props) {
       return;
     }
 
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current);
+    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, true, props.options || {});
     controller.videoAgentScene = videoAgentScene;
     return function () {
       var _controller$videoAgen;

package/lib/Player/modules/keyframes/BgMusic/index.d.ts

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