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

package/lib/Player/modules/VideoAgent/VideoAgentMesh.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,6 +13,10 @@ var _Preloader = require("../../../shared-utils/Preloader");
 
 var _mobx = require("mobx");
 
+var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
+
+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; }
@@ -25,9 +29,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,9 +70,13 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
    * @param options
    */
   function VideoAgentMesh(width, height, widthSegments, heightSegments) {
+    var _this$options$videoIn, _this$options$videoIn2, _this$options$videoIn3;
+
     var _this;
 
-    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+      preload: true
+    };
 
     _classCallCheck(this, VideoAgentMesh);
 
@@ -106,7 +114,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 +131,11 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
       }
+    } else {
+      _this.audioInstance = options.audioInstance;
     }
+
+    _this.audioLikeInstance = new _AduioLike["default"]();
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });
@@ -141,14 +154,38 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       return updatePaused(false);
     };
 
-    _this.videoInstance.addEventListener('pause', onPause);
+    var onEnded = function onEnded() {
+      console.log('vreo: video 播放结束');
+    };
+
+    _this.audioInstance.addEventListener('pause', onPause);
+
+    _this.audioInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn = _this.options.videoInstance) === null || _this$options$videoIn === void 0 ? void 0 : _this$options$videoIn.addEventListener('pause', onPause);
+    (_this$options$videoIn2 = _this.options.videoInstance) === null || _this$options$videoIn2 === void 0 ? void 0 : _this$options$videoIn2.addEventListener('play', onPlay);
+
+    _this.audioLikeInstance.addEventListener('pause', onPause);
 
-    _this.videoInstance.addEventListener('play', onPlay);
+    _this.audioLikeInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.addEventListener('ended', onEnded);
 
     _this.$removeEventListener = function () {
-      _this.videoInstance.removeEventListener('pause', onPause);
+      var _this$options$videoIn4, _this$options$videoIn5, _this$options$videoIn6;
+
+      _this.audioInstance.removeEventListener('pause', onPause);
+
+      _this.audioInstance.removeEventListener('play', onPlay);
 
-      _this.videoInstance.removeEventListener('play', onPlay);
+      (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('pause', onPause);
+      (_this$options$videoIn5 = _this.options.videoInstance) === null || _this$options$videoIn5 === void 0 ? void 0 : _this$options$videoIn5.removeEventListener('play', onPlay);
+
+      _this.audioLikeInstance.removeEventListener('pause', onPause);
+
+      _this.audioLikeInstance.removeEventListener('play', onPlay);
+
+      (_this$options$videoIn6 = _this.options.videoInstance) === null || _this$options$videoIn6 === void 0 ? void 0 : _this$options$videoIn6.removeEventListener('ended', onEnded);
     };
 
     return _this;
@@ -159,6 +196,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     get: function get() {
       var _this$videoUrl;
 
+      if (!this.videoUrl) {
+        return this.audioLikeInstance;
+      }
+
       if ((_this$videoUrl = this.videoUrl) !== null && _this$videoUrl !== void 0 && _this$videoUrl.endsWith('mp3')) {
         return this.audioInstance;
       }
@@ -194,17 +235,31 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
               case 6:
                 uniforms = this.material.uniforms;
                 this.videoInstance.muted = true;
-                _context.t0 = URL;
-                _context.next = 11;
+
+                if (!(this.options.preload || this.options.preload === undefined || this.videoUrl.endsWith('.mp4'))) {
+                  _context.next = 18;
+                  break;
+                }
+
+                _context.t1 = URL;
+                _context.next = 12;
                 return _Preloader.Preloader.blob(this.videoUrl);
 
-              case 11:
-                _context.t1 = _context.sent;
-                _context.next = 14;
-                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
+              case 12:
+                _context.t2 = _context.sent;
+                _context.next = 15;
+                return _context.t1.createObjectURL.call(_context.t1, _context.t2);
 
-              case 14:
-                this.videoInstance.src = _context.sent;
+              case 15:
+                _context.t0 = _context.sent;
+                _context.next = 19;
+                break;
+
+              case 18:
+                _context.t0 = this.videoUrl;
+
+              case 19:
+                this.videoInstance.src = _context.t0;
                 this.videoInstance.setAttribute('data-src', this.videoUrl);
 
                 onStart = function onStart() {
@@ -220,7 +275,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
 
                 this.videoInstance.addEventListener('timeupdate', onStart, false);
 
-              case 18:
+              case 23:
               case "end":
                 return _context.stop();
             }
@@ -241,64 +296,85 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         var _this3 = this;
 
         var videoUrl,
+            currentTime,
+            duration,
             _args3 = arguments;
         return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
+                currentTime = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 0;
+                duration = _args3.length > 2 ? _args3[2] : undefined;
                 videoUrl = videoUrl || '';
 
-                if (videoUrl) {
+                if (!(duration && !videoUrl)) {
                   _context3.next = 10;
                   break;
                 }
 
+                if (this.currentTime) {
+                  this.videoInstance.currentTime = currentTime;
+                }
+
+                this.videoInstance.duration = duration;
+                this.videoUrl = '';
+                this.videoInstance.play();
+                return _context3.abrupt("return", true);
+
+              case 10:
+                if (videoUrl) {
+                  _context3.next = 18;
+                  break;
+                }
+
                 if (!this.videoUrl) {
-                  _context3.next = 8;
+                  _context3.next = 16;
                   break;
                 }
 
-                _context3.next = 6;
+                _context3.next = 14;
                 return this.videoInstance.play();
 
-              case 6:
-                _context3.next = 9;
+              case 14:
+                _context3.next = 17;
                 break;
 
-              case 8:
+              case 16:
                 console.warn('警告：视频资源未初始化。');
 
-              case 9:
+              case 17:
                 return _context3.abrupt("return", true);
 
-              case 10:
+              case 18:
+                console.log('play', videoUrl, this.videoUrl);
+
                 if (!(videoUrl === this.videoUrl)) {
-                  _context3.next = 15;
+                  _context3.next = 24;
                   break;
                 }
 
-                this.videoInstance.currentTime = 0;
-                _context3.next = 14;
+                this.videoInstance.currentTime = currentTime;
+                _context3.next = 23;
                 return this.videoInstance.play();
 
-              case 14:
+              case 23:
                 return _context3.abrupt("return", true);
 
-              case 15:
-                _context3.next = 17;
+              case 24:
+                _context3.next = 26;
                 return this.update(videoUrl);
 
-              case 17:
+              case 26:
                 this.videoInstance.pause();
-                _context3.next = 20;
+                _context3.next = 29;
                 return new Promise(function (resolve) {
                   return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
                     return regeneratorRuntime.wrap(function _callee2$(_context2) {
                       while (1) {
                         switch (_context2.prev = _context2.next) {
                           case 0:
-                            _this3.videoInstance.currentTime = 0;
+                            _this3.videoInstance.currentTime = currentTime;
                             _context2.next = 3;
                             return _this3.videoInstance.play();
 
@@ -314,10 +390,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                   })), 20);
                 });
 
-              case 20:
+              case 29:
                 return _context3.abrupt("return", _context3.sent);
 
-              case 21:
+              case 30:
               case "end":
                 return _context3.stop();
             }

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

@@ -6,7 +6,11 @@ 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;
+        preload?: boolean;
+    });
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.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
@@ -15,14 +15,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var VideoAgentScene = function VideoAgentScene(container) {
+var VideoAgentScene = /*#__PURE__*/_createClass(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);
 
@@ -74,13 +79,13 @@ var VideoAgentScene = function VideoAgentScene(container) {
 
   _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
 
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
 
   if (needRender) {
     container.append(_domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }
-};
+});
 
 exports.VideoAgentScene = VideoAgentScene;

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

