Merge branch 'main' into skb/collapsable-banner-poc-3

Author: sookburt

dotcom-rendering/README.md

@@ -30,9 +30,17 @@ $ cd dotcom-rendering
 
 ### Install Node.js
 
-To install and manage Node versions, we highly recommend installing a Node version manager such as [fnm](https://github.com/Schniz/fnm) (preferred), [nvm](https://github.com/nvm-sh/nvm) or [asdf](https://asdf-vm.com/guide/getting-started.html).
+We highly recommend installing a Node version manager such as [fnm](https://github.com/Schniz/fnm) (preferred), [nvm](https://github.com/nvm-sh/nvm) or [asdf](https://asdf-vm.com/guide/getting-started.html).
 
-Ensure you're at the root directory of this project, then follow the instructions for your version manager to install Node.
+Install the Node version manager of your choice.
+
+Ensure you're at the root directory of the project:
+
+```
+cd ~/code/dotcom-rendering
+```
+
+Run the command for your version manager to use the Node version as specified in [.nvmrc](../.nvmrc).
 
 For `fnm` this will be:
 
@@ -94,22 +102,20 @@ $ make install
 
 If you get an Node version error then check the setup for your version manager.
 
-### Running locally
+### Run
 
 ```sh
 $ make dev
 ```
 
-The development server will start on [http://localhost:3030](http://localhost:3030).
+The development server will start on [http://localhost:3030](http://localhost:3030)
 
-A list of content types with example URLs are available on the [root path](http://localhost:3030).
+The development server home page lists examples of the various page and content types.
 
 You can render a specific article by appending the production URL to the `Article` endpoint, for example:
-
 http://localhost:3030/Article/https://www.theguardian.com/sport/2019/jul/28/tour-de-france-key-moments-egan-bernal-yellow-jersey
 
-You can view the JSON representation of an article as sent to DCR by [Frontend](https://github.com/guardian/frontend), by appending `.json?dcr=true` to the production URL, for example:
-
+You can view the JSON data model of a page as sent by [Frontend](https://github.com/guardian/frontend) to DCR by appending `.json?dcr=true` to the production URL, for example:
 https://www.theguardian.com/sport/2019/jul/28/tour-de-france-key-moments-egan-bernal-yellow-jersey.json?dcr=true
 
 ### Detailed setup

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/ArticleTitle.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
 import { leftColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { defaultFormats } from '../../.storybook/decorators/splitThemeDecorator';
 import { allModes } from '../../.storybook/modes';

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
 import { allModes } from '../../.storybook/modes';
 import { FootballTable as FootballTableComponent } from './FootballTable';
 

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
 import { FootballTable as TableDefault } from './FootballTable.stories';
 import { FootballTableList as FootballTableListComponent } from './FootballTableList';
 

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
 import { regions } from '../../fixtures/manual/footballData';
 import { WomensEuro2025 } from './FootballCompetitionNav.stories';
 import { FootballTableList as TableListDefault } from './FootballTableList.stories';

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;