Merge branch 'main' into mob/new-filter-button

Author: oliverabrahams

apps-rendering/package.json

@@ -63,8 +63,8 @@
 		"@storybook/react-webpack5": "8.6.14",
 		"@storybook/theming": "8.6.14",
 		"@types/clean-css": "4.2.11",
-		"@types/compression": "1.7.5",
-		"@types/express": "4.17.21",
+		"@types/compression": "1.8.1",
+		"@types/express": "5.0.1",
 		"@types/html-webpack-plugin": "3.2.9",
 		"@types/jest": "29.5.14",
 		"@types/jsdom": "16.2.15",
@@ -79,13 +79,13 @@
 		"buffer": "6.0.3",
 		"clean-css": "5.3.3",
 		"compare-versions": "6.1.0",
-		"compression": "1.7.4",
+		"compression": "1.8.0",
 		"constructs": "10.4.2",
 		"core-js": "3.33.3",
 		"eslint": "8.56.0",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
-		"express": "4.21.2",
+		"express": "5.1.0",
 		"html-webpack-plugin": "5.6.3",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",

apps-rendering/src/server/server.ts

@@ -396,7 +396,7 @@ app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
 app.use('/assets', express.static(path.resolve(__dirname, '../dist/assets')));
 app.use(compression());
 
