@realsee/vreo 0.1.6 → 0.2.0-alpha.11

package/lib/Player/modules/keyframes/BgMusic/index.js

@@ -0,0 +1,76 @@
+"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.BgMusic = BgMusic;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _VreoUnit = require("../../../../typings/VreoUnit");
+
+var _hooks = require("../../../hooks");
+
+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 BgMusic() {
+  var controller = (0, _hooks.useController)();
+  var timeoutIdRef = React.useRef(null);
+  var cleanTimeout = React.useCallback(function () {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = null;
+    }
+  }, []);
+  React.useEffect(function () {
+    var audio = new Audio();
+    audio.setAttribute('id', 'vreo-singleton-bgmusic');
+    audio.style.display = 'none';
+    audio.setAttribute('playsinline', 'true');
+    audio.loop = true;
+    document.body.append(audio);
+
+    var callback = function callback(keyframe) {
+      var start = keyframe.start,
+          end = keyframe.end;
+      var _ref = keyframe.data,
+          url = _ref.url;
+      audio.src = url;
+
+      var playCallback = function playCallback() {
+        audio.play();
+      };
+
+      audio.addEventListener('canplaythrough', playCallback);
+      cleanTimeout();
+
+      var cleanAudio = function cleanAudio() {
+        audio.pause();
+        audio.currentTime = 0;
+        audio.src = '';
+        cleanTimeout();
+        audio.removeEventListener('canplaythrough', playCallback);
+      };
+
+      var duration = end - start || 5000;
+      timeoutIdRef.current = setTimeout(function () {
+        cleanAudio();
+      }, duration);
+      controller.once('paused', function () {
+        cleanAudio();
+      });
+    };
+
+    controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+    return function () {
+      controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+      document.body.removeChild(audio);
+      cleanTimeout();
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}

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

@@ -18,27 +18,47 @@ 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 InfoPanelImg(_ref) {
-  var url = _ref.url;
+  var url = _ref.url,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--img"
-  }, /*#__PURE__*/React.createElement("img", {
+  }, children, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanelImg",
-    src: url
+    style: {
+      backgroundImage: "url(".concat(url, ")")
+    }
   }));
 }
 
 function InfoPanelVideo(_ref2) {
-  var url = _ref2.url;
+  var url = _ref2.url,
+      children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--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) {
+  if (!props.title && !props.subTitle) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-title"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-t1"
+  }, props.title), /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanel-t2"
+  }, props.subTitle));
+};
+
 function InfoPanel() {
   var timeoutRef = React.useRef();
   var controller = (0, _hooks.useController)();
@@ -54,29 +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);
+    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);
 

package/lib/Player/modules/keyframes/ModelVideo/index.js

@@ -9,11 +9,15 @@ exports.ModelVideo = ModelVideo;
 
 var React = _interopRequireWildcard(require("react"));
 
+var THREE = _interopRequireWildcard(require("three"));
+
+var _hooks = require("../../../hooks");
+
 var _ModelTVVideoPlugin = require("../../../../fivePlugins/ModelTVVideoPlugin");
 
-var _VreoUnit = require("../../../../typings/VreoUnit");
+var _createTransMatrix = require("../../../../shared-utils/createTransMatrix");
 
-var _hooks = require("../../../hooks");
+var _VreoUnit = require("../../../../typings/VreoUnit");
 
 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); }
 
