videojs-wavesurfer - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0

CHANGES.md

 # videojs-wavesurfer changelog
 
+## 3.1.0 - 2020/05/18
+
+**Backwards-incompatible changes** (when upgrading from a previous version):
+
+- Removed `msDisplayMax` option: use `displayMilliseconds` option instead to include milliseconds
+  in the time displays of the player (#91)
+
+
 ## 3.0.4 - 2020/05/16
@@ -4,0 +12,0 @@

dist/videojs.wavesurfer.js

 /*!
  * videojs-wavesurfer
- * @version 3.0.4
+ * @version 3.1.0
  * @see https://github.com/collab-project/videojs-wavesurfer
@@ -106,2 +106,13 @@ * @copyright 2014-2020 Collab
 
+/***/ "./node_modules/add-zero/index.js":
+/*!****************************************!*\
+  !*** ./node_modules/add-zero/index.js ***!
+  \****************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("var __WEBPACK_AMD_DEFINE_RESULT__;(function(exports) {\n\n  'use strict';\n\n  function addZero(value, digits) {\n    digits = digits || 2;\n\n    var isNegative = Number(value) < 0;\n    var buffer = value.toString();\n    var size = 0;\n\n    // Strip minus sign if number is negative\n    if(isNegative) {\n      buffer = buffer.slice(1);\n    }\n\n    size = digits - buffer.length + 1;\n    buffer = new Array(size).join('0').concat(buffer);\n\n    // Adds back minus sign if needed\n    return (isNegative ? '-' : '') + buffer;\n  }\n\n  if(true) {\n    !(__WEBPACK_AMD_DEFINE_RESULT__ = (function() { return addZero; }).call(exports, __webpack_require__, exports, module),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n  } else {}\n\n})(this);\n\n\n//# sourceURL=webpack://VideojsWavesurfer/./node_modules/add-zero/index.js?");
+
+/***/ }),
+
 /***/ "./node_modules/global/window.js":
@@ -118,2 +129,14 @@ /*!***************************************!*\
 
+/***/ "./node_modules/parse-ms/index.js":
+/*!****************************************!*\
+  !*** ./node_modules/parse-ms/index.js ***!
+  \****************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nmodule.exports = milliseconds => {\n\tif (typeof milliseconds !== 'number') {\n\t\tthrow new TypeError('Expected a number');\n\t}\n\n\tconst roundTowardsZero = milliseconds > 0 ? Math.floor : Math.ceil;\n\n\treturn {\n\t\tdays: roundTowardsZero(milliseconds / 86400000),\n\t\thours: roundTowardsZero(milliseconds / 3600000) % 24,\n\t\tminutes: roundTowardsZero(milliseconds / 60000) % 60,\n\t\tseconds: roundTowardsZero(milliseconds / 1000) % 60,\n\t\tmilliseconds: roundTowardsZero(milliseconds) % 1000,\n\t\tmicroseconds: roundTowardsZero(milliseconds * 1000) % 1000,\n\t\tnanoseconds: roundTowardsZero(milliseconds * 1e6) % 1000\n\t};\n};\n\n\n//# sourceURL=webpack://VideojsWavesurfer/./node_modules/parse-ms/index.js?");
+
+/***/ }),
+
 /***/ "./node_modules/webpack/buildin/global.js":
