From 5d2eb904f61063f3f17a595f6486cfd279e9a512 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 24 Jul 2026 19:59:33 +0100
Subject: [PATCH] Handle AudioPlayer inside renderElement

---
 .../components/AudioPlayer/AudioPlayer.tsx    | 67 ++++++++++++-------
 dotcom-rendering/src/layouts/AudioLayout.tsx  | 37 +++++-----
 dotcom-rendering/src/lib/renderElement.tsx    |  8 +++
 3 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
index ee9c1ab36b2..4aef6b039ee 100644
--- a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
@@ -1,41 +1,56 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import { getAudioData } from '../../lib/audio-data';
+import { palette } from '../../palette';
+import type { FEElement } from '../../types/content';
 import { AudioPlayerApps } from '../AudioPlayerApps.island';
 import { AudioPlayerWeb } from '../AudioPlayerWeb.island';
+import { useConfig } from '../ConfigContext';
 import { Island } from '../Island';
 import { formatAudioDuration } from '../ListenToArticle.island';
 
 export const AudioPlayer = ({
-	audioData,
+	element,
 	isSensitive,
 	isAcastEnabled,
-	isApps,
 }: {
-	audioData: {
-		audioDownloadUrl: string;
-		durationSeconds?: number;
-		mediaId: string;
-	};
+	element: FEElement;
 	isSensitive: boolean;
 	isAcastEnabled: boolean;
-	isApps: boolean;
 }) => {
+	const { renderingTarget } = useConfig();
+	const isApps = renderingTarget === 'Apps';
+	const audioData = getAudioData([element]);
+	if (!audioData) return <></>;
 	return (
-		<Island priority="critical" defer={{ until: 'visible' }}>
-			{isApps ? (
-				<AudioPlayerApps
-					audioDuration={
-						typeof audioData.durationSeconds === 'number'
-							? formatAudioDuration(audioData.durationSeconds)
-							: undefined
-					}
-				/>
-			) : (
-				<AudioPlayerWeb
-					contentIsNotSensitive={!isSensitive}
-					isAcastEnabled={isAcastEnabled}
-					src={audioData.audioDownloadUrl}
-					mediaId={audioData.mediaId}
-				/>
-			)}
-		</Island>
+		<>
+			<Island priority="critical" defer={{ until: 'visible' }}>
+				{isApps ? (
+					<AudioPlayerApps
+						audioDuration={
+							typeof audioData.durationSeconds === 'number'
+								? formatAudioDuration(audioData.durationSeconds)
+								: undefined
+						}
+					/>
+				) : (
+					<AudioPlayerWeb
+						contentIsNotSensitive={!isSensitive}
+						isAcastEnabled={isAcastEnabled}
+						src={audioData.audioDownloadUrl}
+						mediaId={audioData.mediaId}
+					/>
+				)}
+			</Island>
+			<StraightLines
+				cssOverrides={css`
+					display: block;
+					margin-bottom: ${space[2]}px;
+				`}
+				count={1}
+				color={palette('--straight-lines')}
+			/>
+		</>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
index 01303bfa153..7a1260aaca5 100644
--- a/dotcom-rendering/src/layouts/AudioLayout.tsx
+++ b/dotcom-rendering/src/layouts/AudioLayout.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import {
 	from,
 	palette as sourcePalette,
-	space,
 	until,
 } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
@@ -16,7 +15,6 @@ import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
-import { AudioPlayer } from '../components/AudioPlayer/AudioPlayer';
 import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.island';
 import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
@@ -26,6 +24,7 @@ import { GridItem } from '../components/GridItem';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
+import { MainMedia } from '../components/MainMedia';
 import { Masthead } from '../components/Masthead/Masthead';
 import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
@@ -39,7 +38,6 @@ import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
 import { SubMeta } from '../components/SubMeta';
 import { SubNav } from '../components/SubNav.island';
 import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
-import { getAudioData } from '../lib/audio-data';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
@@ -147,7 +145,6 @@ export const AudioLayout = (props: WebProps | AppProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
-	const audioData = getAudioData(article.mainMediaElements);
 
 	const {
 		config: { isPaidContent, host, hasSurveyAd },
@@ -329,23 +326,21 @@ export const AudioLayout = (props: WebProps | AppProps) => {
 							</div>
 						</GridItem>
 						<GridItem area="media">
-							{audioData && (
-								<AudioPlayer
-									audioData={audioData}
-									isSensitive={article.config.isSensitive}
-									isAcastEnabled={
-										!!article.config.switches.acast
-									}
-									isApps={isApps}
-								/>
-							)}
-							<StraightLines
-								cssOverrides={css`
-									display: block;
-									margin-bottom: ${space[2]}px;
-								`}
-								count={1}
-								color={themePalette('--straight-lines')}
+							<MainMedia
+								format={format}
+								elements={article.mainMediaElements}
+								host={host}
+								pageId={article.pageId}
+								webTitle={article.webTitle}
+								ajaxUrl={article.config.ajaxUrl}
+								switches={article.config.switches}
+								isAdFreeUser={article.isAdFreeUser}
+								isSensitive={article.config.isSensitive}
+								editionId={article.editionId}
+								hideCaption={true}
+								shouldHideAds={article.shouldHideAds}
+								contentType={article.contentType}
+								contentLayout={'AudioLayout'}
 							/>
 						</GridItem>
 						<GridItem area="standfirst">
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 5ac80d2d25f..03043d1bef0 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -1,6 +1,7 @@
 import { AdPlaceholder } from '../components/AdPlaceholder.apps';
 import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimer';
 import { AudioAtomWrapper } from '../components/AudioAtomWrapper.island';
+import { AudioPlayer } from '../components/AudioPlayer/AudioPlayer';
 import { BlockquoteBlockComponent } from '../components/BlockquoteBlockComponent';
 import { CalloutBlockComponent } from '../components/CalloutBlockComponent.island';
 import { CalloutEmbedBlockComponent } from '../components/CalloutEmbedBlockComponent.island';
@@ -990,6 +991,13 @@ export const renderElement = ({
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':
+			return (
+				<AudioPlayer
+					element={element}
+					isSensitive={isSensitive}
+					isAcastEnabled={!!switches.acast}
+				/>
+			);
 		case 'model.dotcomrendering.pageElements.ContentAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.GenericAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.VideoBlockElement':