@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +13,12 @@ var _Preloader = require("../../../shared-utils/Preloader");
 
 var _mobx = require("mobx");
 
+var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
+
+var _getMediaInfo = require("../../../shared-utils/getMediaInfo");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,9 +31,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -66,9 +72,13 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
    * @param options
    */
   function VideoAgentMesh(width, height, widthSegments, heightSegments) {
+    var _this$options$videoIn, _this$options$videoIn2, _this$options$videoIn3;
+
     var _this;
 
-    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+      preload: true
+    };
 
     _classCallCheck(this, VideoAgentMesh);
 
@@ -78,6 +88,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       } else {
         var videoInstance = document.createElement('video');
         videoInstance.style.opacity = '0';
+        videoInstance.style.pointerEvents = 'none';
         videoInstance.style.display = 'none';
         document.body.append(videoInstance);
         options.videoInstance = videoInstance;
@@ -115,10 +126,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         audioInstance.crossOrigin = ''; // videoInstance.muted = true
 
         audioInstance.muted = false;
-        audioInstance.setAttribute('playsinline', 'true');
-        audioInstance.setAttribute('webkit-playsinline', 'true');
-        audioInstance.setAttribute('autoplay', 'false');
-        audioInstance.setAttribute('style', 'display: none;');
+        audioInstance.autoplay = false;
+        audioInstance.style.display = 'none';
         document.body.appendChild(audioInstance);
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
@@ -127,6 +136,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       _this.audioInstance = options.audioInstance;
     }
 
+    _this.audioLikeInstance = new _AduioLike["default"]();
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });
@@ -145,25 +155,51 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       return updatePaused(false);
     };
 
-    _this.videoInstance.addEventListener('pause', onPause);
+    var onEnded = function onEnded() {
+      return console.log('vreo: video 播放结束');
+    };
+
+    _this.audioInstance.addEventListener('pause', onPause);
 
