Add audio duration to L2A button (#14276)

* WIP add audio duration to L2A button

* Use getAudioDurationSeconds from bridget 8.6.0

* tidy up

* Filter L2A button from galleries, picture, or liveblog content

* fix css

* Fix test

* Refactor

* Fix Css

* Fix formatAudioDuration

Author: vlbee

dotcom-rendering/package.json

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.5.1",
+		"@guardian/bridget": "8.6.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial-core": "27.1.0",

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -244,6 +244,7 @@ export const ArticleMetaApps = ({
 	const isAnalysis = format.design === ArticleDesign.Analysis;
 	const isLiveBlog = format.design === ArticleDesign.LiveBlog;
 	const isGallery = format.design === ArticleDesign.Gallery;
+	const isVideo = format.design === ArticleDesign.Video;
 
 	const shouldShowFollowButtons = (layoutOrDesignType: boolean) =>
 		layoutOrDesignType && !!byline && !isUndefined(soleContributor);
@@ -254,6 +255,9 @@ export const ArticleMetaApps = ({
 	const isImmersiveOrAnalysisWithMultipleAuthors =
 		(isAnalysis || isImmersive) && !!byline && isUndefined(soleContributor);
 
+	const shouldShowListenToArticleButton =
+		!!pageId && !(isLiveBlog || isPicture || isGallery || isVideo);
+
 	return (
 		<div
 			className={
@@ -365,7 +369,7 @@ export const ArticleMetaApps = ({
 					</MetaGridBranding>
 				)}
 			</div>
-			{pageId !== undefined && (
+			{shouldShowListenToArticleButton && (
 				<Island priority="feature" defer={{ until: 'visible' }}>
 					<ListenToArticle articleId={pageId} />
 				</Island>

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

@@ -7,26 +7,53 @@ import { ListenToArticleButton } from './ListenToArticleButton';
 type Props = {
 	articleId: string;
 };
+
+export const formatAudioDuration = (
+	durationInSeconds: number,
+): string | undefined => {
+	if (durationInSeconds >= 3600 || durationInSeconds <= 0) {
+		return undefined;
+	}
+	const minutes = Math.floor((durationInSeconds % 3600) / 60);
+	const seconds = durationInSeconds % 60;
+
+	const formattedDuration = `${minutes.toString()}:${seconds
+		.toString()
+		.padStart(2, '0')}`;
+
+	return formattedDuration;
+};
+
 export const ListenToArticle = ({ articleId }: Props) => {
 	const [showButton, setShowButton] = useState<boolean>(false);
+	const [audioDurationSeconds, setAudioDurationSeconds] = useState<
+		number | undefined
+	>(undefined);
 
-	const isBridgetCompatible = useIsBridgetCompatible('8.5.1');
-
+	const isBridgetCompatible = useIsBridgetCompatible('8.6.0');
 	useEffect(() => {
 		if (isBridgetCompatible) {
 			Promise.all([
 				getListenToArticleClient().isAvailable(articleId),
 				getListenToArticleClient().isPlaying(articleId),
+				getListenToArticleClient().getAudioDurationSeconds(articleId),
 			])
-				.then(() =>
-					// setShowButton(isAvailable && !isPlaying),
-					setShowButton(false),
-				)
+				.then(() => {
+					// TODO pending design implementation and AB test set up.
+					// .then(({ isAvailable, isPlaying, audioDurationSeconds }) => {
+					// setAudioDuration(
+					// 	audioDurationSeconds ? audioDurationSeconds : undefined,
+					// );
+					// setShowButton(isAvailable && !isPlaying);
+					setAudioDurationSeconds(undefined);
+					setShowButton(false);
+				})
 				.catch((error) => {
 					console.error(
 						'Error fetching article audio status: ',
 						error,
 					);
+
 					setShowButton(false);
 				});
 		}
@@ -54,7 +81,14 @@ export const ListenToArticle = ({ articleId }: Props) => {
 	};
 	return (
 		showButton && (
-			<ListenToArticleButton onClickHandler={listenToArticleHandler} />
+			<ListenToArticleButton
+				onClickHandler={listenToArticleHandler}
+				audioDuration={
+					audioDurationSeconds !== undefined
+						? formatAudioDuration(audioDurationSeconds)
+						: undefined
+				}
+			/>
 		)
 	);
 };

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

@@ -0,0 +1,20 @@
+import { formatAudioDuration } from './ListenToArticle.importable';
+
+describe('format Audio Duration correctly', () => {
+	const testCases = [
+		{ input: -60, expected: undefined },
+		{ input: 0, expected: undefined },
+		{ input: 1, expected: '0:01' },
+		{ input: 59, expected: '0:59' },
+		{ input: 60, expected: '1:00' },
+		{ input: 61, expected: '1:01' },
+		{ input: 3599, expected: '59:59' },
+		{ input: 3600, expected: undefined },
+	];
+
+	for (const { input, expected } of testCases) {
+		it(`correctly formats ${input} as ${expected}`, () => {
+			expect(formatAudioDuration(input)).toEqual(expected);
+		});
+	}
+});

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

@@ -10,8 +10,16 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const ListenToArticleButton = {
+export const ListenToArticleWithDurationButton = {
 	args: {
 		onClickHandler: () => undefined,
+		audioDuration: '3:02',
+	},
+} satisfies Story;
+
+export const ListenToArticleNoDurationButton = {
+	args: {
+		onClickHandler: () => undefined,
+		audioDuration: undefined,
 	},
 } satisfies Story;

dotcom-rendering/src/components/ListenToArticleButton.tsx

@@ -1,32 +1,73 @@
 import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
+import { height, space } from '@guardian/source/foundations';
 import {
 	Button,
 	SvgMediaControlsPlay,
 } from '@guardian/source/react-components';
 import { palette } from '../palette';
 
-const button = css`
+const buttonCss = (audioDuration: string | undefined) => css`
+	display: flex;
+	align-items: center;
 	background-color: ${palette('--follow-icon-fill')};
+	color: ${palette('--follow-icon-background')};
 	&:active,
 	&:focus,
 	&:hover {
 		background-color: ${palette('--follow-icon-fill')};
 	}
-	color: ${palette('--follow-icon-background')};
 	margin-bottom: ${space[4]}px;
 	margin-left: ${space[2]}px;
+	padding-left: ${space[2]}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;
+
+	.src-button-space {
+		width: 0px;
+	}
+`;
+
+const dividerCss = css`
+	width: 0.5px;
+	height: 100%;
+	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 baselineCss = css`
+	padding-bottom: 2px;
+`;
+
 type ButtonProps = {
 	onClickHandler: () => void;
+	audioDuration?: string;
 };
-export const ListenToArticleButton = ({ onClickHandler }: ButtonProps) => (
+export const ListenToArticleButton = ({
+	onClickHandler,
+	audioDuration,
+}: ButtonProps) => (
 	<Button
 		onClick={onClickHandler}
-		size="small"
-		cssOverrides={button}
+		size="default"
+		iconSide="left"
+		cssOverrides={buttonCss(audioDuration)}
 		icon={<SvgMediaControlsPlay />}
 	>
-		Listen to article
+		{audioDuration === undefined || audioDuration === '' ? null : (
+			<>
+				<span css={[durationCss, baselineCss]}>{audioDuration}</span>
+				<span css={dividerCss}></span>
+			</>
+		)}
+		<span css={baselineCss}>Listen to this article</span>
 	</Button>
 );