@realsee/vreo 2.3.8 → 2.3.9-alpha.1

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

@@ -1,64 +1,82 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BgMusic = BgMusic;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _Audio = require("../../../../shared-utils/Audio");
+
 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)();
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe, currentTime) {
         var start, end, _currentTime, audio, cleanAudio, play;
+
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 start = keyframe.start, end = keyframe.end;
                 _currentTime = (currentTime - start) / 1000;
+
                 if (!(_currentTime < 0 || _currentTime >= keyframe.end - keyframe.start)) {
                   _context.next = 4;
                   break;
                 }
+
                 return _context.abrupt("return");
+
               case 4:
                 audio = (0, _Audio.getAudio)(keyframe.data.url);
-                audio.currentTime = Math.max(0, _currentTime);
-                // console.log('play', audio.src)
+                audio.currentTime = Math.max(0, _currentTime); // console.log('play', audio.src)
                 // const play = () => audio.play()
 
                 audio.play();
+
                 cleanAudio = function cleanAudio() {
                   // audio.removeEventListener('canplaythrough', play)
                   audio.removeEventListener('pause', play);
                   audio.pause();
-                  audio.src = '';
-                  // cleanTimeout()
+                  audio.src = ''; // cleanTimeout()
                 }; // audio.addEventListener('canplaythrough', play)
 
+
                 audio.addEventListener('ended', function () {
                   cleanAudio();
                 });
+
                 play = function play() {
                   if (audio.realSrc === keyframe.data.url) {
                     // 有可能会被其他音轨打断
                     audio.play();
                   }
                 };
+
                 audio.addEventListener('pause', play);
                 controller.once('paused', function () {
                   cleanAudio();
                 });
+
               case 12:
               case "end":
                 return _context.stop();
@@ -66,10 +84,12 @@ function BgMusic() {
           }
         }, _callee);
       }));
+
       return function callback(_x, _x2) {
         return _ref.apply(this, arguments);
       };
     }();
+
     controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);

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

@@ -1,20 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CameraMovement = CameraMovement;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _CameraMovementPlugin = require("../../../../fivePlugins/CameraMovementPlugin");
+
 var _typings = require("../../../../fivePlugins/CameraMovementPlugin/typings");
+
 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 CameraMovement() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
@@ -30,41 +42,53 @@ function CameraMovement() {
                 if (!ref.current) {
                   ref.current = (0, _CameraMovementPlugin.CameraMovementPlugin)(five, {});
                 }
+
                 start = keyframe.start, end = keyframe.end, data = keyframe.data;
                 cameraMovementData = data;
                 effect = cameraMovementData.effect;
+
                 if (!(effect === _typings.CameraMovementEffect.Rotate)) {
                   _context.next = 9;
                   break;
                 }
+
                 _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();
@@ -72,10 +96,12 @@ function CameraMovement() {
           }
         }, _callee);
       }));
+
       return function callback(_x) {
         return _ref.apply(this, arguments);
       };
     }();
+
     controller.on(_VreoUnit.VreoKeyframeEnum.CameraMovement, callback);
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.CameraMovement, callback);

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

@@ -1,21 +1,32 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InfoPanel = InfoPanel;
+
 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; }
+
 var isWX = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
 var isIOS = navigator.userAgent.toLowerCase().indexOf('iphone') !== -1;
 var isIOSorWX = isIOS || isWX;
+
 var _videoElement = document.createElement('video');
+
 _videoElement.setAttribute('playsinline', 'true');
+
 _videoElement.setAttribute('webkit-playsinline', 'true');
+
 if (isIOSorWX) {
   if (_videoElement.paused) {
     _videoElement.addEventListener('click', function () {
@@ -25,9 +36,10 @@ if (isIOSorWX) {
     });
   }
 }
+
 function InfoPanelImg(_ref) {
   var url = _ref.url,
-    children = _ref.children;
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-container"
   }, /*#__PURE__*/React.createElement("div", {
@@ -36,33 +48,40 @@ function InfoPanelImg(_ref) {
     src: url
   })));
 }
