Add audio waveform design to Listen To Article button (#14869)

* remove ab testing from ListenToArticle

* Add waveform container to ListenToAudio button

* fix soundwave

* Use podcast wave component

* make seed unique

* Fix palette for dark

* fix ListenToArticle state

* Hardcode waveform props

* Rename props

Author: vlbee

dotcom-rendering/src/components/ListenToArticle.importable.tsx

@@ -84,6 +84,7 @@ export const ListenToArticle = ({ articleId }: Props) => {
 		showButton && (
 			<ListenToArticleButton
 				onClickHandler={listenToArticleHandler}
+				waveFormSeed={articleId}
 				audioDuration={
 					audioDurationSeconds !== undefined
 						? formatAudioDuration(audioDurationSeconds)

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

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>;
 export const ListenToArticleWithDurationButton = {
 	args: {
 		onClickHandler: () => undefined,
-		audioDuration: '3:02',
+		audioDuration: '5:14',
 	},
 } satisfies Story;
 

dotcom-rendering/src/components/ListenToArticleButton.tsx

@@ -1,10 +1,13 @@
 import { css } from '@emotion/react';
 import { height, space } from '@guardian/source/foundations';
+import type { ThemeIcon } from '@guardian/source/react-components';
 import {
 	Button,
 	SvgMediaControlsPlay,
 } from '@guardian/source/react-components';
 import { palette } from '../palette';
+import type { WaveFormTheme } from './WaveForm';
+import { WaveForm } from './WaveForm';
 
 const buttonCss = (audioDuration: string | undefined) => css`
 	display: flex;
@@ -18,12 +21,12 @@ const buttonCss = (audioDuration: string | undefined) => css`
 	}
 	margin-bottom: ${space[4]}px;
 	margin-left: ${space[2]}px;
-	padding-left: ${space[2]}px;
+	padding-left: ${space[3]}px;
 	padding-right: ${audioDuration === undefined ? space[4] : space[3]}px;
 	padding-bottom: 0px;
 	font-size: 15px;
-	height: ${height.ctaSmall}px;
-	min-height: ${height.ctaSmall}px;
+	height: ${height.ctaXsmall}px;
+	min-height: ${height.ctaXsmall}px;
 
 	.src-button-space {
 		width: 0px;
@@ -36,38 +39,73 @@ const dividerCss = css`
 	opacity: 0.5;
 	border-left: 1px solid ${palette('--follow-icon-background')};
 	margin-left: ${space[2]}px;
-	margin-right: ${space[2]}px;
 `;
 
-const durationCss = css`
-	font-weight: 300;
-`;
+const themeIcon: ThemeIcon = {
+	fill: palette('--follow-icon-background'),
+};
+
+const waveFormContainerCss = css`
+	height: ${space[12]}px;
+	border-top: 1px solid ${palette('--article-meta-lines')};
+	position: relative;
+	padding-top: ${space[2]}px;
+	overflow: hidden;
+
+	> svg {
+		position: absolute;
+		top: ${space[2]}px;
+		left: 0;
+		width: 746px; /* Fixed width - adjust as needed */
+		height: 100%;
+		z-index: 0;
+	}
 
-const baselineCss = css`
-	padding-bottom: 2px;
+	> button {
+		position: relative;
+		z-index: 1;
+	}
 `;
 
-type ButtonProps = {
+type Props = {
 	onClickHandler: () => void;
 	audioDuration?: string;
+	waveFormSeed?: string;
+};
+
+const waveTheme: WaveFormTheme = {
+	wave: palette('--listen-to-article-waveform'),
 };
+
 export const ListenToArticleButton = ({
 	onClickHandler,
 	audioDuration,
-}: ButtonProps) => (
-	<Button
-		onClick={onClickHandler}
-		size="default"
-		iconSide="left"
-		cssOverrides={buttonCss(audioDuration)}
-		icon={<SvgMediaControlsPlay />}
-	>
-		{audioDuration === undefined || audioDuration === '' ? null : (
-			<>
-				<span css={[durationCss, baselineCss]}>{audioDuration}</span>
-				<span css={dividerCss}></span>
-			</>
-		)}
-		<span css={baselineCss}>Listen to this article</span>
-	</Button>
-);
+	waveFormSeed,
+}: Props) => {
+	return (
+		<div css={waveFormContainerCss}>
+			<WaveForm
+				seed={waveFormSeed ?? 'listen to this article'}
+				height={space[10]}
+				bars={250}
+				theme={waveTheme}
+				gap={1}
+				barWidth={2}
+			/>
+			<Button
+				onClick={onClickHandler}
+				size="default"
+				cssOverrides={buttonCss(audioDuration)}
+			>
+				<span>Listen to this article</span>
+				{audioDuration === undefined || audioDuration === '' ? null : (
+					<>
+						<span css={dividerCss}></span>
+						<SvgMediaControlsPlay size="small" theme={themeIcon} />
+						<span>{audioDuration}</span>
+					</>
+				)}
+			</Button>
+		</div>
+	);
+};

dotcom-rendering/src/components/WaveForm.tsx

@@ -68,19 +68,19 @@ function generateWaveform(seed: string, bars: number, height: number) {
 	return compress(peaks, height * minimumBarHeight);
 }
 
-type Theme = {
+export type WaveFormTheme = {
 	progress?: string;
 	buffer?: string;
 	wave?: string;
 };
 
-const defaultTheme: Theme = {
+const defaultTheme: WaveFormTheme = {
 	progress: 'green',
 	buffer: 'orange',
 	wave: 'grey',
 };
 
-type Props = {
+export type WaveFormProps = {
 	/**
 	 * 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.
@@ -90,7 +90,7 @@ type Props = {
 	bars: number;
 	progress?: number;
 	buffer?: number;
-	theme?: Theme;
+	theme?: WaveFormTheme;
 	gap?: number;
 	barWidth?: number;
 } & React.SVGProps<SVGSVGElement>;
@@ -105,7 +105,7 @@ export const WaveForm = ({
 	gap = 1,
 	barWidth = 4,
 	...props
-}: Props) => {
+}: WaveFormProps) => {
 	// memoise the waveform data so they aren't recalculated on every render
 	const barHeights = useMemo(
 		() => generateWaveform(seed, bars, height),

dotcom-rendering/src/paletteDeclarations.ts

@@ -7284,6 +7284,10 @@ const paletteColours = {
 		light: linkKickerTextLight,
 		dark: linkKickerTextDark,
 	},
+	'--listen-to-article-waveform': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[38],
+	},
 	'--live-block-border-bottom': {
 		light: liveBlockBorderBottomLight,
 		dark: liveBlockBorderBottomDark,