@realsee/vreo 2.5.0 → 2.6.0

package/lib/Player/index.js

@@ -1,32 +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.Player = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _five = require("@realsee/five");
-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");
-var _Audio = require("../shared-utils/Audio");
-var _location$search$matc, _location$search$matc2; // 下面这一行不能删
-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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+var _location$search$matc, _location$search$matc2;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// 下面这一行不能删
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Subscribe } from '@realsee/five';
+import { App } from "./App.js";
+import { Controller, ControllerContext } from "./Controller.js";
+import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
+import { reaction } from 'mobx';
+import { Drawer } from "./modules/Drawer/index.js";
+import { PopUp } from "./modules/PopUp/index.js";
+import { generateBlankAudio, waitForBlankAudioGenerated } from "../shared-utils/Audio.js";
 var DefaultAudioCacheLength = 3;
 var id = "vreo-app-dhjskadhksahdjskahdjksa";
 var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 = location.search.match(/audio_cache=(\d+)/)) === null || _location$search$matc2 === void 0 ? void 0 : _location$search$matc2[1]) !== null && _location$search$matc !== void 0 ? _location$search$matc : DefaultAudioCacheLength);
@@ -54,8 +46,8 @@ var audioCacheLength = Number((_location$search$matc = (_location$search$matc2 =
  * player.play()
  * ```
  */
-var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
-  (0, _inherits2["default"])(Player, _Subscribe);
+export var Player = /*#__PURE__*/function (_Subscribe) {
+  _inherits(Player, _Subscribe);
   var _super = _createSuper(Player);
   /** Five 渲染引擎实例 */
 
@@ -72,10 +64,10 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
   function Player(five) {
     var _this;
     var configs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    (0, _classCallCheck2["default"])(this, Player);
+    _classCallCheck(this, Player);
     _this = _super.call(this);
     _this.$five = five;
-    (0, _Audio.generateBlankAudio)(audioCacheLength);
+    generateBlankAudio(audioCacheLength);
     if (!configs.container) {
       configs.container = configs.containter;
     }
@@ -100,14 +92,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     _this.configs = Object.freeze(Object.assign({
       keyframeMap: {}
     }, configs));
-    _this.controller = new _Controller.Controller({
+    _this.controller = new Controller({
       five: five,
       container: configs.container,
       configs: _this.configs
     });
-    ReactDOM.render(/*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
+    ReactDOM.render(/*#__PURE__*/React.createElement(ControllerContext.Provider, {
       value: _this.controller
-    }, /*#__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) {
+    }, /*#__PURE__*/React.createElement(App, null), /*#__PURE__*/React.createElement(Drawer, null), /*#__PURE__*/React.createElement(PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
       return /*#__PURE__*/React.createElement(CustomCmpt, {
         key: key,
         subscribe: {
@@ -126,14 +118,14 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     })), configs.container);
 
     // 监听播放情况：抛出触发时机
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.controller.ended;
     }, function (ended) {
       if (ended) {
         _this.emit('paused', true);
       }
     });
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.controller.playing;
     }, function (playing) {
       if (!_this.controller.ended) {
@@ -166,10 +158,10 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
    * await player.load(vreoUnit, 0, false, true)
    * ```
    */
-  (0, _createClass2["default"])(Player, [{
+  _createClass(Player, [{
     key: "load",
     value: (function () {
-      var _load = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(vreoUnit) {
+      var _load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$medi,
           _this$configs$imageOp,
           _this$controller$vide,
@@ -182,7 +174,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
           panoIndexes,
           i,
           _args = arguments;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -221,7 +213,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
                   break;
                 }
                 panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
-                  if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
+                  if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
                     return false;
                   }
                   var data = vreoKeyframe.data;
@@ -258,7 +250,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
                 }
                 this.controller.setAvatar(vreoUnit.video.avatar);
                 _context.next = 26;
-                return (0, _Audio.waitForBlankAudioGenerated)();
+                return waitForBlankAudioGenerated();
               case 26:
                 _context.next = 28;
                 return (_this$controller$vide2 = this.controller.videoAgentScene) === null || _this$controller$vide2 === void 0 ? void 0 : _this$controller$vide2.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
@@ -322,7 +314,7 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
       this.controller.setEnded(false);
       this.controller.setPlaying(true);
       (_this$controller$vreo = this.controller.vreoUnit) === null || _this$controller$vreo === void 0 ? void 0 : _this$controller$vreo.keyframes.forEach(function (keyframe) {
-        if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) {
+        if (keyframe.type === VreoKeyframeEnum.BgMusic) {
           keyframe.parsed = false;
         }
       });
@@ -398,5 +390,5 @@ var Player = exports.Player = /*#__PURE__*/function (_Subscribe) {
     }
   }]);
   return Player;
-}(_five.Subscribe);
+}(Subscribe);
 console.log("\n    \u250F\u2501\u2501\u2501\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u250F\u2513\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u250F\u2501\u2513\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2503\u2503\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2503\u2517\u2501\u251B\u2503\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u2501\u2503\u2503\u2501\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\u250F\u2501\u2501\u2513\n    \u2503\u250F\u2513\u250F\u251B\u2503\u250F\u2513\u2503\u2517\u2501\u2513\u2503\u2501\u2503\u2503\u2501\u2503\u2501\u2501\u252B\u2503\u250F\u2513\u2503\u2503\u250F\u2513\u2503\n    \u2503\u2503\u2503\u2517\u2513\u2503\u2503\u2501\u252B\u2503\u2517\u251B\u2517\u2513\u2503\u2517\u2513\u2523\u2501\u2501\u2503\u2503\u2503\u2501\u252B\u2503\u2503\u2501\u252B\n    \u2517\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u2501\u251B\u2517\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\u2517\u2501\u2501\u251B\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n    \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");

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

@@ -1,17 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = Drawer;
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _mobxReact = require("mobx-react");
-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); }
-var DrawerView = (0, _mobxReact.observer)(function (_ref) {
+import * as React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useController } from "../../hooks.js";
+var DrawerView = observer(function (_ref) {
   var _controller$drawerCon2;
   var controller = _ref.controller;
   var maxHeight = '400px';
@@ -26,7 +17,7 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
     return height;
   }();
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-drawer', {
+    className: classNames('vreo-drawer', {
       'vreo-drawer-visible': controller.drawerConfig && controller.drawerConfig.content
     }),
     onClick: function onClick() {
@@ -40,8 +31,8 @@ var DrawerView = (0, _mobxReact.observer)(function (_ref) {
     }
   }, ((_controller$drawerCon2 = controller.drawerConfig) === null || _controller$drawerCon2 === void 0 ? void 0 : _controller$drawerCon2.content) || ''));
 });
-function Drawer() {
-  var controller = (0, _hooks.useController)();
+export function Drawer() {
+  var controller = useController();
   return /*#__PURE__*/React.createElement(DrawerView, {
     controller: controller
   });

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

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-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 _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); }
-var PopUpView = (0, _mobxReact.observer)(function (_ref) {
+import * as React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { useController } from "../../hooks.js";
+var PopUpView = observer(function (_ref) {
   var controller = _ref.controller;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-PopUp', {
+    className: classNames('vreo-PopUp', {
       'vreo-PopUp-visible': controller.popUp
     }),
     onClick: function onClick() {
@@ -24,8 +15,8 @@ var PopUpView = (0, _mobxReact.observer)(function (_ref) {
     className: "vreo-PopUp-inner"
   }, controller.popUp || ''));
 });
-function PopUp() {
-  var controller = (0, _hooks.useController)();
+export function PopUp() {
+  var controller = useController();
   return /*#__PURE__*/React.createElement(PopUpView, {
     controller: controller
   });

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

@@ -1,28 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ResizeObserver = ResizeObserver;
-var _react = _interopRequireDefault(require("react"));
-var _addResizeListener = require("../../../shared-utils/addResizeListener");
-var _hooks = require("../../hooks");
-function ResizeObserver() {
-  var ref = _react["default"].useRef(null);
-  var controller = (0, _hooks.useController)();
-  _react["default"].useEffect(function () {
+import React from 'react';
+import { addResizeListener, hasResizeListener } from "../../../shared-utils/addResizeListener.js";
+import { useController } from "../../hooks.js";
+export function ResizeObserver() {
+  var ref = React.useRef(null);
+  var controller = useController();
+  React.useEffect(function () {
     if (!ref.current) return;
     var resizeElement = controller.container.parentElement;
-    if ((0, _addResizeListener.hasResizeListener)(resizeElement)) return;
-    var dispose = (0, _addResizeListener.addResizeListener)(resizeElement, function (width, height) {
+    if (hasResizeListener(resizeElement)) return;
+    var dispose = addResizeListener(resizeElement, function (width, height) {
       controller.setContainerSize(width, height);
     });
     return function () {
       dispose();
     };
   }, []);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "resizeObserver-element",
     ref: ref
   });

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -1,27 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoAgentMesh = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var THREE = _interopRequireWildcard(require("three"));
-var _Preloader = require("../../../shared-utils/Preloader");
-var _mobx = require("mobx");
-var _AudioLike = _interopRequireDefault(require("../../../shared-utils/AudioLike"));
-var _getMediaInfo = require("../../../shared-utils/getMediaInfo");
-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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as THREE from 'three';
+import { Preloader } from "../../../shared-utils/Preloader.js";
+import { makeObservable, observable, runInAction } from 'mobx';
+import AudioLike from "../../../shared-utils/AudioLike.js";
+import { getMediaType } from "../../../shared-utils/getMediaInfo.js";
 var vertexShader = "\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\nvoid main(){\n  vUv = uv;\n  vColorUv = vec2(uv.x / 2.0, uv.y);\n  vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
 var fragmentShaderTpl = function fragmentShaderTpl() {
   return "\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\nvarying vec2 vColorUv;\nvarying vec2 vMaskUv;\n\nvec3 hsv2rgb(vec3 c) {\n  const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nvec3 rgb2hsv(vec3 c) {\n  const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n  float d = q.x - min(q.w, q.y);\n  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float amask = 1.0;\n\n  float ref = color.r;\n  if (ref < color.b) ref = color.b;\n  amask = color.g - ref + 0.1;\n  amask = smoothstep(0.1, 0.3, amask);\n  amask = 1.0 - amask;\n\n  vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));\n  vec3 hsv = rgb2hsv(color);\n  float distance = abs(hsv.x - target.x);\n  if (distance < 0.15) {\n    hsv.y = 0.0;\n  }\n  color = hsv2rgb(hsv);\n\n  gl_FragColor = vec4(color.rgb, amask * float(enable));\n}\n";
@@ -31,6 +22,7 @@ var cacheInstance = {};
 /**
  * 视频经纪人贴片的配置选项
  */
+
 /**
  * 视频经纪人贴片类
  * 
@@ -60,8 +52,8 @@ var cacheInstance = {};
  * videoMesh.dispose()
  * ```
  */
-var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
-  (0, _inherits2["default"])(VideoAgentMesh, _THREE$Mesh);
+export var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
+  _inherits(VideoAgentMesh, _THREE$Mesh);
   var _super = _createSuper(VideoAgentMesh);
   /**
    * 创建视频经纪人贴片实例
@@ -86,7 +78,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
     var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
       preload: true
     };
-    (0, _classCallCheck2["default"])(this, VideoAgentMesh);
+    _classCallCheck(this, VideoAgentMesh);
     if (!options.videoInstance) {
       if (cacheInstance.videoInstance) {
         options.videoInstance = cacheInstance.videoInstance;
@@ -138,12 +130,12 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
     } else {
       _this.audioInstance = options.audioInstance;
     }
-    _this.audioLikeInstance = new _AudioLike["default"]();
-    (0, _mobx.makeObservable)((0, _assertThisInitialized2["default"])(_this), {
-      paused: _mobx.observable
+    _this.audioLikeInstance = new AudioLike();
+    makeObservable(_assertThisInitialized(_this), {
+      paused: observable
     });
     var updatePaused = function updatePaused(paused) {
-      return (0, _mobx.runInAction)(function () {
+      return runInAction(function () {
         return _this.paused = paused;
       });
     };
@@ -178,7 +170,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
    * @param videoUrl - 媒体文件URL
    * @private
    */
-  (0, _createClass2["default"])(VideoAgentMesh, [{
+  _createClass(VideoAgentMesh, [{
     key: "mediaInstance",
     get: /** 配置选项 */
 
@@ -208,7 +200,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
       if (!this.videoUrl) {
         return this.audioLikeInstance;
       }
-      if ((0, _getMediaInfo.getMediaType)(this.videoUrl) === 'audio') {
+      if (getMediaType(this.videoUrl) === 'audio') {
         return this.audioInstance;
       }
       var uniforms = this.material.uniforms;
@@ -218,10 +210,10 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
   }, {
     key: "update",
     value: (function () {
-      var _update = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(videoUrl) {
+      var _update = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(videoUrl) {
         var _this2 = this;
         var uniforms, onStart;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -246,13 +238,13 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
               case 6:
                 uniforms = this.material.uniforms;
                 this.mediaInstance.muted = true;
-                if (!(this.options.preload || this.options.preload === undefined || (0, _getMediaInfo.getMediaType)(this.videoUrl) === 'video')) {
+                if (!(this.options.preload || this.options.preload === undefined || getMediaType(this.videoUrl) === 'video')) {
                   _context.next = 18;
                   break;
                 }
                 _context.t1 = URL;
                 _context.next = 12;
-                return _Preloader.Preloader.blob(this.videoUrl);
+                return Preloader.blob(this.videoUrl);
               case 12:
                 _context.t2 = _context.sent;
                 _context.next = 15;
@@ -270,7 +262,7 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
                   if (_this2.mediaInstance.currentTime === 0) return;
                   _this2.freeze = false;
                   _this2.mediaInstance.muted = false;
-                  uniforms.enable.value = (0, _getMediaInfo.getMediaType)(_this2.videoUrl) ? 1 : 0;
+                  uniforms.enable.value = getMediaType(_this2.videoUrl) ? 1 : 0;
                   _this2.mediaInstance.removeEventListener('timeupdate', onStart, false);
                 };
                 this.mediaInstance.addEventListener('timeupdate', onStart, false);
@@ -315,13 +307,13 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
   }, {
     key: "play",
     value: (function () {
-      var _play = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var _play = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var _this3 = this;
         var videoUrl,
           currentTime,
           duration,
           _args3 = arguments;
-        return _regenerator["default"].wrap(function _callee3$(_context3) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
@@ -375,8 +367,8 @@ var VideoAgentMesh = exports.VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh
                 this.mediaInstance.pause();
                 _context3.next = 28;
                 return new Promise(function (resolve) {
-                  return setTimeout(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-                    return _regenerator["default"].wrap(function _callee2$(_context2) {
+                  return setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
                       while (1) {
                         switch (_context2.prev = _context2.next) {
                           case 0:

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -1,42 +1,33 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoAgentScene = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var THREE = _interopRequireWildcard(require("three"));
-var _addResizeListener = require("../../../shared-utils/addResizeListener");
-var _VideoAgentMesh = require("./VideoAgentMesh");
-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); }
-var VideoAgentScene = exports.VideoAgentScene = /*#__PURE__*/(0, _createClass2["default"])(function VideoAgentScene(container, options) {
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as THREE from 'three';
+import { addResizeListener } from "../../../shared-utils/addResizeListener.js";
+import { VideoAgentMesh } from "./VideoAgentMesh.js";
+export var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container, options) {
   var _this = this;
-  (0, _classCallCheck2["default"])(this, VideoAgentScene);
-  (0, _defineProperty2["default"])(this, "scene", new THREE.Scene());
-  (0, _defineProperty2["default"])(this, "camera", new THREE.OrthographicCamera(-240, 240, 135, -135));
-  (0, _defineProperty2["default"])(this, "renderer", new THREE.WebGLRenderer({
+  _classCallCheck(this, VideoAgentScene);
+  _defineProperty(this, "scene", new THREE.Scene());
+  _defineProperty(this, "camera", new THREE.OrthographicCamera(-240, 240, 135, -135));
+  _defineProperty(this, "renderer", new THREE.WebGLRenderer({
     alpha: true
   }));
-  (0, _defineProperty2["default"])(this, "disposers", []);
-  (0, _defineProperty2["default"])(this, "run", function () {
+  _defineProperty(this, "disposers", []);
+  _defineProperty(this, "run", function () {
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     if (!(_this.videoAgentMesh.paused || _this.videoAgentMesh.freeze) && _this.videoAgentMesh.currentTime > 1000) {
       _this.renderer.render(_this.scene, _this.camera);
     }
     requestAnimationFrame(_this.run);
   });
-  (0, _defineProperty2["default"])(this, "dispose", function () {
+  _defineProperty(this, "dispose", function () {
     var _this$videoAgentMesh;
     (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
     _this.disposers.forEach(function (disposer) {
       return disposer === null || disposer === void 0 ? void 0 : disposer();
     });
   });
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
+  this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options);
 
   // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
 
@@ -45,7 +36,7 @@ var VideoAgentScene = exports.VideoAgentScene = /*#__PURE__*/(0, _createClass2["
     this.camera.lookAt(0, 0, 0);
     var domElement = this.renderer.domElement;
     domElement.classList.add('VideoAgent-canvas');
-    var dispose = (0, _addResizeListener.addResizeListener)(container, function (width, height) {
+    var dispose = addResizeListener(container, function (width, height) {
       _this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
       domElement.style.width = "".concat(width, "px");
       domElement.style.height = "".concat(height, "px");

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

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoAgent = VideoAgent;
-var React = _interopRequireWildcard(require("react"));
-var _hooks = require("../../hooks");
-var _VideoAgentScene = require("./VideoAgentScene");
-var _classnames = _interopRequireDefault(require("classnames"));
-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 VideoAgent(props) {
+import * as React from 'react';
+import { useController } from "../../hooks.js";
+import { VideoAgentScene } from "./VideoAgentScene.js";
+import classNames from 'classnames';
+export function VideoAgent(props) {
   var _controller$avatar2;
   var ref = React.useRef(null);
-  var controller = (0, _hooks.useController)();
+  var controller = useController();
   var showAvatar = React.useMemo(function () {
     var _controller$avatar;
     return ((_controller$avatar = controller.avatar) === null || _controller$avatar === void 0 ? void 0 : _controller$avatar.url) && controller.avatar.force === true;
@@ -30,7 +21,7 @@ function VideoAgent(props) {
       console.warn('VideoAgentScene" 重复初始化，已被过滤');
       return;
     }
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, props.options);
+    var videoAgentScene = new VideoAgentScene(ref.current, props.options);
     controller.videoAgentScene = videoAgentScene;
     return function () {
       var _controller$videoAgen2;
@@ -53,7 +44,7 @@ function VideoAgent(props) {
       return (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props);
     }
   }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('VideoAgent', {
+    className: classNames('VideoAgent', {
       hide: !showVideoAgent
     })
   }, /*#__PURE__*/React.createElement("div", {