@realsee/vreo 1.0.0-alpha.20 → 1.0.0-alpha.22

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 # CHANGELOG
+#1.0.0-alpha.21
+- fix: 多段BgMusic播放问题
+
 #1.0.0-alpha.19
 - fix: 多段BgMusic可以重复播放
 

package/lib/Player/Controller.js

@@ -343,10 +343,17 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
           _this$mediaInstance4,
           _this3 = this;
 
-      if ((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.ended) {
+      if ((_this$mediaInstance = this.mediaInstance) !== null && _this$mediaInstance !== void 0 && _this$mediaInstance.ended && this.mediaInstance.currentTime !== 0) {
+        var _this$vreoUnit;
+
+        if (this.ended) return;
+        (_this$vreoUnit = this.vreoUnit) === null || _this$vreoUnit === void 0 ? void 0 : _this$vreoUnit.keyframes.forEach(function (keyframe) {
+          return keyframe.parsed = false;
+        });
         this.setEnded(true);
         this.setPlaying(false);
         this.mediaInstance.pause();
+        this.mediaInstance.currentTime = 0;
         return;
       }
 
@@ -391,28 +398,25 @@ var Controller = /*#__PURE__*/function (_Subscribe) {
   }, {
     key: "dispose",
     value: function dispose() {
-      this.setPlaying(false);
+      var _this$vreoUnit2, _this$stopInterval;
 
-      if (this.currentKeyframes) {
-        this.currentKeyframes.forEach(function (keyframe) {
-          return keyframe.parsed = false;
-        });
-      }
+      this.setPlaying(false);
+      (_this$vreoUnit2 = this.vreoUnit) === null || _this$vreoUnit2 === void 0 ? void 0 : _this$vreoUnit2.keyframes.forEach(function (keyframe) {
+        return keyframe.parsed = false;
+      });
       /**
        * 清理掉数据
        */
 
-
       this.vreoUnit = undefined;
 
       if (this.mediaInstance) {
+        this.mediaInstance.pause();
         this.mediaInstance.currentTime = 0;
       }
 
-      if (this.stopInterval) {
-        this.stopInterval();
-        this.stopInterval = undefined;
-      }
+      (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 ? void 0 : _this$stopInterval.call(this);
+      this.stopInterval = undefined;
     }
   }]);
 

package/lib/Player/index.js

@@ -289,6 +289,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
       Object.assign(window, {
         $vreoController: this.controller
       });
+      this.controller.setEnded(false);
       this.controller.setPlaying(true);
       return true;
     }

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

@@ -17,25 +17,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var audioList = [];
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 function getAudio() {
   var src = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var currentTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  var audio = function () {
-    var audio = audioList.find(function (audio) {
-      return audio.src === src && audio.paused;
-    });
-    if (audio) return audio;else {
-      var newAudio = new Audio(src);
-      audioList.push(newAudio);
-      return newAudio;
-    }
-  }();
-
+  var audio = new Audio();
+  audio.src = src;
   audio.currentTime = currentTime;
-  audio.setAttribute('playsinline', 'true');
   return audio;
 }
 
@@ -49,40 +40,55 @@ function BgMusic() {
     }
   }, []);
   React.useEffect(function () {
-    var callback = function callback(keyframe, currentTime) {
-      console.log({
-        currentTime: currentTime
-      });
-      var start = keyframe.start,
-          end = keyframe.end;
-      var audio = getAudio(keyframe.data.url, Math.max(currentTime - start, 0));
-
-      var playCallback = function playCallback() {
-        audio.play();
-      };
-
-      audio.addEventListener('canplaythrough', playCallback);
-      cleanTimeout();
-
-      var cleanAudio = function cleanAudio() {
-        console.log('cleanAudio', keyframe.start);
-        audio.removeEventListener('canplaythrough', playCallback);
-        audio.pause();
-        cleanTimeout();
+    var callback = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(keyframe, currentTime) {
+        var start, end, audio, playCallback, cleanAudio, duration;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                start = keyframe.start, end = keyframe.end;
+                audio = getAudio(keyframe.data.url, Math.max((currentTime - start) / 1000, 0));
+
+                playCallback = function playCallback() {
+                  audio.play();
+                };
+
+                audio.addEventListener('canplaythrough', playCallback);
+                cleanTimeout();
+
+                cleanAudio = function cleanAudio() {
+                  audio.removeEventListener('canplaythrough', playCallback);
+                  audio.pause();
+                  cleanTimeout();
+                };
+
+                duration = end - start;
+                audio.addEventListener('ended', cleanAudio); // 音频加载会有时间，所以不通过这种方式停止，而是等播完停止
+                // timeoutIdRef.current = setTimeout(() => {
+                //   cleanAudio()
+                // }, duration)
+
+                controller.once('paused', function () {
+                  cleanAudio();
+                });
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function callback(_x, _x2) {
+        return _ref.apply(this, arguments);
       };
-
-      var duration = end - start;
-      timeoutIdRef.current = setTimeout(function () {
-        console.log('timeout', duration);
-        cleanAudio();
-      }, duration);
-      controller.once('paused', function () {
-        cleanAudio();
-      });
-    };
+    }();
 
     controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
     return function () {
+      console.log('off');
       controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
       cleanTimeout();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.22",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",