From 78c6b80915acd44bfedbcefa5f015591f84e1d3f Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Wed, 20 May 2020 20:23:14 +0100
Subject: [PATCH] Set a background on wavesurfer and clear it.

Hopefully fixes ghost waveforms and scroll bars
---
 src/mixer/audio.ts | 1 +
 src/mixer/state.ts | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/src/mixer/audio.ts b/src/mixer/audio.ts
index 3c1d9ce..44df73d 100644
--- a/src/mixer/audio.ts
+++ b/src/mixer/audio.ts
@@ -97,6 +97,7 @@ class Player extends ((PlayerEmitter as unknown) as { new (): EventEmitter }) {
       audioContext: engine.audioContext,
       container: "#waveform-" + player.toString(),
       waveColor: "#CCCCFF",
+      backgroundColor: "#FFFFFF",
       progressColor: "#9999FF",
       backend: "MediaElementWebAudio",
       barWidth: 2,
diff --git a/src/mixer/state.ts b/src/mixer/state.ts
index 33834cb..0004f41 100644
--- a/src/mixer/state.ts
+++ b/src/mixer/state.ts
@@ -294,6 +294,14 @@ export const load = (
 
   console.log("loading");
 
+  let waveform = document.getElementById("waveform-" + player.toString());
+  if (waveform == null) {
+    throw new Error();
+  }
+  waveform.innerHTML = ""; // clear previous (ghost) wavesurfer
+  // wavesurfer also sets the background white, remove for progress bar to work.
+  waveform.style.removeProperty("background");
+
   try {
     const signal = loadAbortControllers[player].signal; // hang on to the signal, even if its controller gets replaced
     const result = await fetch(url, {