@@ -149,3 +172,3 @@ /*!***********************************!*\
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar pluginDefaultOptions = {\n  debug: false,\n  msDisplayMax: 3\n};\nvar _default = pluginDefaultOptions;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/defaults.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\nvar pluginDefaultOptions = {\n  debug: false,\n  displayMilliseconds: true\n};\nvar _default = pluginDefaultOptions;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/defaults.js?");
 
@@ -186,3 +209,3 @@ /***/ }),
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar formatTime = function formatTime(seconds, guide, msDisplayMax) {\n  seconds = seconds < 0 ? 0 : seconds;\n  guide = guide || seconds;\n  var s = Math.floor(seconds % 60),\n      m = Math.floor(seconds / 60 % 60),\n      h = Math.floor(seconds / 3600),\n      gm = Math.floor(guide / 60 % 60),\n      gh = Math.floor(guide / 3600),\n      ms = Math.floor((seconds - s) * 1000);\n\n  if (isNaN(seconds) || seconds === Infinity) {\n    h = m = s = ms = '-';\n  }\n\n  if (guide > 0 && guide < msDisplayMax) {\n    if (ms < 100) {\n      if (ms < 10) {\n        ms = '00' + ms;\n      } else {\n        ms = '0' + ms;\n      }\n    }\n\n    ms = ':' + ms;\n  } else {\n    ms = '';\n  }\n\n  h = h > 0 || gh > 0 ? h + ':' : '';\n  m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';\n  s = s < 10 ? '0' + s : s;\n  return h + m + s + ms;\n};\n\nvar _default = formatTime;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/utils/format-time.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _addZero = _interopRequireDefault(__webpack_require__(/*! add-zero */ \"./node_modules/add-zero/index.js\"));\n\nvar _parseMs = _interopRequireDefault(__webpack_require__(/*! parse-ms */ \"./node_modules/parse-ms/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar formatTime = function formatTime(seconds, guide) {\n  var displayMilliseconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;\n  seconds = seconds < 0 ? 0 : seconds;\n\n  if (isNaN(seconds) || seconds === Infinity) {\n    seconds = 0;\n  }\n\n  var inputTime = (0, _parseMs.default)(seconds * 1000);\n  var guideTime = inputTime;\n\n  if (guide !== undefined) {\n    guideTime = (0, _parseMs.default)(guide * 1000);\n  }\n\n  var hr = (0, _addZero.default)(inputTime.hours);\n  var min = (0, _addZero.default)(inputTime.minutes);\n  var sec = (0, _addZero.default)(inputTime.seconds);\n  var ms = (0, _addZero.default)(inputTime.milliseconds, 3);\n\n  if (inputTime.days > 0 || guideTime.days > 0) {\n    var day = (0, _addZero.default)(inputTime.days);\n    return \"\".concat(day, \":\").concat(hr, \":\").concat(min, \":\").concat(sec);\n  }\n\n  if (inputTime.hours > 0 || guideTime.hours > 0) {\n    return \"\".concat(hr, \":\").concat(min, \":\").concat(sec);\n  }\n\n  if (displayMilliseconds) {\n    return \"\".concat(min, \":\").concat(sec, \":\").concat(ms);\n  }\n\n  return \"\".concat(min, \":\").concat(sec);\n};\n\nvar _default = formatTime;\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://VideojsWavesurfer/./src/js/utils/format-time.js?");
 
@@ -211,3 +234,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 _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 wavesurferPluginName = 'wavesurfer';\nvar wavesurferClassName = 'vjs-wavedisplay';\nvar wavesurferStyleName = 'vjs-wavesurfer';\nvar WEBAUDIO = 'WebAudio';\nvar MEDIAELEMENT = 'MediaElement';\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(wavesurferStyleName);\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      if (this.player.bigPlayButton !== undefined) {\n        this.player.bigPlayButton.hide();\n      }\n\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          this.player.controlBar.playToggle.hide();\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.player.controlBar.playToggle.show();\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() && this.player.controlBar.currentTimeDisplay.contentEl().lastChild) {\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() && this.player.controlBar.durationDisplay.contentEl().lastChild) {\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.4\";\n_video.default.Wavesurfer = Wavesurfer;\n\nif (_video.default.getPlugin(wavesurferPluginName) === undefined) {\n  _video.default.registerPlugin(wavesurferPluginName, 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?");
+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 wavesurferPluginName = 'wavesurfer';\nvar wavesurferClassName = 'vjs-wavedisplay';\nvar wavesurferStyleName = 'vjs-wavesurfer';\nvar WEBAUDIO = 'WebAudio';\nvar MEDIAELEMENT = 'MediaElement';\nvar MEDIAELEMENT_WEBAUDIO = 'MediaElementWebAudio';\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(wavesurferStyleName);\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.displayMilliseconds = options.displayMilliseconds;\n\n    _video.default.setFormatTime(function (seconds, guide) {\n      return (0, _formatTime.default)(seconds, guide, _this.displayMilliseconds);\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      if (this.player.bigPlayButton !== undefined) {\n        this.player.bigPlayButton.hide();\n      }\n\n      var mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer);\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          this.player.controlBar.playToggle.hide();\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.player.controlBar.playToggle.show();\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() && this.player.controlBar.currentTimeDisplay.contentEl().lastChild) {\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.displayMilliseconds);\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() && this.player.controlBar.durationDisplay.contentEl().lastChild) {\n        this.player.controlBar.durationDisplay.formattedTime_ = this.player.controlBar.durationDisplay.contentEl().lastChild.textContent = (0, _formatTime.default)(duration, duration, this.displayMilliseconds);\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.1.0\";\n_video.default.Wavesurfer = Wavesurfer;\n\nif (_video.default.getPlugin(wavesurferPluginName) === undefined) {\n  _video.default.registerPlugin(wavesurferPluginName, 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?");
 
