Source 
35/58
+Source 36/60
| src/js/videojs.wavesurfer.js | +src/js/videojs.wavesurfer.js | Plugin Wavesurfer | -58 %30/51 | - - - +58 %31/53 | + + +
+
+ + + + + _formatTime: * +
+
+
+
+
+
+ Wavesurfer
+ + +
+
+ + + + + setFormatTime(customImplementation: function) +
+
+
+
+
+
+ Replaces the default formatTime implementation with a custom implementation.
- source + source
@@ -1646,7 +1709,7 @@- source + source
@@ -1689,7 +1752,7 @@- source + source
@@ -1732,7 +1795,7 @@- source + source
@@ -1775,7 +1838,7 @@- source + source
@@ -1818,7 +1881,7 @@- source + source
@@ -1861,7 +1924,7 @@- source + source
@@ -2020,6 +2083,51 @@
+
+Private Members
+
+
+
+ private
+
+
+
+
+
+ _formatTime: *
+
+
+
+ source
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Public Methods
@@ -2036,7 +2144,7 @@
- source
+ source
@@ -2080,7 +2188,7 @@
- source
+ source
@@ -2177,7 +2285,7 @@
- source
+ source
@@ -2235,7 +2343,7 @@
- source
+ source
@@ -2293,7 +2401,7 @@
- source
+ source
@@ -2350,7 +2458,7 @@
- source
+ source
@@ -2420,7 +2528,7 @@
- source
+ source
@@ -2490,7 +2598,7 @@
- source
+ source
@@ -2534,7 +2642,7 @@
- source
+ source
@@ -2578,7 +2686,7 @@
- source
+ source
@@ -2626,6 +2734,69 @@ Params:
+
+
+
+ public
+
+
+
+
+
+ setFormatTime(customImplementation: function)
+
+
+
+ source
+
+
+
+
+
+
+ Replaces the default formatTime implementation with a custom implementation.
+
+
+
+
+
+ Params:
+
+
+ Name Type Attribute Description
+ customImplementation
+ function
+ A function which will be used in place
+ of the default formatTime implementation. Will receive the current time
+ in seconds and the guide (in seconds) as arguments.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -2639,7 +2810,7 @@
- source
+ source
@@ -2702,7 +2873,7 @@
- source
+ source
@@ -2745,7 +2916,7 @@
- source
+ source
@@ -2789,7 +2960,7 @@
- source
+ source
@@ -2858,7 +3029,7 @@
- source
+ source
@@ -2902,7 +3073,7 @@
- source
+ source
@@ -2946,7 +3117,7 @@
- source
+ source
@@ -2990,7 +3161,7 @@
- source
+ source
@@ -3034,7 +3205,7 @@
- source
+ source
@@ -3095,7 +3266,7 @@
- source
+ source
@@ -3139,7 +3310,7 @@
- source
+ source
@@ -3200,7 +3371,7 @@
- source
+ source
@@ -3244,7 +3415,7 @@
- source
+ source
@@ -3288,7 +3459,7 @@
- source
+ source
@@ -3362,7 +3533,7 @@
- source
+ source
@@ -3430,7 +3601,7 @@
- source
+ source
@@ -3499,7 +3670,7 @@
- source
+ source
@@ -3560,7 +3731,7 @@
- source
+ source
diff --git a/docs/api/coverage.json b/docs/api/coverage.json
index 1851bc1f..de836974 100644
--- a/docs/api/coverage.json
+++ b/docs/api/coverage.json
@@ -1,7 +1,7 @@
{
- "coverage": "60.34%",
- "expectCount": 58,
- "actualCount": 35,
+ "coverage": "60%",
+ "expectCount": 60,
+ "actualCount": 36,
"files": {
"src/js/defaults.js": {
"expectCount": 1,
@@ -32,8 +32,8 @@
]
},
"src/js/videojs.wavesurfer.js": {
- "expectCount": 51,
- "actualCount": 30,
+ "expectCount": 53,
+ "actualCount": 31,
"undocumentLines": [
18,
20,
@@ -49,13 +49,14 @@
54,
55,
56,
- 129,
- 151,
- 153,
- 154,
- 177,
- 192,
- 193
+ 135,
+ 157,
+ 159,
+ 160,
+ 183,
+ 198,
+ 199,
+ 843
]
}
}
diff --git a/docs/api/file/src/js/videojs.wavesurfer.js.html b/docs/api/file/src/js/videojs.wavesurfer.js.html
index 6354edfe..52d76509 100644
--- a/docs/api/file/src/js/videojs.wavesurfer.js.html
+++ b/docs/api/file/src/js/videojs.wavesurfer.js.html
@@ -98,10 +98,16 @@
this.textTracksEnabled = (this.player.options_.tracks.length > 0);
this.displayMilliseconds = options.displayMilliseconds;
- // use custom video.js time format
- videojs.setFormatTime((seconds, guide) => {
- return formatTime(seconds, guide, this.displayMilliseconds);
- });
+ // use custom time format for video.js player
+ if (options.formatTime && typeof options.formatTime === 'function') {
+ // user-supplied formatTime
+ this.setFormatTime(options.formatTime);
+ } else {
+ // plugin's default formatTime
+ this.setFormatTime((seconds, guide) => {
+ return formatTime(seconds, guide, this.displayMilliseconds);
+ });
+ }
// wait until player ui is ready
this.player.one(Event.READY, this.initialize.bind(this));
@@ -367,11 +373,10 @@
this.log(err, 'error');
}
});
- request.on('error', e => {
- this.log('Unable to retrieve peak data from ' + peaks +
- '. Status code: ' + request.response.status, 'warn');
- this.log('Loading URL: ' + url);
- this.surfer.load(url);
+ request.once('error', e => {
+ this.player.trigger(Event.ERROR,
+ 'Unable to retrieve peak data from ' + peaks +
+ '. Status code: ' + request.response.status);
});
}
}
@@ -572,7 +577,7 @@
this.player.controlBar.currentTimeDisplay.formattedTime_ =
this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent =
- formatTime(time, duration, this.displayMilliseconds);
+ this._formatTime(time, duration, this.displayMilliseconds);
}
if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {
@@ -613,7 +618,7 @@
this.player.controlBar.durationDisplay.contentEl().lastChild) {
this.player.controlBar.durationDisplay.formattedTime_ =
this.player.controlBar.durationDisplay.contentEl().lastChild.textContent =
- formatTime(duration, duration, this.displayMilliseconds);
+ this._formatTime(duration, duration, this.displayMilliseconds);
}
}
@@ -869,6 +874,19 @@
log(args, logType) {
log(args, logType, this.debug);
}
+
+ /**
+ * Replaces the default `formatTime` implementation with a custom implementation.
+ *
+ * @param {function} customImplementation - A function which will be used in place
+ * of the default `formatTime` implementation. Will receive the current time
+ * in seconds and the guide (in seconds) as arguments.
+ */
+ setFormatTime(customImplementation) {
+ this._formatTime = customImplementation;
+
+ videojs.setFormatTime(this._formatTime);
+ }
}
// version nr is injected during build
diff --git a/docs/api/index.html b/docs/api/index.html
index 4eaf79e0..187a19d5 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -48,7 +48,7 @@
-
+
diff --git a/docs/api/index.json b/docs/api/index.json
index 12e3ffb1..fef7055c 100644
--- a/docs/api/index.json
+++ b/docs/api/index.json
@@ -843,7 +843,7 @@
"__docId__": 60,
"kind": "file",
"name": "src/js/videojs.wavesurfer.js",
- "content": "/**\n * @file videojs.wavesurfer.js\n *\n * The main file for the videojs-wavesurfer project.\n * MIT license: https://github.com/collab-project/videojs-wavesurfer/blob/master/LICENSE\n */\n\nimport Event from './event';\nimport log from './utils/log';\nimport formatTime from './utils/format-time';\nimport pluginDefaultOptions from './defaults';\nimport WavesurferMiddleware from './middleware';\nimport window from 'global/window';\n\nimport videojs from 'video.js';\nimport WaveSurfer from 'wavesurfer.js';\n\nconst Plugin = videojs.getPlugin('plugin');\n\nconst wavesurferPluginName = 'wavesurfer';\nconst wavesurferClassName = 'vjs-wavedisplay';\nconst wavesurferStyleName = 'vjs-wavesurfer';\n\n// wavesurfer.js backends\nconst WEBAUDIO = 'WebAudio';\nconst MEDIAELEMENT = 'MediaElement';\nconst MEDIAELEMENT_WEBAUDIO = 'MediaElementWebAudio';\n\n/**\n * Draw a waveform for audio and video files in a video.js player.\n *\n * @class\n * @augments videojs.Plugin\n */\nclass Wavesurfer extends Plugin {\n /**\n * The constructor function for the class.\n *\n * @param {(videojs.Player|Object)} player - video.js Player object.\n * @param {Object} options - Player options.\n */\n constructor(player, options) {\n super(player, options);\n\n // add plugin style\n player.addClass(wavesurferStyleName);\n\n // parse options\n options = videojs.mergeOptions(pluginDefaultOptions, 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 // use custom video.js time format\n videojs.setFormatTime((seconds, guide) => {\n return formatTime(seconds, guide, this.displayMilliseconds);\n });\n\n // wait until player ui is ready\n this.player.one(Event.READY, this.initialize.bind(this));\n }\n\n /**\n * Player UI is ready: customize controls.\n *\n * @private\n */\n initialize() {\n // hide big play button\n if (this.player.bigPlayButton !== undefined) {\n this.player.bigPlayButton.hide();\n }\n\n // parse options\n let mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer);\n\n // controls\n if (this.player.options_.controls === true) {\n // make sure controlBar is showing.\n // video.js hides the controlbar by default because it expects\n // the user to click on the 'big play button' first.\n this.player.controlBar.show();\n this.player.controlBar.el_.style.display = 'flex';\n\n // progress control is only supported with the MediaElement backend\n if (this.backend === WEBAUDIO &&\n this.player.controlBar.progressControl !== undefined) {\n this.player.controlBar.progressControl.hide();\n }\n\n // disable Picture-In-Picture toggle introduced in video.js 7.6.0\n // until there is support for canvas in the Picture-In-Picture\n // browser API (see https://www.chromestatus.com/features/4844605453369344)\n if (this.player.controlBar.pictureInPictureToggle !== undefined) {\n this.player.controlBar.pictureInPictureToggle.hide();\n }\n\n // make sure time displays are visible\n let uiElements = ['currentTimeDisplay', 'timeDivider', 'durationDisplay'];\n uiElements.forEach((element) => {\n // ignore and show when essential elements have been disabled\n // by user\n element = this.player.controlBar[element];\n if (element !== undefined) {\n element.el_.style.display = 'block';\n element.show();\n }\n });\n if (this.player.controlBar.remainingTimeDisplay !== undefined) {\n this.player.controlBar.remainingTimeDisplay.hide();\n }\n\n if (this.backend === WEBAUDIO &&\n this.player.controlBar.playToggle !== undefined) {\n // handle play toggle interaction\n this.player.controlBar.playToggle.on(['tap', 'click'],\n this.onPlayToggle.bind(this));\n\n // disable play button until waveform is ready\n this.player.controlBar.playToggle.hide();\n }\n }\n\n // wavesurfer.js setup\n this.surfer = WaveSurfer.create(mergedOptions);\n this.surfer.on(Event.ERROR, this.onWaveError.bind(this));\n this.surfer.on(Event.FINISH, this.onWaveFinish.bind(this));\n this.backend = this.surfer.params.backend;\n this.log('Using wavesurfer.js ' + this.backend + ' backend.');\n\n // check if the wavesurfer.js microphone plugin is enabled\n if ('microphone' in this.player.wavesurfer().surfer.getActivePlugins()) {\n // enable audio input from a microphone\n this.liveMode = true;\n this.waveReady = true;\n this.log('wavesurfer.js microphone plugin enabled.');\n\n // in live mode, show play button at startup\n this.player.controlBar.playToggle.show();\n\n // listen for wavesurfer.js microphone plugin events\n this.surfer.microphone.on(Event.DEVICE_ERROR,\n this.onWaveError.bind(this));\n }\n\n // listen for wavesurfer.js events\n this.surferReady = this.onWaveReady.bind(this);\n if (this.backend === WEBAUDIO) {\n this.surferProgress = this.onWaveProgress.bind(this);\n this.surferSeek = this.onWaveSeek.bind(this);\n\n // make sure volume is muted when requested\n if (this.player.muted()) {\n this.setVolume(0);\n }\n }\n\n // only listen to the wavesurfer.js playback events when not\n // in live mode\n if (!this.liveMode) {\n this.setupPlaybackEvents(true);\n }\n\n // video.js player events\n this.player.on(Event.VOLUMECHANGE, this.onVolumeChange.bind(this));\n this.player.on(Event.FULLSCREENCHANGE, this.onScreenChange.bind(this));\n\n // video.js fluid option\n if (this.player.options_.fluid === true) {\n // give wave element a classname so it can be styled\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n // listen for window resize events\n this.responsiveWave = WaveSurfer.util.debounce(\n this.onResizeChange.bind(this), 150);\n window.addEventListener(Event.RESIZE, this.responsiveWave);\n }\n }\n\n /**\n * Initializes the waveform options.\n *\n * @private\n * @param {Object} surferOpts - Plugin options.\n * @returns {Object} - Updated `surferOpts` object.\n */\n parseOptions(surferOpts = {}) {\n let rect = this.player.el_.getBoundingClientRect();\n this.originalWidth = this.player.options_.width || rect.width;\n this.originalHeight = this.player.options_.height || rect.height;\n\n // controlbar\n let controlBarHeight = this.player.controlBar.height();\n if (this.player.options_.controls === true && controlBarHeight === 0) {\n // the dimensions of the controlbar are not known yet, but we\n // need it now, so we can calculate the height of the waveform.\n // The default height is 30px, so use that instead.\n controlBarHeight = 30;\n }\n\n // set waveform element and dimensions\n // Set the container to player's container if \"container\" option is\n // not provided. If a waveform needs to be appended to your custom\n // element, then use below option. For example:\n // container: document.querySelector(\"#vjs-waveform\")\n if (surferOpts.container === undefined) {\n surferOpts.container = this.player.el_;\n }\n\n // set the height of generated waveform if user has provided height\n // from options. If height of waveform need to be customized then use\n // option below. For example: waveformHeight: 30\n if (surferOpts.waveformHeight === undefined) {\n let playerHeight = rect.height;\n surferOpts.height = playerHeight - controlBarHeight;\n } else {\n surferOpts.height = surferOpts.waveformHeight;\n }\n\n // split channels\n if (surferOpts.splitChannels && surferOpts.splitChannels === true) {\n surferOpts.height /= 2;\n }\n\n // use MediaElement as default wavesurfer.js backend if one is not\n // specified\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 /**\n * Starts or stops listening to events related to audio-playback.\n *\n * @param {boolean} enable - Start or stop listening to playback\n * related events.\n * @private\n */\n setupPlaybackEvents(enable) {\n if (enable === false) {\n this.surfer.un(Event.READY, this.surferReady);\n if (this.backend === WEBAUDIO) {\n this.surfer.un(Event.AUDIOPROCESS, this.surferProgress);\n this.surfer.un(Event.SEEK, this.surferSeek);\n }\n } else if (enable === true) {\n this.surfer.on(Event.READY, this.surferReady);\n if (this.backend === WEBAUDIO) {\n this.surfer.on(Event.AUDIOPROCESS, this.surferProgress);\n this.surfer.on(Event.SEEK, this.surferSeek);\n }\n }\n }\n\n /**\n * Start loading waveform data.\n *\n * @param {string|blob|file} url - Either the URL of the audio file,\n * a Blob or a File object.\n * @param {string|number[]} peaks - Either the URL of peaks\n * data for the audio file, or an array with peaks data.\n */\n 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 // load peak data from array or file\n if (peaks !== undefined) {\n this.loadPeaks(url, peaks);\n } else {\n // no peaks\n if (typeof url === 'string') {\n this.log('Loading URL: ' + url);\n } else {\n this.log('Loading element: ' + url);\n }\n this.surfer.load(url);\n }\n }\n }\n\n /**\n * Start loading waveform data.\n *\n * @param {string|blob|file} url - Either the URL of the audio file,\n * a Blob or a File object.\n * @param {string|number[]} peaks - Either the URL of peaks\n * data for the audio file, or an array with peaks data.\n */\n loadPeaks(url, peaks) {\n if (Array.isArray(peaks)) {\n // use supplied peaks data\n this.log('Loading URL with array of peaks: ' + url);\n this.surfer.load(url, peaks);\n } else {\n // load peak data from file\n let requestOptions = {\n url: peaks,\n responseType: 'json'\n };\n\n // supply xhr options, if any\n if (this.player.options_.plugins.wavesurfer.xhr !== undefined) {\n requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr;\n }\n let request = WaveSurfer.util.fetchFile(requestOptions);\n\n request.once('success', data => {\n this.log('Loaded Peak Data URL: ' + peaks);\n // check for data property containing peaks\n if (data && data.data) {\n this.surfer.load(url, data.data);\n } else {\n this.player.trigger(Event.ERROR,\n 'Could not load peaks data from ' + peaks);\n this.log(err, 'error');\n }\n });\n request.on('error', e => {\n this.log('Unable to retrieve peak data from ' + peaks +\n '. Status code: ' + request.response.status, 'warn');\n this.log('Loading URL: ' + url);\n this.surfer.load(url);\n });\n }\n }\n\n /**\n * Start/resume playback or microphone.\n */\n play() {\n // show pause button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePlay();\n }\n\n if (this.liveMode) {\n // start/resume microphone visualization\n if (!this.surfer.microphone.active)\n {\n this.log('Start microphone');\n this.surfer.microphone.start();\n } else {\n // toggle paused\n let 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\n // put video.js player UI in playback mode\n this.player.play();\n\n // start surfer playback\n this.surfer.play();\n }\n }\n\n /**\n * Pauses playback or microphone visualization.\n */\n pause() {\n // show play button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePause();\n }\n\n if (this.liveMode) {\n // pause microphone visualization\n this.log('Pause microphone');\n this.surfer.microphone.pause();\n } else {\n // pause playback\n this.log('Pause playback');\n\n if (!this.waveFinished) {\n // pause wavesurfer playback\n this.surfer.pause();\n } else {\n this.waveFinished = false;\n }\n\n this.setCurrentTime();\n }\n }\n\n /**\n * @private\n */\n dispose() {\n if (this.surfer) {\n if (this.liveMode && this.surfer.microphone) {\n // destroy microphone plugin\n this.surfer.microphone.destroy();\n this.log('Destroyed microphone plugin');\n }\n // destroy wavesurfer instance\n this.surfer.destroy();\n }\n this.log('Destroyed plugin');\n }\n\n /**\n * Indicates whether the plugin is destroyed or not.\n *\n * @return {boolean} Plugin destroyed or not.\n */\n isDestroyed() {\n return this.player && (this.player.children() === null);\n }\n\n /**\n * Remove the player and waveform.\n */\n destroy() {\n this.player.dispose();\n }\n\n /**\n * Set the volume level.\n *\n * @param {number} volume - The new volume level.\n */\n setVolume(volume) {\n if (volume !== undefined) {\n this.log('Changing volume to: ' + volume);\n\n // update player volume\n this.player.volume(volume);\n }\n }\n\n /**\n * Save waveform image as data URI.\n *\n * The default format is `'image/png'`. Other supported types are\n * `'image/jpeg'` and `'image/webp'`.\n *\n * @param {string} format='image/png' A string indicating the image format.\n * The default format type is `'image/png'`.\n * @param {number} quality=1 A number between 0 and 1 indicating the image\n * quality to use for image formats that use lossy compression such as\n * `'image/jpeg'`` and `'image/webp'`.\n * @param {string} type Image data type to return. Either 'blob' (default)\n * or 'dataURL'.\n * @return {string|string[]|Promise} When using `'dataURL'` `type` this returns\n * a single data URL or an array of data URLs, one for each canvas. The `'blob'`\n * `type` returns a `Promise` resolving with an array of `Blob` instances, one\n * for each canvas.\n */\n exportImage(format, quality, type = 'blob') {\n return this.surfer.exportImage(format, quality, type);\n }\n\n /**\n * Change the audio output device.\n *\n * @param {string} deviceId - Id of audio output device.\n */\n setAudioOutput(deviceId) {\n if (deviceId) {\n this.surfer.setSinkId(deviceId).then((result) => {\n // notify listeners\n this.player.trigger(Event.AUDIO_OUTPUT_READY);\n }).catch((err) => {\n // notify listeners\n this.player.trigger(Event.ERROR, err);\n\n this.log(err, 'error');\n });\n }\n }\n\n /**\n * Get the current time (in seconds) of the stream during playback.\n *\n * Returns 0 if no stream is available (yet).\n *\n * @returns {float} Current time of the stream.\n */\n getCurrentTime() {\n let currentTime = this.surfer.getCurrentTime();\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n\n return currentTime;\n }\n\n /**\n * Updates the player's element displaying the current time.\n *\n * @param {number} [currentTime] - Current position of the playhead\n * (in seconds).\n * @param {number} [duration] - Duration of the waveform (in seconds).\n * @private\n */\n 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 // update current time display component\n if (this.player.controlBar.currentTimeDisplay &&\n this.player.controlBar.currentTimeDisplay.contentEl() &&\n this.player.controlBar.currentTimeDisplay.contentEl().lastChild) {\n let time = Math.min(currentTime, duration);\n\n this.player.controlBar.currentTimeDisplay.formattedTime_ =\n this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent =\n formatTime(time, duration, this.displayMilliseconds);\n }\n\n if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {\n // only needed for text tracks\n this.player.tech_.setCurrentTime(currentTime);\n }\n }\n\n /**\n * Get the duration of the stream in seconds.\n *\n * Returns 0 if no stream is available (yet).\n *\n * @returns {float} Duration of the stream.\n */\n getDuration() {\n let duration = this.surfer.getDuration();\n duration = isNaN(duration) ? 0 : duration;\n\n return duration;\n }\n\n /**\n * Updates the player's element displaying the duration time.\n *\n * @param {number} [duration] - Duration of the waveform (in seconds).\n * @private\n */\n setDuration(duration) {\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n duration = isNaN(duration) ? 0 : duration;\n\n // update duration display component\n if (this.player.controlBar.durationDisplay &&\n this.player.controlBar.durationDisplay.contentEl() &&\n this.player.controlBar.durationDisplay.contentEl().lastChild) {\n this.player.controlBar.durationDisplay.formattedTime_ =\n this.player.controlBar.durationDisplay.contentEl().lastChild.textContent =\n formatTime(duration, duration, this.displayMilliseconds);\n }\n }\n\n /**\n * Audio is loaded, decoded and the waveform is drawn.\n *\n * @fires waveReady\n * @private\n */\n onWaveReady() {\n this.waveReady = true;\n this.waveFinished = false;\n this.liveMode = false;\n\n this.log('Waveform is ready');\n this.player.trigger(Event.WAVE_READY);\n\n if (this.backend === WEBAUDIO) {\n // update time display\n this.setCurrentTime();\n this.setDuration();\n\n // enable and show play button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.show();\n }\n }\n\n // hide loading spinner\n if (this.player.loadingSpinner.contentEl()) {\n this.player.loadingSpinner.hide();\n }\n\n // auto-play when ready (if enabled)\n if (this.player.options_.autoplay === true) {\n // autoplay is only allowed when audio is muted\n this.setVolume(0);\n\n // try auto-play\n if (this.backend === WEBAUDIO) {\n this.play();\n } else {\n this.player.play().catch(e => {\n this.onWaveError(e);\n });\n }\n }\n }\n\n /**\n * Fires when audio playback completed.\n *\n * @fires playbackFinish\n * @private\n */\n onWaveFinish() {\n this.log('Finished playback');\n\n // notify listeners\n this.player.trigger(Event.PLAYBACK_FINISH);\n\n // check if loop is enabled\n if (this.player.options_.loop === true) {\n if (this.backend === WEBAUDIO) {\n // reset waveform\n this.surfer.stop();\n this.play();\n }\n } else {\n // finished\n this.waveFinished = true;\n\n if (this.backend === WEBAUDIO) {\n // pause player\n this.pause();\n\n // show the replay state of play toggle\n this.player.trigger(Event.ENDED);\n\n // this gets called once after the clip has ended and the user\n // seeks so that we can change the replay button back to a play\n // button\n this.surfer.once(Event.SEEK, () => {\n if (this.player.controlBar.playToggle !== undefined) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n this.player.trigger(Event.PAUSE);\n });\n }\n }\n }\n\n /**\n * Fires continuously during audio playback.\n *\n * @param {number} time - Current time/location of the playhead.\n * @private\n */\n onWaveProgress(time) {\n this.setCurrentTime();\n }\n\n /**\n * Fires during seeking of the waveform.\n *\n * @private\n */\n onWaveSeek() {\n this.setCurrentTime();\n }\n\n /**\n * Waveform error.\n *\n * @param {string} error - The wavesurfer error.\n * @private\n */\n onWaveError(error) {\n // notify listeners\n if (error.name && error.name === 'AbortError' ||\n error.name === 'DOMException' && error.message.startsWith('The operation was aborted'))\n {\n this.player.trigger(Event.ABORT, error);\n } else {\n this.player.trigger(Event.ERROR, error);\n\n this.log(error, 'error');\n }\n }\n\n /**\n * Fired when the play toggle is clicked.\n * @private\n */\n onPlayToggle() {\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.hasClass('vjs-ended')) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n if (this.surfer.isPlaying()) {\n this.pause();\n } else {\n this.play();\n }\n }\n\n /**\n * Fired when the volume in the video.js player changes.\n * @private\n */\n onVolumeChange() {\n let volume = this.player.volume();\n if (this.player.muted()) {\n // muted volume\n volume = 0;\n }\n\n // update wavesurfer.js volume\n this.surfer.setVolume(volume);\n }\n\n /**\n * Fired when the video.js player switches in or out of fullscreen mode.\n * @private\n */\n onScreenChange() {\n // execute with tiny delay so the player element completes\n // rendering and correct dimensions are reported\n let fullscreenDelay = this.player.setInterval(() => {\n let isFullscreen = this.player.isFullscreen();\n let newWidth, newHeight;\n if (!isFullscreen) {\n // restore original dimensions\n newWidth = this.originalWidth;\n newHeight = this.originalHeight;\n }\n\n if (this.waveReady) {\n if (this.liveMode && !this.surfer.microphone.active) {\n // we're in live mode but the microphone hasn't been\n // started yet\n return;\n }\n // redraw\n this.redrawWaveform(newWidth, newHeight);\n }\n\n // stop fullscreenDelay interval\n this.player.clearInterval(fullscreenDelay);\n\n }, 100);\n }\n\n /**\n * Fired when the video.js player is resized.\n *\n * @private\n */\n onResizeChange() {\n if (this.surfer !== undefined) {\n // redraw waveform\n this.redrawWaveform();\n }\n }\n\n /**\n * Redraw waveform.\n *\n * @param {number} [newWidth] - New width for the waveform.\n * @param {number} [newHeight] - New height for the waveform.\n * @private\n */\n redrawWaveform(newWidth, newHeight) {\n if (!this.isDestroyed()) {\n if (this.player.el_) {\n let rect = this.player.el_.getBoundingClientRect();\n if (newWidth === undefined) {\n // get player width\n newWidth = rect.width;\n }\n if (newHeight === undefined) {\n // get player height\n newHeight = rect.height;\n }\n }\n\n // destroy old drawing\n this.surfer.drawer.destroy();\n\n // set new dimensions\n this.surfer.params.width = newWidth;\n this.surfer.params.height = newHeight - this.player.controlBar.height();\n\n // redraw waveform\n this.surfer.createDrawer();\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.surfer.drawBuffer();\n\n // make sure playhead is restored at right position\n this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents());\n }\n }\n\n /**\n * Log message to console (if the debug option is enabled).\n *\n * @private\n * @param {Array} args - The arguments to be passed to the matching console\n * method.\n * @param {string} logType - The name of the console method to use.\n */\n log(args, logType) {\n log(args, logType, this.debug);\n }\n}\n\n// version nr is injected during build\nWavesurfer.VERSION = __VERSION__;\n\n// register plugin once\nvideojs.Wavesurfer = Wavesurfer;\nif (videojs.getPlugin(wavesurferPluginName) === undefined) {\n videojs.registerPlugin(wavesurferPluginName, Wavesurfer);\n}\n\n// register a star-middleware\nvideojs.use('*', player => {\n // make player available on middleware\n WavesurferMiddleware.player = player;\n\n return WavesurferMiddleware;\n});\n\nexport {Wavesurfer};",
+ "content": "/**\n * @file videojs.wavesurfer.js\n *\n * The main file for the videojs-wavesurfer project.\n * MIT license: https://github.com/collab-project/videojs-wavesurfer/blob/master/LICENSE\n */\n\nimport Event from './event';\nimport log from './utils/log';\nimport formatTime from './utils/format-time';\nimport pluginDefaultOptions from './defaults';\nimport WavesurferMiddleware from './middleware';\nimport window from 'global/window';\n\nimport videojs from 'video.js';\nimport WaveSurfer from 'wavesurfer.js';\n\nconst Plugin = videojs.getPlugin('plugin');\n\nconst wavesurferPluginName = 'wavesurfer';\nconst wavesurferClassName = 'vjs-wavedisplay';\nconst wavesurferStyleName = 'vjs-wavesurfer';\n\n// wavesurfer.js backends\nconst WEBAUDIO = 'WebAudio';\nconst MEDIAELEMENT = 'MediaElement';\nconst MEDIAELEMENT_WEBAUDIO = 'MediaElementWebAudio';\n\n/**\n * Draw a waveform for audio and video files in a video.js player.\n *\n * @class\n * @augments videojs.Plugin\n */\nclass Wavesurfer extends Plugin {\n /**\n * The constructor function for the class.\n *\n * @param {(videojs.Player|Object)} player - video.js Player object.\n * @param {Object} options - Player options.\n */\n constructor(player, options) {\n super(player, options);\n\n // add plugin style\n player.addClass(wavesurferStyleName);\n\n // parse options\n options = videojs.mergeOptions(pluginDefaultOptions, 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 // use custom time format for video.js player\n if (options.formatTime && typeof options.formatTime === 'function') {\n // user-supplied formatTime\n this.setFormatTime(options.formatTime);\n } else {\n // plugin's default formatTime\n this.setFormatTime((seconds, guide) => {\n return formatTime(seconds, guide, this.displayMilliseconds);\n });\n }\n\n // wait until player ui is ready\n this.player.one(Event.READY, this.initialize.bind(this));\n }\n\n /**\n * Player UI is ready: customize controls.\n *\n * @private\n */\n initialize() {\n // hide big play button\n if (this.player.bigPlayButton !== undefined) {\n this.player.bigPlayButton.hide();\n }\n\n // parse options\n let mergedOptions = this.parseOptions(this.player.options_.plugins.wavesurfer);\n\n // controls\n if (this.player.options_.controls === true) {\n // make sure controlBar is showing.\n // video.js hides the controlbar by default because it expects\n // the user to click on the 'big play button' first.\n this.player.controlBar.show();\n this.player.controlBar.el_.style.display = 'flex';\n\n // progress control is only supported with the MediaElement backend\n if (this.backend === WEBAUDIO &&\n this.player.controlBar.progressControl !== undefined) {\n this.player.controlBar.progressControl.hide();\n }\n\n // disable Picture-In-Picture toggle introduced in video.js 7.6.0\n // until there is support for canvas in the Picture-In-Picture\n // browser API (see https://www.chromestatus.com/features/4844605453369344)\n if (this.player.controlBar.pictureInPictureToggle !== undefined) {\n this.player.controlBar.pictureInPictureToggle.hide();\n }\n\n // make sure time displays are visible\n let uiElements = ['currentTimeDisplay', 'timeDivider', 'durationDisplay'];\n uiElements.forEach((element) => {\n // ignore and show when essential elements have been disabled\n // by user\n element = this.player.controlBar[element];\n if (element !== undefined) {\n element.el_.style.display = 'block';\n element.show();\n }\n });\n if (this.player.controlBar.remainingTimeDisplay !== undefined) {\n this.player.controlBar.remainingTimeDisplay.hide();\n }\n\n if (this.backend === WEBAUDIO &&\n this.player.controlBar.playToggle !== undefined) {\n // handle play toggle interaction\n this.player.controlBar.playToggle.on(['tap', 'click'],\n this.onPlayToggle.bind(this));\n\n // disable play button until waveform is ready\n this.player.controlBar.playToggle.hide();\n }\n }\n\n // wavesurfer.js setup\n this.surfer = WaveSurfer.create(mergedOptions);\n this.surfer.on(Event.ERROR, this.onWaveError.bind(this));\n this.surfer.on(Event.FINISH, this.onWaveFinish.bind(this));\n this.backend = this.surfer.params.backend;\n this.log('Using wavesurfer.js ' + this.backend + ' backend.');\n\n // check if the wavesurfer.js microphone plugin is enabled\n if ('microphone' in this.player.wavesurfer().surfer.getActivePlugins()) {\n // enable audio input from a microphone\n this.liveMode = true;\n this.waveReady = true;\n this.log('wavesurfer.js microphone plugin enabled.');\n\n // in live mode, show play button at startup\n this.player.controlBar.playToggle.show();\n\n // listen for wavesurfer.js microphone plugin events\n this.surfer.microphone.on(Event.DEVICE_ERROR,\n this.onWaveError.bind(this));\n }\n\n // listen for wavesurfer.js events\n this.surferReady = this.onWaveReady.bind(this);\n if (this.backend === WEBAUDIO) {\n this.surferProgress = this.onWaveProgress.bind(this);\n this.surferSeek = this.onWaveSeek.bind(this);\n\n // make sure volume is muted when requested\n if (this.player.muted()) {\n this.setVolume(0);\n }\n }\n\n // only listen to the wavesurfer.js playback events when not\n // in live mode\n if (!this.liveMode) {\n this.setupPlaybackEvents(true);\n }\n\n // video.js player events\n this.player.on(Event.VOLUMECHANGE, this.onVolumeChange.bind(this));\n this.player.on(Event.FULLSCREENCHANGE, this.onScreenChange.bind(this));\n\n // video.js fluid option\n if (this.player.options_.fluid === true) {\n // give wave element a classname so it can be styled\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n // listen for window resize events\n this.responsiveWave = WaveSurfer.util.debounce(\n this.onResizeChange.bind(this), 150);\n window.addEventListener(Event.RESIZE, this.responsiveWave);\n }\n }\n\n /**\n * Initializes the waveform options.\n *\n * @private\n * @param {Object} surferOpts - Plugin options.\n * @returns {Object} - Updated `surferOpts` object.\n */\n parseOptions(surferOpts = {}) {\n let rect = this.player.el_.getBoundingClientRect();\n this.originalWidth = this.player.options_.width || rect.width;\n this.originalHeight = this.player.options_.height || rect.height;\n\n // controlbar\n let controlBarHeight = this.player.controlBar.height();\n if (this.player.options_.controls === true && controlBarHeight === 0) {\n // the dimensions of the controlbar are not known yet, but we\n // need it now, so we can calculate the height of the waveform.\n // The default height is 30px, so use that instead.\n controlBarHeight = 30;\n }\n\n // set waveform element and dimensions\n // Set the container to player's container if \"container\" option is\n // not provided. If a waveform needs to be appended to your custom\n // element, then use below option. For example:\n // container: document.querySelector(\"#vjs-waveform\")\n if (surferOpts.container === undefined) {\n surferOpts.container = this.player.el_;\n }\n\n // set the height of generated waveform if user has provided height\n // from options. If height of waveform need to be customized then use\n // option below. For example: waveformHeight: 30\n if (surferOpts.waveformHeight === undefined) {\n let playerHeight = rect.height;\n surferOpts.height = playerHeight - controlBarHeight;\n } else {\n surferOpts.height = surferOpts.waveformHeight;\n }\n\n // split channels\n if (surferOpts.splitChannels && surferOpts.splitChannels === true) {\n surferOpts.height /= 2;\n }\n\n // use MediaElement as default wavesurfer.js backend if one is not\n // specified\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 /**\n * Starts or stops listening to events related to audio-playback.\n *\n * @param {boolean} enable - Start or stop listening to playback\n * related events.\n * @private\n */\n setupPlaybackEvents(enable) {\n if (enable === false) {\n this.surfer.un(Event.READY, this.surferReady);\n if (this.backend === WEBAUDIO) {\n this.surfer.un(Event.AUDIOPROCESS, this.surferProgress);\n this.surfer.un(Event.SEEK, this.surferSeek);\n }\n } else if (enable === true) {\n this.surfer.on(Event.READY, this.surferReady);\n if (this.backend === WEBAUDIO) {\n this.surfer.on(Event.AUDIOPROCESS, this.surferProgress);\n this.surfer.on(Event.SEEK, this.surferSeek);\n }\n }\n }\n\n /**\n * Start loading waveform data.\n *\n * @param {string|blob|file} url - Either the URL of the audio file,\n * a Blob or a File object.\n * @param {string|number[]} peaks - Either the URL of peaks\n * data for the audio file, or an array with peaks data.\n */\n 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 // load peak data from array or file\n if (peaks !== undefined) {\n this.loadPeaks(url, peaks);\n } else {\n // no peaks\n if (typeof url === 'string') {\n this.log('Loading URL: ' + url);\n } else {\n this.log('Loading element: ' + url);\n }\n this.surfer.load(url);\n }\n }\n }\n\n /**\n * Start loading waveform data.\n *\n * @param {string|blob|file} url - Either the URL of the audio file,\n * a Blob or a File object.\n * @param {string|number[]} peaks - Either the URL of peaks\n * data for the audio file, or an array with peaks data.\n */\n loadPeaks(url, peaks) {\n if (Array.isArray(peaks)) {\n // use supplied peaks data\n this.log('Loading URL with array of peaks: ' + url);\n this.surfer.load(url, peaks);\n } else {\n // load peak data from file\n let requestOptions = {\n url: peaks,\n responseType: 'json'\n };\n\n // supply xhr options, if any\n if (this.player.options_.plugins.wavesurfer.xhr !== undefined) {\n requestOptions.xhr = this.player.options_.plugins.wavesurfer.xhr;\n }\n let request = WaveSurfer.util.fetchFile(requestOptions);\n\n request.once('success', data => {\n this.log('Loaded Peak Data URL: ' + peaks);\n // check for data property containing peaks\n if (data && data.data) {\n this.surfer.load(url, data.data);\n } else {\n this.player.trigger(Event.ERROR,\n 'Could not load peaks data from ' + peaks);\n this.log(err, 'error');\n }\n });\n request.once('error', e => {\n this.player.trigger(Event.ERROR,\n 'Unable to retrieve peak data from ' + peaks +\n '. Status code: ' + request.response.status);\n });\n }\n }\n\n /**\n * Start/resume playback or microphone.\n */\n play() {\n // show pause button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePlay();\n }\n\n if (this.liveMode) {\n // start/resume microphone visualization\n if (!this.surfer.microphone.active)\n {\n this.log('Start microphone');\n this.surfer.microphone.start();\n } else {\n // toggle paused\n let 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\n // put video.js player UI in playback mode\n this.player.play();\n\n // start surfer playback\n this.surfer.play();\n }\n }\n\n /**\n * Pauses playback or microphone visualization.\n */\n pause() {\n // show play button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.handlePause();\n }\n\n if (this.liveMode) {\n // pause microphone visualization\n this.log('Pause microphone');\n this.surfer.microphone.pause();\n } else {\n // pause playback\n this.log('Pause playback');\n\n if (!this.waveFinished) {\n // pause wavesurfer playback\n this.surfer.pause();\n } else {\n this.waveFinished = false;\n }\n\n this.setCurrentTime();\n }\n }\n\n /**\n * @private\n */\n dispose() {\n if (this.surfer) {\n if (this.liveMode && this.surfer.microphone) {\n // destroy microphone plugin\n this.surfer.microphone.destroy();\n this.log('Destroyed microphone plugin');\n }\n // destroy wavesurfer instance\n this.surfer.destroy();\n }\n this.log('Destroyed plugin');\n }\n\n /**\n * Indicates whether the plugin is destroyed or not.\n *\n * @return {boolean} Plugin destroyed or not.\n */\n isDestroyed() {\n return this.player && (this.player.children() === null);\n }\n\n /**\n * Remove the player and waveform.\n */\n destroy() {\n this.player.dispose();\n }\n\n /**\n * Set the volume level.\n *\n * @param {number} volume - The new volume level.\n */\n setVolume(volume) {\n if (volume !== undefined) {\n this.log('Changing volume to: ' + volume);\n\n // update player volume\n this.player.volume(volume);\n }\n }\n\n /**\n * Save waveform image as data URI.\n *\n * The default format is `'image/png'`. Other supported types are\n * `'image/jpeg'` and `'image/webp'`.\n *\n * @param {string} format='image/png' A string indicating the image format.\n * The default format type is `'image/png'`.\n * @param {number} quality=1 A number between 0 and 1 indicating the image\n * quality to use for image formats that use lossy compression such as\n * `'image/jpeg'`` and `'image/webp'`.\n * @param {string} type Image data type to return. Either 'blob' (default)\n * or 'dataURL'.\n * @return {string|string[]|Promise} When using `'dataURL'` `type` this returns\n * a single data URL or an array of data URLs, one for each canvas. The `'blob'`\n * `type` returns a `Promise` resolving with an array of `Blob` instances, one\n * for each canvas.\n */\n exportImage(format, quality, type = 'blob') {\n return this.surfer.exportImage(format, quality, type);\n }\n\n /**\n * Change the audio output device.\n *\n * @param {string} deviceId - Id of audio output device.\n */\n setAudioOutput(deviceId) {\n if (deviceId) {\n this.surfer.setSinkId(deviceId).then((result) => {\n // notify listeners\n this.player.trigger(Event.AUDIO_OUTPUT_READY);\n }).catch((err) => {\n // notify listeners\n this.player.trigger(Event.ERROR, err);\n\n this.log(err, 'error');\n });\n }\n }\n\n /**\n * Get the current time (in seconds) of the stream during playback.\n *\n * Returns 0 if no stream is available (yet).\n *\n * @returns {float} Current time of the stream.\n */\n getCurrentTime() {\n let currentTime = this.surfer.getCurrentTime();\n currentTime = isNaN(currentTime) ? 0 : currentTime;\n\n return currentTime;\n }\n\n /**\n * Updates the player's element displaying the current time.\n *\n * @param {number} [currentTime] - Current position of the playhead\n * (in seconds).\n * @param {number} [duration] - Duration of the waveform (in seconds).\n * @private\n */\n 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 // update current time display component\n if (this.player.controlBar.currentTimeDisplay &&\n this.player.controlBar.currentTimeDisplay.contentEl() &&\n this.player.controlBar.currentTimeDisplay.contentEl().lastChild) {\n let time = Math.min(currentTime, duration);\n\n this.player.controlBar.currentTimeDisplay.formattedTime_ =\n this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent =\n this._formatTime(time, duration, this.displayMilliseconds);\n }\n\n if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {\n // only needed for text tracks\n this.player.tech_.setCurrentTime(currentTime);\n }\n }\n\n /**\n * Get the duration of the stream in seconds.\n *\n * Returns 0 if no stream is available (yet).\n *\n * @returns {float} Duration of the stream.\n */\n getDuration() {\n let duration = this.surfer.getDuration();\n duration = isNaN(duration) ? 0 : duration;\n\n return duration;\n }\n\n /**\n * Updates the player's element displaying the duration time.\n *\n * @param {number} [duration] - Duration of the waveform (in seconds).\n * @private\n */\n setDuration(duration) {\n if (duration === undefined) {\n duration = this.surfer.getDuration();\n }\n duration = isNaN(duration) ? 0 : duration;\n\n // update duration display component\n if (this.player.controlBar.durationDisplay &&\n this.player.controlBar.durationDisplay.contentEl() &&\n this.player.controlBar.durationDisplay.contentEl().lastChild) {\n this.player.controlBar.durationDisplay.formattedTime_ =\n this.player.controlBar.durationDisplay.contentEl().lastChild.textContent =\n this._formatTime(duration, duration, this.displayMilliseconds);\n }\n }\n\n /**\n * Audio is loaded, decoded and the waveform is drawn.\n *\n * @fires waveReady\n * @private\n */\n onWaveReady() {\n this.waveReady = true;\n this.waveFinished = false;\n this.liveMode = false;\n\n this.log('Waveform is ready');\n this.player.trigger(Event.WAVE_READY);\n\n if (this.backend === WEBAUDIO) {\n // update time display\n this.setCurrentTime();\n this.setDuration();\n\n // enable and show play button\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.contentEl()) {\n this.player.controlBar.playToggle.show();\n }\n }\n\n // hide loading spinner\n if (this.player.loadingSpinner.contentEl()) {\n this.player.loadingSpinner.hide();\n }\n\n // auto-play when ready (if enabled)\n if (this.player.options_.autoplay === true) {\n // autoplay is only allowed when audio is muted\n this.setVolume(0);\n\n // try auto-play\n if (this.backend === WEBAUDIO) {\n this.play();\n } else {\n this.player.play().catch(e => {\n this.onWaveError(e);\n });\n }\n }\n }\n\n /**\n * Fires when audio playback completed.\n *\n * @fires playbackFinish\n * @private\n */\n onWaveFinish() {\n this.log('Finished playback');\n\n // notify listeners\n this.player.trigger(Event.PLAYBACK_FINISH);\n\n // check if loop is enabled\n if (this.player.options_.loop === true) {\n if (this.backend === WEBAUDIO) {\n // reset waveform\n this.surfer.stop();\n this.play();\n }\n } else {\n // finished\n this.waveFinished = true;\n\n if (this.backend === WEBAUDIO) {\n // pause player\n this.pause();\n\n // show the replay state of play toggle\n this.player.trigger(Event.ENDED);\n\n // this gets called once after the clip has ended and the user\n // seeks so that we can change the replay button back to a play\n // button\n this.surfer.once(Event.SEEK, () => {\n if (this.player.controlBar.playToggle !== undefined) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n this.player.trigger(Event.PAUSE);\n });\n }\n }\n }\n\n /**\n * Fires continuously during audio playback.\n *\n * @param {number} time - Current time/location of the playhead.\n * @private\n */\n onWaveProgress(time) {\n this.setCurrentTime();\n }\n\n /**\n * Fires during seeking of the waveform.\n *\n * @private\n */\n onWaveSeek() {\n this.setCurrentTime();\n }\n\n /**\n * Waveform error.\n *\n * @param {string} error - The wavesurfer error.\n * @private\n */\n onWaveError(error) {\n // notify listeners\n if (error.name && error.name === 'AbortError' ||\n error.name === 'DOMException' && error.message.startsWith('The operation was aborted'))\n {\n this.player.trigger(Event.ABORT, error);\n } else {\n this.player.trigger(Event.ERROR, error);\n\n this.log(error, 'error');\n }\n }\n\n /**\n * Fired when the play toggle is clicked.\n * @private\n */\n onPlayToggle() {\n if (this.player.controlBar.playToggle !== undefined &&\n this.player.controlBar.playToggle.hasClass('vjs-ended')) {\n this.player.controlBar.playToggle.removeClass('vjs-ended');\n }\n if (this.surfer.isPlaying()) {\n this.pause();\n } else {\n this.play();\n }\n }\n\n /**\n * Fired when the volume in the video.js player changes.\n * @private\n */\n onVolumeChange() {\n let volume = this.player.volume();\n if (this.player.muted()) {\n // muted volume\n volume = 0;\n }\n\n // update wavesurfer.js volume\n this.surfer.setVolume(volume);\n }\n\n /**\n * Fired when the video.js player switches in or out of fullscreen mode.\n * @private\n */\n onScreenChange() {\n // execute with tiny delay so the player element completes\n // rendering and correct dimensions are reported\n let fullscreenDelay = this.player.setInterval(() => {\n let isFullscreen = this.player.isFullscreen();\n let newWidth, newHeight;\n if (!isFullscreen) {\n // restore original dimensions\n newWidth = this.originalWidth;\n newHeight = this.originalHeight;\n }\n\n if (this.waveReady) {\n if (this.liveMode && !this.surfer.microphone.active) {\n // we're in live mode but the microphone hasn't been\n // started yet\n return;\n }\n // redraw\n this.redrawWaveform(newWidth, newHeight);\n }\n\n // stop fullscreenDelay interval\n this.player.clearInterval(fullscreenDelay);\n\n }, 100);\n }\n\n /**\n * Fired when the video.js player is resized.\n *\n * @private\n */\n onResizeChange() {\n if (this.surfer !== undefined) {\n // redraw waveform\n this.redrawWaveform();\n }\n }\n\n /**\n * Redraw waveform.\n *\n * @param {number} [newWidth] - New width for the waveform.\n * @param {number} [newHeight] - New height for the waveform.\n * @private\n */\n redrawWaveform(newWidth, newHeight) {\n if (!this.isDestroyed()) {\n if (this.player.el_) {\n let rect = this.player.el_.getBoundingClientRect();\n if (newWidth === undefined) {\n // get player width\n newWidth = rect.width;\n }\n if (newHeight === undefined) {\n // get player height\n newHeight = rect.height;\n }\n }\n\n // destroy old drawing\n this.surfer.drawer.destroy();\n\n // set new dimensions\n this.surfer.params.width = newWidth;\n this.surfer.params.height = newHeight - this.player.controlBar.height();\n\n // redraw waveform\n this.surfer.createDrawer();\n this.surfer.drawer.wrapper.className = wavesurferClassName;\n this.surfer.drawBuffer();\n\n // make sure playhead is restored at right position\n this.surfer.drawer.progress(this.surfer.backend.getPlayedPercents());\n }\n }\n\n /**\n * Log message to console (if the debug option is enabled).\n *\n * @private\n * @param {Array} args - The arguments to be passed to the matching console\n * method.\n * @param {string} logType - The name of the console method to use.\n */\n log(args, logType) {\n log(args, logType, this.debug);\n }\n\n /**\n * Replaces the default `formatTime` implementation with a custom implementation.\n *\n * @param {function} customImplementation - A function which will be used in place\n * of the default `formatTime` implementation. Will receive the current time\n * in seconds and the guide (in seconds) as arguments.\n */\n setFormatTime(customImplementation) {\n this._formatTime = customImplementation;\n\n videojs.setFormatTime(this._formatTime);\n }\n}\n\n// version nr is injected during build\nWavesurfer.VERSION = __VERSION__;\n\n// register plugin once\nvideojs.Wavesurfer = Wavesurfer;\nif (videojs.getPlugin(wavesurferPluginName) === undefined) {\n videojs.registerPlugin(wavesurferPluginName, Wavesurfer);\n}\n\n// register a star-middleware\nvideojs.use('*', player => {\n // make player available on middleware\n WavesurferMiddleware.player = player;\n\n return WavesurferMiddleware;\n});\n\nexport {Wavesurfer};",
"static": true,
"longname": "/home/thijs/projects/videojs-wavesurfer/src/js/videojs.wavesurfer.js",
"access": "public",
@@ -1191,7 +1191,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#initialize",
"access": "private",
"description": "Player UI is ready: customize controls.",
- "lineNumber": 72,
+ "lineNumber": 78,
"params": [],
"return": null
},
@@ -1204,7 +1204,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#surfer",
"access": "public",
"description": null,
- "lineNumber": 129,
+ "lineNumber": 135,
"undocument": true,
"type": {
"types": [
@@ -1221,7 +1221,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#surferReady",
"access": "public",
"description": null,
- "lineNumber": 151,
+ "lineNumber": 157,
"undocument": true,
"type": {
"types": [
@@ -1238,7 +1238,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#surferProgress",
"access": "public",
"description": null,
- "lineNumber": 153,
+ "lineNumber": 159,
"undocument": true,
"type": {
"types": [
@@ -1255,7 +1255,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#surferSeek",
"access": "public",
"description": null,
- "lineNumber": 154,
+ "lineNumber": 160,
"undocument": true,
"type": {
"types": [
@@ -1272,7 +1272,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#responsiveWave",
"access": "public",
"description": null,
- "lineNumber": 177,
+ "lineNumber": 183,
"undocument": true,
"type": {
"types": [
@@ -1291,7 +1291,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#parseOptions",
"access": "private",
"description": "Initializes the waveform options.",
- "lineNumber": 190,
+ "lineNumber": 196,
"unknown": [
{
"tagName": "@returns",
@@ -1328,7 +1328,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#originalWidth",
"access": "public",
"description": null,
- "lineNumber": 192,
+ "lineNumber": 198,
"undocument": true,
"type": {
"types": [
@@ -1345,7 +1345,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#originalHeight",
"access": "public",
"description": null,
- "lineNumber": 193,
+ "lineNumber": 199,
"undocument": true,
"type": {
"types": [
@@ -1364,7 +1364,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setupPlaybackEvents",
"access": "private",
"description": "Starts or stops listening to events related to audio-playback.",
- "lineNumber": 246,
+ "lineNumber": 252,
"params": [
{
"nullable": null,
@@ -1390,7 +1390,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#load",
"access": "public",
"description": "Start loading waveform data.",
- "lineNumber": 270,
+ "lineNumber": 276,
"params": [
{
"nullable": null,
@@ -1429,7 +1429,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#loadPeaks",
"access": "public",
"description": "Start loading waveform data.",
- "lineNumber": 298,
+ "lineNumber": 304,
"params": [
{
"nullable": null,
@@ -1468,7 +1468,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#play",
"access": "public",
"description": "Start/resume playback or microphone.",
- "lineNumber": 339,
+ "lineNumber": 344,
"params": [],
"return": null
},
@@ -1483,7 +1483,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#pause",
"access": "public",
"description": "Pauses playback or microphone visualization.",
- "lineNumber": 377,
+ "lineNumber": 382,
"params": [],
"return": null
},
@@ -1498,7 +1498,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#dispose",
"access": "private",
"description": "",
- "lineNumber": 406,
+ "lineNumber": 411,
"params": [],
"return": null
},
@@ -1513,7 +1513,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#isDestroyed",
"access": "public",
"description": "Indicates whether the plugin is destroyed or not.",
- "lineNumber": 424,
+ "lineNumber": 429,
"return": {
"nullable": null,
"types": [
@@ -1535,7 +1535,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#destroy",
"access": "public",
"description": "Remove the player and waveform.",
- "lineNumber": 431,
+ "lineNumber": 436,
"params": [],
"return": null
},
@@ -1550,7 +1550,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setVolume",
"access": "public",
"description": "Set the volume level.",
- "lineNumber": 440,
+ "lineNumber": 445,
"params": [
{
"nullable": null,
@@ -1576,7 +1576,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#exportImage",
"access": "public",
"description": "Save waveform image as data URI.\n\nThe default format is `'image/png'`. Other supported types are\n`'image/jpeg'` and `'image/webp'`.",
- "lineNumber": 467,
+ "lineNumber": 472,
"params": [
{
"nullable": null,
@@ -1635,7 +1635,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setAudioOutput",
"access": "public",
"description": "Change the audio output device.",
- "lineNumber": 476,
+ "lineNumber": 481,
"params": [
{
"nullable": null,
@@ -1661,7 +1661,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#getCurrentTime",
"access": "public",
"description": "Get the current time (in seconds) of the stream during playback.\n\nReturns 0 if no stream is available (yet).",
- "lineNumber": 497,
+ "lineNumber": 502,
"unknown": [
{
"tagName": "@returns",
@@ -1689,7 +1689,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setCurrentTime",
"access": "private",
"description": "Updates the player's element displaying the current time.",
- "lineNumber": 512,
+ "lineNumber": 517,
"params": [
{
"nullable": null,
@@ -1725,7 +1725,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#getDuration",
"access": "public",
"description": "Get the duration of the stream in seconds.\n\nReturns 0 if no stream is available (yet).",
- "lineNumber": 548,
+ "lineNumber": 553,
"unknown": [
{
"tagName": "@returns",
@@ -1753,7 +1753,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setDuration",
"access": "private",
"description": "Updates the player's element displaying the duration time.",
- "lineNumber": 561,
+ "lineNumber": 566,
"params": [
{
"nullable": null,
@@ -1779,7 +1779,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onWaveReady",
"access": "private",
"description": "Audio is loaded, decoded and the waveform is drawn.",
- "lineNumber": 583,
+ "lineNumber": 588,
"unknown": [
{
"tagName": "@fires",
@@ -1800,7 +1800,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onWaveFinish",
"access": "private",
"description": "Fires when audio playback completed.",
- "lineNumber": 630,
+ "lineNumber": 635,
"unknown": [
{
"tagName": "@fires",
@@ -1821,7 +1821,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onWaveProgress",
"access": "private",
"description": "Fires continuously during audio playback.",
- "lineNumber": 673,
+ "lineNumber": 678,
"params": [
{
"nullable": null,
@@ -1847,7 +1847,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onWaveSeek",
"access": "private",
"description": "Fires during seeking of the waveform.",
- "lineNumber": 682,
+ "lineNumber": 687,
"params": [],
"return": null
},
@@ -1862,7 +1862,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onWaveError",
"access": "private",
"description": "Waveform error.",
- "lineNumber": 692,
+ "lineNumber": 697,
"params": [
{
"nullable": null,
@@ -1888,7 +1888,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onPlayToggle",
"access": "private",
"description": "Fired when the play toggle is clicked.",
- "lineNumber": 709,
+ "lineNumber": 714,
"params": [],
"return": null
},
@@ -1903,7 +1903,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onVolumeChange",
"access": "private",
"description": "Fired when the volume in the video.js player changes.",
- "lineNumber": 725,
+ "lineNumber": 730,
"params": [],
"return": null
},
@@ -1918,7 +1918,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onScreenChange",
"access": "private",
"description": "Fired when the video.js player switches in or out of fullscreen mode.",
- "lineNumber": 740,
+ "lineNumber": 745,
"params": [],
"return": null
},
@@ -1933,7 +1933,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#onResizeChange",
"access": "private",
"description": "Fired when the video.js player is resized.",
- "lineNumber": 773,
+ "lineNumber": 778,
"params": [],
"return": null
},
@@ -1948,7 +1948,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#redrawWaveform",
"access": "private",
"description": "Redraw waveform.",
- "lineNumber": 787,
+ "lineNumber": 792,
"params": [
{
"nullable": null,
@@ -1984,7 +1984,7 @@
"longname": "src/js/videojs.wavesurfer.js~Wavesurfer#log",
"access": "private",
"description": "Log message to console (if the debug option is enabled).",
- "lineNumber": 826,
+ "lineNumber": 831,
"params": [
{
"nullable": null,
@@ -2009,9 +2009,52 @@
],
"return": null
},
+ {
+ "__docId__": 121,
+ "kind": "method",
+ "name": "setFormatTime",
+ "memberof": "src/js/videojs.wavesurfer.js~Wavesurfer",
+ "generator": false,
+ "async": false,
+ "static": false,
+ "longname": "src/js/videojs.wavesurfer.js~Wavesurfer#setFormatTime",
+ "access": "public",
+ "description": "Replaces the default `formatTime` implementation with a custom implementation.",
+ "lineNumber": 842,
+ "params": [
+ {
+ "nullable": null,
+ "types": [
+ "function"
+ ],
+ "spread": false,
+ "optional": false,
+ "name": "customImplementation",
+ "description": "A function which will be used in place\n of the default `formatTime` implementation. Will receive the current time\n in seconds and the guide (in seconds) as arguments."
+ }
+ ],
+ "return": null
+ },
+ {
+ "__docId__": 122,
+ "kind": "member",
+ "name": "_formatTime",
+ "memberof": "src/js/videojs.wavesurfer.js~Wavesurfer",
+ "static": false,
+ "longname": "src/js/videojs.wavesurfer.js~Wavesurfer#_formatTime",
+ "access": "private",
+ "description": null,
+ "lineNumber": 843,
+ "undocument": true,
+ "type": {
+ "types": [
+ "*"
+ ]
+ }
+ },
{
"kind": "index",
- "content": "videojs-wavesurfer\n==================\n\nA [video.js](https://www.videojs.com/) plugin that adds a navigable waveform\nfor audio and video files, using the [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)\nlibrary. Includes support for fullscreen mode and [real-time visualization of microphone\ninput](https://collab-project.github.io/videojs-wavesurfer/#/microphone).\n\n![Screenshot](https://raw.githubusercontent.com/collab-project/videojs-wavesurfer/master/docs/img/screenshot.png?raw=true \"Screenshot\")\n\n[](https://www.npmjs.com/package/videojs-wavesurfer)\n[](https://github.com/collab-project/videojs-wavesurfer/releases)\n[](LICENSE)\n[](https://travis-ci.org/collab-project/videojs-wavesurfer)\n[](https://coveralls.io/github/collab-project/videojs-wavesurfer?branch=master)\n\n\n\n## Documentation\n\nThe documentation and examples can be found on: https://collab-project.github.io/videojs-wavesurfer\n\n## License\n\nThis work is licensed under the [MIT License](LICENSE).\n",
+ "content": "videojs-wavesurfer\n==================\n\nA [video.js](https://www.videojs.com/) plugin that adds a navigable waveform\nfor audio and video files, using the [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)\nlibrary. Includes support for fullscreen mode and [real-time visualization of microphone\ninput](https://collab-project.github.io/videojs-wavesurfer/#/microphone).\n\n![Screenshot](https://raw.githubusercontent.com/collab-project/videojs-wavesurfer/master/docs/img/screenshot.png?raw=true \"Screenshot\")\n\n[](https://www.npmjs.com/package/videojs-wavesurfer)\n[](https://github.com/collab-project/videojs-wavesurfer/releases)\n[](LICENSE)\n[](https://github.com/collab-project/videojs-wavesurfer/actions?workflow=videojs-wavesurfer)\n[](https://coveralls.io/github/collab-project/videojs-wavesurfer?branch=master)\n\n\n\n## Documentation\n\nThe documentation and examples can be found on: https://collab-project.github.io/videojs-wavesurfer\n\n## License\n\nThis work is licensed under the [MIT License](LICENSE).\n",
"longname": "/home/thijs/projects/videojs-wavesurfer/README.md",
"name": "./README.md",
"static": true,
@@ -2019,7 +2062,7 @@
},
{
"kind": "packageJSON",
- "content": "{\n \"name\": \"videojs-wavesurfer\",\n \"version\": \"3.2.0\",\n \"description\": \"video.js plugin that adds a navigable waveform for audio and video files.\",\n \"author\": \"Collab\",\n \"license\": \"MIT\",\n \"readmeFilename\": \"README.md\",\n \"bugs\": {\n \"url\": \"https://github.com/collab-project/videojs-wavesurfer/issues\"\n },\n \"homepage\": \"https://github.com/collab-project/videojs-wavesurfer\",\n \"main\": \"dist/videojs.wavesurfer.js\",\n \"style\": \"dist/css/videojs.wavesurfer.css\",\n \"sass\": \"src/css/videojs.wavesurfer.scss\",\n \"directories\": {\n \"docs\": \"./docs\",\n \"lib\": \"./src\",\n \"example\": \"./examples\",\n \"test\": \"./test\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/collab-project/videojs-wavesurfer.git\"\n },\n \"scripts\": {\n \"clean\": \"rimraf dist\",\n \"build\": \"npm run clean && npm run lint && npm run build:dev && npm run build:min\",\n \"build:dev\": \"webpack --config ./build-config/webpack.dev.main.js\",\n \"build:min\": \"webpack --config ./build-config/webpack.prod.main.js\",\n \"docs\": \"npm-run-all docs:*\",\n \"docs:api\": \"rimraf docs/api && esdoc\",\n \"lint\": \"npm-run-all lint:*\",\n \"lint:js\": \"eslint src/js test build-config\",\n \"lint:html\": \"htmlhint examples docs/demo\",\n \"start\": \"npm run build && webpack-dev-server --config ./build-config/webpack.dev.main.js\",\n \"test\": \"karma start karma.conf.js\",\n \"prepublishOnly\": \"not-in-install && npm run build || in-install\"\n },\n \"files\": [\n \"dist/\",\n \"src/\"\n ],\n \"keywords\": [\n \"waveform\",\n \"audio\",\n \"video\",\n \"wavesurfer\",\n \"videojs\",\n \"videojs-plugin\",\n \"player\"\n ],\n \"dependencies\": {\n \"video.js\": \">=7.0.5\",\n \"wavesurfer.js\": \">=3.3.3\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.9.6\",\n \"@babel/preset-env\": \"^7.9.6\",\n \"@babel/register\": \"^7.9.0\",\n \"@jsdevtools/host-environment\": \"^2.0.3\",\n \"@jsdevtools/karma-host-environment\": \"^3.0.2\",\n \"add-zero\": \"^1.0.0\",\n \"babel-loader\": \"^8.1.0\",\n \"babel-plugin-add-module-exports\": \"^1.0.2\",\n \"babel-plugin-istanbul\": \"^6.0.0\",\n \"browserslist\": \"^4.12.0\",\n \"css-loader\": \"^3.5.3\",\n \"date-fns\": \"^2.14.0\",\n \"docsify-cli\": \"^4.4.0\",\n \"esdoc\": \"^1.1.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"eslint\": \"^7.0.0\",\n \"htmlhint\": \"^0.13.0\",\n \"in-publish\": \"^2.0.1\",\n \"jasmine-core\": \"^3.5.0\",\n \"karma\": \"^5.0.8\",\n \"karma-chrome-launcher\": \"^3.1.0\",\n \"karma-coverage\": \"^2.0.2\",\n \"karma-coveralls\": \"^2.1.0\",\n \"karma-detect-browsers\": \"^2.3.3\",\n \"karma-edge-launcher\": \"^0.4.2\",\n \"karma-firefox-launcher\": \"^1.3.0\",\n \"karma-jasmine\": \"^3.1.1\",\n \"karma-jasmine-matchers\": \"^4.0.2\",\n \"karma-safari-launcher\": \"^1.0.0\",\n \"karma-safaritechpreview-launcher\": \"^2.0.2\",\n \"karma-verbose-reporter\": \"0.0.6\",\n \"karma-webpack\": \"^4.0.2\",\n \"mini-css-extract-plugin\": \"^0.9.0\",\n \"node-sass\": \"^4.14.1\",\n \"npm-run-all\": \"^4.1.5\",\n \"optimize-css-assets-webpack-plugin\": \"^5.0.3\",\n \"parse-ms\": \"^2.1.0\",\n \"replace-in-file\": \"^6.0.0\",\n \"rimraf\": \"^3.0.2\",\n \"sass-loader\": \"^8.0.2\",\n \"style-loader\": \"^1.2.1\",\n \"terser-webpack-plugin\": \"^3.0.1\",\n \"webpack\": \"^4.43.0\",\n \"webpack-cli\": \"^3.3.11\",\n \"webpack-dev-server\": \"^3.11.0\",\n \"webpack-merge\": \"^4.2.2\",\n \"webrtc-adapter\": \"^7.6.0\"\n }\n}\n",
+ "content": "{\n \"name\": \"videojs-wavesurfer\",\n \"version\": \"3.5.0\",\n \"description\": \"video.js plugin that adds a navigable waveform for audio and video files.\",\n \"author\": \"Collab\",\n \"license\": \"MIT\",\n \"readmeFilename\": \"README.md\",\n \"bugs\": {\n \"url\": \"https://github.com/collab-project/videojs-wavesurfer/issues\"\n },\n \"homepage\": \"https://github.com/collab-project/videojs-wavesurfer\",\n \"main\": \"dist/videojs.wavesurfer.js\",\n \"style\": \"dist/css/videojs.wavesurfer.css\",\n \"sass\": \"src/css/videojs.wavesurfer.scss\",\n \"directories\": {\n \"docs\": \"./docs\",\n \"lib\": \"./src\",\n \"example\": \"./examples\",\n \"test\": \"./test\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/collab-project/videojs-wavesurfer.git\"\n },\n \"scripts\": {\n \"clean\": \"rimraf dist\",\n \"build\": \"npm run clean && npm run lint && npm run build:dev && npm run build:min\",\n \"build:dev\": \"webpack --config ./build-config/webpack.dev.main.js\",\n \"build:min\": \"webpack --config ./build-config/webpack.prod.main.js\",\n \"docs\": \"npm-run-all docs:*\",\n \"docs:api\": \"rimraf docs/api && esdoc\",\n \"lint\": \"npm-run-all lint:*\",\n \"lint:js\": \"eslint src/js test build-config\",\n \"lint:html\": \"htmlhint examples docs/demo\",\n \"start\": \"npm run build && webpack serve --config ./build-config/webpack.dev.main.js\",\n \"start-doc\": \"docsify serve docs\",\n \"test\": \"karma start karma.conf.js\",\n \"prepublishOnly\": \"not-in-install && npm run build || in-install\"\n },\n \"files\": [\n \"dist/\",\n \"src/\"\n ],\n \"keywords\": [\n \"waveform\",\n \"audio\",\n \"video\",\n \"wavesurfer\",\n \"videojs\",\n \"videojs-plugin\",\n \"player\"\n ],\n \"dependencies\": {\n \"video.js\": \">=7.0.5\",\n \"wavesurfer.js\": \">=4.4.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.10\",\n \"@babel/preset-env\": \"^7.12.11\",\n \"@babel/register\": \"^7.12.10\",\n \"@jsdevtools/host-environment\": \"^2.1.2\",\n \"@jsdevtools/karma-host-environment\": \"^3.0.3\",\n \"add-zero\": \"^1.0.0\",\n \"babel-loader\": \"^8.2.2\",\n \"babel-plugin-add-module-exports\": \"^1.0.4\",\n \"babel-plugin-istanbul\": \"^6.0.0\",\n \"browserslist\": \"^4.16.3\",\n \"css-loader\": \"^5.0.1\",\n \"css-minimizer-webpack-plugin\": \"^1.2.0\",\n \"date-fns\": \"^2.16.1\",\n \"docsify-cli\": \"^4.4.2\",\n \"esdoc\": \"^1.1.0\",\n \"esdoc-standard-plugin\": \"^1.0.0\",\n \"eslint\": \"^7.19.0\",\n \"htmlhint\": \"^0.14.2\",\n \"in-publish\": \"^2.0.1\",\n \"jasmine-core\": \"^3.6.0\",\n \"karma\": \"^5.2.3\",\n \"karma-chrome-launcher\": \"^3.1.0\",\n \"karma-coverage\": \"^2.0.3\",\n \"karma-detect-browsers\": \"^2.3.3\",\n \"karma-firefox-launcher\": \"^2.1.0\",\n \"karma-jasmine\": \"^4.0.1\",\n \"karma-jasmine-matchers\": \"^4.0.2\",\n \"karma-verbose-reporter\": \"0.0.6\",\n \"karma-webpack\": \"^5.0.0-alpha.6\",\n \"mini-css-extract-plugin\": \"^1.3.5\",\n \"npm-run-all\": \"^4.1.5\",\n \"parse-ms\": \"^2.1.0\",\n \"replace-in-file\": \"^6.2.0\",\n \"rimraf\": \"^3.0.2\",\n \"sass\": \"^1.32.5\",\n \"sass-loader\": \"^10.1.1\",\n \"style-loader\": \"^2.0.0\",\n \"webpack\": \"^5.19.0\",\n \"webpack-cli\": \"^4.4.0\",\n \"webpack-dev-server\": \"^4.0.0-beta.0\",\n \"webpack-merge\": \"^5.7.3\",\n \"webpack-remove-empty-scripts\": \"^0.7.1\",\n \"webrtc-adapter\": \"^7.7.0\"\n }\n}\n",
"longname": "/home/thijs/projects/videojs-wavesurfer/package.json",
"name": "package.json",
"static": true,
diff --git a/docs/api/script/search_index.js b/docs/api/script/search_index.js
index 9599bb9c..8dca1ed9 100644
--- a/docs/api/script/search_index.js
+++ b/docs/api/script/search_index.js
@@ -359,6 +359,12 @@ window.esdocSearchIndex = [
"src/js/videojs.wavesurfer.js",
"file"
],
+ [
+ "src/js/videojs.wavesurfer.js~wavesurfer#_formattime",
+ "class/src/js/videojs.wavesurfer.js~Wavesurfer.html#instance-member-_formatTime",
+ "src/js/videojs.wavesurfer.js~Wavesurfer#_formatTime",
+ "member"
+ ],
[
"src/js/videojs.wavesurfer.js~wavesurfer#backend",
"class/src/js/videojs.wavesurfer.js~Wavesurfer.html#instance-member-backend",
@@ -563,6 +569,12 @@ window.esdocSearchIndex = [
"src/js/videojs.wavesurfer.js~Wavesurfer#setDuration",
"method"
],
+ [
+ "src/js/videojs.wavesurfer.js~wavesurfer#setformattime",
+ "class/src/js/videojs.wavesurfer.js~Wavesurfer.html#instance-method-setFormatTime",
+ "src/js/videojs.wavesurfer.js~Wavesurfer#setFormatTime",
+ "method"
+ ],
[
"src/js/videojs.wavesurfer.js~wavesurfer#setvolume",
"class/src/js/videojs.wavesurfer.js~Wavesurfer.html#instance-method-setVolume",
diff --git a/docs/api/source.html b/docs/api/source.html
index f480504c..9ec6acfe 100644
--- a/docs/api/source.html
+++ b/docs/api/source.html
@@ -40,7 +40,7 @@
-Source
+Source
@@ -96,13 +96,13 @@
diff --git a/package-lock.json b/package-lock.json
index a3ad44e4..f93ea67c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "videojs-wavesurfer",
- "version": "3.4.0",
+ "version": "3.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index c894dafc..2d729125 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "videojs-wavesurfer",
- "version": "3.4.0",
+ "version": "3.5.0",
"description": "video.js plugin that adds a navigable waveform for audio and video files.",
"author": "Collab",
"license": "MIT",
+ private + + + + + + _formatTime: * + + + + source + +
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Public Methods
@@ -2036,7 +2144,7 @@- source + source
@@ -2080,7 +2188,7 @@- source + source
@@ -2177,7 +2285,7 @@- source + source
@@ -2235,7 +2343,7 @@- source + source
@@ -2293,7 +2401,7 @@- source + source
@@ -2350,7 +2458,7 @@- source + source
@@ -2420,7 +2528,7 @@- source + source
@@ -2490,7 +2598,7 @@- source + source
@@ -2534,7 +2642,7 @@- source + source
@@ -2578,7 +2686,7 @@- source + source
@@ -2626,6 +2734,69 @@Params:
++ public + + + + + + setFormatTime(customImplementation: function) + + + + source + +
+ + + + +Replaces the default formatTime implementation with a custom implementation.
+
+
+
+
+Params:
+| Name | Type | Attribute | Description |
| customImplementation | +function | ++ | A function which will be used in place
+ of the default |
+
@@ -2639,7 +2810,7 @@
- source
+ source
@@ -2702,7 +2873,7 @@
- source
+ source
@@ -2745,7 +2916,7 @@
- source
+ source
@@ -2789,7 +2960,7 @@
- source
+ source
@@ -2858,7 +3029,7 @@
- source
+ source
@@ -2902,7 +3073,7 @@
- source
+ source
@@ -2946,7 +3117,7 @@
- source
+ source
@@ -2990,7 +3161,7 @@
- source
+ source
@@ -3034,7 +3205,7 @@
- source
+ source
@@ -3095,7 +3266,7 @@
- source
+ source
@@ -3139,7 +3310,7 @@
- source
+ source
@@ -3200,7 +3371,7 @@
- source
+ source
@@ -3244,7 +3415,7 @@
- source
+ source
@@ -3288,7 +3459,7 @@
- source
+ source
@@ -3362,7 +3533,7 @@
- source
+ source
@@ -3430,7 +3601,7 @@
- source
+ source
@@ -3499,7 +3670,7 @@
- source
+ source
@@ -3560,7 +3731,7 @@
- source
+ source
diff --git a/docs/api/coverage.json b/docs/api/coverage.json
index 1851bc1f..de836974 100644
--- a/docs/api/coverage.json
+++ b/docs/api/coverage.json
@@ -1,7 +1,7 @@
{
- "coverage": "60.34%",
- "expectCount": 58,
- "actualCount": 35,
+ "coverage": "60%",
+ "expectCount": 60,
+ "actualCount": 36,
"files": {
"src/js/defaults.js": {
"expectCount": 1,
@@ -32,8 +32,8 @@
]
},
"src/js/videojs.wavesurfer.js": {
- "expectCount": 51,
- "actualCount": 30,
+ "expectCount": 53,
+ "actualCount": 31,
"undocumentLines": [
18,
20,
@@ -49,13 +49,14 @@
54,
55,
56,
- 129,
- 151,
- 153,
- 154,
- 177,
- 192,
- 193
+ 135,
+ 157,
+ 159,
+ 160,
+ 183,
+ 198,
+ 199,
+ 843
]
}
}
diff --git a/docs/api/file/src/js/videojs.wavesurfer.js.html b/docs/api/file/src/js/videojs.wavesurfer.js.html
index 6354edfe..52d76509 100644
--- a/docs/api/file/src/js/videojs.wavesurfer.js.html
+++ b/docs/api/file/src/js/videojs.wavesurfer.js.html
@@ -98,10 +98,16 @@
this.textTracksEnabled = (this.player.options_.tracks.length > 0);
this.displayMilliseconds = options.displayMilliseconds;
- // use custom video.js time format
- videojs.setFormatTime((seconds, guide) => {
- return formatTime(seconds, guide, this.displayMilliseconds);
- });
+ // use custom time format for video.js player
+ if (options.formatTime && typeof options.formatTime === 'function') {
+ // user-supplied formatTime
+ this.setFormatTime(options.formatTime);
+ } else {
+ // plugin's default formatTime
+ this.setFormatTime((seconds, guide) => {
+ return formatTime(seconds, guide, this.displayMilliseconds);
+ });
+ }
// wait until player ui is ready
this.player.one(Event.READY, this.initialize.bind(this));
@@ -367,11 +373,10 @@
this.log(err, 'error');
}
});
- request.on('error', e => {
- this.log('Unable to retrieve peak data from ' + peaks +
- '. Status code: ' + request.response.status, 'warn');
- this.log('Loading URL: ' + url);
- this.surfer.load(url);
+ request.once('error', e => {
+ this.player.trigger(Event.ERROR,
+ 'Unable to retrieve peak data from ' + peaks +
+ '. Status code: ' + request.response.status);
});
}
}
@@ -572,7 +577,7 @@
this.player.controlBar.currentTimeDisplay.formattedTime_ =
this.player.controlBar.currentTimeDisplay.contentEl().lastChild.textContent =
- formatTime(time, duration, this.displayMilliseconds);
+ this._formatTime(time, duration, this.displayMilliseconds);
}
if (this.textTracksEnabled && this.player.tech_ && this.player.tech_.el_) {
@@ -613,7 +618,7 @@
this.player.controlBar.durationDisplay.contentEl().lastChild) {
this.player.controlBar.durationDisplay.formattedTime_ =
this.player.controlBar.durationDisplay.contentEl().lastChild.textContent =
- formatTime(duration, duration, this.displayMilliseconds);
+ this._formatTime(duration, duration, this.displayMilliseconds);
}
}
@@ -869,6 +874,19 @@
log(args, logType) {
log(args, logType, this.debug);
}
+
+ /**
+ * Replaces the default `formatTime` implementation with a custom implementation.
+ *
+ * @param {function} customImplementation - A function which will be used in place
+ * of the default `formatTime` implementation. Will receive the current time
+ * in seconds and the guide (in seconds) as arguments.
+ */
+ setFormatTime(customImplementation) {
+ this._formatTime = customImplementation;
+
+ videojs.setFormatTime(this._formatTime);
+ }
}
// version nr is injected during build
diff --git a/docs/api/index.html b/docs/api/index.html
index 4eaf79e0..187a19d5 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -48,7 +48,7 @@
-
+