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

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

@@ -9,10 +9,14 @@ exports.BgMusic = BgMusic;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _Audio = require("../../../../shared-utils/Audio");
+
 var _VreoUnit = require("../../../../typings/VreoUnit");
 
 var _hooks = require("../../../hooks");
 
+var _location$search$matc, _location$search$matc2;
+
 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; }
@@ -21,14 +25,8 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 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 = new Audio();
-  audio.src = src;
-  audio.currentTime = currentTime;
-  return audio;
-}
+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 : 5);
+(0, _Audio.generateBlankAudio)(audioCacheLength);
 
 function BgMusic() {
   var controller = (0, _hooks.useController)();
@@ -42,38 +40,43 @@ function BgMusic() {
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(keyframe, currentTime) {
-        var start, end, audio, playCallback, cleanAudio, duration;
+        var start, end, audio, play, cleanAudio;
         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));
+                audio = (0, _Audio.getAudio)(keyframe.data.url);
+                audio.currentTime = Math.max((currentTime - start) / 1000, 0);
+                audio.play();
 
-                playCallback = function playCallback() {
-                  audio.play();
+                play = function play() {
+                  return audio.play();
                 };
 
-                audio.addEventListener('canplaythrough', playCallback);
+                audio.addEventListener('canplaythrough', play);
+                audio.addEventListener('ended', function () {
+                  audio.src = '';
+                });
                 cleanTimeout();
 
                 cleanAudio = function cleanAudio() {
-                  audio.removeEventListener('canplaythrough', playCallback);
+                  audio.removeEventListener('canplaythrough', play);
                   audio.pause();
                   cleanTimeout();
-                };
-
-                duration = end - start;
-                audio.addEventListener('ended', cleanAudio); // 音频加载会有时间，所以不通过这种方式停止，而是等播完停止
+                }; // const duration = end - start
+                // audio.addEventListener('ended', cleanAudio)
+                // 音频加载会有时间，所以不通过这种方式停止，而是等播完停止
                 // timeoutIdRef.current = setTimeout(() => {
                 //   cleanAudio()
                 // }, duration)
 
+
                 controller.once('paused', function () {
                   cleanAudio();
                 });
 
-              case 9:
+              case 10:
               case "end":
                 return _context.stop();
             }