@@ -223,3 +246,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?");
 
@@ -226,0 +249,0 @@ /***/ }),

dist/videojs.wavesurfer.min.js

 /*!
  * videojs-wavesurfer
- * @version 3.0.4
+ * @version 3.1.0
  * @see https://github.com/collab-project/videojs-wavesurfer
@@ -8,2 +8,2 @@ * @copyright 2014-2020 Collab
  */
-!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;void 0!==this.player.bigPlayButton&&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.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.player.controlBar.playToggle.show(),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()&&this.player.controlBar.currentTimeDisplay.contentEl().lastChild){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.contentEl().lastChild&&(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.4",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){if(this.player.usingPlugin("wavesurfer")){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)}}else t(null,e)}};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){}])}));
+!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(13)},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Wavesurfer=void 0;var i=d(r(3)),o=d(r(4)),a=d(r(5)),n=d(r(8)),s=d(r(9)),l=d(r(10)),u=d(r(0)),c=d(r(12));function d(e){return e&&e.__esModule?e:{default:e}}function h(e){return(h="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 f(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"!==h(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)}(h,e);var t,r,s,d=y(h);function h(e,t){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),r=d.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.displayMilliseconds=t.displayMilliseconds,u.default.setFormatTime((function(e,t){return(0,a.default)(e,t,r.displayMilliseconds)})),r.player.one(i.default.READY,r.initialize.bind(g(r))),r}return t=h,(r=[{key:"initialize",value:function(){var e=this;void 0!==this.player.bigPlayButton&&this.player.bigPlayButton.hide();var t=this.parseOptions(this.player.options_.plugins.wavesurfer);!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.player.controlBar.playToggle.hide())),this.surfer=c.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.player.controlBar.playToggle.show(),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=c.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=c.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()&&this.player.controlBar.currentTimeDisplay.contentEl().lastChild){var r=Math.min(e,t);this.player.controlBar.currentTimeDisplay.formattedTime_=this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent=(0,a.default)(r,t,this.displayMilliseconds)}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.contentEl().lastChild&&(this.player.controlBar.durationDisplay.formattedTime_=this.player.controlBar.durationDisplay.contentEl().lastChild.textContent=(0,a.default)(e,e,this.displayMilliseconds))}},{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)}}])&&f(t.prototype,r),s&&f(t,s),h}(m);t.Wavesurfer=E,E.VERSION="3.1.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=a(r(6)),o=a(r(7));function a(e){return e&&e.__esModule?e:{default:e}}var n=function(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];e=e<0?0:e,(isNaN(e)||e===1/0)&&(e=0);var a=(0,o.default)(1e3*e),n=a;void 0!==t&&(n=(0,o.default)(1e3*t));var s=(0,i.default)(a.hours),l=(0,i.default)(a.minutes),u=(0,i.default)(a.seconds),c=(0,i.default)(a.milliseconds,3);if(a.days>0||n.days>0){var d=(0,i.default)(a.days);return"".concat(d,":").concat(s,":").concat(l,":").concat(u)}return a.hours>0||n.hours>0?"".concat(s,":").concat(l,":").concat(u):r?"".concat(l,":").concat(u,":").concat(c):"".concat(l,":").concat(u)};t.default=n,e.exports=t.default},function(e,t,r){var i;!function(t){"use strict";function o(e,t){t=t||2;var r,i=Number(e)<0,o=e.toString();return i&&(o=o.slice(1)),r=t-o.length+1,(i?"-":"")+(o=new Array(r).join("0").concat(o))}void 0===(i=function(){return o}.call(t,r,t,e))||(e.exports=i)}(this)},function(e,t,r){"use strict";e.exports=e=>{if("number"!=typeof e)throw new TypeError("Expected a number");const t=e>0?Math.floor:Math.ceil;return{days:t(e/864e5),hours:t(e/36e5)%24,minutes:t(e/6e4)%60,seconds:t(e/1e3)%60,milliseconds:t(e)%1e3,microseconds:t(1e3*e)%1e3,nanoseconds:t(1e6*e)%1e3}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i={debug:!1,displayMilliseconds:!0};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){if(this.player.usingPlugin("wavesurfer")){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)}}else t(null,e)}};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(11))},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){}])}));

