Add waveform to podcast feature card

Author: domlander

dotcom-rendering/src/components/AudioPlayer/components/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { from, palette } from '@guardian/source/foundations';
-import { WaveForm } from './WaveForm';
+import { WaveForm } from '../../WaveForm';
 
 const cursorWidth = '4px';
 
@@ -85,8 +85,9 @@ export const ProgressBar = ({
 			{...props}
 		>
 			<WaveForm
+				seed={src}
+				height={100}
 				bars={175}
-				src={src}
 				progress={progress}
 				buffer={buffer}
 				theme={{

dotcom-rendering/src/components/FeatureCard.tsx

@@ -32,6 +32,7 @@ import { MediaDuration } from './MediaDuration';
 import { Pill } from './Pill';
 import { StarRating } from './StarRating/StarRating';
 import { SupportingContent } from './SupportingContent';
+import { WaveForm } from './WaveForm';
 import { YoutubeBlockComponent } from './YoutubeBlockComponent.importable';
 
 export type Position = 'inner' | 'outer' | 'none';
@@ -112,6 +113,11 @@ const overlayStyles = css`
 		rgb(0, 0, 0) 64px
 	);
 	backdrop-filter: blur(12px) brightness(0.5);
+
+	/* Ensure the waveform is behind the other elements, e.g. headline, pill */
+	> * {
+		z-index: 1;
+	}
 `;
 
 const podcastImageContainerStyles = css`
@@ -150,6 +156,17 @@ const videoPillStyles = css`
 	right: ${space[2]}px;
 `;
 
+const waveformStyles = css`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 0;
+	height: 64px;
+	max-width: 100%;
+	overflow: hidden;
+	opacity: 0.3;
+`;
+
 const getMedia = ({
 	imageUrl,
 	imageAltText,
@@ -168,9 +185,11 @@ const getMedia = ({
 			...(imageUrl && { imageUrl }),
 		} as const;
 	}
+
 	if (imageUrl) {
 		return { type: 'picture', imageUrl, imageAltText } as const;
 	}
+
 	return undefined;
 };
 
@@ -506,6 +525,18 @@ export const FeatureCard = ({
 											</div>
 										)}
 
+										{mainMedia?.type === 'Audio' && (
+											<div css={waveformStyles}>
+												<WaveForm
+													seed={mainMedia.duration}
+													height={64}
+													// Just enough to cover the full width of the feature card in it's largest form
+													bars={233}
+													barWidth={2}
+												/>
+											</div>
+										)}
+
 										<CardFooter
 											format={format}
 											age={

dotcom-rendering/src/components/WaveForm.stories.tsx

@@ -0,0 +1,48 @@
+import { palette } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react';
+import { WaveForm as WaveFormComponent } from './WaveForm';
+
+const meta = {
+	title: 'Components/WaveForm',
+	component: WaveFormComponent,
+} satisfies Meta<typeof WaveFormComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	args: {
+		seed: 'https://audio.guim.co.uk/2024/10/18-57753-USEE_181024.mp3',
+		height: 100,
+		bars: 175,
+	},
+} satisfies Story;
+
+export const InProgress = {
+	args: {
+		...Default.args,
+		progress: 40,
+		buffer: 50,
+	},
+} satisfies Story;
+
+export const ShorterWithMoreBars = {
+	args: {
+		...InProgress.args,
+		height: 50,
+		bars: 200,
+		barWidth: 2,
+	},
+} satisfies Story;
+
+export const WithTheme = {
+	args: {
+		...InProgress.args,
+		theme: {
+			progress: palette.neutral[73],
+			buffer: palette.neutral[60],
+			wave: palette.neutral[46],
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/AudioPlayer/components/WaveForm.tsx renamed to dotcom-rendering/src/components/WaveForm.tsx

@@ -35,8 +35,7 @@ const getSeededRandomNumberGenerator = (seedString: string) => {
 };
 
 /**
- * Compresses an of values to a range between the threshold and the existing
- * maximum.
+ * Compresses an array of values to a range between the threshold and the existing maximum.
  */
 const compress = (array: number[], threshold: number) => {
 	const minValue = Math.min(...array);
@@ -51,17 +50,20 @@ const compress = (array: number[], threshold: number) => {
 };
 
 // Generate an array of fake audio peaks based on the URL
-function generateWaveform(url: string, bars: number) {
+function generateWaveform(url: string, bars: number, height: number) {
 	const getSeededRandomNumber = getSeededRandomNumberGenerator(url);
 
 	// Generate an array of fake peaks, pseudo random numbers seeded by the URL
 	const peaks = Array.from(
 		{ length: bars },
-		() => getSeededRandomNumber() * 100,
+		() => getSeededRandomNumber() * height,
 	);
 
+	// To ensure a good looking waveform, we set a fairly high minimum bar height
+	const minimumBarHeight = 0.6;
+
 	// Return the compressed fake audio data (like a podcast would be)
-	return compress(peaks, 60);
+	return compress(peaks, height * minimumBarHeight);
 }
 
 type Theme = {
@@ -77,27 +79,36 @@ const defaultTheme: Theme = {
 };
 
 type Props = {
-	src: string;
-	progress: number;
-	buffer: number;
+	/**
+	 * The same seed will generate the same waveform. For example, passing the url
+	 * as the seed will ensure the waveform is the same for the same audio file.
+	 */
+	seed: string;
+	height: number;
+	bars: number;
+	progress?: number;
+	buffer?: number;
 	theme?: Theme;
 	gap?: number;
-	bars?: number;
 	barWidth?: number;
 } & React.SVGProps<SVGSVGElement>;
 
 export const WaveForm = ({
-	src,
-	progress,
-	buffer,
+	seed,
+	height,
+	bars,
+	progress = 0,
+	buffer = 0,
 	theme: userTheme,
 	gap = 1,
-	bars = 150,
 	barWidth = 4,
 	...props
 }: Props) => {
 	// memoise the waveform data so they aren't recalculated on every render
-	const barHeights = useMemo(() => generateWaveform(src, bars), [src, bars]);
+	const barHeights = useMemo(
+		() => generateWaveform(seed, bars, height),
+		[seed, bars, height],
+	);
 	const totalWidth = useMemo(
 		() => bars * (barWidth + gap) - gap,
 		[bars, barWidth, gap],
@@ -112,10 +123,10 @@ export const WaveForm = ({
 
 	return (
 		<svg
-			viewBox={`0 0 ${totalWidth} 100`}
+			viewBox={`0 0 ${totalWidth} ${height}`}
 			preserveAspectRatio="none"
 			width={totalWidth}
-			height={100}
+			height={height}
 			xmlns="http://www.w3.org/2000/svg"
 			{...props}
 		>
@@ -128,7 +139,7 @@ export const WaveForm = ({
 							<rect
 								key={x}
 								x={x}
-								y={100 - barHeight} // place it on the bottom
+								y={height - barHeight} // place it on the bottom
 								width={barWidth}
 								height={barHeight}
 							/>
@@ -137,11 +148,14 @@ export const WaveForm = ({
 				</g>
 
 				<clipPath id={`buffer-clip-path-${id}`}>
-					<rect height="100" width={(buffer / 100) * totalWidth} />
+					<rect height={height} width={(buffer / 100) * totalWidth} />
 				</clipPath>
 
 				<clipPath id={`progress-clip-path-${id}`}>
-					<rect height="100" width={(progress / 100) * totalWidth} />
+					<rect
+						height={height}
+						width={(progress / 100) * totalWidth}
+					/>
 				</clipPath>
 			</defs>
 

dotcom-rendering/src/model/article-schema.json

@@ -5265,6 +5265,9 @@
                             "type": "string",
                             "const": "Audio"
                         },
+                        "duration": {
+                            "type": "string"
+                        },
                         "podcastImage": {
                             "type": "object",
                             "properties": {
@@ -5275,9 +5278,6 @@
                                     "type": "string"
                                 }
                             }
-                        },
-                        "duration": {
-                            "type": "string"
                         }
                     },
                     "required": [

dotcom-rendering/src/model/front-schema.json

@@ -3840,6 +3840,9 @@
                             "type": "string",
                             "const": "Audio"
                         },
+                        "duration": {
+                            "type": "string"
+                        },
                         "podcastImage": {
                             "type": "object",
                             "properties": {
@@ -3850,9 +3853,6 @@
                                     "type": "string"
                                 }
                             }
-                        },
-                        "duration": {
-                            "type": "string"
                         }
                     },
                     "required": [

dotcom-rendering/src/types/mainMedia.ts

@@ -21,8 +21,8 @@ type Video = Media & {
 
 type Audio = Media & {
 	type: 'Audio';
-	podcastImage?: PodcastSeriesImage;
 	duration: string;
+	podcastImage?: PodcastSeriesImage;
 };
 
 type Gallery = Media & {