videojs-wavesurfer
Advanced tools
Comparing version 2.11.0 to 3.0.0
229
CHANGES.md
@@ -1,7 +0,19 @@ | ||
videojs-wavesurfer changelog | ||
============================ | ||
# videojs-wavesurfer changelog | ||
2.11.0 - 2019/10/11 | ||
------------------- | ||
## 3.0.0 - 2020/05/12 | ||
- Support for video.js progress control (#93) | ||
- Move documentation into docsify website (#100) | ||
- Bump required video.js version to 7.0.5 or newer | ||
- Bump required wavesurfer.js version to 3.3.3 or newer | ||
**Backwards-incompatible changes** (when upgrading from a previous version): | ||
- Removed `src` option: use `player.src()` instead (#91) | ||
- Removed `src: 'live'` option: enable the wavesurfer.js microphone plugin | ||
using the config instead | ||
## 2.11.0 - 2019/10/11 | ||
- Fix loading peaks data from JSON files (#90) | ||
@@ -12,4 +24,3 @@ - Add `style` and `sass` entries to `package.json` | ||
2.10.0 - 2019/09/30 | ||
------------------- | ||
## 2.10.0 - 2019/09/30 | ||
@@ -20,4 +31,3 @@ - New `abort` event; triggered when wavesurfer.js fetch call is cancelled (#87) | ||
2.9.0 - 2019/07/14 | ||
------------------ | ||
## 2.9.0 - 2019/07/14 | ||
@@ -30,4 +40,3 @@ - Replace usage of `WaveSurfer.util.ajax()` with `WaveSurfer.util.fetchFile()` | ||
2.8.0 - 2019/03/18 | ||
------------------ | ||
## 2.8.0 - 2019/03/18 | ||
@@ -39,4 +48,3 @@ - Move event types to separate class | ||
2.7.0 - 2019/02/08 | ||
------------------ | ||
## 2.7.0 - 2019/02/08 | ||
@@ -47,4 +55,3 @@ - Fix hiding `playToggle` control | ||
2.6.4 - 2019/02/04 | ||
------------------ | ||
## 2.6.4 - 2019/02/04 | ||
@@ -55,4 +62,3 @@ - Bump required wavesurfer.js version to 2.1.3 for Safari browser | ||
2.6.3 - 2018/12/03 | ||
------------------ | ||
## 2.6.3 - 2018/12/03 | ||
@@ -62,4 +68,3 @@ - Improve API documentation (#77) | ||
2.6.2 - 2018/11/19 | ||
------------------ | ||
## 2.6.2 - 2018/11/19 | ||
@@ -71,4 +76,3 @@ - Bump required wavesurfer.js version to 2.1.1 for microphone support in | ||
2.6.1 - 2018/10/07 | ||
------------------ | ||
## 2.6.1 - 2018/10/07 | ||
@@ -78,4 +82,3 @@ - Fix hiding time controls (#73) | ||
2.6.0 - 2018/10/04 | ||
------------------ | ||
## 2.6.0 - 2018/10/04 | ||
@@ -86,4 +89,3 @@ - Bump required wavesurfer.js version to 2.1.0 for microphone support in | ||
2.5.1 - 2018/08/08 | ||
------------------ | ||
## 2.5.1 - 2018/08/08 | ||
@@ -94,4 +96,3 @@ - Fix minified CSS file (#69) | ||
2.5.0 - 2018/06/03 | ||
------------------ | ||
## 2.5.0 - 2018/06/03 | ||
@@ -102,4 +103,3 @@ - Bugfix: replace custom tech for text tracks to fix high CPU usage and issue | ||
2.4.0 - 2018/05/15 | ||
------------------ | ||
## 2.4.0 - 2018/05/15 | ||
@@ -113,4 +113,3 @@ - Add plugin style `vjs-wavesurfer` and prefix all custom plugin styles with | ||
2.3.2 - 2018/05/07 | ||
------------------ | ||
## 2.3.2 - 2018/05/07 | ||
@@ -120,4 +119,3 @@ - Package library using webpack 4 | ||
2.3.1 - 2018/04/30 | ||
------------------ | ||
## 2.3.1 - 2018/04/30 | ||
@@ -129,4 +127,3 @@ - Make sure plugin is only registered once | ||
2.3.0 - 2018/04/16 | ||
------------------ | ||
## 2.3.0 - 2018/04/16 | ||
@@ -138,4 +135,3 @@ - Package library using webpack (#55) | ||
2.2.2 - 2018/03/06 | ||
------------------ | ||
## 2.2.2 - 2018/03/06 | ||
@@ -145,4 +141,3 @@ - Add ability to pass array of peaks data to `load` (#52) | ||
2.2.1 - 2018/02/20 | ||
------------------ | ||
## 2.2.1 - 2018/02/20 | ||
@@ -152,4 +147,3 @@ - Fix tech for compatibility with video.js 6.7.x (#49 by @mfairchild365) | ||
2.2.0 - 2018/01/23 | ||
------------------ | ||
## 2.2.0 - 2018/01/23 | ||
@@ -161,4 +155,3 @@ - Support for changing audio output device using `setAudioOutput(deviceId)` | ||
2.1.4 - 2018/01/14 | ||
------------------ | ||
## 2.1.4 - 2018/01/14 | ||
@@ -169,4 +162,3 @@ - Bump required wavesurfer.js version to 2.0.2 for Chrome volume | ||
2.1.3 - 2017/12/22 | ||
------------------ | ||
## 2.1.3 - 2017/12/22 | ||
@@ -176,4 +168,3 @@ - Bump required wavesurfer.js version to 2.0.1 | ||
2.1.2 - 2017/12/13 | ||
------------------ | ||
## 2.1.2 - 2017/12/13 | ||
@@ -183,4 +174,3 @@ - Fix compatibility issue with videojs-record plugin (#46) | ||
2.1.1 - 2017/12/12 | ||
------------------ | ||
## 2.1.1 - 2017/12/12 | ||
@@ -196,4 +186,3 @@ - Added support for changing the playback rate (#43) | ||
2.1.0 - 2017/12/05 | ||
------------------ | ||
## 2.1.0 - 2017/12/05 | ||
@@ -203,4 +192,3 @@ - Caption/subtitle support (#36 by @mfairchild365) | ||
2.0.3 - 2017/11/30 | ||
------------------ | ||
## 2.0.3 - 2017/11/30 | ||
@@ -210,4 +198,3 @@ - Fix Windows build | ||
2.0.2 - 2017/11/15 | ||
------------------ | ||
## 2.0.2 - 2017/11/15 | ||
@@ -218,4 +205,3 @@ - Updated `load` function to optionally load an array of pre-rendered | ||
2.0.1 - 2017/10/03 | ||
------------------ | ||
## 2.0.1 - 2017/10/03 | ||
@@ -225,4 +211,3 @@ - Support for video.js 6.3.1 and newer | ||
2.0.0 - 2017/10/03 | ||
------------------ | ||
## 2.0.0 - 2017/10/03 | ||
@@ -244,4 +229,3 @@ - Rewrite plugin using ES6 (#29) | ||
1.3.6 - 2017/09/23 | ||
------------------ | ||
## 1.3.6 - 2017/09/23 | ||
@@ -251,4 +235,3 @@ - Bugfix: properly update current time and duration display components (#34) | ||
1.3.5 - 2017/09/19 | ||
------------------ | ||
## 1.3.5 - 2017/09/19 | ||
@@ -258,4 +241,3 @@ - Bugfix: correct the uiElements check (#26) | ||
1.3.4 - 2017/09/19 | ||
------------------ | ||
## 1.3.4 - 2017/09/19 | ||
@@ -265,4 +247,3 @@ - Restricted required wavesurfer.js version to < 2.0.0 | ||
1.3.3 - 2017/05/27 | ||
------------------ | ||
## 1.3.3 - 2017/05/27 | ||
@@ -272,4 +253,3 @@ - Use `video.js` AMD module name (#30) | ||
1.3.2 - 2017/04/09 | ||
------------------ | ||
## 1.3.2 - 2017/04/09 | ||
@@ -279,4 +259,3 @@ - Use `videojs.registerPlugin` in video.js 6.0.0 and newer (#27) | ||
1.3.1 - 2017/02/26 | ||
------------------ | ||
## 1.3.1 - 2017/02/26 | ||
@@ -286,4 +265,3 @@ - Added `getDuration` and `getCurrentTime` methods | ||
1.3.0 - 2017/02/13 | ||
------------------ | ||
## 1.3.0 - 2017/02/13 | ||
@@ -294,4 +272,3 @@ - Moved main script out of root into a new `src/js` directory | ||
1.2.7 - 2017/01/15 | ||
------------------ | ||
## 1.2.7 - 2017/01/15 | ||
@@ -301,4 +278,3 @@ - Added `playbackFinish` event (#24) | ||
1.2.6 - 2016/09/30 | ||
------------------ | ||
## 1.2.6 - 2016/09/30 | ||
@@ -308,4 +284,3 @@ - Bugfix: made sure the `debug` option has a default value (`false`) | ||
1.2.5 - 2016/09/30 | ||
------------------ | ||
## 1.2.5 - 2016/09/30 | ||
@@ -316,4 +291,3 @@ - Added `waveReady` event, useful for initializing wavesurfer.js plugins | ||
1.2.4 - 2016/09/16 | ||
------------------ | ||
## 1.2.4 - 2016/09/16 | ||
@@ -324,4 +298,3 @@ - Added `exportImage` to save an image of the waveform | ||
1.2.3 - 2016/08/27 | ||
------------------ | ||
## 1.2.3 - 2016/08/27 | ||
@@ -331,4 +304,3 @@ - Bugfix: added compatibility for video.js 5.11.0 and newer (#20) | ||
1.2.2 - 2016/08/08 | ||
------------------ | ||
## 1.2.2 - 2016/08/08 | ||
@@ -338,4 +310,3 @@ - Bugfix: corrected Node name for wavesurfer.js module (#19 by @monachilada) | ||
1.2.1 - 2016/05/22 | ||
------------------ | ||
## 1.2.1 - 2016/05/22 | ||
@@ -345,4 +316,3 @@ - Documentation updates | ||
1.2.0 - 2016/03/25 | ||
------------------ | ||
## 1.2.0 - 2016/03/25 | ||
@@ -353,4 +323,3 @@ - Prevented negative or invalid values in `formatTime` | ||
1.1.0 - 2016/02/26 | ||
------------------ | ||
## 1.1.0 - 2016/02/26 | ||
@@ -363,4 +332,3 @@ - Catch microphone device errors | ||
1.0.6 - 2016/01/17 | ||
------------------ | ||
## 1.0.6 - 2016/01/17 | ||
@@ -370,4 +338,3 @@ - Fixed issues with Firefox for Android (#15) | ||
1.0.5 - 2016/01/17 | ||
------------------ | ||
## 1.0.5 - 2016/01/17 | ||
@@ -377,4 +344,3 @@ - Propagate wavesurfer errors properly (#13 by @xlc) | ||
1.0.4 - 2015/12/21 | ||
------------------ | ||
## 1.0.4 - 2015/12/21 | ||
@@ -384,4 +350,3 @@ - Fixed wrong video.js module require for browserify | ||
1.0.3 - 2015/10/15 | ||
------------------ | ||
## 1.0.3 - 2015/10/15 | ||
@@ -391,4 +356,3 @@ - Fixed missing amd/node/global browser dependency for wavesurfer | ||
1.0.2 - 2015/10/15 | ||
------------------ | ||
## 1.0.2 - 2015/10/15 | ||
@@ -399,4 +363,3 @@ - Made sure controlBar is always showing (if `controls: true`) | ||
1.0.1 - 2015/10/14 | ||
------------------ | ||
## 1.0.1 - 2015/10/14 | ||
@@ -407,4 +370,3 @@ - Bugfix: use flex for controlBar so other plugins, like videojs-record, can | ||
1.0.0 - 2015/10/12 | ||
------------------ | ||
## 1.0.0 - 2015/10/12 | ||
@@ -415,4 +377,3 @@ - Support for video.js 5 | ||
0.9.9 - 2015/10/06 | ||
------------------ | ||
## 0.9.9 - 2015/10/06 | ||
@@ -424,4 +385,3 @@ - Use new `microphone.pause` and `microphone.play` during `live` mode | ||
0.9.8 - 2015/10/04 | ||
------------------ | ||
## 0.9.8 - 2015/10/04 | ||
@@ -433,4 +393,3 @@ - Updated bower and npm so only video.js v4.x releases are fetched, v5.0 is not | ||
0.9.7 - 2015/08/27 | ||
------------------ | ||
## 0.9.7 - 2015/08/27 | ||
@@ -440,4 +399,3 @@ - Allow custom wavesurfer container (#7) | ||
0.9.6 - 2015/03/19 | ||
------------------ | ||
## 0.9.6 - 2015/03/19 | ||
@@ -447,4 +405,3 @@ - Microphone plugin (if enabled) now also being removed in `destroy` | ||
0.9.5 - 2015/03/03 | ||
------------------ | ||
## 0.9.5 - 2015/03/03 | ||
@@ -454,4 +411,3 @@ - Compatibility fix for video.js 4.12 | ||
0.9.4 - 2015/02/18 | ||
------------------ | ||
## 0.9.4 - 2015/02/18 | ||
@@ -461,4 +417,3 @@ - Compatibility with video.js 4.12.0 | ||
0.9.3 - 2015/02/18 | ||
------------------ | ||
## 0.9.3 - 2015/02/18 | ||
@@ -468,4 +423,3 @@ - Documented video support and added an example (#3) | ||
0.9.2 - 2015/02/12 | ||
------------------ | ||
## 0.9.2 - 2015/02/12 | ||
@@ -475,4 +429,3 @@ - Updated metadata for video | ||
0.9.1 - 2015/01/14 | ||
------------------ | ||
## 0.9.1 - 2015/01/14 | ||
@@ -482,4 +435,3 @@ - Documentation and packaging fixes. | ||
0.9.0 - 2015/01/06 | ||
------------------ | ||
## 0.9.0 - 2015/01/06 | ||
@@ -489,4 +441,3 @@ - Bugfixes | ||
0.8.1 - 2014/12/17 | ||
------------------ | ||
## 0.8.1 - 2014/12/17 | ||
@@ -496,4 +447,3 @@ - Fixed bug with loading `Blob` or `File` objects | ||
0.8.0 - 2014/12/17 | ||
------------------ | ||
## 0.8.0 - 2014/12/17 | ||
@@ -503,4 +453,3 @@ - Added microphone support for live audio visualization | ||
0.7.0 - 2014/12/08 | ||
------------------ | ||
## 0.7.0 - 2014/12/08 | ||
@@ -512,4 +461,3 @@ - Ignore fullscreen mode when no valid src was loaded | ||
0.6.0 - 2014/11/25 | ||
------------------ | ||
## 0.6.0 - 2014/11/25 | ||
@@ -519,4 +467,3 @@ - Bugfixes | ||
0.5.0 - 2014/11/25 | ||
------------------ | ||
## 0.5.0 - 2014/11/25 | ||
@@ -526,4 +473,3 @@ - Bugfixes | ||
0.4.0 - 2014/11/19 | ||
------------------ | ||
## 0.4.0 - 2014/11/19 | ||
@@ -534,4 +480,3 @@ - Added `msDisplayMax` plugin setting | ||
0.3.0 - 2014/11/14 | ||
------------------ | ||
## 0.3.0 - 2014/11/14 | ||
@@ -543,11 +488,9 @@ - Added fullscreen feature | ||
0.2.0 - 2014/10/05 | ||
------------------ | ||
## 0.2.0 - 2014/10/05 | ||
- Compatibility with videojs 4.6 - 4.9 | ||
- Compatibility with video.js 4.6 - 4.9 | ||
0.1.0 - 2014/03/18 | ||
------------------ | ||
## 0.1.0 - 2014/03/18 | ||
- Initial release |
/*! | ||
* videojs-wavesurfer | ||
* @version 2.11.0 | ||
* @version 3.0.0 | ||
* @see https://github.com/collab-project/videojs-wavesurfer | ||
* @copyright 2014-2019 Collab | ||
* @copyright 2014-2020 Collab | ||
* @license MIT | ||
@@ -163,2 +163,14 @@ */ | ||
/***/ "./src/js/middleware.js": | ||
/*!******************************!*\ | ||
!*** ./src/js/middleware.js ***! | ||
\******************************/ | ||
/*! no static exports found */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar myMiddleware = {\n setSource: function setSource(srcObj, next) {\n var backend = this.player.wavesurfer().surfer.params.backend;\n var src = srcObj.src;\n var peaks = srcObj.peaks;\n\n switch (backend) {\n case 'WebAudio':\n this.player.wavesurfer().load(src);\n break;\n\n default:\n next(null, srcObj);\n var element = this.player.tech_.el();\n\n if (peaks === undefined) {\n this.player.wavesurfer().load(element);\n } else {\n this.player.wavesurfer().load(element, peaks);\n }\n\n break;\n }\n }\n};\nvar _default = myMiddleware;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/middleware.js?"); | ||
/***/ }), | ||
/***/ "./src/js/utils/format-time.js": | ||
@@ -196,3 +208,3 @@ /*!*************************************!*\ | ||
"use strict"; | ||
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Wavesurfer = void 0;\n\nvar _event = _interopRequireDefault(__webpack_require__(/*! ./event */ \"./src/js/event.js\"));\n\nvar _log2 = _interopRequireDefault(__webpack_require__(/*! ./utils/log */ \"./src/js/utils/log.js\"));\n\nvar _formatTime = _interopRequireDefault(__webpack_require__(/*! ./utils/format-time */ \"./src/js/utils/format-time.js\"));\n\nvar _defaults = _interopRequireDefault(__webpack_require__(/*! ./defaults */ \"./src/js/defaults.js\"));\n\nvar _window = _interopRequireDefault(__webpack_require__(/*! global/window */ \"./node_modules/global/window.js\"));\n\nvar _video = _interopRequireDefault(__webpack_require__(/*! video.js */ \"video.js\"));\n\nvar _wavesurfer = _interopRequireDefault(__webpack_require__(/*! wavesurfer.js */ \"wavesurfer.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _typeof(obj) { 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); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nvar Plugin = _video.default.getPlugin('plugin');\n\nvar wavesurferClassName = 'vjs-wavedisplay';\n\nvar Wavesurfer = function (_Plugin) {\n _inherits(Wavesurfer, _Plugin);\n\n function Wavesurfer(player, options) {\n var _this;\n\n _classCallCheck(this, Wavesurfer);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(Wavesurfer).call(this, player, options));\n player.addClass('vjs-wavesurfer');\n options = _video.default.mergeOptions(_defaults.default, options);\n _this.waveReady = false;\n _this.waveFinished = false;\n _this.liveMode = false;\n _this.debug = options.debug.toString() === 'true';\n _this.msDisplayMax = parseFloat(options.msDisplayMax);\n _this.textTracksEnabled = _this.player.options_.tracks.length > 0;\n\n if (options.src === 'live') {\n if (_wavesurfer.default.microphone !== undefined) {\n _this.liveMode = true;\n _this.waveReady = true;\n } else {\n _this.onWaveError('Could not find wavesurfer.js ' + 'microphone plugin!');\n\n return _possibleConstructorReturn(_this);\n }\n }\n\n _this.player.one(_event.default.READY, _this.initialize.bind(_assertThisInitialized(_this)));\n\n return _this;\n }\n\n _createClass(Wavesurfer, [{\n key: \"initialize\",\n value: function initialize() {\n var _this2 = this;\n\n this.player.bigPlayButton.hide();\n\n if (this.player.usingNativeControls_ === true) {\n if (this.player.tech_.el_ !== undefined) {\n this.player.tech_.el_.controls = false;\n }\n }\n\n if (this.player.options_.controls === true) {\n this.player.controlBar.show();\n this.player.controlBar.el_.style.display = 'flex';\n\n if (this.player.controlBar.progressControl !== undefined) {\n this.player.controlBar.progressControl.hide();\n }\n\n if (this.player.controlBar.pictureInPictureToggle !== undefined) {\n this.player.controlBar.pictureInPictureToggle.hide();\n }\n\n var uiElements = ['currentTimeDisplay', 'timeDivider', 'durationDisplay'];\n uiElements.forEach(function (element) {\n element = _this2.player.controlBar[element];\n\n if (element !== undefined) {\n element.el_.style.display = 'block';\n element.show();\n }\n });\n\n if (this.player.controlBar.remainingTimeDisplay !== undefined) {\n this.player.controlBar.remainingTimeDisplay.hide();\n }\n\n if (this.player.controlBar.playToggle !== undefined) {\n this.player.controlBar.playToggle.on(['tap', 'click'], this.onPlayToggle.bind(this));\n\n if (!this.liveMode) {\n this.player.controlBar.playToggle.hide();\n }\n }\n }\n\n var mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer);\n this.surfer = _wavesurfer.default.create(mergedOptions);\n this.surfer.on(_event.default.ERROR, this.onWaveError.bind(this));\n this.surfer.on(_event.default.FINISH, this.onWaveFinish.bind(this));\n\n if (this.liveMode === true) {\n this.surfer.microphone.on(_event.default.DEVICE_ERROR, this.onWaveError.bind(this));\n }\n\n this.surferReady = this.onWaveReady.bind(this);\n this.surferProgress = this.onWaveProgress.bind(this);\n this.surferSeek = this.onWaveSeek.bind(this);\n\n if (!this.liveMode) {\n this.setupPlaybackEvents(true);\n }\n\n this.player.on(_event.default.VOLUMECHANGE, this.onVolumeChange.bind(this));\n this.player.on(_event.default.FULLSCREENCHANGE, this.onScreenChange.bind(this));\n\n if (this.player.muted()) {\n this.setVolume(0);\n }\n\n if (this.player.options_.fluid === true) {\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.responsiveWave = _wavesurfer.default.util.debounce(this.onResizeChange.bind(this), 150);\n\n _window.default.addEventListener(_event.default.RESIZE, this.responsiveWave);\n }\n\n if (this.textTracksEnabled) {\n if (this.player.controlBar.currentTimeDisplay !== undefined) {\n this.player.controlBar.currentTimeDisplay.off(this.player, _event.default.TIMEUPDATE, this.player.controlBar.currentTimeDisplay.throttledUpdateContent);\n }\n\n this.player.tech_.trackCurrentTime();\n }\n\n this.startPlayers();\n }\n }, {\n key: \"parseOptions\",\n value: function parseOptions(surferOpts) {\n var rect = this.player.el_.getBoundingClientRect();\n this.originalWidth = this.player.options_.width || rect.width;\n this.originalHeight = this.player.options_.height || rect.height;\n var controlBarHeight = this.player.controlBar.height();\n\n if (this.player.options_.controls === true && controlBarHeight === 0) {\n controlBarHeight = 30;\n }\n\n if (surferOpts.container === undefined) {\n surferOpts.container = this.player.el_;\n }\n\n if (surferOpts.waveformHeight === undefined) {\n var playerHeight = rect.height;\n surferOpts.height = playerHeight - controlBarHeight;\n } else {\n surferOpts.height = surferOpts.waveformHeight;\n }\n\n if (surferOpts.splitChannels && surferOpts.splitChannels === true) {\n surferOpts.height /= 2;\n }\n\n if (this.liveMode === true) {\n surferOpts.plugins = [_wavesurfer.default.microphone.create(surferOpts)];\n this.log('wavesurfer.js microphone plugin enabled.');\n }\n\n return surferOpts;\n }\n }, {\n key: \"startPlayers\",\n value: function startPlayers() {\n var options = this.player.options_.plugins.wavesurfer;\n\n if (options.src !== undefined) {\n if (this.surfer.microphone === undefined) {\n this.player.loadingSpinner.show();\n this.load(options.src, options.peaks);\n } else {\n this.player.loadingSpinner.hide();\n options.wavesurfer = this.surfer;\n }\n } else {\n this.player.loadingSpinner.hide();\n }\n }\n }, {\n key: \"setupPlaybackEvents\",\n value: function setupPlaybackEvents(enable) {\n if (enable === false) {\n this.surfer.un(_event.default.READY, this.surferReady);\n this.surfer.un(_event.default.AUDIOPROCESS, this.surferProgress);\n this.surfer.un(_event.default.SEEK, this.surferSeek);\n } else if (enable === true) {\n this.surfer.on(_event.default.READY, this.surferReady);\n this.surfer.on(_event.default.AUDIOPROCESS, this.surferProgress);\n this.surfer.on(_event.default.SEEK, this.surferSeek);\n }\n }\n }, {\n key: \"load\",\n value: function load(url, peaks) {\n var _this3 = this;\n\n if (url instanceof Blob || url instanceof File) {\n this.log('Loading object: ' + JSON.stringify(url));\n this.surfer.loadBlob(url);\n } else {\n if (peaks !== undefined) {\n if (Array.isArray(peaks)) {\n this.log('Loading URL: ' + url);\n this.surfer.load(url, peaks);\n } else {\n var requestOptions = {\n url: peaks,\n responseType: 'json'\n };\n\n if (this.player.options_.plugins.wavesurfer.xhr !== undefined) {\n requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr;\n }\n\n var request = _wavesurfer.default.util.fetchFile(requestOptions);\n\n request.once('success', function (data) {\n _this3.log('Loaded Peak Data URL: ' + peaks);\n\n if (data && data.data) {\n _this3.surfer.load(url, data.data);\n } else {\n _this3.player.trigger(_event.default.ERROR, 'Could not load peaks data from ' + peaks);\n\n _this3.log(err, 'error');\n }\n });\n request.on('error', function (e) {\n _this3.log('Unable to retrieve peak data from ' + peaks + '. Status code: ' + request.response.status, 'warn');\n\n _this3.log('Loading URL: ' + url);\n\n _this3.surfer.load(url);\n });\n }\n } else {\n this.log('Loading URL: ' + url);\n this.surfer.load(url);\n }\n }\n }\n }, {\n key: \"play\",\n value: function play() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePlay();\n }\n\n if (this.liveMode) {\n if (!this.surfer.microphone.active) {\n this.log('Start microphone');\n this.surfer.microphone.start();\n } else {\n var paused = !this.surfer.microphone.paused;\n\n if (paused) {\n this.pause();\n } else {\n this.log('Resume microphone');\n this.surfer.microphone.play();\n }\n }\n } else {\n this.log('Start playback');\n this.player.play();\n this.surfer.play();\n }\n }\n }, {\n key: \"pause\",\n value: function pause() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePause();\n }\n\n if (this.liveMode) {\n this.log('Pause microphone');\n this.surfer.microphone.pause();\n } else {\n this.log('Pause playback');\n\n if (!this.waveFinished) {\n this.surfer.pause();\n } else {\n this.waveFinished = false;\n }\n\n this.setCurrentTime();\n }\n }\n }, {\n key: \"dispose\",\n value: function dispose() {\n if (this.surfer) {\n if (this.liveMode && this.surfer.microphone) {\n this.surfer.microphone.destroy();\n this.log('Destroyed microphone plugin');\n }\n\n this.surfer.destroy();\n }\n\n if (this.textTracksEnabled) {\n this.player.tech_.stopTrackingCurrentTime();\n }\n\n this.log('Destroyed plugin');\n }\n }, {\n key: \"isDestroyed\",\n value: function isDestroyed() {\n return this.player && this.player.children() === null;\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.player.dispose();\n }\n }, {\n key: \"setVolume\",\n value: function setVolume(volume) {\n if (volume !== undefined) {\n this.log('Changing volume to: ' + volume);\n this.player.volume(volume);\n }\n }\n }, {\n key: \"exportImage\",\n value: function exportImage(format, quality) {\n return this.surfer.exportImage(format, quality);\n }\n }, {\n key: \"setAudioOutput\",\n value: function setAudioOutput(deviceId) {\n var _this4 = this;\n\n if (deviceId) {\n this.surfer.setSinkId(deviceId).then(function (result) {\n _this4.player.trigger(_event.default.AUDIO_OUTPUT_READY);\n }).catch(function (err) {\n _this4.player.trigger(_event.default.ERROR, err);\n\n _this4.log(err, 'error');\n });\n }\n }\n }, {\n key: \"getCurrentTime\",\n value: function getCurrentTime() {\n var currentTime = this.surfer.getCurrentTime();\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n return currentTime;\n }\n }, {\n key: \"setCurrentTime\",\n value: function setCurrentTime(currentTime, duration) {\n if (currentTime === undefined) {\n currentTime = this.surfer.getCurrentTime();\n }\n\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n duration = isNaN(duration) ? 0 : duration;\n\n if (this.player.controlBar.currentTimeDisplay && this.player.controlBar.currentTimeDisplay.contentEl()) {\n var time = Math.min(currentTime, duration);\n this.player.controlBar.currentTimeDisplay.formattedTime_ = this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent = (0, _formatTime.default)(time, duration, this.msDisplayMax);\n }\n\n if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {\n this.player.tech_.setCurrentTime(currentTime);\n }\n }\n }, {\n key: \"getDuration\",\n value: function getDuration() {\n var duration = this.surfer.getDuration();\n duration = isNaN(duration) ? 0 : duration;\n return duration;\n }\n }, {\n key: \"setDuration\",\n value: function setDuration(duration) {\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n\n duration = isNaN(duration) ? 0 : duration;\n\n if (this.player.controlBar.durationDisplay && this.player.controlBar.durationDisplay.contentEl()) {\n this.player.controlBar.durationDisplay.formattedTime_ = this.player.controlBar.durationDisplay.contentEl().lastChild.textContent = (0, _formatTime.default)(duration, duration, this.msDisplayMax);\n }\n }\n }, {\n key: \"onWaveReady\",\n value: function onWaveReady() {\n this.waveReady = true;\n this.waveFinished = false;\n this.liveMode = false;\n this.log('Waveform is ready');\n this.player.trigger(_event.default.WAVE_READY);\n this.setCurrentTime();\n this.setDuration();\n\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.show();\n }\n\n if (this.player.loadingSpinner.contentEl()) {\n this.player.loadingSpinner.hide();\n }\n\n if (this.player.options_.autoplay === true) {\n this.play();\n }\n }\n }, {\n key: \"onWaveFinish\",\n value: function onWaveFinish() {\n var _this5 = this;\n\n this.log('Finished playback');\n this.player.trigger(_event.default.PLAYBACK_FINISH);\n\n if (this.player.options_.loop === true) {\n this.surfer.stop();\n this.play();\n } else {\n this.waveFinished = true;\n this.pause();\n this.player.trigger(_event.default.ENDED);\n this.surfer.once(_event.default.SEEK, function () {\n if (_this5.player.controlBar.playToggle !== undefined) {\n _this5.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n\n _this5.player.trigger(_event.default.PAUSE);\n });\n }\n }\n }, {\n key: \"onWaveProgress\",\n value: function onWaveProgress(time) {\n this.setCurrentTime();\n }\n }, {\n key: \"onWaveSeek\",\n value: function onWaveSeek() {\n this.setCurrentTime();\n }\n }, {\n key: \"onWaveError\",\n value: function onWaveError(error) {\n if (error.name && error.name === 'AbortError' || error.name === 'DOMException' && error.message.startsWith('The operation was aborted')) {\n this.player.trigger(_event.default.ABORT, error);\n } else {\n this.player.trigger(_event.default.ERROR, error);\n this.log(error, 'error');\n }\n }\n }, {\n key: \"onPlayToggle\",\n value: function onPlayToggle() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.hasClass('vjs-ended')) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n\n if (this.surfer.isPlaying()) {\n this.pause();\n } else {\n this.play();\n }\n }\n }, {\n key: \"onVolumeChange\",\n value: function onVolumeChange() {\n var volume = this.player.volume();\n\n if (this.player.muted()) {\n volume = 0;\n }\n\n this.surfer.setVolume(volume);\n }\n }, {\n key: \"onScreenChange\",\n value: function onScreenChange() {\n var _this6 = this;\n\n var fullscreenDelay = this.player.setInterval(function () {\n var isFullscreen = _this6.player.isFullscreen();\n\n var newWidth, newHeight;\n\n if (!isFullscreen) {\n newWidth = _this6.originalWidth;\n newHeight = _this6.originalHeight;\n }\n\n if (_this6.waveReady) {\n if (_this6.liveMode && !_this6.surfer.microphone.active) {\n return;\n }\n\n _this6.redrawWaveform(newWidth, newHeight);\n }\n\n _this6.player.clearInterval(fullscreenDelay);\n }, 100);\n }\n }, {\n key: \"onResizeChange\",\n value: function onResizeChange() {\n if (this.surfer !== undefined) {\n this.redrawWaveform();\n }\n }\n }, {\n key: \"redrawWaveform\",\n value: function redrawWaveform(newWidth, newHeight) {\n if (!this.isDestroyed()) {\n if (this.player.el_) {\n var rect = this.player.el_.getBoundingClientRect();\n\n if (newWidth === undefined) {\n newWidth = rect.width;\n }\n\n if (newHeight === undefined) {\n newHeight = rect.height;\n }\n }\n\n this.surfer.drawer.destroy();\n this.surfer.params.width = newWidth;\n this.surfer.params.height = newHeight - this.player.controlBar.height();\n this.surfer.createDrawer();\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.surfer.drawBuffer();\n this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents());\n }\n }\n }, {\n key: \"log\",\n value: function log(args, logType) {\n (0, _log2.default)(args, logType, this.debug);\n }\n }]);\n\n return Wavesurfer;\n}(Plugin);\n\nexports.Wavesurfer = Wavesurfer;\nWavesurfer.VERSION = \"2.11.0\";\n_video.default.Wavesurfer = Wavesurfer;\n\nif (_video.default.getPlugin('wavesurfer') === undefined) {\n _video.default.registerPlugin('wavesurfer', Wavesurfer);\n}\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/videojs.wavesurfer.js?"); | ||
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.Wavesurfer = void 0;\n\nvar _event = _interopRequireDefault(__webpack_require__(/*! ./event */ \"./src/js/event.js\"));\n\nvar _log2 = _interopRequireDefault(__webpack_require__(/*! ./utils/log */ \"./src/js/utils/log.js\"));\n\nvar _formatTime = _interopRequireDefault(__webpack_require__(/*! ./utils/format-time */ \"./src/js/utils/format-time.js\"));\n\nvar _defaults = _interopRequireDefault(__webpack_require__(/*! ./defaults */ \"./src/js/defaults.js\"));\n\nvar _middleware = _interopRequireDefault(__webpack_require__(/*! ./middleware */ \"./src/js/middleware.js\"));\n\nvar _window = _interopRequireDefault(__webpack_require__(/*! global/window */ \"./node_modules/global/window.js\"));\n\nvar _video = _interopRequireDefault(__webpack_require__(/*! video.js */ \"video.js\"));\n\nvar _wavesurfer = _interopRequireDefault(__webpack_require__(/*! wavesurfer.js */ \"wavesurfer.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _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); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { 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); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar Plugin = _video.default.getPlugin('plugin');\n\nvar wavesurferClassName = 'vjs-wavedisplay';\n\nvar Wavesurfer = function (_Plugin) {\n _inherits(Wavesurfer, _Plugin);\n\n var _super = _createSuper(Wavesurfer);\n\n function Wavesurfer(player, options) {\n var _this;\n\n _classCallCheck(this, Wavesurfer);\n\n _this = _super.call(this, player, options);\n player.addClass('vjs-wavesurfer');\n options = _video.default.mergeOptions(_defaults.default, options);\n _this.waveReady = false;\n _this.waveFinished = false;\n _this.liveMode = false;\n _this.backend = null;\n _this.debug = options.debug.toString() === 'true';\n _this.textTracksEnabled = _this.player.options_.tracks.length > 0;\n _this.msDisplayMax = parseFloat(options.msDisplayMax);\n\n _this.player.one(_event.default.READY, _this.initialize.bind(_assertThisInitialized(_this)));\n\n return _this;\n }\n\n _createClass(Wavesurfer, [{\n key: \"initialize\",\n value: function initialize() {\n var _this2 = this;\n\n this.player.bigPlayButton.hide();\n var mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer);\n\n _video.default.setFormatTime(function (seconds, guide) {\n return (0, _formatTime.default)(seconds, guide, _this2.msDisplayMax);\n });\n\n if (this.player.options_.controls === true) {\n this.player.controlBar.show();\n this.player.controlBar.el_.style.display = 'flex';\n\n if (this.backend === 'WebAudio' && this.player.controlBar.progressControl !== undefined) {\n this.player.controlBar.progressControl.hide();\n }\n\n if (this.player.controlBar.pictureInPictureToggle !== undefined) {\n this.player.controlBar.pictureInPictureToggle.hide();\n }\n\n var uiElements = ['currentTimeDisplay', 'timeDivider', 'durationDisplay'];\n uiElements.forEach(function (element) {\n element = _this2.player.controlBar[element];\n\n if (element !== undefined) {\n element.el_.style.display = 'block';\n element.show();\n }\n });\n\n if (this.player.controlBar.remainingTimeDisplay !== undefined) {\n this.player.controlBar.remainingTimeDisplay.hide();\n }\n\n if (this.backend === 'WebAudio' && this.player.controlBar.playToggle !== undefined) {\n this.player.controlBar.playToggle.on(['tap', 'click'], this.onPlayToggle.bind(this));\n\n if (!this.liveMode) {\n this.player.controlBar.playToggle.hide();\n }\n }\n }\n\n this.surfer = _wavesurfer.default.create(mergedOptions);\n this.surfer.on(_event.default.ERROR, this.onWaveError.bind(this));\n this.surfer.on(_event.default.FINISH, this.onWaveFinish.bind(this));\n this.backend = this.surfer.params.backend;\n this.log('Using wavesurfer.js ' + this.backend + ' backend.');\n\n if ('microphone' in this.player.wavesurfer().surfer.getActivePlugins()) {\n this.liveMode = true;\n this.waveReady = true;\n this.log('wavesurfer.js microphone plugin enabled.');\n this.surfer.microphone.on(_event.default.DEVICE_ERROR, this.onWaveError.bind(this));\n }\n\n this.surferReady = this.onWaveReady.bind(this);\n\n if (this.backend === 'WebAudio') {\n this.surferProgress = this.onWaveProgress.bind(this);\n this.surferSeek = this.onWaveSeek.bind(this);\n\n if (this.player.muted()) {\n this.setVolume(0);\n }\n }\n\n if (!this.liveMode) {\n this.setupPlaybackEvents(true);\n }\n\n this.player.on(_event.default.VOLUMECHANGE, this.onVolumeChange.bind(this));\n this.player.on(_event.default.FULLSCREENCHANGE, this.onScreenChange.bind(this));\n\n if (this.player.options_.fluid === true) {\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.responsiveWave = _wavesurfer.default.util.debounce(this.onResizeChange.bind(this), 150);\n\n _window.default.addEventListener(_event.default.RESIZE, this.responsiveWave);\n }\n }\n }, {\n key: \"parseOptions\",\n value: function parseOptions() {\n var surferOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var rect = this.player.el_.getBoundingClientRect();\n this.originalWidth = this.player.options_.width || rect.width;\n this.originalHeight = this.player.options_.height || rect.height;\n var controlBarHeight = this.player.controlBar.height();\n\n if (this.player.options_.controls === true && controlBarHeight === 0) {\n controlBarHeight = 30;\n }\n\n if (surferOpts.container === undefined) {\n surferOpts.container = this.player.el_;\n }\n\n if (surferOpts.waveformHeight === undefined) {\n var playerHeight = rect.height;\n surferOpts.height = playerHeight - controlBarHeight;\n } else {\n surferOpts.height = surferOpts.waveformHeight;\n }\n\n if (surferOpts.splitChannels && surferOpts.splitChannels === true) {\n surferOpts.height /= 2;\n }\n\n if ('backend' in surferOpts) {\n this.backend = surferOpts.backend;\n } else {\n surferOpts.backend = this.backend = 'MediaElement';\n }\n\n return surferOpts;\n }\n }, {\n key: \"setupPlaybackEvents\",\n value: function setupPlaybackEvents(enable) {\n if (enable === false) {\n this.surfer.un(_event.default.READY, this.surferReady);\n\n if (this.backend === 'WebAudio') {\n this.surfer.un(_event.default.AUDIOPROCESS, this.surferProgress);\n this.surfer.un(_event.default.SEEK, this.surferSeek);\n }\n } else if (enable === true) {\n this.surfer.on(_event.default.READY, this.surferReady);\n\n if (this.backend === 'WebAudio') {\n this.surfer.on(_event.default.AUDIOPROCESS, this.surferProgress);\n this.surfer.on(_event.default.SEEK, this.surferSeek);\n }\n }\n }\n }, {\n key: \"load\",\n value: function load(url, peaks) {\n if (url instanceof Blob || url instanceof File) {\n this.log('Loading object: ' + JSON.stringify(url));\n this.surfer.loadBlob(url);\n } else {\n if (peaks !== undefined) {\n this.loadPeaks(url, peaks);\n } else {\n if (typeof url === 'string') {\n this.log('Loading URL: ' + url);\n } else {\n this.log('Loading element: ' + url);\n }\n\n this.surfer.load(url);\n }\n }\n }\n }, {\n key: \"loadPeaks\",\n value: function loadPeaks(url, peaks) {\n var _this3 = this;\n\n if (Array.isArray(peaks)) {\n this.log('Loading URL with array of peaks: ' + url);\n this.surfer.load(url, peaks);\n } else {\n var requestOptions = {\n url: peaks,\n responseType: 'json'\n };\n\n if (this.player.options_.plugins.wavesurfer.xhr !== undefined) {\n requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr;\n }\n\n var request = _wavesurfer.default.util.fetchFile(requestOptions);\n\n request.once('success', function (data) {\n _this3.log('Loaded Peak Data URL: ' + peaks);\n\n if (data && data.data) {\n _this3.surfer.load(url, data.data);\n } else {\n _this3.player.trigger(_event.default.ERROR, 'Could not load peaks data from ' + peaks);\n\n _this3.log(err, 'error');\n }\n });\n request.on('error', function (e) {\n _this3.log('Unable to retrieve peak data from ' + peaks + '. Status code: ' + request.response.status, 'warn');\n\n _this3.log('Loading URL: ' + url);\n\n _this3.surfer.load(url);\n });\n }\n }\n }, {\n key: \"play\",\n value: function play() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePlay();\n }\n\n if (this.liveMode) {\n if (!this.surfer.microphone.active) {\n this.log('Start microphone');\n this.surfer.microphone.start();\n } else {\n var paused = !this.surfer.microphone.paused;\n\n if (paused) {\n this.pause();\n } else {\n this.log('Resume microphone');\n this.surfer.microphone.play();\n }\n }\n } else {\n this.log('Start playback');\n this.player.play();\n this.surfer.play();\n }\n }\n }, {\n key: \"pause\",\n value: function pause() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePause();\n }\n\n if (this.liveMode) {\n this.log('Pause microphone');\n this.surfer.microphone.pause();\n } else {\n this.log('Pause playback');\n\n if (!this.waveFinished) {\n this.surfer.pause();\n } else {\n this.waveFinished = false;\n }\n\n this.setCurrentTime();\n }\n }\n }, {\n key: \"dispose\",\n value: function dispose() {\n if (this.surfer) {\n if (this.liveMode && this.surfer.microphone) {\n this.surfer.microphone.destroy();\n this.log('Destroyed microphone plugin');\n }\n\n this.surfer.destroy();\n }\n\n this.log('Destroyed plugin');\n }\n }, {\n key: \"isDestroyed\",\n value: function isDestroyed() {\n return this.player && this.player.children() === null;\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.player.dispose();\n }\n }, {\n key: \"setVolume\",\n value: function setVolume(volume) {\n if (volume !== undefined) {\n this.log('Changing volume to: ' + volume);\n this.player.volume(volume);\n }\n }\n }, {\n key: \"exportImage\",\n value: function exportImage(format, quality) {\n return this.surfer.exportImage(format, quality);\n }\n }, {\n key: \"setAudioOutput\",\n value: function setAudioOutput(deviceId) {\n var _this4 = this;\n\n if (deviceId) {\n this.surfer.setSinkId(deviceId).then(function (result) {\n _this4.player.trigger(_event.default.AUDIO_OUTPUT_READY);\n }).catch(function (err) {\n _this4.player.trigger(_event.default.ERROR, err);\n\n _this4.log(err, 'error');\n });\n }\n }\n }, {\n key: \"getCurrentTime\",\n value: function getCurrentTime() {\n var currentTime = this.surfer.getCurrentTime();\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n return currentTime;\n }\n }, {\n key: \"setCurrentTime\",\n value: function setCurrentTime(currentTime, duration) {\n if (currentTime === undefined) {\n currentTime = this.surfer.getCurrentTime();\n }\n\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n duration = isNaN(duration) ? 0 : duration;\n\n if (this.player.controlBar.currentTimeDisplay && this.player.controlBar.currentTimeDisplay.contentEl()) {\n var time = Math.min(currentTime, duration);\n this.player.controlBar.currentTimeDisplay.formattedTime_ = this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent = (0, _formatTime.default)(time, duration, this.msDisplayMax);\n }\n\n if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {\n this.player.tech_.setCurrentTime(currentTime);\n }\n }\n }, {\n key: \"getDuration\",\n value: function getDuration() {\n var duration = this.surfer.getDuration();\n duration = isNaN(duration) ? 0 : duration;\n return duration;\n }\n }, {\n key: \"setDuration\",\n value: function setDuration(duration) {\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n\n duration = isNaN(duration) ? 0 : duration;\n\n if (this.player.controlBar.durationDisplay && this.player.controlBar.durationDisplay.contentEl()) {\n this.player.controlBar.durationDisplay.formattedTime_ = this.player.controlBar.durationDisplay.contentEl().lastChild.textContent = (0, _formatTime.default)(duration, duration, this.msDisplayMax);\n }\n }\n }, {\n key: \"onWaveReady\",\n value: function onWaveReady() {\n var _this5 = this;\n\n this.waveReady = true;\n this.waveFinished = false;\n this.liveMode = false;\n this.log('Waveform is ready');\n this.player.trigger(_event.default.WAVE_READY);\n\n if (this.backend === 'WebAudio') {\n this.setCurrentTime();\n this.setDuration();\n\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.show();\n }\n }\n\n if (this.player.loadingSpinner.contentEl()) {\n this.player.loadingSpinner.hide();\n }\n\n if (this.player.options_.autoplay === true) {\n this.setVolume(0);\n\n if (this.backend === 'WebAudio') {\n this.play();\n } else {\n this.player.play().catch(function (e) {\n _this5.onWaveError(e);\n });\n }\n }\n }\n }, {\n key: \"onWaveFinish\",\n value: function onWaveFinish() {\n var _this6 = this;\n\n this.log('Finished playback');\n this.player.trigger(_event.default.PLAYBACK_FINISH);\n\n if (this.player.options_.loop === true) {\n if (this.backend === 'WebAudio') {\n this.surfer.stop();\n this.play();\n }\n } else {\n this.waveFinished = true;\n\n if (this.backend === 'WebAudio') {\n this.pause();\n this.player.trigger(_event.default.ENDED);\n this.surfer.once(_event.default.SEEK, function () {\n if (_this6.player.controlBar.playToggle !== undefined) {\n _this6.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n\n _this6.player.trigger(_event.default.PAUSE);\n });\n }\n }\n }\n }, {\n key: \"onWaveProgress\",\n value: function onWaveProgress(time) {\n this.setCurrentTime();\n }\n }, {\n key: \"onWaveSeek\",\n value: function onWaveSeek() {\n this.setCurrentTime();\n }\n }, {\n key: \"onWaveError\",\n value: function onWaveError(error) {\n if (error.name && error.name === 'AbortError' || error.name === 'DOMException' && error.message.startsWith('The operation was aborted')) {\n this.player.trigger(_event.default.ABORT, error);\n } else {\n this.player.trigger(_event.default.ERROR, error);\n this.log(error, 'error');\n }\n }\n }, {\n key: \"onPlayToggle\",\n value: function onPlayToggle() {\n if (this.player.controlBar.playToggle !== undefined && this.player.controlBar.playToggle.hasClass('vjs-ended')) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n\n if (this.surfer.isPlaying()) {\n this.pause();\n } else {\n this.play();\n }\n }\n }, {\n key: \"onVolumeChange\",\n value: function onVolumeChange() {\n var volume = this.player.volume();\n\n if (this.player.muted()) {\n volume = 0;\n }\n\n this.surfer.setVolume(volume);\n }\n }, {\n key: \"onScreenChange\",\n value: function onScreenChange() {\n var _this7 = this;\n\n var fullscreenDelay = this.player.setInterval(function () {\n var isFullscreen = _this7.player.isFullscreen();\n\n var newWidth, newHeight;\n\n if (!isFullscreen) {\n newWidth = _this7.originalWidth;\n newHeight = _this7.originalHeight;\n }\n\n if (_this7.waveReady) {\n if (_this7.liveMode && !_this7.surfer.microphone.active) {\n return;\n }\n\n _this7.redrawWaveform(newWidth, newHeight);\n }\n\n _this7.player.clearInterval(fullscreenDelay);\n }, 100);\n }\n }, {\n key: \"onResizeChange\",\n value: function onResizeChange() {\n if (this.surfer !== undefined) {\n this.redrawWaveform();\n }\n }\n }, {\n key: \"redrawWaveform\",\n value: function redrawWaveform(newWidth, newHeight) {\n if (!this.isDestroyed()) {\n if (this.player.el_) {\n var rect = this.player.el_.getBoundingClientRect();\n\n if (newWidth === undefined) {\n newWidth = rect.width;\n }\n\n if (newHeight === undefined) {\n newHeight = rect.height;\n }\n }\n\n this.surfer.drawer.destroy();\n this.surfer.params.width = newWidth;\n this.surfer.params.height = newHeight - this.player.controlBar.height();\n this.surfer.createDrawer();\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.surfer.drawBuffer();\n this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents());\n }\n }\n }, {\n key: \"log\",\n value: function log(args, logType) {\n (0, _log2.default)(args, logType, this.debug);\n }\n }]);\n\n return Wavesurfer;\n}(Plugin);\n\nexports.Wavesurfer = Wavesurfer;\nWavesurfer.VERSION = \"3.0.0\";\n_video.default.Wavesurfer = Wavesurfer;\n\nif (_video.default.getPlugin('wavesurfer') === undefined) {\n _video.default.registerPlugin('wavesurfer', Wavesurfer);\n}\n\n_video.default.use('*', function (player) {\n _middleware.default.player = player;\n return _middleware.default;\n});\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/videojs.wavesurfer.js?"); | ||
@@ -208,3 +220,3 @@ /***/ }), | ||
eval("__webpack_require__(/*! /Users/thijstriemstra/projects/videojs-wavesurfer/src/js/videojs.wavesurfer.js */\"./src/js/videojs.wavesurfer.js\");\nmodule.exports = __webpack_require__(/*! /Users/thijstriemstra/projects/videojs-wavesurfer/src/css/videojs.wavesurfer.scss */\"./src/css/videojs.wavesurfer.scss\");\n\n\n//# sourceURL=webpack://VideojsWavesurfer/multi_./src/js/videojs.wavesurfer.js_./src/css/videojs.wavesurfer.scss?"); | ||
eval("__webpack_require__(/*! /home/thijs/projects/videojs-wavesurfer/src/js/videojs.wavesurfer.js */\"./src/js/videojs.wavesurfer.js\");\nmodule.exports = __webpack_require__(/*! /home/thijs/projects/videojs-wavesurfer/src/css/videojs.wavesurfer.scss */\"./src/css/videojs.wavesurfer.scss\");\n\n\n//# sourceURL=webpack://VideojsWavesurfer/multi_./src/js/videojs.wavesurfer.js_./src/css/videojs.wavesurfer.scss?"); | ||
@@ -211,0 +223,0 @@ /***/ }), |
/*! | ||
* videojs-wavesurfer | ||
* @version 2.11.0 | ||
* @version 3.0.0 | ||
* @see https://github.com/collab-project/videojs-wavesurfer | ||
* @copyright 2014-2019 Collab | ||
* @copyright 2014-2020 Collab | ||
* @license MIT | ||
*/ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("videojs"),require("WaveSurfer")):"function"==typeof define&&define.amd?define("VideojsWavesurfer",["videojs","WaveSurfer"],t):"object"==typeof exports?exports.VideojsWavesurfer=t(require("videojs"),require("WaveSurfer")):e.VideojsWavesurfer=t(e.videojs,e.WaveSurfer)}(window,(function(e,t){return function(e){var t={};function r(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(i,o,function(t){return e[t]}.bind(null,o));return i},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){r(2),e.exports=r(10)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Wavesurfer=void 0;var i=h(r(3)),o=h(r(4)),a=h(r(5)),s=h(r(6)),n=h(r(7)),l=h(r(0)),u=h(r(9));function h(e){return e&&e.__esModule?e:{default:e}}function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function d(e,t){return!t||"object"!==f(t)&&"function"!=typeof t?y(e):t}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e,t){return(v=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var g=l.default.getPlugin("plugin"),m=function(e){function t(e,r){var o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),o=d(this,c(t).call(this,e,r)),e.addClass("vjs-wavesurfer"),r=l.default.mergeOptions(s.default,r),o.waveReady=!1,o.waveFinished=!1,o.liveMode=!1,o.debug="true"===r.debug.toString(),o.msDisplayMax=parseFloat(r.msDisplayMax),o.textTracksEnabled=o.player.options_.tracks.length>0,"live"===r.src){if(void 0===u.default.microphone)return o.onWaveError("Could not find wavesurfer.js microphone plugin!"),d(o);o.liveMode=!0,o.waveReady=!0}return o.player.one(i.default.READY,o.initialize.bind(y(o))),o}var r,h,f;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)}(t,e),r=t,(h=[{key:"initialize",value:function(){var e=this;this.player.bigPlayButton.hide(),!0===this.player.usingNativeControls_&&void 0!==this.player.tech_.el_&&(this.player.tech_.el_.controls=!1),!0===this.player.options_.controls&&(this.player.controlBar.show(),this.player.controlBar.el_.style.display="flex",void 0!==this.player.controlBar.progressControl&&this.player.controlBar.progressControl.hide(),void 0!==this.player.controlBar.pictureInPictureToggle&&this.player.controlBar.pictureInPictureToggle.hide(),["currentTimeDisplay","timeDivider","durationDisplay"].forEach((function(t){void 0!==(t=e.player.controlBar[t])&&(t.el_.style.display="block",t.show())})),void 0!==this.player.controlBar.remainingTimeDisplay&&this.player.controlBar.remainingTimeDisplay.hide(),void 0!==this.player.controlBar.playToggle&&(this.player.controlBar.playToggle.on(["tap","click"],this.onPlayToggle.bind(this)),this.liveMode||this.player.controlBar.playToggle.hide()));var t=this.parseOptions(this.player.options_.plugins.wavesurfer);this.surfer=u.default.create(t),this.surfer.on(i.default.ERROR,this.onWaveError.bind(this)),this.surfer.on(i.default.FINISH,this.onWaveFinish.bind(this)),!0===this.liveMode&&this.surfer.microphone.on(i.default.DEVICE_ERROR,this.onWaveError.bind(this)),this.surferReady=this.onWaveReady.bind(this),this.surferProgress=this.onWaveProgress.bind(this),this.surferSeek=this.onWaveSeek.bind(this),this.liveMode||this.setupPlaybackEvents(!0),this.player.on(i.default.VOLUMECHANGE,this.onVolumeChange.bind(this)),this.player.on(i.default.FULLSCREENCHANGE,this.onScreenChange.bind(this)),this.player.muted()&&this.setVolume(0),!0===this.player.options_.fluid&&(this.surfer.drawer.wrapper.className="vjs-wavedisplay",this.responsiveWave=u.default.util.debounce(this.onResizeChange.bind(this),150),n.default.addEventListener(i.default.RESIZE,this.responsiveWave)),this.textTracksEnabled&&(void 0!==this.player.controlBar.currentTimeDisplay&&this.player.controlBar.currentTimeDisplay.off(this.player,i.default.TIMEUPDATE,this.player.controlBar.currentTimeDisplay.throttledUpdateContent),this.player.tech_.trackCurrentTime()),this.startPlayers()}},{key:"parseOptions",value:function(e){var t=this.player.el_.getBoundingClientRect();this.originalWidth=this.player.options_.width||t.width,this.originalHeight=this.player.options_.height||t.height;var r=this.player.controlBar.height();if(!0===this.player.options_.controls&&0===r&&(r=30),void 0===e.container&&(e.container=this.player.el_),void 0===e.waveformHeight){var i=t.height;e.height=i-r}else e.height=e.waveformHeight;return e.splitChannels&&!0===e.splitChannels&&(e.height/=2),!0===this.liveMode&&(e.plugins=[u.default.microphone.create(e)],this.log("wavesurfer.js microphone plugin enabled.")),e}},{key:"startPlayers",value:function(){var e=this.player.options_.plugins.wavesurfer;void 0!==e.src?void 0===this.surfer.microphone?(this.player.loadingSpinner.show(),this.load(e.src,e.peaks)):(this.player.loadingSpinner.hide(),e.wavesurfer=this.surfer):this.player.loadingSpinner.hide()}},{key:"setupPlaybackEvents",value:function(e){!1===e?(this.surfer.un(i.default.READY,this.surferReady),this.surfer.un(i.default.AUDIOPROCESS,this.surferProgress),this.surfer.un(i.default.SEEK,this.surferSeek)):!0===e&&(this.surfer.on(i.default.READY,this.surferReady),this.surfer.on(i.default.AUDIOPROCESS,this.surferProgress),this.surfer.on(i.default.SEEK,this.surferSeek))}},{key:"load",value:function(e,t){var r=this;if(e instanceof Blob||e instanceof File)this.log("Loading object: "+JSON.stringify(e)),this.surfer.loadBlob(e);else if(void 0!==t)if(Array.isArray(t))this.log("Loading URL: "+e),this.surfer.load(e,t);else{var o={url:t,responseType:"json"};void 0!==this.player.options_.plugins.wavesurfer.xhr&&(o.xhr=this.player.options_.plugins.wavesurfer.xhr);var a=u.default.util.fetchFile(o);a.once("success",(function(o){r.log("Loaded Peak Data URL: "+t),o&&o.data?r.surfer.load(e,o.data):(r.player.trigger(i.default.ERROR,"Could not load peaks data from "+t),r.log(err,"error"))})),a.on("error",(function(i){r.log("Unable to retrieve peak data from "+t+". Status code: "+a.response.status,"warn"),r.log("Loading URL: "+e),r.surfer.load(e)}))}else this.log("Loading URL: "+e),this.surfer.load(e)}},{key:"play",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.handlePlay(),this.liveMode?this.surfer.microphone.active?this.surfer.microphone.paused?(this.log("Resume microphone"),this.surfer.microphone.play()):this.pause():(this.log("Start microphone"),this.surfer.microphone.start()):(this.log("Start playback"),this.player.play(),this.surfer.play())}},{key:"pause",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.handlePause(),this.liveMode?(this.log("Pause microphone"),this.surfer.microphone.pause()):(this.log("Pause playback"),this.waveFinished?this.waveFinished=!1:this.surfer.pause(),this.setCurrentTime())}},{key:"dispose",value:function(){this.surfer&&(this.liveMode&&this.surfer.microphone&&(this.surfer.microphone.destroy(),this.log("Destroyed microphone plugin")),this.surfer.destroy()),this.textTracksEnabled&&this.player.tech_.stopTrackingCurrentTime(),this.log("Destroyed plugin")}},{key:"isDestroyed",value:function(){return this.player&&null===this.player.children()}},{key:"destroy",value:function(){this.player.dispose()}},{key:"setVolume",value:function(e){void 0!==e&&(this.log("Changing volume to: "+e),this.player.volume(e))}},{key:"exportImage",value:function(e,t){return this.surfer.exportImage(e,t)}},{key:"setAudioOutput",value:function(e){var t=this;e&&this.surfer.setSinkId(e).then((function(e){t.player.trigger(i.default.AUDIO_OUTPUT_READY)})).catch((function(e){t.player.trigger(i.default.ERROR,e),t.log(e,"error")}))}},{key:"getCurrentTime",value:function(){var e=this.surfer.getCurrentTime();return e=isNaN(e)?0:e}},{key:"setCurrentTime",value:function(e,t){if(void 0===e&&(e=this.surfer.getCurrentTime()),void 0===t&&(t=this.surfer.getDuration()),e=isNaN(e)?0:e,t=isNaN(t)?0:t,this.player.controlBar.currentTimeDisplay&&this.player.controlBar.currentTimeDisplay.contentEl()){var r=Math.min(e,t);this.player.controlBar.currentTimeDisplay.formattedTime_=this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent=(0,a.default)(r,t,this.msDisplayMax)}this.textTracksEnabled&&this.player.tech_&&this.player.tech_.el_&&this.player.tech_.setCurrentTime(e)}},{key:"getDuration",value:function(){var e=this.surfer.getDuration();return e=isNaN(e)?0:e}},{key:"setDuration",value:function(e){void 0===e&&(e=this.surfer.getDuration()),e=isNaN(e)?0:e,this.player.controlBar.durationDisplay&&this.player.controlBar.durationDisplay.contentEl()&&(this.player.controlBar.durationDisplay.formattedTime_=this.player.controlBar.durationDisplay.contentEl().lastChild.textContent=(0,a.default)(e,e,this.msDisplayMax))}},{key:"onWaveReady",value:function(){this.waveReady=!0,this.waveFinished=!1,this.liveMode=!1,this.log("Waveform is ready"),this.player.trigger(i.default.WAVE_READY),this.setCurrentTime(),this.setDuration(),void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.show(),this.player.loadingSpinner.contentEl()&&this.player.loadingSpinner.hide(),!0===this.player.options_.autoplay&&this.play()}},{key:"onWaveFinish",value:function(){var e=this;this.log("Finished playback"),this.player.trigger(i.default.PLAYBACK_FINISH),!0===this.player.options_.loop?(this.surfer.stop(),this.play()):(this.waveFinished=!0,this.pause(),this.player.trigger(i.default.ENDED),this.surfer.once(i.default.SEEK,(function(){void 0!==e.player.controlBar.playToggle&&e.player.controlBar.playToggle.removeClass("vjs-ended"),e.player.trigger(i.default.PAUSE)})))}},{key:"onWaveProgress",value:function(e){this.setCurrentTime()}},{key:"onWaveSeek",value:function(){this.setCurrentTime()}},{key:"onWaveError",value:function(e){e.name&&"AbortError"===e.name||"DOMException"===e.name&&e.message.startsWith("The operation was aborted")?this.player.trigger(i.default.ABORT,e):(this.player.trigger(i.default.ERROR,e),this.log(e,"error"))}},{key:"onPlayToggle",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.hasClass("vjs-ended")&&this.player.controlBar.playToggle.removeClass("vjs-ended"),this.surfer.isPlaying()?this.pause():this.play()}},{key:"onVolumeChange",value:function(){var e=this.player.volume();this.player.muted()&&(e=0),this.surfer.setVolume(e)}},{key:"onScreenChange",value:function(){var e=this,t=this.player.setInterval((function(){var r,i;if(e.player.isFullscreen()||(r=e.originalWidth,i=e.originalHeight),e.waveReady){if(e.liveMode&&!e.surfer.microphone.active)return;e.redrawWaveform(r,i)}e.player.clearInterval(t)}),100)}},{key:"onResizeChange",value:function(){void 0!==this.surfer&&this.redrawWaveform()}},{key:"redrawWaveform",value:function(e,t){if(!this.isDestroyed()){if(this.player.el_){var r=this.player.el_.getBoundingClientRect();void 0===e&&(e=r.width),void 0===t&&(t=r.height)}this.surfer.drawer.destroy(),this.surfer.params.width=e,this.surfer.params.height=t-this.player.controlBar.height(),this.surfer.createDrawer(),this.surfer.drawer.wrapper.className="vjs-wavedisplay",this.surfer.drawBuffer(),this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents())}}},{key:"log",value:function(e,t){(0,o.default)(e,t,this.debug)}}])&&p(r.prototype,h),f&&p(r,f),t}(g);t.Wavesurfer=m,m.VERSION="2.11.0",l.default.Wavesurfer=m,void 0===l.default.getPlugin("wavesurfer")&&l.default.registerPlugin("wavesurfer",m)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)};i.READY="ready",i.ERROR="error",i.VOLUMECHANGE="volumechange",i.FULLSCREENCHANGE="fullscreenchange",i.TIMEUPDATE="timeupdate",i.ENDED="ended",i.PAUSE="pause",i.FINISH="finish",i.SEEK="seek",i.REDRAW="redraw",i.AUDIOPROCESS="audioprocess",i.DEVICE_READY="deviceReady",i.DEVICE_ERROR="deviceError",i.AUDIO_OUTPUT_READY="audioOutputReady",i.WAVE_READY="waveReady",i.PLAYBACK_FINISH="playbackFinish",i.ABORT="abort",i.RESIZE="resize",Object.freeze(i);var o=i;t.default=o,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i,o=(i=r(0))&&i.__esModule?i:{default:i};var a=function(e,t,r){!0===r&&("error"===t?o.default.log.error(e):"warn"===t?o.default.log.warn(e):o.default.log(e))};t.default=a,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function(e,t,r){e=e<0?0:e,t=t||e;var i=Math.floor(e%60),o=Math.floor(e/60%60),a=Math.floor(e/3600),s=Math.floor(t/60%60),n=Math.floor(t/3600),l=Math.floor(1e3*(e-i));return(isNaN(e)||e===1/0)&&(a=o=i=l="-"),t>0&&t<r?(l<100&&(l=l<10?"00"+l:"0"+l),l=":"+l):l="",(a=a>0||n>0?a+":":"")+(o=((a||s>=10)&&o<10?"0"+o:o)+":")+(i=i<10?"0"+i:i)+l};t.default=i,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={debug:!1,msDisplayMax:3};t.default=i,e.exports=t.default},function(e,t,r){(function(t){var r;r="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{},e.exports=r}).call(this,r(8))},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,r){e.exports=t},function(e,t,r){}])})); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("videojs"),require("WaveSurfer")):"function"==typeof define&&define.amd?define("VideojsWavesurfer",["videojs","WaveSurfer"],t):"object"==typeof exports?exports.VideojsWavesurfer=t(require("videojs"),require("WaveSurfer")):e.VideojsWavesurfer=t(e.videojs,e.WaveSurfer)}(window,(function(e,t){return function(e){var t={};function r(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(i,o,function(t){return e[t]}.bind(null,o));return i},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){r(2),e.exports=r(11)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Wavesurfer=void 0;var i=f(r(3)),o=f(r(4)),a=f(r(5)),n=f(r(6)),s=f(r(7)),l=f(r(8)),u=f(r(0)),h=f(r(10));function f(e){return e&&e.__esModule?e:{default:e}}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,i=b(e);if(t){var o=b(this).constructor;r=Reflect.construct(i,arguments,o)}else r=i.apply(this,arguments);return v(this,r)}}function v(e,t){return!t||"object"!==d(t)&&"function"!=typeof t?g(e):t}function g(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var m=u.default.getPlugin("plugin"),E=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}(d,e);var t,r,s,f=y(d);function d(e,t){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),r=f.call(this,e,t),e.addClass("vjs-wavesurfer"),t=u.default.mergeOptions(n.default,t),r.waveReady=!1,r.waveFinished=!1,r.liveMode=!1,r.backend=null,r.debug="true"===t.debug.toString(),r.textTracksEnabled=r.player.options_.tracks.length>0,r.msDisplayMax=parseFloat(t.msDisplayMax),r.player.one(i.default.READY,r.initialize.bind(g(r))),r}return t=d,(r=[{key:"initialize",value:function(){var e=this;this.player.bigPlayButton.hide();var t=this.parseOptions(this.player.options_.plugins.wavesurfer);u.default.setFormatTime((function(t,r){return(0,a.default)(t,r,e.msDisplayMax)})),!0===this.player.options_.controls&&(this.player.controlBar.show(),this.player.controlBar.el_.style.display="flex","WebAudio"===this.backend&&void 0!==this.player.controlBar.progressControl&&this.player.controlBar.progressControl.hide(),void 0!==this.player.controlBar.pictureInPictureToggle&&this.player.controlBar.pictureInPictureToggle.hide(),["currentTimeDisplay","timeDivider","durationDisplay"].forEach((function(t){void 0!==(t=e.player.controlBar[t])&&(t.el_.style.display="block",t.show())})),void 0!==this.player.controlBar.remainingTimeDisplay&&this.player.controlBar.remainingTimeDisplay.hide(),"WebAudio"===this.backend&&void 0!==this.player.controlBar.playToggle&&(this.player.controlBar.playToggle.on(["tap","click"],this.onPlayToggle.bind(this)),this.liveMode||this.player.controlBar.playToggle.hide())),this.surfer=h.default.create(t),this.surfer.on(i.default.ERROR,this.onWaveError.bind(this)),this.surfer.on(i.default.FINISH,this.onWaveFinish.bind(this)),this.backend=this.surfer.params.backend,this.log("Using wavesurfer.js "+this.backend+" backend."),"microphone"in this.player.wavesurfer().surfer.getActivePlugins()&&(this.liveMode=!0,this.waveReady=!0,this.log("wavesurfer.js microphone plugin enabled."),this.surfer.microphone.on(i.default.DEVICE_ERROR,this.onWaveError.bind(this))),this.surferReady=this.onWaveReady.bind(this),"WebAudio"===this.backend&&(this.surferProgress=this.onWaveProgress.bind(this),this.surferSeek=this.onWaveSeek.bind(this),this.player.muted()&&this.setVolume(0)),this.liveMode||this.setupPlaybackEvents(!0),this.player.on(i.default.VOLUMECHANGE,this.onVolumeChange.bind(this)),this.player.on(i.default.FULLSCREENCHANGE,this.onScreenChange.bind(this)),!0===this.player.options_.fluid&&(this.surfer.drawer.wrapper.className="vjs-wavedisplay",this.responsiveWave=h.default.util.debounce(this.onResizeChange.bind(this),150),l.default.addEventListener(i.default.RESIZE,this.responsiveWave))}},{key:"parseOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=this.player.el_.getBoundingClientRect();this.originalWidth=this.player.options_.width||t.width,this.originalHeight=this.player.options_.height||t.height;var r=this.player.controlBar.height();if(!0===this.player.options_.controls&&0===r&&(r=30),void 0===e.container&&(e.container=this.player.el_),void 0===e.waveformHeight){var i=t.height;e.height=i-r}else e.height=e.waveformHeight;return e.splitChannels&&!0===e.splitChannels&&(e.height/=2),"backend"in e?this.backend=e.backend:e.backend=this.backend="MediaElement",e}},{key:"setupPlaybackEvents",value:function(e){!1===e?(this.surfer.un(i.default.READY,this.surferReady),"WebAudio"===this.backend&&(this.surfer.un(i.default.AUDIOPROCESS,this.surferProgress),this.surfer.un(i.default.SEEK,this.surferSeek))):!0===e&&(this.surfer.on(i.default.READY,this.surferReady),"WebAudio"===this.backend&&(this.surfer.on(i.default.AUDIOPROCESS,this.surferProgress),this.surfer.on(i.default.SEEK,this.surferSeek)))}},{key:"load",value:function(e,t){e instanceof Blob||e instanceof File?(this.log("Loading object: "+JSON.stringify(e)),this.surfer.loadBlob(e)):void 0!==t?this.loadPeaks(e,t):("string"==typeof e?this.log("Loading URL: "+e):this.log("Loading element: "+e),this.surfer.load(e))}},{key:"loadPeaks",value:function(e,t){var r=this;if(Array.isArray(t))this.log("Loading URL with array of peaks: "+e),this.surfer.load(e,t);else{var o={url:t,responseType:"json"};void 0!==this.player.options_.plugins.wavesurfer.xhr&&(o.xhr=this.player.options_.plugins.wavesurfer.xhr);var a=h.default.util.fetchFile(o);a.once("success",(function(o){r.log("Loaded Peak Data URL: "+t),o&&o.data?r.surfer.load(e,o.data):(r.player.trigger(i.default.ERROR,"Could not load peaks data from "+t),r.log(err,"error"))})),a.on("error",(function(i){r.log("Unable to retrieve peak data from "+t+". Status code: "+a.response.status,"warn"),r.log("Loading URL: "+e),r.surfer.load(e)}))}}},{key:"play",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.handlePlay(),this.liveMode?this.surfer.microphone.active?this.surfer.microphone.paused?(this.log("Resume microphone"),this.surfer.microphone.play()):this.pause():(this.log("Start microphone"),this.surfer.microphone.start()):(this.log("Start playback"),this.player.play(),this.surfer.play())}},{key:"pause",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.handlePause(),this.liveMode?(this.log("Pause microphone"),this.surfer.microphone.pause()):(this.log("Pause playback"),this.waveFinished?this.waveFinished=!1:this.surfer.pause(),this.setCurrentTime())}},{key:"dispose",value:function(){this.surfer&&(this.liveMode&&this.surfer.microphone&&(this.surfer.microphone.destroy(),this.log("Destroyed microphone plugin")),this.surfer.destroy()),this.log("Destroyed plugin")}},{key:"isDestroyed",value:function(){return this.player&&null===this.player.children()}},{key:"destroy",value:function(){this.player.dispose()}},{key:"setVolume",value:function(e){void 0!==e&&(this.log("Changing volume to: "+e),this.player.volume(e))}},{key:"exportImage",value:function(e,t){return this.surfer.exportImage(e,t)}},{key:"setAudioOutput",value:function(e){var t=this;e&&this.surfer.setSinkId(e).then((function(e){t.player.trigger(i.default.AUDIO_OUTPUT_READY)})).catch((function(e){t.player.trigger(i.default.ERROR,e),t.log(e,"error")}))}},{key:"getCurrentTime",value:function(){var e=this.surfer.getCurrentTime();return e=isNaN(e)?0:e}},{key:"setCurrentTime",value:function(e,t){if(void 0===e&&(e=this.surfer.getCurrentTime()),void 0===t&&(t=this.surfer.getDuration()),e=isNaN(e)?0:e,t=isNaN(t)?0:t,this.player.controlBar.currentTimeDisplay&&this.player.controlBar.currentTimeDisplay.contentEl()){var r=Math.min(e,t);this.player.controlBar.currentTimeDisplay.formattedTime_=this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent=(0,a.default)(r,t,this.msDisplayMax)}this.textTracksEnabled&&this.player.tech_&&this.player.tech_.el_&&this.player.tech_.setCurrentTime(e)}},{key:"getDuration",value:function(){var e=this.surfer.getDuration();return e=isNaN(e)?0:e}},{key:"setDuration",value:function(e){void 0===e&&(e=this.surfer.getDuration()),e=isNaN(e)?0:e,this.player.controlBar.durationDisplay&&this.player.controlBar.durationDisplay.contentEl()&&(this.player.controlBar.durationDisplay.formattedTime_=this.player.controlBar.durationDisplay.contentEl().lastChild.textContent=(0,a.default)(e,e,this.msDisplayMax))}},{key:"onWaveReady",value:function(){var e=this;this.waveReady=!0,this.waveFinished=!1,this.liveMode=!1,this.log("Waveform is ready"),this.player.trigger(i.default.WAVE_READY),"WebAudio"===this.backend&&(this.setCurrentTime(),this.setDuration(),void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.contentEl()&&this.player.controlBar.playToggle.show()),this.player.loadingSpinner.contentEl()&&this.player.loadingSpinner.hide(),!0===this.player.options_.autoplay&&(this.setVolume(0),"WebAudio"===this.backend?this.play():this.player.play().catch((function(t){e.onWaveError(t)})))}},{key:"onWaveFinish",value:function(){var e=this;this.log("Finished playback"),this.player.trigger(i.default.PLAYBACK_FINISH),!0===this.player.options_.loop?"WebAudio"===this.backend&&(this.surfer.stop(),this.play()):(this.waveFinished=!0,"WebAudio"===this.backend&&(this.pause(),this.player.trigger(i.default.ENDED),this.surfer.once(i.default.SEEK,(function(){void 0!==e.player.controlBar.playToggle&&e.player.controlBar.playToggle.removeClass("vjs-ended"),e.player.trigger(i.default.PAUSE)}))))}},{key:"onWaveProgress",value:function(e){this.setCurrentTime()}},{key:"onWaveSeek",value:function(){this.setCurrentTime()}},{key:"onWaveError",value:function(e){e.name&&"AbortError"===e.name||"DOMException"===e.name&&e.message.startsWith("The operation was aborted")?this.player.trigger(i.default.ABORT,e):(this.player.trigger(i.default.ERROR,e),this.log(e,"error"))}},{key:"onPlayToggle",value:function(){void 0!==this.player.controlBar.playToggle&&this.player.controlBar.playToggle.hasClass("vjs-ended")&&this.player.controlBar.playToggle.removeClass("vjs-ended"),this.surfer.isPlaying()?this.pause():this.play()}},{key:"onVolumeChange",value:function(){var e=this.player.volume();this.player.muted()&&(e=0),this.surfer.setVolume(e)}},{key:"onScreenChange",value:function(){var e=this,t=this.player.setInterval((function(){var r,i;if(e.player.isFullscreen()||(r=e.originalWidth,i=e.originalHeight),e.waveReady){if(e.liveMode&&!e.surfer.microphone.active)return;e.redrawWaveform(r,i)}e.player.clearInterval(t)}),100)}},{key:"onResizeChange",value:function(){void 0!==this.surfer&&this.redrawWaveform()}},{key:"redrawWaveform",value:function(e,t){if(!this.isDestroyed()){if(this.player.el_){var r=this.player.el_.getBoundingClientRect();void 0===e&&(e=r.width),void 0===t&&(t=r.height)}this.surfer.drawer.destroy(),this.surfer.params.width=e,this.surfer.params.height=t-this.player.controlBar.height(),this.surfer.createDrawer(),this.surfer.drawer.wrapper.className="vjs-wavedisplay",this.surfer.drawBuffer(),this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents())}}},{key:"log",value:function(e,t){(0,o.default)(e,t,this.debug)}}])&&c(t.prototype,r),s&&c(t,s),d}(m);t.Wavesurfer=E,E.VERSION="3.0.0",u.default.Wavesurfer=E,void 0===u.default.getPlugin("wavesurfer")&&u.default.registerPlugin("wavesurfer",E),u.default.use("*",(function(e){return s.default.player=e,s.default}))},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)};i.READY="ready",i.ERROR="error",i.VOLUMECHANGE="volumechange",i.FULLSCREENCHANGE="fullscreenchange",i.TIMEUPDATE="timeupdate",i.ENDED="ended",i.PAUSE="pause",i.FINISH="finish",i.SEEK="seek",i.REDRAW="redraw",i.AUDIOPROCESS="audioprocess",i.DEVICE_READY="deviceReady",i.DEVICE_ERROR="deviceError",i.AUDIO_OUTPUT_READY="audioOutputReady",i.WAVE_READY="waveReady",i.PLAYBACK_FINISH="playbackFinish",i.ABORT="abort",i.RESIZE="resize",Object.freeze(i);var o=i;t.default=o,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i,o=(i=r(0))&&i.__esModule?i:{default:i};var a=function(e,t,r){!0===r&&("error"===t?o.default.log.error(e):"warn"===t?o.default.log.warn(e):o.default.log(e))};t.default=a,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function(e,t,r){e=e<0?0:e,t=t||e;var i=Math.floor(e%60),o=Math.floor(e/60%60),a=Math.floor(e/3600),n=Math.floor(t/60%60),s=Math.floor(t/3600),l=Math.floor(1e3*(e-i));return(isNaN(e)||e===1/0)&&(a=o=i=l="-"),t>0&&t<r?(l<100&&(l=l<10?"00"+l:"0"+l),l=":"+l):l="",(a=a>0||s>0?a+":":"")+(o=((a||n>=10)&&o<10?"0"+o:o)+":")+(i=i<10?"0"+i:i)+l};t.default=i,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={debug:!1,msDisplayMax:3};t.default=i,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={setSource:function(e,t){var r=this.player.wavesurfer().surfer.params.backend,i=e.src,o=e.peaks;switch(r){case"WebAudio":this.player.wavesurfer().load(i);break;default:t(null,e);var a=this.player.tech_.el();void 0===o?this.player.wavesurfer().load(a):this.player.wavesurfer().load(a,o)}}};t.default=i,e.exports=t.default},function(e,t,r){(function(t){var r;r="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{},e.exports=r}).call(this,r(9))},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,r){e.exports=t},function(e,t,r){}])})); |
{ | ||
"name": "videojs-wavesurfer", | ||
"version": "2.11.0", | ||
"version": "3.0.0", | ||
"description": "video.js plugin that adds a navigable waveform for audio and video files.", | ||
@@ -16,3 +16,3 @@ "author": "Collab", | ||
"directories": { | ||
"doc": "./docs", | ||
"docs": "./docs", | ||
"lib": "./src", | ||
@@ -27,3 +27,3 @@ "example": "./examples", | ||
"scripts": { | ||
"clean": "rimraf dist docs", | ||
"clean": "rimraf dist", | ||
"build": "npm run clean && npm run lint && npm run build:dev && npm run build:min", | ||
@@ -33,8 +33,9 @@ "build:dev": "webpack --config ./build-config/webpack.dev.main.js", | ||
"docs": "npm-run-all docs:*", | ||
"docs:api": "jsdoc src/js -c .jsdoc.json", | ||
"docs:api": "rimraf docs/api && esdoc", | ||
"lint": "npm-run-all lint:*", | ||
"lint:js": "eslint src/js test build-config", | ||
"lint:html": "htmlhint examples", | ||
"lint:html": "htmlhint examples docs/demo", | ||
"start": "npm run build && webpack-dev-server --config ./build-config/webpack.dev.main.js", | ||
"test": "karma start karma.conf.js", | ||
"release:zip": "node docs/tools/release-zip.js", | ||
"prepublishOnly": "not-in-install && npm run build || in-install" | ||
@@ -56,29 +57,35 @@ }, | ||
"dependencies": { | ||
"video.js": ">=6.0.0", | ||
"wavesurfer.js": ">=3.1.0" | ||
"video.js": ">=7.0.5", | ||
"wavesurfer.js": ">=3.3.3" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.6.4", | ||
"@babel/preset-env": "^7.6.3", | ||
"@babel/register": "^7.6.2", | ||
"babel-loader": "^8.0.6", | ||
"@babel/core": "^7.9.6", | ||
"@babel/preset-env": "^7.9.6", | ||
"@babel/register": "^7.9.0", | ||
"@jsdevtools/host-environment": "^2.0.3", | ||
"@jsdevtools/karma-host-environment": "^3.0.2", | ||
"babel-loader": "^8.1.0", | ||
"babel-plugin-add-module-exports": "^1.0.2", | ||
"babel-plugin-istanbul": "^5.2.0", | ||
"browserslist": "^4.7.0", | ||
"css-loader": "^3.2.0", | ||
"date-fns": "^2.4.1", | ||
"eslint": "^6.5.1", | ||
"babel-plugin-istanbul": "^6.0.0", | ||
"browserslist": "^4.12.0", | ||
"copy-dir": "^1.2.0", | ||
"css-loader": "^3.5.3", | ||
"date-fns": "^2.13.0", | ||
"del": "^5.1.0", | ||
"docsify-cli": "^4.4.0", | ||
"download-tarball": "^2.0.0", | ||
"esdoc": "^1.1.0", | ||
"esdoc-standard-plugin": "^1.0.0", | ||
"eslint": "^7.0.0", | ||
"htmlhint": "^0.11.0", | ||
"in-publish": "^2.0.0", | ||
"in-publish": "^2.0.1", | ||
"jasmine-core": "^3.5.0", | ||
"jsdoc": "^3.6.3", | ||
"karma": "^4.3.0", | ||
"karma": "^5.0.5", | ||
"karma-chrome-launcher": "^3.1.0", | ||
"karma-coverage": "^2.0.1", | ||
"karma-coverage": "^2.0.2", | ||
"karma-coveralls": "^2.1.0", | ||
"karma-detect-browsers": "^2.3.3", | ||
"karma-edge-launcher": "^0.4.2", | ||
"karma-firefox-launcher": "^1.2.0", | ||
"karma-host-environment": "^2.0.3", | ||
"karma-jasmine": "^2.0.1", | ||
"karma-firefox-launcher": "^1.3.0", | ||
"karma-jasmine": "^3.1.1", | ||
"karma-jasmine-matchers": "^4.0.2", | ||
@@ -89,17 +96,20 @@ "karma-safari-launcher": "^1.0.0", | ||
"karma-webpack": "^4.0.2", | ||
"mini-css-extract-plugin": "^0.8.0", | ||
"node-sass": "^4.12.0", | ||
"mini-css-extract-plugin": "^0.9.0", | ||
"mv": "^2.1.1", | ||
"node-sass": "^4.14.1", | ||
"npm-run-all": "^4.1.5", | ||
"optimize-css-assets-webpack-plugin": "^5.0.3", | ||
"rimraf": "^3.0.0", | ||
"sass-loader": "^8.0.0", | ||
"style-loader": "^1.0.0", | ||
"terser-webpack-plugin": "^2.1.3", | ||
"tui-jsdoc-template": "^1.2.2", | ||
"webpack": "^4.41.1", | ||
"webpack-cli": "^3.3.9", | ||
"webpack-dev-server": "^3.8.2", | ||
"replace-in-file": "^6.0.0", | ||
"rimraf": "^3.0.2", | ||
"sass-loader": "^8.0.2", | ||
"style-loader": "^1.2.1", | ||
"temp-dir": "^2.0.0", | ||
"terser-webpack-plugin": "^3.0.1", | ||
"webpack": "^4.43.0", | ||
"webpack-cli": "^3.3.11", | ||
"webpack-dev-server": "^3.11.0", | ||
"webpack-merge": "^4.2.2", | ||
"webrtc-adapter": "^7.3.0" | ||
"webrtc-adapter": "^7.6.0", | ||
"zip-dir": "^1.0.2" | ||
} | ||
} |
412
README.md
@@ -1,3 +0,3 @@ | ||
Video.js Wavesurfer | ||
=================== | ||
videojs-wavesurfer | ||
================== | ||
@@ -7,5 +7,5 @@ A [video.js](http://www.videojs.com/) plugin that adds a navigable waveform | ||
library. Includes support for fullscreen mode and [real-time visualization of microphone | ||
input](#microphone-plugin). | ||
input](https://collab-project.github.io/videojs-wavesurfer/#/microphone). | ||
![Screenshot](examples/img/screenshot.png?raw=true "Screenshot") | ||
![Screenshot](https://raw.githubusercontent.com/collab-project/videojs-wavesurfer/master/docs/img/screenshot.png?raw=true "Screenshot") | ||
@@ -20,406 +20,8 @@ [![npm version](https://img.shields.io/npm/v/videojs-wavesurfer.svg?style=flat)](https://www.npmjs.com/package/videojs-wavesurfer) | ||
Table of Contents | ||
----------------- | ||
## Documentation | ||
- [Installation](#installation) | ||
- [Using the Plugin](#using-the-plugin) | ||
- [Plugin Options](#plugin-options) | ||
- [Examples](#examples) | ||
- [Methods](#methods) | ||
- [Other wavesurfer.js methods](#other-wavesurferjs-methods) | ||
- [Events](#events) | ||
- [Customizing controls](#customizing-controls) | ||
- [Responsive layout](#responsive-layout) | ||
- [Text Tracks](#text-tracks) | ||
- [Microphone plugin](#microphone-plugin) | ||
- [Using peaks for long audio files](#using-peaks-for-large-audio-files) | ||
- [Change audio output or input device](#change-audio-output-or-input-device) | ||
- [Webpack](#webpack) | ||
- [Using with React](#using-with-react) | ||
- [Using other frameworks](#using-other-frameworks) | ||
- [More features using other plugins](#more-features-using-other-plugins) | ||
- [Development](#development) | ||
- [License](#license) | ||
- [Donate](#donate) | ||
The documentation and examples can be found on: https://collab-project.github.io/videojs-wavesurfer | ||
Installation | ||
------------ | ||
## License | ||
You can use [npm](https://www.npmjs.org) (`npm install videojs-wavesurfer`) to install the | ||
plugin, or [download it here](https://github.com/collab-project/videojs-wavesurfer/releases). | ||
If you want to try the examples, check [these instructions below](#examples). | ||
Since v2.0 this plugin is compatible with video.js 6.0 and wavesurfer.js 2.0 and | ||
newer. If you want to use this plugin with an older video.js or wavesurfer.js version, | ||
check the [archived releases](https://github.com/collab-project/videojs-wavesurfer/releases?after=1.3.7) | ||
for a 1.3.x or older release of this plugin. | ||
Take a look at the [changelog](./CHANGES.md) when upgrading from a previous | ||
version of videojs-wavesurfer. | ||
Using the Plugin | ||
---------------- | ||
The plugin depends on the video.js and wavesurfer.js libraries: | ||
```html | ||
<link href="video-js.min.css" rel="stylesheet"> | ||
<link href="videojs.wavesurfer.css" rel="stylesheet"> | ||
<script src="video.min.js"></script> | ||
<script src="wavesurfer.min.js"></script> | ||
``` | ||
The plugin automatically registers itself when the `videojs.wavesurfer.js` | ||
script is loaded: | ||
```html | ||
<script src="videojs.wavesurfer.js"></script> | ||
``` | ||
Add an `audio` element: | ||
```html | ||
<audio id="myClip" class="video-js vjs-default-skin"></audio> | ||
``` | ||
Or `video` element: | ||
```html | ||
<video id="myClip" class="video-js vjs-default-skin" playsinline></video> | ||
``` | ||
Plugin Options | ||
-------------- | ||
Configure the player using the video.js | ||
[options](https://github.com/videojs/video.js/blob/master/docs/guides/options.md), | ||
and enable the plugin by adding a `wavesurfer` entry with the related wavesurfer.js | ||
[options](https://wavesurfer-js.org/docs/options.html): | ||
```javascript | ||
var player = videojs('myClip', | ||
{ | ||
controls: true, | ||
autoplay: true, | ||
loop: false, | ||
fluid: false, | ||
width: 600, | ||
height: 300, | ||
plugins: { | ||
wavesurfer: { | ||
src: 'media/hal.wav', | ||
msDisplayMax: 10, | ||
debug: true, | ||
waveColor: 'grey', | ||
progressColor: 'black', | ||
cursorColor: 'black', | ||
hideScrollbar: true | ||
} | ||
} | ||
}); | ||
``` | ||
The additional options for this plugin are: | ||
| option | type | default | description | | ||
| ------ | ---- | ------- | ----------- | | ||
| `src` | string | `null` | The URL of the audio/video file or `'live'` when [using the microphone plugin](#microphone-plugin).| | ||
| `peaks` | string | `null` | The URL of the JSON file with peaks data corresponding to the source audio/video file. See the [peaks section](#using-peaks-for-large-audio-files) below for more information. | | ||
| `debug` | boolean | `false` | Display internal log messages using the `videojs.log` method. | | ||
| `msDisplayMax` | float | `3` | Indicates the number of seconds that is considered the boundary value for displaying milliseconds in the time controls. An audio clip with a total length of 2 seconds and a `msDisplayMax` of 3 will use the format `M:SS:MMM`. Clips with a duration that is longer than `msDisplayMax` will be displayed as `M:SS` or `HH:MM:SS`.| | ||
Examples | ||
-------- | ||
See the full `audio` example ([demo](https://collab-project.github.io/videojs-wavesurfer/examples/index.html) or [source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/index.html)) and | ||
the `video` example ([demo](https://collab-project.github.io/videojs-wavesurfer/examples/video.html) or [source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/video.html)). | ||
To try out the examples locally, download the [zipfile](https://github.com/collab-project/videojs-wavesurfer/archive/master.zip) | ||
and unpack it, or checkout the repository using Git: | ||
``` | ||
git clone https://github.com/collab-project/videojs-wavesurfer.git | ||
``` | ||
And install the dependencies using npm: | ||
``` | ||
cd videojs-wavesurfer | ||
npm install | ||
``` | ||
Build the library and assets once: | ||
``` | ||
npm run build | ||
``` | ||
And start the local webserver for the examples: | ||
``` | ||
npm run start | ||
``` | ||
And open http://localhost:8080/examples/index.html in a browser. | ||
Methods | ||
------- | ||
Methods for this plugin documented below are available on the `wavesurfer` method | ||
of the video.js player instance. For example: | ||
```javascript | ||
player.on('ready', function() { | ||
player.wavesurfer().destroy(); | ||
}); | ||
``` | ||
| Method | Description | | ||
| ------ | ----------- | | ||
| `destroy` | Destroys the wavesurfer instance and children (including the video.js player). | | ||
| `load(url)` | Load the clip at `url`. Also supports loading [File](https://developer.mozilla.org/nl/docs/Web/API/File) or [Blob](https://developer.mozilla.org/nl/docs/Web/API/Blob) objects. | | ||
| `setVolume(level)` | Set the volume level (value between 0.0 and 1.0). | | ||
| `play` | Start playback. | | ||
| `pause` | Pause playback. | | ||
| `getDuration` | Get the length of the stream in seconds. Returns 0 if no stream is available (yet). | | ||
| `getCurrentTime` | Get the current time (in seconds) of the stream during playback. Returns 0 if no stream is available (yet). | | ||
| `exportImage(format, quality)` | Save waveform image as data URI. Default format is `'image/png'`. | | ||
| `setAudioOutput(deviceId)` | Change the audio output device using its [deviceId](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId). | | ||
Other wavesurfer.js methods | ||
--------------------------- | ||
You can access the wavesurfer instance, for example to call the | ||
wavesurfer.js `seekTo` method, by using the `surfer` property of the | ||
`wavesurfer` plugin instance: | ||
```javascript | ||
player.wavesurfer().surfer.seekTo(1); | ||
``` | ||
Events | ||
------ | ||
Plugin events that are available on the video.js player instance. For example: | ||
```javascript | ||
player.on('waveReady', function(event) { | ||
console.log('waveform is ready!'); | ||
}); | ||
``` | ||
| Event | Description | | ||
| ----- | ----------- | | ||
| `waveReady` | Audio is loaded, decoded and the waveform is drawn. | | ||
| `playbackFinish` | Audio playback finished. | | ||
| `audioOutputReady` | Audio output was changed and is now active. | | ||
| `abort` | Audio loading process was interrupted and cancelled. | | ||
| `error` | Error occurred. | | ||
Customizing controls | ||
-------------------- | ||
To disable and hide specific controls, use the video.js `controlBar` option: | ||
```javascript | ||
controlBar: { | ||
// hide fullscreen control | ||
fullscreenToggle: false | ||
}, | ||
``` | ||
Responsive layout | ||
----------------- | ||
The `fluid` option for video.js will resize the player according to the size | ||
of the window. | ||
Configure the player; enable the video.js `'fluid'` option: | ||
```javascript | ||
fluid: true | ||
``` | ||
See the full `fluid` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/fluid.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/fluid.html)). | ||
Text Tracks | ||
----------- | ||
Text tracks (or captions/subtitles) are a feature of HTML5 for displaying | ||
time-triggered text to the user. Video.js offers a cross-browser implementation | ||
of text tracks. For more information, check the | ||
[documentation](https://github.com/videojs/video.js/blob/master/docs/guides/text-tracks.md). | ||
![Text tracks screenshot](examples/img/text-tracks.png?raw=true "Text tracks screenshot") | ||
See the full `texttrack` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/texttrack.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/texttrack.html)). | ||
Microphone plugin | ||
----------------- | ||
It's also possible to use a microphone for real-time rendering of the audio waveform. This | ||
uses the [microphone plugin](https://github.com/katspaugh/wavesurfer.js/blob/master/src/plugin/microphone.js) | ||
that comes with wavesurfer.js. | ||
Include the additional `wavesurfer.microphone.js` plugin on your page. | ||
```html | ||
<script src="wavesurfer.microphone.min.js"></script> | ||
``` | ||
Add an `audio` element: | ||
```html | ||
<audio id="myLiveAudio" class="video-js vjs-default-skin"></audio> | ||
``` | ||
Configure the player: use the value `'live'` for the `src` option: | ||
```javascript | ||
var player = videojs('myLiveAudio', { | ||
controls: true, | ||
width: 600, | ||
height: 300, | ||
plugins: { | ||
wavesurfer: { | ||
src: 'live', | ||
debug: true, | ||
waveColor: 'black', | ||
cursorWidth: 0, | ||
interact: false, | ||
hideScrollbar: true | ||
} | ||
} | ||
}); | ||
``` | ||
The microphone plugin has additional configuration | ||
[options](https://wavesurfer-js.org/plugins/microphone.html). | ||
See the full `live` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/live.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/live.html)). | ||
Using peaks for large audio files | ||
-------------------------------- | ||
When you're dealing with long audio files, it's sometimes useful to generate the waveform data, | ||
called peaks, on the server. This allows wavesurfer.js to load the peaks JSON data and create the | ||
waveform from that pre-rendered peak data. This JSON file can be generated using the | ||
[bbc/audiowaveform](https://github.com/bbc/audiowaveform) utility. For more information, see the | ||
[wavesurfer.js FAQ](https://wavesurfer-js.org/faq/). | ||
See the full `peaks` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/peaks.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/peaks.html)). | ||
Change audio output or input device | ||
----------------------------------- | ||
If your device has multiple audio output devices, use `setAudioOutput(deviceId)` to change | ||
the active audio output device, and listen for the `audioOutputReady` event to be notified | ||
when the new output device is active. | ||
```javascript | ||
// change audio output device | ||
player.wavesurfer().setAudioOutput(deviceId); | ||
``` | ||
See the full `output` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/output.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/output.html)). | ||
If your device has multiple audio input devices and you want to display | ||
these devices and allow the user to choose one, check out the the full `input` example | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/input.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/input.html)). | ||
Webpack | ||
------- | ||
The [webpack](https://github.com/collab-project/videojs-wavesurfer/wiki/Webpack) wiki page shows how to configure webpack for videojs-wavesurfer. | ||
Using with React | ||
---------------- | ||
The React [wiki page](https://github.com/collab-project/videojs-wavesurfer/wiki/React) wiki page | ||
shows how to get started with React and videojs-wavesurfer using the | ||
[create-react-app](https://github.com/facebook/create-react-app) tool. | ||
Alternatively, the `react` example shows how to integrate this plugin in a [React](https://reactjs.org) component | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/react/index.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/react/index.html)). | ||
Using other frameworks | ||
---------------------- | ||
The [Angular](https://github.com/collab-project/videojs-wavesurfer/wiki/Angular) wiki page shows how to setup Angular and videojs-wavesurfer. | ||
The [Vue.js](https://github.com/collab-project/videojs-wavesurfer/wiki/Vue.js) wiki page shows how to setup Vue.js and videojs-wavesurfer. | ||
More features using other plugins | ||
--------------------------------- | ||
Check the `plugin` example that extends the player with the wavesurfer.js cursor plugin | ||
([demo](https://collab-project.github.io/videojs-wavesurfer/examples/plugin.html) or | ||
[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html)). | ||
The Video.js community created | ||
[lots of plugins](https://github.com/videojs/video.js/wiki/Plugins) | ||
that can be used to enhance the player's functionality. Plugins actually | ||
tested with `videojs-wavesurfer`: | ||
- [videojs-record](https://github.com/collab-project/videojs-record) - Adds | ||
support for recording audio/video/image files. | ||
Development | ||
----------- | ||
Install dependencies using npm: | ||
``` | ||
npm install | ||
``` | ||
Build development and minified versions of the library and stylesheets: | ||
``` | ||
npm run build | ||
``` | ||
Generated files are placed in the `dist` directory. | ||
During development: | ||
``` | ||
npm run start | ||
``` | ||
This will watch the source directory and rebuild when any changes | ||
are detected. It will also serve the files on http://127.0.0.1:8080. | ||
Generate the API documentation (placed in the `docs` directory): | ||
``` | ||
npm run docs | ||
``` | ||
All commands for development are listed in the `package.json` file and | ||
are run using: | ||
``` | ||
npm run <command> | ||
``` | ||
License | ||
------- | ||
This work is licensed under the [MIT License](LICENSE). | ||
Donate | ||
------ | ||
Please consider donating if you like this project. Bitcoin is accepted | ||
and can be sent to `3PmXCqUggtq7KUWPbpN8WhMnb1Mfb1jbq8`. |
@@ -12,2 +12,3 @@ /** | ||
import pluginDefaultOptions from './defaults'; | ||
import myMiddleware from './middleware'; | ||
import window from 'global/window'; | ||
@@ -46,20 +47,7 @@ | ||
this.liveMode = false; | ||
this.backend = null; | ||
this.debug = (options.debug.toString() === 'true'); | ||
this.textTracksEnabled = (this.player.options_.tracks.length > 0); | ||
this.msDisplayMax = parseFloat(options.msDisplayMax); | ||
this.textTracksEnabled = (this.player.options_.tracks.length > 0); | ||
// microphone plugin | ||
if (options.src === 'live') { | ||
// check if the wavesurfer.js microphone plugin can be enabled | ||
if (WaveSurfer.microphone !== undefined) { | ||
// enable audio input from a microphone | ||
this.liveMode = true; | ||
this.waveReady = true; | ||
} else { | ||
this.onWaveError('Could not find wavesurfer.js ' + | ||
'microphone plugin!'); | ||
return; | ||
} | ||
} | ||
// wait until player ui is ready | ||
@@ -78,4 +66,14 @@ this.player.one(Event.READY, this.initialize.bind(this)); | ||
// parse options | ||
let mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer); | ||
// set video.js time format | ||
videojs.setFormatTime((seconds, guide) => { | ||
return formatTime(seconds, guide, this.msDisplayMax); | ||
}); | ||
// the native controls don't work for this UI so disable | ||
// them no matter what | ||
// XXX: doublecheck this | ||
/* | ||
if (this.player.usingNativeControls_ === true) { | ||
@@ -86,11 +84,15 @@ if (this.player.tech_.el_ !== undefined) { | ||
} | ||
*/ | ||
// controls | ||
if (this.player.options_.controls === true) { | ||
// make sure controlBar is showing | ||
// make sure controlBar is showing. | ||
// video.js hides the controlbar by default because it expects | ||
// the user to click on the 'big play button' first. | ||
this.player.controlBar.show(); | ||
this.player.controlBar.el_.style.display = 'flex'; | ||
// progress control (if present) isn't used by this plugin | ||
if (this.player.controlBar.progressControl !== undefined) { | ||
// progress control is only supported with the MediaElement backend | ||
if (this.backend === 'WebAudio' && | ||
this.player.controlBar.progressControl !== undefined) { | ||
this.player.controlBar.progressControl.hide(); | ||
@@ -121,3 +123,4 @@ } | ||
if (this.player.controlBar.playToggle !== undefined) { | ||
if (this.backend === 'WebAudio' && | ||
this.player.controlBar.playToggle !== undefined) { | ||
// handle play toggle interaction | ||
@@ -136,7 +139,15 @@ this.player.controlBar.playToggle.on(['tap', 'click'], | ||
// wavesurfer.js setup | ||
let mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer); | ||
this.surfer = WaveSurfer.create(mergedOptions); | ||
this.surfer.on(Event.ERROR, this.onWaveError.bind(this)); | ||
this.surfer.on(Event.FINISH, this.onWaveFinish.bind(this)); | ||
if (this.liveMode === true) { | ||
this.backend = this.surfer.params.backend; | ||
this.log('Using wavesurfer.js ' + this.backend + ' backend.'); | ||
// check if the wavesurfer.js microphone plugin is enabled | ||
if ('microphone' in this.player.wavesurfer().surfer.getActivePlugins()) { | ||
// enable audio input from a microphone | ||
this.liveMode = true; | ||
this.waveReady = true; | ||
this.log('wavesurfer.js microphone plugin enabled.'); | ||
// listen for wavesurfer.js microphone plugin events | ||
@@ -146,7 +157,18 @@ this.surfer.microphone.on(Event.DEVICE_ERROR, | ||
} | ||
// listen for wavesurfer.js events | ||
this.surferReady = this.onWaveReady.bind(this); | ||
this.surferProgress = this.onWaveProgress.bind(this); | ||
this.surferSeek = this.onWaveSeek.bind(this); | ||
if (this.backend === 'WebAudio') { | ||
this.surferProgress = this.onWaveProgress.bind(this); | ||
this.surferSeek = this.onWaveSeek.bind(this); | ||
// only listen to these wavesurfer.js playback events when not | ||
// make sure volume is muted when requested | ||
// CHECK: not needed anymore | ||
// XXX: only needed for WebAudio backend | ||
if (this.player.muted()) { | ||
this.setVolume(0); | ||
} | ||
} | ||
// only listen to the wavesurfer.js playback events when not | ||
// in live mode | ||
@@ -161,7 +183,2 @@ if (!this.liveMode) { | ||
// make sure volume is muted when requested | ||
if (this.player.muted()) { | ||
this.setVolume(0); | ||
} | ||
// video.js fluid option | ||
@@ -176,20 +193,2 @@ if (this.player.options_.fluid === true) { | ||
} | ||
// text tracks | ||
if (this.textTracksEnabled) { | ||
if (this.player.controlBar.currentTimeDisplay !== undefined) { | ||
// disable timeupdates | ||
this.player.controlBar.currentTimeDisplay.off( | ||
this.player, Event.TIMEUPDATE, | ||
this.player.controlBar.currentTimeDisplay.throttledUpdateContent); | ||
} | ||
// sets up an interval function to track current time | ||
// and trigger timeupdate every 250 milliseconds. | ||
// needed for text tracks | ||
this.player.tech_.trackCurrentTime(); | ||
} | ||
// kick things off | ||
this.startPlayers(); | ||
} | ||
@@ -204,3 +203,3 @@ | ||
*/ | ||
parseOptions(surferOpts) { | ||
parseOptions(surferOpts = {}) { | ||
let rect = this.player.el_.getBoundingClientRect(); | ||
@@ -243,8 +242,8 @@ this.originalWidth = this.player.options_.width || rect.width; | ||
// enable wavesurfer.js microphone plugin | ||
if (this.liveMode === true) { | ||
surferOpts.plugins = [ | ||
WaveSurfer.microphone.create(surferOpts) | ||
]; | ||
this.log('wavesurfer.js microphone plugin enabled.'); | ||
// use MediaElement as default wavesurfer.js backend if one is not | ||
// specified | ||
if ('backend' in surferOpts) { | ||
this.backend = surferOpts.backend; | ||
} else { | ||
surferOpts.backend = this.backend = 'MediaElement'; | ||
} | ||
@@ -256,28 +255,2 @@ | ||
/** | ||
* Start the players. | ||
* @private | ||
*/ | ||
startPlayers() { | ||
let options = this.player.options_.plugins.wavesurfer; | ||
if (options.src !== undefined) { | ||
if (this.surfer.microphone === undefined) { | ||
// show loading spinner | ||
this.player.loadingSpinner.show(); | ||
// start loading file | ||
this.load(options.src, options.peaks); | ||
} else { | ||
// hide loading spinner | ||
this.player.loadingSpinner.hide(); | ||
// connect microphone input to our waveform | ||
options.wavesurfer = this.surfer; | ||
} | ||
} else { | ||
// no valid src found, hide loading spinner | ||
this.player.loadingSpinner.hide(); | ||
} | ||
} | ||
/** | ||
* Starts or stops listening to events related to audio-playback. | ||
@@ -292,8 +265,12 @@ * | ||
this.surfer.un(Event.READY, this.surferReady); | ||
this.surfer.un(Event.AUDIOPROCESS, this.surferProgress); | ||
this.surfer.un(Event.SEEK, this.surferSeek); | ||
if (this.backend === 'WebAudio') { | ||
this.surfer.un(Event.AUDIOPROCESS, this.surferProgress); | ||
this.surfer.un(Event.SEEK, this.surferSeek); | ||
} | ||
} else if (enable === true) { | ||
this.surfer.on(Event.READY, this.surferReady); | ||
this.surfer.on(Event.AUDIOPROCESS, this.surferProgress); | ||
this.surfer.on(Event.SEEK, this.surferSeek); | ||
if (this.backend === 'WebAudio') { | ||
this.surfer.on(Event.AUDIOPROCESS, this.surferProgress); | ||
this.surfer.on(Event.SEEK, this.surferSeek); | ||
} | ||
} | ||
@@ -315,43 +292,60 @@ } | ||
} else { | ||
// load peak data from file | ||
// load peak data from array or file | ||
if (peaks !== undefined) { | ||
if (Array.isArray(peaks)) { | ||
// use supplied peaks data | ||
this.loadPeaks(url, peaks); | ||
} else { | ||
// no peaks | ||
if (typeof url === 'string') { | ||
this.log('Loading URL: ' + url); | ||
this.surfer.load(url, peaks); | ||
} else { | ||
// load peak data from file | ||
let requestOptions = { | ||
url: peaks, | ||
responseType: 'json' | ||
}; | ||
// supply xhr options, if any | ||
if (this.player.options_.plugins.wavesurfer.xhr !== undefined) { | ||
requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr; | ||
} | ||
let request = WaveSurfer.util.fetchFile(requestOptions); | ||
this.log('Loading element: ' + url); | ||
} | ||
this.surfer.load(url); | ||
} | ||
} | ||
} | ||
request.once('success', data => { | ||
this.log('Loaded Peak Data URL: ' + peaks); | ||
// check for data property containing peaks | ||
if (data && data.data) { | ||
this.surfer.load(url, data.data); | ||
} else { | ||
this.player.trigger(Event.ERROR, | ||
'Could not load peaks data from ' + peaks); | ||
this.log(err, 'error'); | ||
} | ||
}); | ||
request.on('error', e => { | ||
this.log('Unable to retrieve peak data from ' + peaks + | ||
'. Status code: ' + request.response.status, 'warn'); | ||
this.log('Loading URL: ' + url); | ||
this.surfer.load(url); | ||
}); | ||
/** | ||
* Start loading waveform data. | ||
* | ||
* @param {string|blob|file} url - Either the URL of the audio file, | ||
* a Blob or a File object. | ||
* @param {string|number[]} peaks - Either the URL of peaks | ||
* data for the audio file, or an array with peaks data. | ||
*/ | ||
loadPeaks(url, peaks) { | ||
if (Array.isArray(peaks)) { | ||
// use supplied peaks data | ||
this.log('Loading URL with array of peaks: ' + url); | ||
this.surfer.load(url, peaks); | ||
} else { | ||
// load peak data from file | ||
let requestOptions = { | ||
url: peaks, | ||
responseType: 'json' | ||
}; | ||
// supply xhr options, if any | ||
if (this.player.options_.plugins.wavesurfer.xhr !== undefined) { | ||
requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr; | ||
} | ||
let request = WaveSurfer.util.fetchFile(requestOptions); | ||
request.once('success', data => { | ||
this.log('Loaded Peak Data URL: ' + peaks); | ||
// check for data property containing peaks | ||
if (data && data.data) { | ||
this.surfer.load(url, data.data); | ||
} else { | ||
this.player.trigger(Event.ERROR, | ||
'Could not load peaks data from ' + peaks); | ||
this.log(err, 'error'); | ||
} | ||
} else { | ||
// no peaks | ||
}); | ||
request.on('error', e => { | ||
this.log('Unable to retrieve peak data from ' + peaks + | ||
'. Status code: ' + request.response.status, 'warn'); | ||
this.log('Loading URL: ' + url); | ||
this.surfer.load(url); | ||
} | ||
}); | ||
} | ||
@@ -440,5 +434,2 @@ } | ||
} | ||
if (this.textTracksEnabled) { | ||
this.player.tech_.stopTrackingCurrentTime(); | ||
} | ||
this.log('Destroyed plugin'); | ||
@@ -611,9 +602,11 @@ } | ||
// update time display | ||
this.setCurrentTime(); | ||
this.setDuration(); | ||
if (this.backend === 'WebAudio') { | ||
this.setCurrentTime(); | ||
this.setDuration(); | ||
// enable and show play button | ||
if (this.player.controlBar.playToggle !== undefined && | ||
this.player.controlBar.playToggle.contentEl()) { | ||
this.player.controlBar.playToggle.show(); | ||
// enable and show play button | ||
if (this.player.controlBar.playToggle !== undefined && | ||
this.player.controlBar.playToggle.contentEl()) { | ||
this.player.controlBar.playToggle.show(); | ||
} | ||
} | ||
@@ -628,3 +621,13 @@ | ||
if (this.player.options_.autoplay === true) { | ||
this.play(); | ||
// autoplay is only allowed when audio is muted | ||
this.setVolume(0); | ||
// try auto-play | ||
if (this.backend === 'WebAudio') { | ||
this.play(); | ||
} else { | ||
this.player.play().catch(e => { | ||
this.onWaveError(e); | ||
}); | ||
} | ||
} | ||
@@ -647,5 +650,7 @@ } | ||
if (this.player.options_.loop === true) { | ||
// reset waveform | ||
this.surfer.stop(); | ||
this.play(); | ||
if (this.backend === 'WebAudio') { | ||
// reset waveform | ||
this.surfer.stop(); | ||
this.play(); | ||
} | ||
} else { | ||
@@ -655,17 +660,19 @@ // finished | ||
// pause player | ||
this.pause(); | ||
if (this.backend === 'WebAudio') { | ||
// pause player | ||
this.pause(); | ||
// show the replay state of play toggle | ||
this.player.trigger(Event.ENDED); | ||
// show the replay state of play toggle | ||
this.player.trigger(Event.ENDED); | ||
// this gets called once after the clip has ended and the user | ||
// seeks so that we can change the replay button back to a play | ||
// button | ||
this.surfer.once(Event.SEEK, () => { | ||
if (this.player.controlBar.playToggle !== undefined) { | ||
this.player.controlBar.playToggle.removeClass('vjs-ended'); | ||
} | ||
this.player.trigger(Event.PAUSE); | ||
}); | ||
// this gets called once after the clip has ended and the user | ||
// seeks so that we can change the replay button back to a play | ||
// button | ||
this.surfer.once(Event.SEEK, () => { | ||
if (this.player.controlBar.playToggle !== undefined) { | ||
this.player.controlBar.playToggle.removeClass('vjs-ended'); | ||
} | ||
this.player.trigger(Event.PAUSE); | ||
}); | ||
} | ||
} | ||
@@ -686,2 +693,3 @@ } | ||
* Fires during seeking of the waveform. | ||
* | ||
* @private | ||
@@ -848,2 +856,10 @@ */ | ||
// register a star-middleware | ||
videojs.use('*', player => { | ||
// make player available on middleware | ||
myMiddleware.player = player; | ||
return myMiddleware; | ||
}); | ||
export {Wavesurfer}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
17
1233
101393
51
26
13
Updatedvideo.js@>=7.0.5
Updatedwavesurfer.js@>=3.3.3