Feat: add dragDebounceTime as an option (#3590)

* add dragDebounceTime as an option

adds dragDebounceTime as an option and uses it as the debounce time in ms when dragging the timeline and `dragToSeek` is true. A default is set at 200ms.

Closes #3589

* peer review feedback

* lint and cleanup

src/renderer.ts

@@ -92,7 +92,7 @@ class Renderer extends EventEmitter<RendererEvents> {
     })
 
     // Drag
-    if (this.options.dragToSeek) {
+    if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
       this.initDrag()
     }
 
@@ -239,7 +239,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       this.parent = newParent
     }
 
-    if (options.dragToSeek && !this.options.dragToSeek) {
+    if (options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
       this.initDrag()
     }
 

src/wavesurfer.ts

@@ -50,8 +50,10 @@ export type WaveSurferOptions = {
   autoplay?: boolean
   /** Pass false to disable clicks on the waveform */
   interact?: boolean
-  /** Allow to drag the cursor to seek to a new position */
-  dragToSeek?: boolean
+  /** Allow to drag the cursor to seek to a new position. If an object with `debounceTime` is provided instead
+   * then `dragToSeek` will also be true. If `true` the default is 200ms
+   */
+  dragToSeek?: boolean | { debounceTime: number }
   /** Hide the scrollbar */
   hideScrollbar?: boolean
   /** Audio rate, i.e. the playback speed */
@@ -307,12 +309,19 @@ class WaveSurfer extends Player<WaveSurferEvents> {
 
           // Set the audio position with a debounce
           clearTimeout(debounce)
-          debounce = setTimeout(
-            () => {
-              this.seekTo(relativeX)
-            },
-            this.isPlaying() ? 0 : 200,
-          )
+          let debounceTime
+
+          if (this.isPlaying()) {
+            debounceTime = 0
+          } else if (this.options.dragToSeek === true) {
+            debounceTime = 200
+          } else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
+            debounceTime = this.options.dragToSeek['debounceTime']
+          }
+
+          debounce = setTimeout(() => {
+            this.seekTo(relativeX)
+          }, debounceTime)
 
           this.emit('interaction', relativeX * this.getDuration())
           this.emit('drag', relativeX)