@@ -88,7 +91,6 @@ function BgMusic() {
 
     controller.on(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
     return function () {
-      console.log('off');
       controller.off(_VreoUnit.VreoKeyframeEnum.BgMusic, callback);
       cleanTimeout();
     };

package/lib/shared-utils/Audio.d.ts

@@ -0,0 +1,13 @@
+export declare function getAudio(src?: string): IAudio;
+export declare function generateBlankAudio(length: number): void;
+declare class IAudio extends Audio {
+    preload: "auto";
+    get src(): string;
+    set src(paramsSrc: string);
+    realSrc: string;
+    private inited;
+    private removeDocumentEventListener;
+    constructor(src?: string);
+    private init;
+}
+export {};

package/lib/shared-utils/Audio.js

@@ -0,0 +1,139 @@
+"use strict";
+
+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
+});
+exports.generateBlankAudio = generateBlankAudio;
+exports.getAudio = getAudio;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function set(target, property, value, receiver) { if (typeof Reflect !== "undefined" && Reflect.set) { set = Reflect.set; } else { set = function set(target, property, value, receiver) { var base = _superPropBase(target, property); var desc; if (base) { desc = Object.getOwnPropertyDescriptor(base, property); if (desc.set) { desc.set.call(receiver, value); return true; } else if (!desc.writable) { return false; } } desc = Object.getOwnPropertyDescriptor(receiver, property); if (desc) { if (!desc.writable) { return false; } desc.value = value; Object.defineProperty(receiver, property, desc); } else { _defineProperty(receiver, property, value); } return true; }; } return set(target, property, value, receiver); }
+
+function _set(target, property, value, receiver, isStrict) { var s = set(target, property, value, receiver || target); if (!s && isStrict) { throw new Error('failed to set property'); } return value; }
+
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+
+function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 blankAudioSrc = 'data:audio/mpeg;base64,//AAAAHGZ0eXBNNEEgAAAAAE00QSBpc29tbXA0MgAAAAFtZGF0AAAAAAAAABwA0AAHANAABwDQAAcAAAM+bW9vdgAAAGxtdmhkAAAAAN+jti7fo7YuAACsRAAADAAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAdB0cmFrAAAAXHRraGQAAAAB36O2Lt+jti4AAAABAAAAAAAADAAAAAAAAAAAAAAAAAABAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAFsbWRpYQAAACBtZGhkAAAAAN+jti7fo7YuAACsRAAADABVxAAAAAAAMWhkbHIAAAAAAAAAAHNvdW4AAAAAAAAAAAAAAABDb3JlIE1lZGlhIEF1ZGlvAAAAARNtaW5mAAAAEHNtaGQAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAANdzdGJsAAAAZ3N0c2QAAAAAAAAAAQAAAFdtcDRhAAAAAAAAAAEAAAAAAAAAAAACABAAAAAArEQAAAAAADNlc2RzAAAAAAOAgIAiAAAABICAgBRAFAAYAAAA+gAAAPoABYCAgAISCAaAgIABAgAAABhzdHRzAAAAAAAAAAEAAAADAAAEAAAAABxzdHNjAAAAAAAAAAEAAAABAAAAAwAAAAEAAAAgc3RzegAAAAAAAAAAAAAAAwAAAAQAAAAEAAAABAAAABRzdGNvAAAAAAAAAAEAAAAsAAAA+nVkdGEAAADybWV0YQAAAAAAAAAiaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAAAxGlsc3QAAAC8LS0tLQAAABxtZWFuAAAAAGNvbS5hcHBsZS5pVHVuZXMAAAAUbmFtZQAAAABpVHVuU01QQgAAAIRkYXRhAAAAAQAAAAAgMDAwMDAwMDAgMDAwMDA4NDAgMDAwMDAzQzAgMDAwMDAwMDAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMCAwMDAwMDAwMA==';
+var audioList = [];
+
+function getAudio(src) {
+  var audio = audioList.find(function (audio) {
+    return !audio.realSrc || audio.realSrc === blankAudioSrc;
+  });
+
+  if (!audio) {
+    console.warn('未找到缓存音频，已新建');
+    audio = new IAudio(blankAudioSrc);
+  }
+
+  if (src) audio.src = src;
+  return audio;
+}
+
+function generateBlankAudio(length) {
+  // 判断一下已经生成几个了，防止重复生成
+  var generateLength = length - audioList.length;
+  if (generateLength <= 0) return;
+
+  for (var i = 0; i < generateLength; i++) {
+    audioList.push(new IAudio(blankAudioSrc));
+  }
+}
+
+var IAudio = /*#__PURE__*/function (_Audio) {
+  _inherits(IAudio, _Audio);
+
+  var _super = _createSuper(IAudio);
+
+  function IAudio(src) {
+    var _this;
+
+    _classCallCheck(this, IAudio);
+
+    _this = _super.call(this, src);
+
+    _defineProperty(_assertThisInitialized(_this), "preload", 'auto');
+
+    _defineProperty(_assertThisInitialized(_this), "realSrc", '');
+
+    _defineProperty(_assertThisInitialized(_this), "inited", false);
+
+    _this.realSrc = src !== null && src !== void 0 ? src : '';
+    console.log('create audio', src);
+
+    _this.addEventListener('end', function () {
+      return _this.src = '';
+    });
+
+    var init = _this.init.bind(_assertThisInitialized(_this));
+
+    document.addEventListener('click', init);
+    document.addEventListener('touchstart', init);
+
+    _this.removeDocumentEventListener = function () {
+      document.removeEventListener('click', init);
+      document.removeEventListener('touchstart', init);
+    };
+
+    return _this;
+  }
+
+  _createClass(IAudio, [{
+    key: "src",
+    get: function get() {
+      return _get(_getPrototypeOf(IAudio.prototype), "src", this);
+    },
+    set: function set(paramsSrc) {
+      _set(_getPrototypeOf(IAudio.prototype), "src", paramsSrc, this, true);
+
+      this.realSrc = paramsSrc;
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      if (this.inited) return;
+
+      if (this.src) {
+        this.inited = true;
+        this.removeDocumentEventListener();
+      }
+
+      if (this.src === blankAudioSrc) {
+        this.play();
+      }
+    }
+  }]);
+
+  return IAudio;
+}( /*#__PURE__*/_wrapNativeSuper(Audio));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "1.0.0-alpha.22",
+  "version": "1.0.0-alpha.23",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -52,6 +52,7 @@
     "@realsee/dnalogel": "^2.1.0-alpha.29",
     "@tweenjs/tween.js": "18.6.4",
     "classnames": "^2.3.1",
+    "eruda": "^2.5.0",
     "mobx": "^6.3.7",
     "mobx-react": "^7.2.1"
   }