Feat: splitChannels overlay (#3619)

* Feat: splitChannels overlay * Prettier
katspaugh · Mar 31, 2024 · 117a796 · 117a796
1 parent 583198d
commit 117a796
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
diff --git a/cypress/e2e/regions-no-audio.cy.js b/cypress/e2e/regions-no-audio.cy.js
@@ -19,19 +19,21 @@ describe('WaveSurfer Regions plugin with no audio tests', () => {
           duration: 22,
           peaks: [
             [
-              0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038,
-              0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765,
-              0.10682467371225357, 0.23974689841270447, 0.013210971839725971, -0.12377244979143143, 0.046145666390657425,
-              -0.015757400542497635, 0.10884027928113937, 0.06681904196739197, 0.09432944655418396, -0.17105795443058014,
-              -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478,
-              0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285, -0.0009095853311009705,
-              0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502, -0.06575305759906769,
-              0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621, 0.01777501218020916,
-              -0.04906218498945236, -0.04756792634725571, -0.006875281687825918, 0.04520256072282791, -0.02362387254834175,
-              -0.0668797641992569, 0.12266506254673004, -0.10895221680402756, 0.03791835159063339, -0.0195105392485857,
-              -0.031097881495952606, 0.04252675920724869, -0.09187793731689453, 0.0829525887966156, -0.003812957089394331,
-              0.0431736595928669, 0.07634212076663971, -0.05335947126150131, 0.0345163568854332, -0.049201950430870056,
-              0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,
+              0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373,
+              0.1511787623167038, 0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481,
+              -0.03033737652003765, 0.10682467371225357, 0.23974689841270447, 0.013210971839725971,
+              -0.12377244979143143, 0.046145666390657425, -0.015757400542497635, 0.10884027928113937,
+              0.06681904196739197, 0.09432944655418396, -0.17105795443058014, -0.023439358919858932,
+              -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478,
+              0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285,
+              -0.0009095853311009705, 0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502,
+              -0.06575305759906769, 0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621,
+              0.01777501218020916, -0.04906218498945236, -0.04756792634725571, -0.006875281687825918,
+              0.04520256072282791, -0.02362387254834175, -0.0668797641992569, 0.12266506254673004, -0.10895221680402756,
+              0.03791835159063339, -0.0195105392485857, -0.031097881495952606, 0.04252675920724869,
+              -0.09187793731689453, 0.0829525887966156, -0.003812957089394331, 0.0431736595928669, 0.07634212076663971,
+              -0.05335947126150131, 0.0345163568854332, -0.049201950430870056, 0.02300390601158142,
+              0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,
             ],
           ],
           splitChannels: true,
@@ -58,11 +60,11 @@ describe('WaveSurfer Regions plugin with no audio tests', () => {
 
       expect(region.element.textContent).to.equal('Test region')
 
-      let eventHandlerCalled = false;
+      let eventHandlerCalled = false
 
       regionsPlugin.on('region-in', (reg, e) => {
         expect(region).to.equal(reg)
-        eventHandlerCalled = true;
+        eventHandlerCalled = true
       })
 
       win.wavesurfer.setTime(2)
@@ -74,5 +76,4 @@ describe('WaveSurfer Regions plugin with no audio tests', () => {
       win.wavesurfer.destroy()
     })
   })
-
 })
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,
       )
@@ -164,15 +164,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',
+            }),
       },
     })
 

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -492,13 +492,17 @@ class Renderer extends EventEmitter<RendererEvents> {
 
   private async renderChannel(
     channelData: Array<Float32Array | number[]>,
-    options: WaveSurferOptions,
+    { overlay, ...options }: WaveSurferOptions & { overlay?: boolean },
     width: number,
+    channelIndex: number,
   ): Promise<void> {
     // A container for canvases
     const canvasContainer = document.createElement('div')
     const height = this.getHeight(options.height)
     canvasContainer.style.height = `${height}px`
+    if (overlay && channelIndex > 0) {
+      canvasContainer.style.marginTop = `-${height}px`
+    }
     this.canvasWrapper.style.minHeight = `${height}px`
     this.canvasWrapper.appendChild(canvasContainer)
 
@@ -624,14 +628,14 @@ class Renderer extends EventEmitter<RendererEvents> {
         await Promise.all(
           Array.from({ length: audioData.numberOfChannels }).map((_, i) => {
             const options = { ...this.options, ...this.options.splitChannels?.[i] }
-            return this.renderChannel([audioData.getChannelData(i)], options, width)
+            return this.renderChannel([audioData.getChannelData(i)], options, width, i)
           }),
         )
       } else {
         // Render a single waveform for the first two channels (left and right)
         const channels = [audioData.getChannelData(0)]
         if (audioData.numberOfChannels > 1) channels.push(audioData.getChannelData(1))
-        await this.renderChannel(channels, this.options, width)
+        await this.renderChannel(channels, this.options, width, 0)
       }
     } catch {
       // Render cancelled due to another render

diff --git a/src/wavesurfer.ts b/src/wavesurfer.ts
@@ -65,7 +65,7 @@ export type WaveSurferOptions = {
   /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
   sampleRate?: number
   /** Render each audio channel as a separate waveform */
-  splitChannels?: Partial<WaveSurferOptions>[]
+  splitChannels?: Array<Partial<WaveSurferOptions> & { overlay?: boolean }>
   /** Stretch the waveform to the full height */
   normalize?: boolean
   /** The list of plugins to initialize on start */