Refactor: optimize Timeline virtual rendering (#3748)

katspaugh · Jun 16, 2024 · 741f71c · 741f71c
1 parent 700d997
commit 741f71c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/src/plugins/timeline.ts b/src/plugins/timeline.ts
@@ -144,12 +144,15 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
   }
 
   private virtualAppend(start: number, container: HTMLElement, element: HTMLElement) {
-    const renderIfVisible = () => {
+    let wasVisible = false
+
+    const renderIfVisible = (scrollLeft: number, scrollRight: number) => {
       if (!this.wavesurfer) return
-      const clientWidth = this.wavesurfer.getWidth()
-      const scrollLeft = this.wavesurfer.getScroll()
       const width = element.clientWidth
-      const isVisible = start + width > scrollLeft && start < scrollLeft + clientWidth
+      const isVisible = start > scrollLeft && start + width < scrollRight
+
+      if (isVisible === wasVisible) return
+      wasVisible = isVisible
 
       if (isVisible) {
         container.appendChild(element)
@@ -160,8 +163,12 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
 
     setTimeout(() => {
       if (!this.wavesurfer) return
-      renderIfVisible()
-      this.subscriptions.push(this.wavesurfer.on('scroll', renderIfVisible))
+      renderIfVisible(0, this.wavesurfer?.getWidth() || 0)
+      this.subscriptions.push(
+        this.wavesurfer.on('scroll', (_start, _end, scrollLeft, scrollRight) => {
+          renderIfVisible(scrollLeft, scrollRight)
+        }),
+      )
     }, 0)
   }
 

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -8,7 +8,7 @@ type RendererEvents = {
   drag: [relativeX: number]
   dragstart: [relativeX: number]
   dragend: [relativeX: number]
-  scroll: [relativeStart: number, relativeEnd: number]
+  scroll: [relativeStart: number, relativeEnd: number, scrollLeft: number, scrollRight: number]
   render: []
   rendered: []
 }
@@ -105,7 +105,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer
       const startX = scrollLeft / scrollWidth
       const endX = (scrollLeft + clientWidth) / scrollWidth
-      this.emit('scroll', startX, endX)
+      this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth)
     })
 
     // Re-render the waveform on container resize
@@ -730,7 +730,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       const newScroll = this.scrollContainer.scrollLeft
       const startX = newScroll / scrollWidth
       const endX = (newScroll + clientWidth) / scrollWidth
-      this.emit('scroll', startX, endX)
+      this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth)
     }
   }
 

diff --git a/src/wavesurfer.ts b/src/wavesurfer.ts
@@ -131,7 +131,7 @@ export type WaveSurferEvents = {
   /** When the user ends dragging the cursor */
   dragend: [relativeX: number]
   /** When the waveform is scrolled (panned) */
-  scroll: [visibleStartTime: number, visibleEndTime: number]
+  scroll: [visibleStartTime: number, visibleEndTime: number, scrollLeft: number, scrollRight: number]
   /** When the zoom level changes */
   zoom: [minPxPerSec: number]
   /** Just before the waveform is destroyed so you can clean up your events */
@@ -275,9 +275,9 @@ class WaveSurfer extends Player<WaveSurferEvents> {
       }),
 
       // Scroll
-      this.renderer.on('scroll', (startX, endX) => {
+      this.renderer.on('scroll', (startX, endX, scrollLeft, scrollRight) => {
         const duration = this.getDuration()
-        this.emit('scroll', startX * duration, endX * duration)
+        this.emit('scroll', startX * duration, endX * duration, scrollLeft, scrollRight)
       }),
 
       // Redraw