Feat: add timeline options

examples/main.js

@@ -98,6 +98,9 @@ const multitrack = Multitrack.create(
       dragPointFill: 'rgba(255, 255, 255, 0.8)',
       dragPointStroke: 'rgba(255, 255, 255, 0.3)',
     },
+    timelineOptions: {
+      height: 30,
+    },
   },
 )
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer-multitrack",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Multritrack super-plugin for wavesurfer.js",
@@ -51,6 +51,6 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "wavesurfer.js": "^7.4.13"
+    "wavesurfer.js": "^7.5.2"
   }
 }

src/multitrack.ts

@@ -55,6 +55,7 @@ export type MultitrackOptions = {
   rightButtonDrag?: boolean
   dragBounds?: boolean
   envelopeOptions?: EnvelopePluginOptions
+  timelineOptions?: TimelinePluginOptions
 }
 
 export type MultitrackEvents = {
@@ -92,7 +93,6 @@ class MultiTrack extends EventEmitter<MultitrackEvents> {
   private rendering: ReturnType<typeof initRendering>
   private frameRequest: number | null = null
   private subscriptions: Array<() => void> = []
-  private timeline: TimelinePlugin | null = null
   private audioContext: AudioContext
 
   static create(tracks: MultitrackTracks, options: MultitrackOptions): MultiTrack {
@@ -202,6 +202,15 @@ class MultiTrack extends EventEmitter<MultitrackEvents> {
       hideScrollbar: true,
     })
 
+    if (track.id === PLACEHOLDER_TRACK.id) {
+      ws.registerPlugin(
+        TimelinePlugin.create({
+          container: this.rendering.containers[0].parentElement,
+          ...this.options.timelineOptions,
+        } as TimelinePluginOptions),
+      )
+    }
+
     // Regions and markers
     const wsRegions = RegionsPlugin.create()
     ws.registerPlugin(wsRegions)
@@ -370,18 +379,6 @@ class MultiTrack extends EventEmitter<MultitrackEvents> {
     })
 
     this.wavesurfers = wavesurfers
-    this.initTimeline()
-  }
-
-  private initTimeline() {
-    if (this.timeline) this.timeline.destroy()
-
-    this.timeline = this.wavesurfers[0].registerPlugin(
-      TimelinePlugin.create({
-        duration: this.maxDuration,
-        container: this.rendering.containers[0].parentElement,
-      } as TimelinePluginOptions),
-    )
   }
 
   private updatePosition(time: number, autoCenter = false) {
@@ -519,7 +516,6 @@ class MultiTrack extends EventEmitter<MultitrackEvents> {
     this.wavesurfers.forEach((ws, index) => this.tracks[index].url && ws.zoom(pxPerSec))
     this.rendering.setMainWidth(this.durations, this.maxDuration)
     this.rendering.setContainerOffsets()
-    this.initTimeline()
   }
 
   public addTrack(track: TrackOptions) {
@@ -545,8 +541,6 @@ class MultiTrack extends EventEmitter<MultitrackEvents> {
         )
         this.wavesurfers[index].once('destroy', unsubscribe)
 
-        this.initTimeline()
-
         this.emit('canplay')
       })
     }

yarn.lock

@@ -1240,10 +1240,10 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
-wavesurfer.js@^7.4.13:
-  version "7.4.13"
-  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.4.13.tgz#1f9a7335a0d7a55a0fc75f3a1ece11e7e812e33b"
-  integrity sha512-VdUB7Z/w70GR2WePOh40ra7ORjktClN73ydYMuaMpgAgtOPuQOECs91PjVzWwKrw3ncjssPe+eNmPNKcTsJhnA==
+wavesurfer.js@^7.5.2:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.5.2.tgz#8f03124531ba1e6b022df85a0cc358747aa8317d"
+  integrity sha512-hgO8p0MXxJ6oLm367jsjujve6QNEqt1B+T7muvXtMWWDn08efZ2DrVw6xaUI9NiX3Lo7BNYu9lPKnE5jubjoOg==
 
 which@^2.0.1:
   version "2.0.2"