+
 function InfoPanelVideo(_ref2) {
   var url = _ref2.url,
-    children = _ref2.children;
+      children = _ref2.children;
   var videoWrapperRef = React.useRef(null);
   var controller = (0, _hooks.useController)();
   React.useEffect(function () {
     var _controller$configs, _controller$configs$v;
+
     // if (!isIOSorWX) return
     var video = ((_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.videoPanel) || _videoElement;
     if (!videoWrapperRef.current) return;
     video.src = url;
+
     if (!videoWrapperRef.current.contains(video)) {
       videoWrapperRef.current.appendChild(video);
     }
+
     var canplaythrough = function canplaythrough() {
       video.removeEventListener('canplaythrough', canplaythrough);
+
       try {
         video.play();
       } catch (error) {}
     };
+
     video.addEventListener('canplaythrough', canplaythrough);
-    video.load();
-    // video.play()
+    video.load(); // video.play()
 
     return function () {
       var _videoWrapperRef$curr;
+
       video.pause();
+
       if ((_videoWrapperRef$curr = videoWrapperRef.current) !== null && _videoWrapperRef$curr !== void 0 && _videoWrapperRef$curr.contains(video)) {
         videoWrapperRef.current.removeChild(video);
       }
@@ -77,10 +96,12 @@ function InfoPanelVideo(_ref2) {
     ref: videoWrapperRef
   })));
 }
+
 var Title = function Title(props) {
   if (!props.title && !props.subTitle) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel-title"
   }, /*#__PURE__*/React.createElement("div", {
@@ -89,22 +110,26 @@ var Title = function Title(props) {
     className: "vreo-infoPanel-t2"
   }, props.subTitle)));
 };
+
 function InfoPanel() {
   var timeoutRef = React.useRef();
   var controller = (0, _hooks.useController)();
   React.useEffect(function () {
     var _controller$configs2;
+
     if (((_controller$configs2 = controller.configs) === null || _controller$configs2 === void 0 ? void 0 : _controller$configs2.keyframeMap.InfoPanel) === false) {
       return;
     }
+
     var callback = function callback(keyframe) {
       var start = keyframe.start,
-        end = keyframe.end,
-        data = keyframe.data;
+          end = keyframe.end,
+          data = keyframe.data;
       var infoPanelData = data;
       var title = infoPanelData.title,
-        subTitle = infoPanelData.subTitle,
-        style = infoPanelData.style;
+          subTitle = infoPanelData.subTitle,
+          style = infoPanelData.style;
+
       do {
         if (style === _VreoUnit.InfoPanelStyleEnum.PopUp) {
           if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
@@ -122,8 +147,10 @@ function InfoPanel() {
               subTitle: subTitle
             })));
           }
+
           break;
         }
+
         if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
           controller.openDrawer({
             content: /*#__PURE__*/React.createElement(InfoPanelImg, {
@@ -146,11 +173,13 @@ function InfoPanel() {
           });
         }
       } while (false);
+
       timeoutRef.current = setTimeout(function () {
         controller.openDrawer(false);
         controller.openPopUp(false);
       }, end - start);
     };
+
     controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
     controller.on('ended', function () {
       controller.openPopUp(false);
@@ -160,6 +189,7 @@ function InfoPanel() {
     });
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
+
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

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

@@ -1,21 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModelVideo = ModelVideo;
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var THREE = _interopRequireWildcard(require("three"));
+
 var _hooks = require("../../../hooks");
+
 var _ModelTVVideoPlugin = require("../../../../fivePlugins/ModelTVVideoPlugin");
+
 var _createTransMatrix = require("../../../../shared-utils/createTransMatrix");
+
 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); }
+
 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 ModelVideo() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
@@ -25,7 +38,9 @@ function ModelVideo() {
     var callback = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
         var _controller$configs, _controller$configs$v;
+
         var start, end, _ref2, videoSrc, videoPosterSrc, vertexs, matrixWorld, position, points;
+
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -33,21 +48,26 @@ function ModelVideo() {
                 if (!ref.current) {
                   ref.current = (0, _ModelTVVideoPlugin.ModelTVVideoPlugin)(five, {});
                 }
+
                 start = keyframe.start, end = keyframe.end;
                 _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);
@@ -60,8 +80,10 @@ function ModelVideo() {
                       };
                     })];
                   }