@@ -33,7 +37,7 @@ function ModelVideo() {
       var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(keyframe) {
         var _controller$configs, _controller$configs$v;
 
-        var start, end, _ref2, videoSrc, videoPosterSrc, vertexs;
+        var start, end, _ref2, videoSrc, videoPosterSrc, vertexs, matrixWorld, position, points;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -44,16 +48,49 @@ function ModelVideo() {
                 }
 
                 start = keyframe.start, end = keyframe.end;
-                _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs;
+                _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs, matrixWorld = _ref2.matrixWorld;
+
+                position = function () {
+                  if (vertexs.length < 4) {
+                    throw new Error('ModelVideo: 顶点数据集合不够，无法组成矩形 ....');
+                  }
+
+                  if (vertexs.length === 4) {
+                    return vertexs;
+                  }
+
+                  var box = new THREE.Box3();
+                  vertexs.forEach(function (v) {
+                    return box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z));
+                  });
+                  return [new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z)];
+                }();
+
+                points = function () {
+                  if (matrixWorld) {
+                    var transMatrix = (0, _createTransMatrix.createTransMatrix)(matrixWorld);
+                    return [position.map(function (p) {
+                      var res = transMatrix([p.x, p.y, p.z]);
+                      return {
+                        x: res[0],
+                        y: res[1],
+                        z: res[2]
+                      };
+                    })];
+                  }
+
+                  return [position];
+                }();
+
                 ref.current.disable();
-                _context.next = 6;
+                _context.next = 8;
                 return ref.current.load({
-                  video_src: videoSrc.replace(/https*:/, ''),
-                  video_poster_src: videoPosterSrc.replace(/https*:/, ''),
-                  points: [vertexs]
+                  video_src: videoSrc,
+                  video_poster_src: videoPosterSrc,
+                  points: points
                 }, (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.modelTVVideo);
 
-              case 6:
+              case 8:
                 ref.current.enable();
                 timeoutRef.current = setTimeout(function () {
                   var _ref$current;
@@ -61,7 +98,7 @@ function ModelVideo() {
                   return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disable();
                 }, end - start);
 
-              case 8:
+              case 10:
               case "end":
                 return _context.stop();
             }

package/lib/Player/modules/keyframes/PanoTextLabel/index.js

@@ -63,12 +63,8 @@ function PanoTextLabel() {
       var res = project2d(new _three.Vector3(x, y, z));
       if (!res) return;
       var left = res.x,
-          top = res.y;
-      Object.assign(window, {
-        $PanoTextLabel: {
-          setState: setState
-        }
-      });
+          top = res.y; // Object.assign(window, { $PanoTextLabel: { setState } })
+
       setState({
         left: left,
         top: top,
@@ -80,12 +76,8 @@ function PanoTextLabel() {
       }, end - start);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
-    Object.assign(window, {
-      $panoTextLabel: {
-        setState: setState
-      }
-    });
+    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback); // Object.assign(window, { $panoTextLabel: { setState } })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
 

package/lib/Player/modules/keyframes/Prompter/index.js

@@ -13,8 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _hooks = require("../../../hooks");
 
-var _reactTransitionGroup = require("react-transition-group");
-
 var _VreoUnit = require("../../../../typings/VreoUnit");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,9 +67,8 @@ function Prompter() {
 
       ref.current = setTimeout(function () {
         setHidden(true);
-        setTimeout(function () {
-          return setText('');
-        }, 500);
+        setText(''); // setTimeout(() => setText(''), 500)
+
         if (ref.current) clearTimeout(ref.current);
         ref.current = null;
       }, end - start);
@@ -87,20 +84,9 @@ function Prompter() {
       'vreo-prompter--hidden': hidden,
       'vreo-prompter--audio': controller.isAudio
     })
-  }, text ?
-  /*#__PURE__*/
-
-  /* @warning "index.js:1 Warning: findDOMNode is deprecated in StrictMode." */
-  React.createElement(_reactTransitionGroup.TransitionGroup, {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-prompter-text"
-  }, /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
-    key: text,
-    classNames: "vreo-prompter-text-transition",
-    timeout: 500,
-    addEndListener: function addEndListener(node, done) {
-      return node.addEventListener('transitionend', done, false);
-    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-prompter-innerText"
-  }, text))) : undefined);
+  }, text)));
 }

package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js