-app.all('*', (request, response, next) => {
+app.all('/{*splat}', (request, response, next) => {
 	const start = Date.now();
 
 	response.once('finish', () => {
@@ -409,22 +409,29 @@ app.all('*', (request, response, next) => {
 	next();
 });
 
-app.get('/healthcheck', (_req, res) => res.send('Ok'));
+app.get('/healthcheck', (_req, res) => {
+	res.status(200).send('Ok');
+});
 
-app.get('/favicon.ico', (_, res) => res.status(404).end());
-app.get('/fontSize.css', (_, res) => res.status(404).end());
+app.get('/favicon.ico', (_, res) => {
+	res.sendStatus(404);
+});
+
+app.get('/fontSize.css', (_, res) => {
+	res.sendStatus(404);
+});
 
 /**
 To enable testing in the mobile device emulators,
 this route handler adds compatability with DCR's route for apps articles.
 The DCR route follows the pattern:
-/AppsArticle/https://www.theguardian.com/cities/2019/sep/13/reclaimed-lakes-and-giant-airports-how-mexico-city-might-have-looked
+AppsArticle/https://www.theguardian.com/food/2020/mar/15/easter-taste-test-dan-lepard-hot-cross-bun-milk-dark-chocolate-mini-eggs-bunny-sloth
 */
 app.get(
-	'/AppsArticle/*',
+	'/AppsArticle/*url',
 	express.raw(),
 	(req, res, next) => {
-		const contentWebUrl = req.params[0];
+		const contentWebUrl = req.originalUrl.split('/').slice(2).join('/');
 		const articleId = new URL(contentWebUrl).pathname;
 		req.params = {
 			0: articleId,
@@ -436,16 +443,13 @@ app.get(
 );
 
 app.get(
-	'/:edition(uk|us|au|europe|international)?/rendered-items/*',
-	express.raw(),
-	serveArticleGet,
-);
-app.get(
-	'/:edition(uk|us|au|europe|international)?/*',
+	['/:edition/rendered-items/*path', '/rendered-items/*path'],
 	express.raw(),
 	serveArticleGet,
 );
 
+app.get(['/:edition/*path', '/*path'], express.raw(), serveArticleGet);
+
 app.post('/article', express.raw(), serveArticlePost);
 
 app.post('/editions-article', express.raw(), serveEditionsArticlePost);

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -96,6 +96,12 @@ export const getInteractivesClient: BridgetApi<
 	getNativePlatform: async () => 0,
 });
 
+export const getListenToArticleClient: BridgetApi<
+	'getListenToArticleClient'
+> = () => ({
+	isAvailable: async () => true,
+	isPlaying: async () => false,
+});
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -112,6 +118,7 @@ export const ensure_all_exports_are_present = {
 	getTagClient,
 	getInteractionClient,
 	getInteractivesClient,
+	getListenToArticleClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

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.4.0",
+		"@guardian/bridget": "8.5.1",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial": "26.1.2",
@@ -73,7 +73,7 @@
 		"@types/compression": "1.7.5",
 		"@types/connect": "3.4.38",
 		"@types/dompurify": "3.0.2",
-		"@types/express": "4.17.21",
+		"@types/express": "5.0.1",
 		"@types/he": "1.2.0",
 		"@types/html-minifier-terser": "7.0.2",
 		"@types/jest": "29.5.14",
@@ -130,7 +130,7 @@
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
 		"execa": "5.1.1",
-		"express": "4.21.2",
+		"express": "5.1.0",
 		"find": "0.3.0",
 		"he": "1.2.0",
 		"html-minifier-terser": "7.2.0",

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

@@ -22,6 +22,7 @@ import { Contributor } from './Contributor';
 import { Dateline } from './Dateline';
 import { FollowWrapper } from './FollowWrapper.importable';
 import { Island } from './Island';
+import { ListenToArticle } from './ListenToArticle.importable';
 import { LiveblogNotifications } from './LiveblogNotifications.importable';
 
 type Props = {
@@ -353,6 +354,11 @@ export const ArticleMetaApps = ({
 					</MetaGridBranding>
 				)}
 			</div>
+			{pageId !== undefined && (
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ListenToArticle articleId={pageId} />
+				</Island>
+			)}
 		</div>
 	);
 };

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

@@ -0,0 +1,60 @@
+import { log } from '@guardian/libs';
+import { useEffect, useState } from 'react';
+import { getListenToArticleClient } from '../lib/bridgetApi';
+import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
+import { ListenToArticleButton } from './ListenToArticleButton';
+
+type Props = {
+	articleId: string;
+};
+export const ListenToArticle = ({ articleId }: Props) => {
+	const [showButton, setShowButton] = useState<boolean>(false);
+
+	const isBridgetCompatible = useIsBridgetCompatible('8.5.1');
+
+	useEffect(() => {
+		if (isBridgetCompatible) {
+			Promise.all([
+				getListenToArticleClient().isAvailable(articleId),
+				getListenToArticleClient().isPlaying(articleId),
+			])
+				.then(() =>
+					// setShowButton(isAvailable && !isPlaying),
+					setShowButton(false),
+				)
+				.catch((error) => {
+					console.error(
+						'Error fetching article audio status: ',
+						error,
+					);
+					setShowButton(false);
+				});
+		}
+	}, [articleId, isBridgetCompatible]);
+
+	const listenToArticleHandler = () => {
+		void getListenToArticleClient()
+			.play(articleId)
+			.then((success: boolean) => {
+				// hide the audio button once audio is playing until we can
+				// manage play state syncronisation across the native miniplayer and web layer
+				success && setShowButton(false);
+			})
+			.catch((error: Error) => {
+				window.guardian.modules.sentry.reportError(
+					error,
+					'bridget-getListenToArticleClient-play-error',
+				),
+					log(
+						'dotcom',
+						'Bridget getListenToArticleClient.play Error:',
+						error,
+					);
+			});
+	};
+	return (
+		showButton && (
+			<ListenToArticleButton onClickHandler={listenToArticleHandler} />
+		)
+	);
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListenToArticleButton as ListenToArticleButtonComponent } from './ListenToArticleButton';
+
+const meta = {
+	component: ListenToArticleButtonComponent,
+	title: 'Components/Listen To Article Button',
+} satisfies Meta<typeof ListenToArticleButtonComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ListenToArticleButton = {
+	args: {
+		onClickHandler: () => undefined,
+	},
+} satisfies Story;

dotcom-rendering/src/components/ListenToArticleButton.tsx

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import {
+	Button,
+	SvgMediaControlsPlay,
+} from '@guardian/source/react-components';
+import { palette } from '../palette';
+
+const button = css`
+	background-color: ${palette('--follow-icon-fill')};
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: ${palette('--follow-icon-fill')};
+	}
+	color: ${palette('--follow-icon-background')};
+	margin-bottom: ${space[4]}px;
+	margin-left: ${space[2]}px;
+`;
+type ButtonProps = {
+	onClickHandler: () => void;
+};
+export const ListenToArticleButton = ({ onClickHandler }: ButtonProps) => (
+	<Button
+		onClick={onClickHandler}
+		size="small"
+		cssOverrides={button}
+		icon={<SvgMediaControlsPlay />}
+	>
+		Listen to article
+	</Button>
+);