+
                   return [position];
                 }();
+
                 ref.current.disable();
                 _context.next = 8;
                 return ref.current.load({
@@ -69,12 +91,15 @@ function ModelVideo() {
                   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 8:
                 ref.current.enable();
                 timeoutRef.current = setTimeout(function () {
                   var _ref$current;
+
                   return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disable();
                 }, end - start);
+
               case 10:
               case "end":
                 return _context.stop();
@@ -82,13 +107,16 @@ function ModelVideo() {
           }
         }, _callee);
       }));
+
       return function callback(_x) {
         return _ref.apply(this, arguments);
       };
     }();
+
     controller.on(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
+
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

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

@@ -1,48 +1,67 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PanoEffect = PanoEffect;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _three = require("three");
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _lineAnime = _interopRequireDefault(require("./lineAnime"));
+
 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); }
+
 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 PanoEffect() {
   var _React$useState = React.useState(null),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    state = _React$useState2[0],
-    setState = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
   var five = (0, _hooks.useFiveInstance)();
   var lineRef = React.useRef(null);
+
   var _React$useState3 = React.useState(null),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    pos = _React$useState4[0],
-    setPos = _React$useState4[1];
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      pos = _React$useState4[0],
+      setPos = _React$useState4[1];
+
   var timeoutRef = React.useRef();
   var controller = (0, _hooks.useController)();
   var project2d = (0, _hooks.useFiveProject2d)();
+
   var delLine = function delLine() {
     if (lineRef.current) {
       lineRef.current.dispose();
     }
   };
+
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var start = keyframe.start,
-        end = keyframe.end,
-        data = keyframe.data;
+          end = keyframe.end,
+          data = keyframe.data;
       var videoEffectData = data;
+
       var _videoEffectData$twoV = (0, _slicedToArray2["default"])(videoEffectData.twoVertexs, 2),
-        v1 = _videoEffectData$twoV[0],
-        v2 = _videoEffectData$twoV[1];
+          v1 = _videoEffectData$twoV[0],
+          v2 = _videoEffectData$twoV[1];
+
       var p1 = new _three.Vector3(v1.x, v1.y, v1.z);
       var p2 = new _three.Vector3(v2.x, v2.y, v2.z);
       lineRef.current = (0, _lineAnime["default"])(five, p1.clone(), p2.clone());
@@ -52,7 +71,7 @@ function PanoEffect() {
       var p = project2d(center);
       if (!p) return;
       var left = p.x,
-        top = p.y;
+          top = p.y;
       setState({
         center: center,
         distance: distance
@@ -67,12 +86,15 @@ function PanoEffect() {
         delLine();
       }, end - start);
     };
+
     controller.on(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
+
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+
       delLine();
     };
   }, [controller]);
@@ -80,18 +102,19 @@ function PanoEffect() {
     var callback = function callback() {
       if (!(state !== null && state !== void 0 && state.center)) return;
       var _state$center = state.center,
-        x = _state$center.x,
-        y = _state$center.y,
-        z = _state$center.z;
+          x = _state$center.x,
+          y = _state$center.y,
+          z = _state$center.z;
       var res = project2d(new _three.Vector3(x, y, z));
       if (!res) return;
       var left = res.x,
-        top = res.y;
+          top = res.y;
       setPos({
         left: left,
         top: top
       });
     };
+
     five.on('currentStateChange', callback);
     return function () {
       five.off('currentStateChange', callback);

package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js

@@ -1,15 +1,22 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = lineAnime;
+
 var THREE = _interopRequireWildcard(require("three"));
+
 var _line = require("@realsee/five/line");
+
 var _BetterTween = require("../../../../shared-utils/animationFrame/BetterTween");
+
 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 lineAnime(five, startPoint, endPoint) {
   var pointImage = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
   var pointTexture = new THREE.TextureLoader().load(pointImage);