package.json

 {
   "name": "videojs-wavesurfer",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "video.js plugin that adds a navigable waveform for audio and video files.",
@@ -62,2 +62,3 @@ "author": "Collab",
     "@jsdevtools/karma-host-environment": "^3.0.2",
+    "add-zero": "^1.0.0",
     "babel-loader": "^8.1.0",
@@ -73,6 +74,6 @@ "babel-plugin-add-module-exports": "^1.0.2",
     "eslint": "^7.0.0",
-    "htmlhint": "^0.11.0",
+    "htmlhint": "^0.12.2",
     "in-publish": "^2.0.1",
     "jasmine-core": "^3.5.0",
-    "karma": "^5.0.5",
+    "karma": "^5.0.7",
     "karma-chrome-launcher": "^3.1.0",
@@ -94,2 +95,3 @@ "karma-coverage": "^2.0.2",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "parse-ms": "^2.1.0",
     "replace-in-file": "^6.0.0",
@@ -96,0 +98,0 @@ "rimraf": "^3.0.2",

src/js/defaults.js

@@ -10,11 +10,7 @@ /**
     debug: false,
-    // msDisplayMax 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 longer than msDisplayMax will be displayed
-    // as M:SS or HH:MM:SS.
-    msDisplayMax: 3
+    // Boolean indicating if milliseconds should be included,
+    // e.g. "00:00:000" vs "00:00".
+    displayMilliseconds: true
 };
 
 export default pluginDefaultOptions;

src/js/utils/format-time.js

@@ -6,5 +6,15 @@ /**
 
+import addZero from 'add-zero';
+import parseMilliseconds from 'parse-ms';
+
 /**
- * Format seconds as a time string, H:MM:SS, M:SS or M:SS:MMM.
+ * Format seconds as a duration string.
  *
+ * Either formatted as:
+ *
+ * - DD:HH:MM:SS (> 24 hours)
+ * - HH:MM:SS (> 1 hour)
+ * - MM:SS:MSS (`displayMilliseconds = true`)
+ * - MM:SS (`displayMilliseconds = false`)
+ *
  * Supplying a guide (in seconds) will force a number of leading zeros
@@ -15,56 +25,36 @@ * to cover the length of the guide.
  *     string.
- * @param {number} guide - Number (in seconds) to model the string
- *     after.
- * @param {number} msDisplayMax - Number (in milliseconds) to model the string
- *     after.
- * @return {string} Time formatted as H:MM:SS, M:SS or M:SS:MMM, e.g.
- *     0:00:12.
+ * @param {number} guide - Number (in seconds) to model the string after.
+ * @param {boolean} displayMilliseconds - Display milliseconds or not.
+ * @return {string} Formatted duration time, e.g '00:12:653'.
  * @private
  */
-const formatTime = function(seconds, guide, msDisplayMax) {
-    // Default to using seconds as guide
+const formatTime = function(seconds, guide, displayMilliseconds = true) {
     seconds = seconds < 0 ? 0 : seconds;
-    guide = guide || seconds;
-    let s = Math.floor(seconds % 60),
-        m = Math.floor(seconds / 60 % 60),
-        h = Math.floor(seconds / 3600),
-        gm = Math.floor(guide / 60 % 60),
-        gh = Math.floor(guide / 3600),
-        ms = Math.floor((seconds - s) * 1000);
-
-    // handle invalid times
     if (isNaN(seconds) || seconds === Infinity) {
-        // '-' is false for all relational operators (e.g. <, >=) so this
-        // setting will add the minimum number of fields specified by the
-        // guide
-        h = m = s = ms = '-';
+        seconds = 0;
     }
+    const inputTime = parseMilliseconds(seconds * 1000);
+    let guideTime = inputTime;
+    if (guide !== undefined) {
+        guideTime = parseMilliseconds(guide * 1000);
+    }
+    const hr = addZero(inputTime.hours);
+    const min = addZero(inputTime.minutes);
+    const sec = addZero(inputTime.seconds);
+    const ms = addZero(inputTime.milliseconds, 3);
 
-    // Check if we need to show milliseconds
-    if (guide > 0 && guide < msDisplayMax) {
-        if (ms < 100) {
-            if (ms < 10) {
-                ms = '00' + ms;
-            } else {
-                ms = '0' + ms;
-            }
-        }
-        ms = ':' + ms;
-    } else {
-        ms = '';
+    if (inputTime.days > 0 || guideTime.days > 0) {
+        const day = addZero(inputTime.days);
+        return `${day}:${hr}:${min}:${sec}`;
     }
+    if (inputTime.hours > 0 || guideTime.hours > 0) {
+        return `${hr}:${min}:${sec}`;
+    }
+    if (displayMilliseconds) {
+        return `${min}:${sec}:${ms}`;
+    }
 
-    // Check if we need to show hours
-    h = (h > 0 || gh > 0) ? h + ':' : '';
-
-    // If hours are showing, we may need to add a leading zero.
-    // Always show at least one digit of minutes.
-    m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';
-
-    // Check if leading zero is need for seconds
-    s = ((s < 10) ? '0' + s : s);
-
-    return h + m + s + ms;
+    return `${min}:${sec}`;
 };
 
 export default formatTime;

src/js/videojs.wavesurfer.js

@@ -24,4 +24,6 @@ /**
 
+// wavesurfer.js backends
 const WEBAUDIO = 'WebAudio';
 const MEDIAELEMENT = 'MediaElement';
+const MEDIAELEMENT_WEBAUDIO = 'MediaElementWebAudio';
 
@@ -55,4 +57,9 @@ /**
         this.textTracksEnabled = (this.player.options_.tracks.length > 0);
-        this.msDisplayMax = parseFloat(options.msDisplayMax);
+        this.displayMilliseconds = options.displayMilliseconds;
 
+        // use custom video.js time format
+        videojs.setFormatTime((seconds, guide) => {
+            return formatTime(seconds, guide, this.displayMilliseconds);
+        });
+
         // wait until player ui is ready
@@ -76,7 +83,2 @@ this.player.one(Event.READY, this.initialize.bind(this));
 
-        // set video.js time format
-        videojs.setFormatTime((seconds, guide) => {
-            return formatTime(seconds, guide, this.msDisplayMax);
-        });
-
         // controls
@@ -526,3 +528,3 @@ if (this.player.options_.controls === true) {
                 this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent =
-                    formatTime(time, duration, this.msDisplayMax);
+                    formatTime(time, duration, this.displayMilliseconds);
         }
@@ -568,3 +570,3 @@
                 this.player.controlBar.durationDisplay.contentEl().lastChild.textContent =
-                    formatTime(duration, duration, this.msDisplayMax);
+                    formatTime(duration, duration, this.displayMilliseconds);
         }
@@ -587,4 +589,4 @@ }
 
-        // update time display
         if (this.backend === WEBAUDIO) {
+            // update time display
             this.setCurrentTime();
@@ -591,0 +593,0 @@ this.setDuration();

New alerts

License Policy Violation

License

This 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 risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106495

increased by3.57%

Lines of code

1259

increased by1.21%

Worsened metrics

Dev dependency count

47

increased by4.44%

Number of medium supply chain risk alerts

15

increased by15.38%

No dependency changes