@@ -22,30 +22,89 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
+  var deafultWorkRef = React.useRef(null);
+  var updateWorkRef = React.useRef(null); // 恢复默认 VR
+
+  var restoreCallback = React.useCallback(function () {
+    // 先清理掉 之前的 VR 数据备份
+    updateWorkRef.current = null;
+
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      five.load(work);
+    }
+  }, []); // 暂停时： 恢复默认 VR 
+
+  var pausedCallback = React.useCallback(function () {
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      Object.assign(window, {
+        $rawWork: work
+      });
+      five.load(work);
+    }
+  }, []); // 播放时：如果暂停前有更新 VR 需要还原
+
+  var playingCallback = React.useCallback(function () {
+    if (!updateWorkRef.current) {
+      return;
+    }
+
+    five.load(updateWorkRef.current);
+  }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      var _ref = keyframe.data,
-          panoIndex = _ref.panoIndex,
-          images = _ref.images;
-      var newWorkJSON = JSON.parse(JSON.stringify((_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.work)); // // 原Work数据不能被修改
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works;
+      }
+
+      var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
 
-      if (newWorkJSON.panorama && newWorkJSON.panorama.list && newWorkJSON.panorama.list[panoIndex]) {
-        Object.assign(newWorkJSON.panorama.list[panoIndex], images);
-      } else if (newWorkJSON.observers && newWorkJSON.observers[panoIndex] && newWorkJSON.observers[panoIndex].images) {
-        Object.assign(newWorkJSON.observers[panoIndex].images, images);
+      if (data.work) {
+        updateWorkRef.current = (0, _five.parseWork)(data.work);
+        five.load(updateWorkRef.current);
+        return;
       }
 
-      var newWork = (0, _five.parseWork)(newWorkJSON); // // 需要还原么？待定 ...
+      var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0]; // 动态场景：不提供完成的签名数据，需重新整理
 
-      five.load(newWork);
+      if (data.dynamic_scene && !data.panorama) {
+        var lastWork = JSON.parse(lastRawWork);
+        var panorama = lastWork.panorama;
+        var index = data.dynamic_scene.images.index;
+        panorama.list[index] = data.dynamic_scene.images;
+        data.panorama = panorama;
+        delete data.dynamic_scene;
+      }
+
+      Object.assign(window, {
+        $work1: JSON.parse(lastRawWork),
+        $work2: data,
+        parseWork: _five.parseWork
+      });
+      updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(updateWorkRef.current);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
+
+    controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback); // 新载入数据 将之前的内容清空
+
+    controller.on('loaded', restoreCallback); // 暂停 回到默认状态
+
+    controller.on('paused', pausedCallback); // 播放 回归暂停前状态
+
+    controller.on('playing', playingCallback);
     return function () {
+      // 清理事件监听
       controller.off(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+      controller.off(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
+      controller.off('loaded', restoreCallback);
+      controller.off('paused', pausedCallback);
+      controller.off('playing', playingCallback);
     };
-  }, [controller]);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }

package/lib/Player/typings.d.ts

@@ -1,4 +1,7 @@
-import { VreoKeyframeConfigMap } from '../typings/VreoUnit';
+import React, { ReactNode } from 'react';
+import { Subscribe, Five } from '@realsee/five';
+import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 export interface PlayerConfigs {
     containter?: ReactDOM.Container;
     keyframeMap: VreoKeyframeConfigMap;
@@ -11,4 +14,19 @@ export interface PlayerConfigs {
         videoEffect?: HTMLVideoElement;
         modelTVVideo?: HTMLVideoElement;
     };
+    videoAgentMeshOptions?: VideoAgentMeshOptions;
+    /**
+     * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
+     */
+    customPanelChildren?: ReactNode;
+    customKeyframes?: React.FC<CustomVreoKeyframeProps>[];
+    imageOptions?: {
+        size: number;
+    };
+    autoPreload?: boolean;
+}
+export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
+export interface CustomVreoKeyframeProps {
+    subscribe: VreoSubscribe;
+    five: Five;
 }