diff --git a/CHANGES.md b/CHANGES.md index ed8d8e65..d7c3b427 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,7 +1,9 @@ # videojs-wavesurfer changelog -## Unreleased +## 3.5.0 - unreleased +- Add `formatTime` option and `setFormatTime(impl)` for replacing the default + `formatTime` implementation (#125) - Build using webpack 5 (#118) diff --git a/docs/methods.md b/docs/methods.md index 24d2f852..e360c982 100644 --- a/docs/methods.md +++ b/docs/methods.md @@ -22,6 +22,7 @@ player.on('ready', function() { | `pause` | Pause playback. | | `getDuration` | Get the length of the stream in seconds. Returns 0 if no stream is available (yet). | | `getCurrentTime` | Get the current time (in seconds) of the stream during playback. Returns 0 if no stream is available (yet). | +| `setFormatTime(impl)` | Change the current `formatTime` implementation with a custom implementation. | | `exportImage(format, quality, type)` | Save waveform image as Blob or data URI. Default `format` is `'image/png'`, `quality` is 1 and `type` is `blob`. | | `setAudioOutput(deviceId)` | Change the audio output device using its [deviceId](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId). | diff --git a/docs/options.md b/docs/options.md index 250d1af2..a677f061 100644 --- a/docs/options.md +++ b/docs/options.md @@ -11,3 +11,4 @@ Additional options for this plugin are: | ------ | ---- | ------- | ----------- | | `debug` | boolean | `false` | Display internal log messages using the `videojs.log` method. | | `displayMilliseconds` | boolean | `true` | Indicates if milliseconds should be included in time displays, e.g. `00:00:000` vs `00:00`. | +| `formatTime` | function | builtin `formatTime` | Use a custom time format function, for example: ``(seconds, guide) => `test:${seconds}:${guide}``` | \ No newline at end of file diff --git a/src/js/videojs.wavesurfer.js b/src/js/videojs.wavesurfer.js index 1a0cb943..6a35a502 100644 --- a/src/js/videojs.wavesurfer.js +++ b/src/js/videojs.wavesurfer.js @@ -55,10 +55,16 @@ class Wavesurfer extends Plugin { 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)); @@ -528,7 +534,7 @@ class Wavesurfer extends Plugin { 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_) { @@ -569,7 +575,7 @@ class Wavesurfer extends Plugin { 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); } } @@ -825,6 +831,19 @@ class Wavesurfer extends Plugin { 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/test/options.spec.js b/test/options.spec.js index 7cc98756..983598d0 100644 --- a/test/options.spec.js +++ b/test/options.spec.js @@ -81,6 +81,28 @@ function ws_options_test(backend) { // load file player.src(TestHelpers.EXAMPLE_AUDIO_SRC); }); + + /** @test {Wavesurfer} */ + it('accepts formatTime option', (done) => { + player = TestHelpers.makePlayer({ + height: 100, + plugins: { + wavesurfer: { + backend: backend, + formatTime: (seconds, guide) => `foo:${seconds}:${guide}` + } + } + }); + + player.one(Event.WAVE_READY, () => { + expect(player.controlBar.currentTimeDisplay.formattedTime_).toEqual('foo:0:0'); + expect(player.controlBar.durationDisplay.formattedTime_.substring(0, 5)).toEqual('foo:0'); + done(); + }); + + // load file + player.src(TestHelpers.EXAMPLE_AUDIO_SRC); + }); } /** @test {Wavesurfer} */ @@ -90,6 +112,7 @@ describe('Wavesurfer options', () => { player.dispose(); }); + // run tests for each wavesurfer.js backend ws_options_test(TestHelpers.MEDIA_ELEMENT_BACKEND); ws_options_test(TestHelpers.MEDIA_ELEMENT_WEB_AUDIO_BACKEND); ws_options_test(TestHelpers.WEB_AUDIO_BACKEND);