From 4c75bf15cbd2c663074853ef285ddbad89ba5d63 Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 24 Oct 2024 18:45:04 +0100
Subject: [PATCH 1/2] compress the fake audio data

---
 .../AudioPlayer/components/WaveForm.tsx       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx b/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
index 000c67d1e0..db19335105 100644
--- a/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
@@ -43,6 +43,21 @@ const normalizeAmplitude = (data: number[]) => {
 	return data.map((n) => n * multiplier * 100);
 };
 
+/**
+ * Compresses an of values to a range between the threshold and the existing
+ * maximum.
+ */
+const compress = (array: number[], threshold: number) => {
+	const minValue = Math.min(...array);
+	const maxValue = Math.max(...array);
+
+	return array.map(
+		(x) =>
+			((x - minValue) / (maxValue - minValue)) * (maxValue - threshold) +
+			threshold,
+	);
+};
+
 /** Returns a string of the specified length, repeating the input string as necessary. */
 function padString(str: string, length: number) {
 	// Repeat the string until it is longer than the desired length
@@ -74,8 +89,11 @@ function generateWaveform(url: string, bars: number) {
 	// Normalize the amplitude of the fake audio data
 	const normalized = normalizeAmplitude(shuffled);
 
+	// Compress the amplitude of the fake audio data, like a podcast would
+	const compressed = compress(normalized, 60);
+
 	// Return the normalized the amplitude of the fake audio data
-	return normalized;
+	return compressed;
 }
 
 type Theme = {

From 7f10337354c405ad37ac8f5ade2e2c66407dfff7 Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 24 Oct 2024 18:49:47 +0100
Subject: [PATCH 2/2] use `id` for the `clipPath` ids too

thanks @mxdvl!
---
 .../src/components/AudioPlayer/components/WaveForm.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx b/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
index db19335105..e0b8b0ed91 100644
--- a/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx
@@ -168,11 +168,11 @@ export const WaveForm = ({
 					})}
 				</g>
 
-				<clipPath id="buffer-clip-path">
+				<clipPath id={`buffer-clip-path-${id}`}>
 					<rect height="100" width={(buffer / 100) * totalWidth} />
 				</clipPath>
 
-				<clipPath id="progress-clip-path">
+				<clipPath id={`progress-clip-path-${id}`}>
 					<rect height="100" width={(progress / 100) * totalWidth} />
 				</clipPath>
 			</defs>
@@ -183,14 +183,14 @@ export const WaveForm = ({
 			{/* buffer wave */}
 			<use
 				href={`#bars-${id}`}
-				clipPath="url(#buffer-clip-path)"
+				clipPath={`url(#buffer-clip-path-${id})`}
 				fill={theme.buffer}
 			/>
 
 			{/* progress wave */}
 			<use
 				href={`#bars-${id}`}
-				clipPath="url(#progress-clip-path)"
+				clipPath={`url(#progress-clip-path-${id})`}
 				fill={theme.progress}
 			/>
 		</svg>