Virtual Timeline elements

katspaugh · May 18, 2024 · 5a9e351 · 5a9e351
1 parent dd8ca5b
commit 5a9e351
Showing 1 changed file with 34 additions and 11 deletions.
diff --git a/src/plugins/timeline.ts b/src/plugins/timeline.ts
@@ -82,7 +82,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
     }
 
     if (this.options.insertPosition) {
-      ;(container.firstElementChild || container).insertAdjacentElement(
+      ; (container.firstElementChild || container).insertAdjacentElement(
         this.options.insertPosition,
         this.timelineWrapper,
       )
@@ -143,6 +143,28 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
     return 2
   }
 
+  private virtualAppend(start: number, container: HTMLElement, element: HTMLElement) {
+    const renderIfVisible = () => {
+      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
+
+      if (isVisible) {
+        container.appendChild(element)
+      } else {
+        element.remove()
+      }
+    }
+
+    setTimeout(() => {
+      if (!this.wavesurfer) return
+      renderIfVisible()
+      this.subscriptions.push(this.wavesurfer.on('scroll', renderIfVisible))
+    }, 0)
+  }
+
   private initTimeline() {
     const duration = this.wavesurfer?.getDuration() ?? this.options.duration ?? 0
     const pxPerSec = this.timelineWrapper.scrollWidth / duration
@@ -161,15 +183,15 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
         whiteSpace: 'nowrap',
         ...(isTop
           ? {
-              position: 'absolute',
-              top: '0',
-              left: '0',
-              right: '0',
-              zIndex: '2',
-            }
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            right: '0',
+            zIndex: '2',
+          }
           : {
-              position: 'relative',
-            }),
+            position: 'relative',
+          }),
       },
     })
 
@@ -217,8 +239,9 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
       const mode = isPrimary ? 'primary' : isSecondary ? 'secondary' : 'tick'
       notch.setAttribute('part', `timeline-notch timeline-notch-${mode}`)
 
-      notch.style.left = `${i * pxPerSec}px`
-      timeline.appendChild(notch)
+      const offset = i * pxPerSec
+      notch.style.left = `${offset}px`
+      this.virtualAppend(offset, timeline, notch)
     }
 
     this.timelineWrapper.innerHTML = ''