@@ -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
@@ -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.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/keyframes/CameraMovement/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
@@ -45,13 +45,49 @@ function CameraMovement() {
                 cameraMovementData = data;
                 effect = cameraMovementData.effect;
 
-                if (effect === _typings.CameraMovementEffect.Rotate) {
-                  ref.current.rotate(data, end - start);
-                } else {
-                  ref.current.move(data, end - start);
+                if (!(effect === _typings.CameraMovementEffect.Rotate)) {
+                  _context.next = 9;
+                  break;
                 }
 
-              case 5:
+                _context.next = 7;
+                return ref.current.rotate(data, end - start);
+
+              case 7:
+                _context.next = 21;
+                break;
+
+              case 9:
+                if (!(effect === _typings.CameraMovementEffect.Move)) {
+                  _context.next = 14;
+                  break;
+                }
+
+                _context.next = 12;
+                return ref.current.move(data, end - start);
+
+              case 12:
+                _context.next = 21;
+                break;
+
+              case 14:
+                if (!(cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex)) {
+                  _context.next = 19;
+                  break;
+                }
+
+                _context.next = 17;
+                return ref.current.move(data, end - start);
+
+              case 17:
+                _context.next = 21;
+                break;
+
+              case 19:
+                _context.next = 21;
+                return ref.current.rotate(data, end - start);
+
+              case 21:
               case "end":
                 return _context.stop();
             }

package/lib/Player/modules/keyframes/InfoPanel/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
@@ -75,49 +75,87 @@ function InfoPanel() {
           data = keyframe.data;
       var infoPanelData = data;
       var title = infoPanelData.title,
-          subTitle = infoPanelData.subTitle;
-
-      if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelImg, {
-            url: infoPanelData.url
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: title,
-            subTitle: subTitle
-          })),
-          height: '60vh'
-        });
-      } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
-            url: infoPanelData.url
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: title,
-            subTitle: subTitle
-          })),
-          height: '60vh'
-        });
-      }
+          subTitle = infoPanelData.subTitle,
+          style = infoPanelData.style;
+
+      do {
+        if (style === _VreoUnit.InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          }
+
+          break;
+        }
+
+        if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        }
+      } while (false);
 
       timeoutRef.current = setTimeout(function () {
-        return controller.openDrawer(false);
+        controller.openDrawer(false);
+        controller.openPopUp(false);
       }, end - start);
     };
 
     controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
     //   $setInfoPanel: () => {
-    //     controller.openDrawer({
-    //       content: (
-    //         // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-    //         // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
-    //         //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //         // </InfoPanelImg>
-    //         <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
     //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       </InfoPanelVideo>
-    //       ),
-    //       height: '60vh',
-    //     })
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
     //   },
     // })