add formatTime option (#125)

* add changelog entry * add formatTime option
collab-project · Feb 1, 2021 · 4258bf6 · 4258bf6
1 parent 76bd72b
commit 4258bf6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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}``` |
diff --git 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
@@ -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);