-    _this.videoInstance.addEventListener('play', onPlay);
+    _this.audioInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn = _this.options.videoInstance) === null || _this$options$videoIn === void 0 ? void 0 : _this$options$videoIn.addEventListener('pause', onPause);
+    (_this$options$videoIn2 = _this.options.videoInstance) === null || _this$options$videoIn2 === void 0 ? void 0 : _this$options$videoIn2.addEventListener('play', onPlay);
+
+    _this.audioLikeInstance.addEventListener('pause', onPause);
+
+    _this.audioLikeInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.addEventListener('ended', onEnded);
 
     _this.$removeEventListener = function () {
-      _this.videoInstance.removeEventListener('pause', onPause);
+      var _this$options$videoIn4, _this$options$videoIn5, _this$options$videoIn6;
+
+      _this.audioInstance.removeEventListener('pause', onPause);
+
+      _this.audioInstance.removeEventListener('play', onPlay);
 
-      _this.videoInstance.removeEventListener('play', onPlay);
+      (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('pause', onPause);
+      (_this$options$videoIn5 = _this.options.videoInstance) === null || _this$options$videoIn5 === void 0 ? void 0 : _this$options$videoIn5.removeEventListener('play', onPlay);
+
+      _this.audioLikeInstance.removeEventListener('pause', onPause);
+
+      _this.audioLikeInstance.removeEventListener('play', onPlay);
+
+      (_this$options$videoIn6 = _this.options.videoInstance) === null || _this$options$videoIn6 === void 0 ? void 0 : _this$options$videoIn6.removeEventListener('ended', onEnded);
     };
 
     return _this;
   }
 
   _createClass(VideoAgentMesh, [{
-    key: "videoInstance",
+    key: "mediaInstance",
     get: function get() {
-      var _this$videoUrl;
+      if (!this.videoUrl) {
+        return this.audioLikeInstance;
+      }
 
-      if ((_this$videoUrl = this.videoUrl) !== null && _this$videoUrl !== void 0 && _this$videoUrl.endsWith('mp3')) {
+      if ((0, _getMediaInfo.getMediaType)(this.videoUrl) === 'audio') {
         return this.audioInstance;
       }
 
@@ -190,41 +226,59 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                 return _context.abrupt("return");
 
               case 2:
-                this.videoUrl = videoUrl;
+                this.videoUrl = videoUrl; // // 兼容非视频场景
+                // if (this.mediaInstance instanceof HTMLAudioElement) {
+                //   this.mediaInstance.style.display = 'none'
+                // } else if (this.mediaInstance instanceof HTMLVideoElement) {
+                //   this.mediaInstance.style.display = 'block'
+                // }
+
                 this.freeze = true;
                 _context.next = 6;
-                return this.videoInstance.pause();
+                return this.mediaInstance.pause();
 
               case 6:
                 uniforms = this.material.uniforms;
-                this.videoInstance.muted = true;
-                _context.t0 = URL;
-                _context.next = 11;
+                this.mediaInstance.muted = true;
+
+                if (!(this.options.preload || this.options.preload === undefined || (0, _getMediaInfo.getMediaType)(this.videoUrl) === 'video')) {
+                  _context.next = 18;
+                  break;
+                }
+
+                _context.t1 = URL;
+                _context.next = 12;
                 return _Preloader.Preloader.blob(this.videoUrl);
 
-              case 11:
-                _context.t1 = _context.sent;
-                _context.next = 14;
-                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
+              case 12:
+                _context.t2 = _context.sent;
+                _context.next = 15;
+                return _context.t1.createObjectURL.call(_context.t1, _context.t2);
 
-              case 14:
-                this.videoInstance.src = _context.sent;
-                this.videoInstance.setAttribute('data-src', this.videoUrl);
+              case 15:
+                _context.t0 = _context.sent;
+                _context.next = 19;
+                break;
 
-                onStart = function onStart() {
-                  var _this2$videoUrl;
+              case 18:
+                _context.t0 = this.videoUrl;
+
+              case 19:
+                this.mediaInstance.src = _context.t0;
+                this.mediaInstance.setAttribute('data-src', this.videoUrl);
 
-                  if (_this2.videoInstance.currentTime === 0) return;
+                onStart = function onStart() {
+                  if (_this2.mediaInstance.currentTime === 0) return;
                   _this2.freeze = false;
-                  _this2.videoInstance.muted = false;
-                  uniforms.enable.value = (_this2$videoUrl = _this2.videoUrl) !== null && _this2$videoUrl !== void 0 && _this2$videoUrl.endsWith('.mp4') ? 1 : 0;
+                  _this2.mediaInstance.muted = false;
+                  uniforms.enable.value = (0, _getMediaInfo.getMediaType)(_this2.videoUrl) ? 1 : 0;
 
-                  _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
+                  _this2.mediaInstance.removeEventListener('timeupdate', onStart, false);
                 };
 
-                this.videoInstance.addEventListener('timeupdate', onStart, false);
+                this.mediaInstance.addEventListener('timeupdate', onStart, false);
 
-              case 18:
+              case 23:
               case "end":
                 return _context.stop();
             }
@@ -245,66 +299,85 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         var _this3 = this;
 
         var videoUrl,
+            currentTime,
+            duration,
             _args3 = arguments;
         return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
+                currentTime = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 0;
+                duration = _args3.length > 2 ? _args3[2] : undefined;
                 videoUrl = videoUrl || '';
 
-                if (videoUrl) {
+                if (!(duration && !videoUrl)) {
                   _context3.next = 10;
                   break;
                 }
 
+                if (this.currentTime) {
+                  this.mediaInstance.currentTime = currentTime;
+                }
+
+                this.mediaInstance.duration = duration;
+                this.videoUrl = '';
+                this.mediaInstance.play();
+                return _context3.abrupt("return", true);
+
+              case 10:
+                if (videoUrl) {
+                  _context3.next = 18;
+                  break;
+                }
+
                 if (!this.videoUrl) {
-                  _context3.next = 8;
+                  _context3.next = 16;
                   break;
                 }
 
-                _context3.next = 6;
-                return this.videoInstance.play();
+                _context3.next = 14;
+                return this.mediaInstance.play();
 
-              case 6:
-                _context3.next = 9;
+              case 14:
+                _context3.next = 17;
                 break;
 
-              case 8:
+              case 16:
                 console.warn('警告：视频资源未初始化。');
 
-              case 9:
+              case 17:
                 return _context3.abrupt("return", true);
 
-              case 10:
+              case 18:
                 if (!(videoUrl === this.videoUrl)) {
-                  _context3.next = 15;
+                  _context3.next = 23;
                   break;
                 }
 
-                this.videoInstance.currentTime = 0;
-                _context3.next = 14;
-                return this.videoInstance.play();
+                this.mediaInstance.currentTime = currentTime;
+                _context3.next = 22;
+                return this.mediaInstance.play();
 
-              case 14:
+              case 22:
                 return _context3.abrupt("return", true);
 
-              case 15:
-                _context3.next = 17;
+              case 23:
+                _context3.next = 25;
                 return this.update(videoUrl);
 
-              case 17:
-                this.videoInstance.pause();
-                _context3.next = 20;
+              case 25:
+                this.mediaInstance.pause();
+                _context3.next = 28;
                 return new Promise(function (resolve) {
                   return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
                     return regeneratorRuntime.wrap(function _callee2$(_context2) {
                       while (1) {
                         switch (_context2.prev = _context2.next) {
                           case 0:
-                            _this3.videoInstance.currentTime = 0;
+                            _this3.mediaInstance.currentTime = currentTime;
                             _context2.next = 3;
-                            return _this3.videoInstance.play();
+                            return _this3.mediaInstance.play();
 
                           case 3:
                             resolve(true);
@@ -318,10 +391,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                   })), 20);
                 });
 
-              case 20:
+              case 28:
                 return _context3.abrupt("return", _context3.sent);
 
-              case 21:
+              case 29:
               case "end":
                 return _context3.stop();
             }
@@ -342,7 +415,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
   }, {
     key: "currentTime",
     get: function get() {
-      return this.videoInstance.currentTime * 1000;
+      return this.mediaInstance.currentTime * 1000;
     }
   }, {
     key: "dispose",

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -1,15 +1,12 @@
 import * as THREE from 'three';
-import { VideoAgentMesh } from './VideoAgentMesh';
+import { VideoAgentMesh, VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare class VideoAgentScene {
     videoAgentMesh: VideoAgentMesh;
     scene: THREE.Scene;
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
-    container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean, options?: {
-        videoInstance?: HTMLVideoElement;
-        audioInstance?: HTMLAudioElement;
-    });
+    disposers: (() => void)[];
+    constructor(container?: HTMLElement, options?: VideoAgentMeshOptions);
     run: () => void;
     dispose: () => void;
 }

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,22 +9,25 @@ exports.VideoAgentScene = void 0;
 
 var THREE = _interopRequireWildcard(require("three"));
 
+var _addResizeListener = require("../../../shared-utils/addResizeListener");
+
 var _VideoAgentMesh = require("./VideoAgentMesh");
 
 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 _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var VideoAgentScene = function VideoAgentScene(container) {
+var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container, options) {
   var _this = this;
 
-  var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
   _classCallCheck(this, VideoAgentScene);
 
   _defineProperty(this, "scene", new THREE.Scene());
@@ -35,20 +38,12 @@ var VideoAgentScene = function VideoAgentScene(container) {
     alpha: true
   }));
 
-  _defineProperty(this, "run", function () {
-    var _this$videoAgentMesh$;
-
-    var domElement = _this.renderer.domElement; // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
+  _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);
-    } // 兼容非视频场景
-
-
-    if (!((_this$videoAgentMesh$ = _this.videoAgentMesh.videoUrl) !== null && _this$videoAgentMesh$ !== void 0 && _this$videoAgentMesh$.endsWith('.mp4'))) {
-      if (domElement.style.display !== 'none') domElement.style.display = 'none';
-    } else {
-      if (domElement.style.display !== 'block') domElement.style.display = 'block';
     }
 
     requestAnimationFrame(_this.run);
@@ -58,30 +53,30 @@ var VideoAgentScene = function VideoAgentScene(container) {
     var _this$videoAgentMesh;
 
     (_this$videoAgentMesh = _this.videoAgentMesh) === null || _this$videoAgentMesh === void 0 ? void 0 : _this$videoAgentMesh.dispose();
-  });
-
-  this.container = container;
-  this.camera.position.set(0, 0, 10);
-  this.camera.lookAt(0, 0, 0);
-  var state = {
-    width: container.offsetWidth,
-    height: container.offsetHeight
-  };
-  var _domElement = this.renderer.domElement;
-
-  _domElement.classList.add('VideoAgent-canvas');
 
-  this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-
-  _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
+    _this.disposers.forEach(function (disposer) {
+      return disposer === null || disposer === void 0 ? void 0 : disposer();
+    });
+  });
 
-  if (needRender) {
-    container.append(_domElement);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options); // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
+
+  if (container) {
+    this.camera.position.set(0, 0, 10);
+    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) {
+      _this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+
+      domElement.style.width = "".concat(width, "px");
+      domElement.style.height = "".concat(height, "px");
+    });
+    this.disposers.push(dispose);
+    container.append(domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }
-};
+});
 
 exports.VideoAgentScene = VideoAgentScene;

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,38 +13,79 @@ var _hooks = require("../../hooks");
 
 var _VideoAgentScene = require("./VideoAgentScene");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function VideoAgent(props) {
+  var _controller$avatar2;
+
   var ref = React.useRef(null);
   var controller = (0, _hooks.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;
+  }, [controller.avatar]);
+  var showVideoAgent = React.useMemo(function () {
+    var _controller$videoAgen;
+
+    if (showAvatar) return false;
+    return ((_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.videoAgentMesh.mediaInstance) instanceof HTMLVideoElement;
+  }, [controller.videoAgentScene]);
   React.useEffect(function () {
     if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...');
 
     if (controller.videoAgentScene) {
-      console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...');
+      console.warn('VideoAgentScene" 重复初始化，已被过滤');
       return;
     }
 
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, true, props.options || {});
+    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, props.options);
     controller.videoAgentScene = videoAgentScene;
     return function () {
-      var _controller$videoAgen;
+      var _controller$videoAgen2;
 
       controller.dispose();
-      (_controller$videoAgen = controller.videoAgentScene) === null || _controller$videoAgen === void 0 ? void 0 : _controller$videoAgen.dispose();
+      (_controller$videoAgen2 = controller.videoAgentScene) === null || _controller$videoAgen2 === void 0 ? void 0 : _controller$videoAgen2.dispose();
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "VideoAgent",
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "Avatar",
+    style: {
+      display: showAvatar ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Avatar-wrapper ratio-1-1"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "Avatar-img",
+    src: (_controller$avatar2 = controller.avatar) === null || _controller$avatar2 === void 0 ? void 0 : _controller$avatar2.url,
     onClick: function onClick() {
-      if (!props.onClick) return;
-      props.onClick();
-    },
+      var _props$onClick;
+
+      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', {
+      hide: !showVideoAgent
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-wrapper ratio-16-9"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "VideoAgent-inner",
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
-    className: "VideoAgent-play"
-  }));
+    className: "VideoAgent-play",
+    onClick: function onClick() {
+      var _props$onClick2;
+
+      return (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 ? void 0 : _props$onClick2.call(props);
+    }
+  }))))));
 }

package/lib/Player/modules/Wave/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WaveAppearance } from '../../typings';
+export declare function Wave(props?: {
+    appearance?: WaveAppearance;
+}): JSX.Element;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wave = Wave;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Wave(props) {
+  var waveUrl = _react["default"].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';
+
+    switch (appearance) {
+      default:
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm';
+
+      case 'solid':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm';
+
+      case 'single':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm';
+
+      case 'double':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm';
+
+      case 'swap':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm';
+
+      case 'expand':
+        return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm';
+    }
+  }, [props === null || props === void 0 ? void 0 : props.appearance]);
+
+  return /*#__PURE__*/_react["default"].createElement("video", {
+    className: "vreo-wave",
+    width: "100%",
+    preload: "auto",
+    muted: true,
+    autoPlay: true,
+    loop: true,
+    playsInline: true,
+    disablePictureInPicture: true,
+    controls: false,
+    src: waveUrl
+  });
+}

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true