@realsee/vreo 2.4.7 → 2.5.0-alpha.2

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

@@ -1,14 +1,5 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wave = Wave;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 var defaultPrefix = 'https://vr-public.realsee-cdn.cn/release/static/image/release/';
 var WAVES = {
   single: {
@@ -19,7 +10,7 @@ var WAVES = {
     vp9: 'vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm',
     png: 'vapor/static/wave-single.f51aade2a6e1c59211698a1a24e6135f.png'
   },
-  "double": {
+  double: {
     width: 766,
     height: 60,
     frames: 16,
@@ -58,49 +49,49 @@ var isSafari = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && /versi
 var isMicroMessenger = /microMessenger/i.test(userAgent);
 var canPlayHevc = isAppleDevice || isSafari;
 var canPlayVp9 = typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported("video/webm; codecs=vp9");
-function Wave(props) {
-  var wave = _react["default"].useMemo(function () {
+export function Wave(props) {
+  var wave = React.useMemo(function () {
     var _props$appearance;
     var appearance = (_props$appearance = props === null || props === void 0 ? void 0 : props.appearance) !== null && _props$appearance !== void 0 ? _props$appearance : 'solid';
     return WAVES[appearance];
   }, [props === null || props === void 0 ? void 0 : props.appearance]);
-  var heightWidthRatio = _react["default"].useMemo(function () {
+  var heightWidthRatio = React.useMemo(function () {
     return wave.height / wave.width;
   }, [wave]);
   var content = null;
   if (isMicroMessenger) {
-    content = /*#__PURE__*/_react["default"].createElement(KeyframeWaveContent, {
+    content = /*#__PURE__*/React.createElement(KeyframeWaveContent, {
       wave: wave,
       prefix: props === null || props === void 0 ? void 0 : props.staticPrefix
     });
   } else if (canPlayHevc) {
-    content = /*#__PURE__*/_react["default"].createElement(VideoWaveContent, {
+    content = /*#__PURE__*/React.createElement(VideoWaveContent, {
       format: "hevc",
       wave: wave,
       prefix: props === null || props === void 0 ? void 0 : props.staticPrefix
     });
   } else if (canPlayVp9) {
-    content = /*#__PURE__*/_react["default"].createElement(VideoWaveContent, {
+    content = /*#__PURE__*/React.createElement(VideoWaveContent, {
       format: "vp9",
       wave: wave,
       prefix: props === null || props === void 0 ? void 0 : props.staticPrefix
     });
   } else {
-    content = /*#__PURE__*/_react["default"].createElement(KeyframeWaveContent, {
+    content = /*#__PURE__*/React.createElement(KeyframeWaveContent, {
       wave: wave,
       prefix: props === null || props === void 0 ? void 0 : props.staticPrefix
     });
   }
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "vreo-wave",
     onClick: props === null || props === void 0 ? void 0 : props.onClick
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative',
       width: '100%',
       paddingTop: "".concat(heightWidthRatio * 100, "%")
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       width: '100%',
@@ -115,35 +106,35 @@ var VideoWaveContent = function VideoWaveContent(_ref) {
     format = _ref.format,
     _ref$prefix = _ref.prefix,
     prefix = _ref$prefix === void 0 ? defaultPrefix : _ref$prefix;
-  var videoRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+  var videoRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
     canPlay = _useState2[0],
     setCanPlay = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
     errored = _useState4[0],
     setErrored = _useState4[1];
   var source = prefix + wave[format];
-  (0, _react.useEffect)(function () {
+  useEffect(function () {
     setCanPlay(false);
   }, [source]);
-  var canPlayHandler = (0, _react.useCallback)(function () {
+  var canPlayHandler = useCallback(function () {
     if (videoRef.current) {
       videoRef.current.play();
     }
     setCanPlay(true);
   }, []);
-  var errorHandler = (0, _react.useCallback)(function () {
+  var errorHandler = useCallback(function () {
     setErrored(true);
   }, []);
   if (errored) {
-    return /*#__PURE__*/_react["default"].createElement(KeyframeWaveContent, {
+    return /*#__PURE__*/React.createElement(KeyframeWaveContent, {
       wave: wave,
       prefix: prefix
     });
   }
-  return /*#__PURE__*/_react["default"].createElement("video", {
+  return /*#__PURE__*/React.createElement("video", {
     style: {
       opacity: canPlay ? 1 : 0
     },
@@ -165,7 +156,7 @@ var KeyframeWaveContent = function KeyframeWaveContent(_ref2) {
     _ref2$prefix = _ref2.prefix,
     prefix = _ref2$prefix === void 0 ? defaultPrefix : _ref2$prefix;
   var source = prefix + wave.png;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       width: "100%",
       height: "100%",

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

@@ -1,25 +1,16 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function BgMusic() {
-  var controller = (0, _hooks.useController)();
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import { getAudio } from "../../../../shared-utils/Audio.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+import { useController } from "../../../hooks.js";
+export function BgMusic() {
+  var controller = useController();
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe, currentTime) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyframe, currentTime) {
         var start, end, _currentTime, audio, cleanAudio, play;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -31,7 +22,7 @@ function BgMusic() {
                 }
                 return _context.abrupt("return");
               case 4:
-                audio = (0, _Audio.getAudio)(keyframe.data.url);
+                audio = getAudio(keyframe.data.url);
                 audio.currentTime = Math.max(0, _currentTime);
                 // console.log('play', audio.src)
                 // const play = () => audio.play()
@@ -69,9 +60,9 @@ function BgMusic() {
         return _ref.apply(this, arguments);
       };
     }();
-    controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+    controller.on(VreoKeyframeEnum.BgMusic, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
+      controller.off(VreoKeyframeEnum.BgMusic, callback);
     };
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null);

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

@@ -1,38 +1,29 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function CameraMovement() {
-  var controller = (0, _hooks.useController)();
-  var five = (0, _hooks.useFiveInstance)();
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import { CameraMovementPlugin } from "../../../../fivePlugins/CameraMovementPlugin/index.js";
+import { CameraMovementEffect } from "../../../../fivePlugins/CameraMovementPlugin/typings.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+import { useController, useFiveInstance } from "../../../hooks.js";
+export function CameraMovement() {
+  var controller = useController();
+  var five = useFiveInstance();
   var ref = React.useRef();
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyframe) {
         var start, end, data, cameraMovementData, effect;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 if (!ref.current) {
-                  ref.current = (0, _CameraMovementPlugin.CameraMovementPlugin)(five, {});
+                  ref.current = CameraMovementPlugin(five, {});
                 }
                 start = keyframe.start, end = keyframe.end, data = keyframe.data;
                 cameraMovementData = data;
                 effect = cameraMovementData.effect;
-                if (!(effect === _typings.CameraMovementEffect.Rotate)) {
+                if (!(effect === CameraMovementEffect.Rotate)) {
                   _context.next = 9;
                   break;
                 }
@@ -42,7 +33,7 @@ function CameraMovement() {
                 _context.next = 21;
                 break;
               case 9:
-                if (!(effect === _typings.CameraMovementEffect.Move)) {
+                if (!(effect === CameraMovementEffect.Move)) {
                   _context.next = 14;
                   break;
                 }
@@ -75,9 +66,9 @@ function CameraMovement() {
         return _ref.apply(this, arguments);
       };
     }();
-    controller.on(_VreoUnit.VreoKeyframeEnum.CameraMovement, callback);
+    controller.on(VreoKeyframeEnum.CameraMovement, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.CameraMovement, callback);
+      controller.off(VreoKeyframeEnum.CameraMovement, callback);
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);

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

@@ -1,14 +1,6 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+import * as React from 'react';
+import { InfoPanelStyleEnum, InfoPanelTypeEnum, VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+import { useController } from "../../../hooks.js";
 var isWX = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
 var isIOS = navigator.userAgent.toLowerCase().indexOf('iphone') !== -1;
 var isIOSorWX = isIOS || isWX;
@@ -39,7 +31,7 @@ function InfoPanelVideo(_ref2) {
   var url = _ref2.url,
     children = _ref2.children;
   var videoWrapperRef = React.useRef(null);
-  var controller = (0, _hooks.useController)();
+  var controller = useController();
   React.useEffect(function () {
     var _controller$configs, _controller$configs$v;
     // if (!isIOSorWX) return
@@ -88,9 +80,9 @@ var Title = function Title(props) {
     className: "vreo-infoPanel-t2"
   }, props.subTitle)));
 };
-function InfoPanel() {
+export function InfoPanel() {
   var timeoutRef = React.useRef();
-  var controller = (0, _hooks.useController)();
+  var controller = useController();
   React.useEffect(function () {
     var _controller$configs2;
     if (((_controller$configs2 = controller.configs) === null || _controller$configs2 === void 0 ? void 0 : _controller$configs2.keyframeMap.InfoPanel) === false) {
@@ -105,15 +97,15 @@ function InfoPanel() {
         subTitle = infoPanelData.subTitle,
         style = infoPanelData.style;
       do {
-        if (style === _VreoUnit.InfoPanelStyleEnum.PopUp) {
-          if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+        if (style === InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === 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) {
+          } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
             controller.openPopUp(/*#__PURE__*/React.createElement(InfoPanelVideo, {
               url: infoPanelData.url
             }, /*#__PURE__*/React.createElement(Title, {
@@ -123,7 +115,7 @@ function InfoPanel() {
           }
           break;
         }
-        if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+        if (infoPanelData.type === InfoPanelTypeEnum.Image) {
           controller.openDrawer({
             content: /*#__PURE__*/React.createElement(InfoPanelImg, {
               url: infoPanelData.url
@@ -133,7 +125,7 @@ function InfoPanel() {
             })),
             height: '60vh'
           });
-        } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+        } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
           controller.openDrawer({
             content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
               url: infoPanelData.url
@@ -150,7 +142,7 @@ function InfoPanel() {
         controller.openPopUp(false);
       }, end - start);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
+    controller.on(VreoKeyframeEnum.InfoPanel, callback);
     controller.on('ended', function () {
       controller.openPopUp(false);
     });
@@ -158,7 +150,7 @@ function InfoPanel() {
       controller.openPopUp(false);
     });
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
+      controller.off(VreoKeyframeEnum.InfoPanel, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

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

@@ -1,36 +1,27 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function ModelVideo() {
-  var controller = (0, _hooks.useController)();
-  var five = (0, _hooks.useFiveInstance)();
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import * as THREE from 'three';
+import { useController, useFiveInstance } from "../../../hooks.js";
+import { ModelTVVideoPlugin } from "../../../../fivePlugins/ModelTVVideoPlugin/index.js";
+import { createTransMatrix } from "../../../../shared-utils/createTransMatrix.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+export function ModelVideo() {
+  var controller = useController();
+  var five = useFiveInstance();
   var ref = React.useRef();
   var timeoutRef = React.useRef();
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.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) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 if (!ref.current) {
-                  ref.current = (0, _ModelTVVideoPlugin.ModelTVVideoPlugin)(five, {});
+                  ref.current = ModelTVVideoPlugin(five, {});
                 }
                 start = keyframe.start, end = keyframe.end;
                 _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs, matrixWorld = _ref2.matrixWorld;
@@ -49,7 +40,7 @@ function ModelVideo() {
                 }();
                 points = function () {
                   if (matrixWorld) {
-                    var transMatrix = (0, _createTransMatrix.createTransMatrix)(matrixWorld);
+                    var transMatrix = createTransMatrix(matrixWorld);
                     return [position.map(function (p) {
                       var res = transMatrix([p.x, p.y, p.z]);
                       return {
@@ -85,9 +76,9 @@ function ModelVideo() {
         return _ref.apply(this, arguments);
       };
     }();
-    controller.on(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
+    controller.on(VreoKeyframeEnum.ModelVideo, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
+      controller.off(VreoKeyframeEnum.ModelVideo, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

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

@@ -1,33 +1,24 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function PanoEffect() {
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { Vector3 } from 'three';
+import classNames from 'classnames';
+import lineAnime from "./lineAnime.js";
+import { useController, useFiveInstance, useFiveProject2d } from "../../../hooks.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+export function PanoEffect() {
   var _React$useState = React.useState(null),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
     state = _React$useState2[0],
     setState = _React$useState2[1];
-  var five = (0, _hooks.useFiveInstance)();
+  var five = useFiveInstance();
   var lineRef = React.useRef(null);
   var _React$useState3 = React.useState(null),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    _React$useState4 = _slicedToArray(_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 controller = useController();
+  var project2d = useFiveProject2d();
   var delLine = function delLine() {
     if (lineRef.current) {
       lineRef.current.dispose();
@@ -39,12 +30,12 @@ function PanoEffect() {
         end = keyframe.end,
         data = keyframe.data;
       var videoEffectData = data;
-      var _videoEffectData$twoV = (0, _slicedToArray2["default"])(videoEffectData.twoVertexs, 2),
+      var _videoEffectData$twoV = _slicedToArray(videoEffectData.twoVertexs, 2),
         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());
+      var p1 = new Vector3(v1.x, v1.y, v1.z);
+      var p2 = new Vector3(v2.x, v2.y, v2.z);
+      lineRef.current = lineAnime(five, p1.clone(), p2.clone());
       lineRef.current.play();
       var center = p1.lerp(p2, 0.5);
       var distance = p1.distanceTo(p2);
@@ -66,9 +57,9 @@ function PanoEffect() {
         delLine();
       }, end - start);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
+    controller.on(VreoKeyframeEnum.PanoEffect, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
+      controller.off(VreoKeyframeEnum.PanoEffect, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -82,7 +73,7 @@ function PanoEffect() {
         x = _state$center.x,
         y = _state$center.y,
         z = _state$center.z;
-      var res = project2d(new _three.Vector3(x, y, z));
+      var res = project2d(new Vector3(x, y, z));
       if (!res) return;
       var left = res.x,
         top = res.y;
@@ -97,7 +88,7 @@ function PanoEffect() {
     };
   }, [state === null || state === void 0 ? void 0 : state.center]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('PanoEffect', {
+    className: classNames('PanoEffect', {
       'PanoEffect--notHidden': state
     }),
     style: {

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

@@ -1,19 +1,11 @@
-"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function lineAnime(five, startPoint, endPoint) {
+import * as THREE from 'three';
+import { Line as FiveLine } from '@realsee/five/line';
+import { tweenProgress } from "../../../../shared-utils/animationFrame/BetterTween.js";
+export default function lineAnime(five, startPoint, endPoint) {
   var pointImage = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
   var pointTexture = new THREE.TextureLoader().load(pointImage);
   var color = new THREE.Color(0xffffff);
-  var line = new _line.Line();
+  var line = new FiveLine();
   line.setMaterial({
     linewidth: 2,
     color: color
@@ -22,7 +14,7 @@ function lineAnime(five, startPoint, endPoint) {
   pointMaterial.map = pointTexture;
   pointMaterial.color.set(color);
   line.line.material.depthTest = false;
-  return (0, _BetterTween.tweenProgress)().onUpdate(function (_ref) {
+  return tweenProgress().onUpdate(function (_ref) {
     var progress = _ref.progress;
     var lerpLeft = 0.5 - progress / 2;
     var lerpRight = 0.5 + progress / 2;

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

@@ -1,20 +1,12 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PanoTag = PanoTag;
-var React = _interopRequireWildcard(require("react"));
-var _hooks = require("../../../hooks");
-var _VreoUnit = require("../../../../typings/VreoUnit");
-var _dnalogel = require("@realsee/dnalogel");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function PanoTag() {
+import * as React from 'react';
+import { useController, useFiveInstance } from "../../../hooks.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+import { PanoTagPlugin } from '@realsee/dnalogel';
+export function PanoTag() {
   var timeoutRef = React.useRef();
-  var controller = (0, _hooks.useController)();
-  var five = (0, _hooks.useFiveInstance)();
-  var panoTagPlugin = React.useRef((0, _dnalogel.PanoTagPlugin)(five, {
+  var controller = useController();
+  var five = useFiveInstance();
+  var panoTagPlugin = React.useRef(PanoTagPlugin(five, {
     config: {
       globalConfig: {
         visibleConfig: {
@@ -104,9 +96,9 @@ function PanoTag() {
         });
       }, end - start);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
+    controller.on(VreoKeyframeEnum.PanoTag, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
+      controller.off(VreoKeyframeEnum.PanoTag, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }