@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.12

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,34 +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); // 延迟 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(); // 预载逻辑
+                // 是否降低图片分辨率
+
+                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 = 14;
+                  _context.next = 29;
                   break;
                 }
 
@@ -141,19 +225,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   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 = 28;
+                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);
 
-              case 13:
+              case 28:
                 this.play();
 
-              case 14:
+              case 29:
                 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();
             }
@@ -174,8 +258,14 @@ 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) {
+        // Object.assign(window, {$vreoController: this.controller})
+        this.controller.videoInstance.currentTime = currentTime / 1000;
+      }
+
       this.controller.setPlaying(true);
       return 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"; 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
@@ -23,7 +24,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): Promise<unknown>;
     /**
      * 转成毫秒，保障精准度
      */

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
     });
@@ -241,64 +245,66 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         var _this3 = this;
 
         var videoUrl,
+            currentTime,
             _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;
                 videoUrl = videoUrl || '';
 
                 if (videoUrl) {
-                  _context3.next = 10;
+                  _context3.next = 11;
                   break;
                 }
 
                 if (!this.videoUrl) {
-                  _context3.next = 8;
+                  _context3.next = 9;
                   break;
                 }
 
-                _context3.next = 6;
+                _context3.next = 7;
                 return this.videoInstance.play();
 
-              case 6:
-                _context3.next = 9;
+              case 7:
+                _context3.next = 10;
                 break;
 
-              case 8:
+              case 9:
                 console.warn('警告：视频资源未初始化。');
 
-              case 9:
+              case 10:
                 return _context3.abrupt("return", true);
 
-              case 10:
+              case 11:
                 if (!(videoUrl === this.videoUrl)) {
-                  _context3.next = 15;
+                  _context3.next = 16;
                   break;
                 }
 
-                this.videoInstance.currentTime = 0;
-                _context3.next = 14;
+                this.videoInstance.currentTime = currentTime;
+                _context3.next = 15;
                 return this.videoInstance.play();
 
-              case 14:
+              case 15:
                 return _context3.abrupt("return", true);
 
-              case 15:
-                _context3.next = 17;
+              case 16:
+                _context3.next = 18;
                 return this.update(videoUrl);
 
-              case 17:
+              case 18:
                 this.videoInstance.pause();
-                _context3.next = 20;
+                _context3.next = 21;
                 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 +320,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                   })), 20);
                 });
 
-              case 20:
+              case 21:
                 return _context3.abrupt("return", _context3.sent);
 
-              case 21:
+              case 22:
               case "end":
                 return _context3.stop();
             }

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);
 
@@ -74,7 +75,7 @@ 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);

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/CameraMovement/index.js

@@ -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

@@ -35,12 +35,14 @@ function InfoPanelVideo(_ref2) {
       children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--video"
-  }, children, /*#__PURE__*/React.createElement("video", {
+  }, children, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanelWrapper"
+  }, /*#__PURE__*/React.createElement("video", {
     playsInline: true,
     autoPlay: true,
     className: "vreo-infoPanelVideo",
     src: url
-  }));
+  })));
 }
 
 var Title = function Title(props) {
@@ -72,45 +74,91 @@ function InfoPanel() {
           end = keyframe.end,
           data = keyframe.data;
       var infoPanelData = data;
-
-      if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelImg, {
-            url: infoPanelData.url
-          }),
-          height: '60vh'
-        });
-      } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
-            url: infoPanelData.url
-          }),
-          height: '60vh'
-        });
-      }
+      var title = infoPanelData.title,
+          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: function $setInfoPanel() {
-        controller.openDrawer({
-          content:
-          /*#__PURE__*/
-          // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-          React.createElement(InfoPanelImg, {
-            url: "http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png"
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: "\u573A\u666F\u8054\u52A8\u6293\u62CD\u56FE\u7247",
-            subTitle: "2022.02.17 14:00"
-          })),
-          height: '60vh'
-        });
-      }
-    });
+    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     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>
+    //     )
+    //   },
+    //   $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>
+    //     )
+    //   },
+    // })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);