From 1ed0c03ed2d7145d2544efb72a746c44a377461b Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Thu, 11 Jun 2026 17:54:02 +0100 Subject: [PATCH 1/8] Move AudioLayout to grid --- .../src/layouts/AudioLayout.stories.tsx | 6 +- dotcom-rendering/src/layouts/AudioLayout.tsx | 725 ------------------ dotcom-rendering/src/layouts/DecideLayout.tsx | 5 +- .../src/layouts/StandardLayoutArticleGrid.tsx | 78 +- 4 files changed, 52 insertions(+), 762 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/AudioLayout.tsx diff --git a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx b/dotcom-rendering/src/layouts/AudioLayout.stories.tsx index 9227a2e43d9..9b13f7271c8 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx +++ b/dotcom-rendering/src/layouts/AudioLayout.stories.tsx @@ -5,12 +5,12 @@ import { ArticleDesign } from '../lib/articleFormat'; import { getCurrentPillar } from '../lib/layoutHelpers'; import { extractNAV } from '../model/extract-nav'; import { enhanceArticleType } from '../types/article'; -import { AudioLayout } from './AudioLayout'; +import { StandardLayout } from './StandardLayout'; const meta = { title: 'Layouts/Audio', - component: AudioLayout, -} satisfies Meta; + component: StandardLayout, +} satisfies Meta; export default meta; diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx deleted file mode 100644 index 7a1260aaca5..00000000000 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ /dev/null @@ -1,725 +0,0 @@ -import { css } from '@emotion/react'; -import { - from, - palette as sourcePalette, - until, -} from '@guardian/source/foundations'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; -import { AdPortals } from '../components/AdPortals.island'; -import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; -import { AppsFooter } from '../components/AppsFooter.island'; -import { ArticleBody } from '../components/ArticleBody'; -import { ArticleContainer } from '../components/ArticleContainer'; -import { ArticleHeadline } from '../components/ArticleHeadline'; -import { ArticleMetaApps } from '../components/ArticleMeta.apps'; -import { ArticleMeta } from '../components/ArticleMeta.web'; -import { ArticleTitle } from '../components/ArticleTitle'; -import { Border } from '../components/Border'; -import { Carousel } from '../components/Carousel.island'; -import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland'; -import { DiscussionLayout } from '../components/DiscussionLayout'; -import { Footer } from '../components/Footer'; -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'; -import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island'; -import { OnwardsUpper } from '../components/OnwardsUpper.island'; -import { RightColumn } from '../components/RightColumn'; -import { Section } from '../components/Section'; -import { SlotBodyEnd } from '../components/SlotBodyEnd.island'; -import { Standfirst } from '../components/Standfirst'; -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 { canRenderAds } from '../lib/canRenderAds'; -import { getContributionsServiceUrl } from '../lib/contributions'; -import { decideStoryPackageTrails } from '../lib/decideTrail'; -import { parse } from '../lib/slot-machine-flags'; -import { worldCupTagId } from '../lib/worldCup2026'; -import type { NavType } from '../model/extract-nav'; -import { palette as themePalette } from '../palette'; -import type { ArticleDeprecated } from '../types/article'; -import type { RenderingTarget } from '../types/renderingTarget'; -import { BannerWrapper, Stuck } from './lib/stickiness'; - -const AudioGrid = ({ children }: { children: React.ReactNode }) => ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -interface Props { - article: ArticleDeprecated; - format: ArticleFormat; - renderingTarget: RenderingTarget; - serverTime?: number; -} - -interface WebProps extends Props { - NAV: NavType; - renderingTarget: 'Web'; -} - -interface AppProps extends Props { - renderingTarget: 'Apps'; -} - -export const AudioLayout = (props: WebProps | AppProps) => { - const { article, format, renderingTarget, serverTime } = props; - const isWeb = renderingTarget === 'Web'; - const isApps = renderingTarget === 'Apps'; - - const { - config: { isPaidContent, host, hasSurveyAd }, - editionId, - } = article; - - const showBodyEndSlot = parse(article.slotMachineFlags ?? '').showBodyEnd; - - const showComments = article.isCommentable && !isPaidContent; - - const { branding } = article.commercialProperties[article.editionId]; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const isLabs = format.theme === ArticleSpecial.Labs; - - const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId); - - const renderAds = canRenderAds(article); - - return ( - <> - {isWeb && ( -
- {renderAds && ( - -
- -
- - )} - tag.id)} - contentType={article.contentType} - /> -
- )} - - {isWeb && format.theme === ArticleSpecial.Labs && ( - -
- -
- - )} - - {isWeb && renderAds && hasSurveyAd && ( - - )} - -
- {isApps && renderAds && ( - - - - )} - - -
- - - - - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - -
- {renderingTarget === 'Web' ? ( - - ) : ( - - )} - {!!article.affiliateLinksDisclaimer && ( - - )} -
- - - - - - - - - - - {isWeb && showBodyEndSlot && ( - - - - )} - - - - - - {isWeb && ( -
- - - - - -
- )} - - -
- - {isWeb && renderAds && !isLabs && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - {isWeb && showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && !isLabs && ( -
- -
- )} -
- - {isWeb && ( - <> - {props.NAV.subNavSections && ( -
- - - -
- )} -
-
-
- - - - - - {renderAds && ( - - )} - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index e0cc0efee13..182983ed48b 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -2,7 +2,6 @@ import { ArticleDesign, ArticleDisplay } from '../lib/articleFormat'; import type { NavType } from '../model/extract-nav'; import type { Article } from '../types/article'; import type { RenderingTarget } from '../types/renderingTarget'; -import { AudioLayout } from './AudioLayout'; import { CommentLayout } from './CommentLayout'; import { CrosswordLayout } from './CrosswordLayout'; import { FullPageInteractiveLayout } from './FullPageInteractiveLayout'; @@ -196,7 +195,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { ); case ArticleDesign.Audio: return ( - { ); case ArticleDesign.Audio: return ( - - + {format.design === ArticleDesign.Audio && audioData ? ( + + ) : ( + + )} -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
+ {format.design !== ArticleDesign.Audio && ( +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ )} {isApps ? ( <> @@ -279,7 +294,7 @@ export const StandardLayoutArticleGrid = ({ {/* Only show Listen to Article button on App landscape views */} {isApps && ( - {!isVideo && ( + {!isMedia && (
From 7cc83c5c75b5ef9e9eb2e4266053760df1a6aee6 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 23 Jun 2026 14:27:33 +0100 Subject: [PATCH 2/8] Create AudioPlayer component --- .../src/components/AudioPlayer.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 dotcom-rendering/src/components/AudioPlayer.tsx diff --git a/dotcom-rendering/src/components/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer.tsx new file mode 100644 index 00000000000..ddb489b8f96 --- /dev/null +++ b/dotcom-rendering/src/components/AudioPlayer.tsx @@ -0,0 +1,52 @@ +import { css } from '@emotion/react'; +import { space } from '@guardian/source/foundations'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; +import { palette } from '../palette'; +import { AppsAudioPlayer } from './AppsAudioPlayer.island'; +import { AudioPlayerWrapper } from './AudioPlayerWrapper.island'; +import { formatAudioDuration } from './ListenToArticle.island'; + +export const AudioPlayer = ({ + audioData, + isSensitive, + isAcastEnabled, + isApps, +}: { + audioData: { + audioDownloadUrl: string; + durationSeconds?: number; + mediaId: string; + }; + isSensitive: boolean; + isAcastEnabled: boolean; + isApps: boolean; +}) => { + return ( + <> + {isApps ? ( + + ) : ( + + )} + + + ); +}; From 87a6b302f016171988fe8f91ac3187bd1f2764ec Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 7 Jul 2026 14:52:47 +0100 Subject: [PATCH 3/8] Review edits --- .../src/components/AudioPlayer.tsx | 52 ------------------ .../AudioPlayer/DecideAudioPlayer.tsx | 55 +++++++++++++++++++ ...stories.tsx => StandardLayout.stories.tsx} | 50 ++++++++--------- 3 files changed, 80 insertions(+), 77 deletions(-) delete mode 100644 dotcom-rendering/src/components/AudioPlayer.tsx create mode 100644 dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx rename dotcom-rendering/src/layouts/{AudioLayout.stories.tsx => StandardLayout.stories.tsx} (50%) diff --git a/dotcom-rendering/src/components/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer.tsx deleted file mode 100644 index ddb489b8f96..00000000000 --- a/dotcom-rendering/src/components/AudioPlayer.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { css } from '@emotion/react'; -import { space } from '@guardian/source/foundations'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; -import { palette } from '../palette'; -import { AppsAudioPlayer } from './AppsAudioPlayer.island'; -import { AudioPlayerWrapper } from './AudioPlayerWrapper.island'; -import { formatAudioDuration } from './ListenToArticle.island'; - -export const AudioPlayer = ({ - audioData, - isSensitive, - isAcastEnabled, - isApps, -}: { - audioData: { - audioDownloadUrl: string; - durationSeconds?: number; - mediaId: string; - }; - isSensitive: boolean; - isAcastEnabled: boolean; - isApps: boolean; -}) => { - return ( - <> - {isApps ? ( - - ) : ( - - )} - - - ); -}; diff --git a/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx new file mode 100644 index 00000000000..4f202cce2f2 --- /dev/null +++ b/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx @@ -0,0 +1,55 @@ +import { css } from '@emotion/react'; +import { space } from '@guardian/source/foundations'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; +import { palette } from '../../palette'; +import { AppsAudioPlayer } from '../AppsAudioPlayer.island'; +import { AudioPlayerWrapper } from '../AudioPlayerWrapper.island'; +import { Island } from '../Island'; +import { formatAudioDuration } from '../ListenToArticle.island'; + +export const DecideAudioPlayer = ({ + audioData, + isSensitive, + isAcastEnabled, + isApps, +}: { + audioData: { + audioDownloadUrl: string; + durationSeconds?: number; + mediaId: string; + }; + isSensitive: boolean; + isAcastEnabled: boolean; + isApps: boolean; +}) => { + return ( + <> + + {isApps ? ( + + ) : ( + + )} + + + + ); +}; diff --git a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx similarity index 50% rename from dotcom-rendering/src/layouts/AudioLayout.stories.tsx rename to dotcom-rendering/src/layouts/StandardLayout.stories.tsx index 9b13f7271c8..f4d94df458f 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.stories.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx @@ -8,7 +8,7 @@ import { enhanceArticleType } from '../types/article'; import { StandardLayout } from './StandardLayout'; const meta = { - title: 'Layouts/Audio', + title: 'Layouts/Standard', component: StandardLayout, } satisfies Meta; @@ -16,30 +16,30 @@ export default meta; type Story = StoryObj; -const appsArticle = enhanceArticleType(AudioFixture, 'Apps'); +const appsAudioArticle = enhanceArticleType(AudioFixture, 'Apps'); -if (appsArticle.design !== ArticleDesign.Audio) { +if (appsAudioArticle.design !== ArticleDesign.Audio) { throw new Error( - `Expected ArticleDesign.Audio, got: ${String(appsArticle.design)}`, + `Expected ArticleDesign.Audio, got: ${String(appsAudioArticle.design)}`, ); } -export const Apps: Story = { +export const AppsAudio: Story = { args: { renderingTarget: 'Apps', - article: appsArticle.frontendData, + article: appsAudioArticle.frontendData, format: { - design: appsArticle.design, - display: appsArticle.display, - theme: appsArticle.theme, + design: appsAudioArticle.design, + display: appsAudioArticle.display, + theme: appsAudioArticle.theme, }, }, parameters: { formats: [ { - design: appsArticle.design, - display: appsArticle.display, - theme: appsArticle.theme, + design: appsAudioArticle.design, + display: appsAudioArticle.display, + theme: appsAudioArticle.theme, }, ], config: { @@ -54,34 +54,34 @@ export const Apps: Story = { }, }; -const webArticle = enhanceArticleType(AudioFixture, 'Web'); +const webAudioArticle = enhanceArticleType(AudioFixture, 'Web'); -if (webArticle.design !== ArticleDesign.Audio) { +if (webAudioArticle.design !== ArticleDesign.Audio) { throw new Error( - `Expected ArticleDesign.Audio, got: ${String(webArticle.design)}`, + `Expected ArticleDesign.Audio, got: ${String(webAudioArticle.design)}`, ); } -export const Web: Story = { +export const WebAudio: Story = { args: { renderingTarget: 'Web', NAV: { - ...extractNAV(webArticle.frontendData.nav), - selectedPillar: getCurrentPillar(webArticle.frontendData), + ...extractNAV(webAudioArticle.frontendData.nav), + selectedPillar: getCurrentPillar(webAudioArticle.frontendData), }, - article: webArticle.frontendData, + article: webAudioArticle.frontendData, format: { - design: webArticle.design, - display: webArticle.display, - theme: webArticle.theme, + design: webAudioArticle.design, + display: webAudioArticle.display, + theme: webAudioArticle.theme, }, }, parameters: { formats: [ { - design: webArticle.design, - display: webArticle.display, - theme: webArticle.theme, + design: webAudioArticle.design, + display: webAudioArticle.display, + theme: webAudioArticle.theme, }, ], chromatic: { From b016ffcdacdd3f8381dab23fddfe487909786fae Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 7 Jul 2026 15:34:27 +0100 Subject: [PATCH 4/8] Tidy up audio player components --- .../AudioPlayer/DecideAudioPlayer.tsx | 55 ------------------- 1 file changed, 55 deletions(-) delete mode 100644 dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx diff --git a/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx deleted file mode 100644 index 4f202cce2f2..00000000000 --- a/dotcom-rendering/src/components/AudioPlayer/DecideAudioPlayer.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { css } from '@emotion/react'; -import { space } from '@guardian/source/foundations'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; -import { palette } from '../../palette'; -import { AppsAudioPlayer } from '../AppsAudioPlayer.island'; -import { AudioPlayerWrapper } from '../AudioPlayerWrapper.island'; -import { Island } from '../Island'; -import { formatAudioDuration } from '../ListenToArticle.island'; - -export const DecideAudioPlayer = ({ - audioData, - isSensitive, - isAcastEnabled, - isApps, -}: { - audioData: { - audioDownloadUrl: string; - durationSeconds?: number; - mediaId: string; - }; - isSensitive: boolean; - isAcastEnabled: boolean; - isApps: boolean; -}) => { - return ( - <> - - {isApps ? ( - - ) : ( - - )} - - - - ); -}; From 50314e711457adfac32dd1c9c9eb26fa0a6c9598 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 24 Jul 2026 12:41:42 +0100 Subject: [PATCH 5/8] Move AudioPlayer inside MainMedia --- dotcom-rendering/src/components/MainMedia.tsx | 15 +++++- .../src/layouts/StandardLayoutArticleGrid.tsx | 52 +++++++------------ 2 files changed, 34 insertions(+), 33 deletions(-) diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index 871c4606715..dec18decb35 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/dotcom-rendering/src/components/MainMedia.tsx @@ -5,11 +5,13 @@ import { ArticleDisplay, type ArticleFormat, } from '../lib/articleFormat'; +import { getAudioData } from '../lib/audio-data'; import type { EditionId } from '../lib/edition'; import { getZIndex } from '../lib/getZIndex'; import { RenderArticleElement } from '../lib/renderElement'; import type { Switches } from '../types/config'; import type { FEElement } from '../types/content'; +import { AudioPlayer } from './AudioPlayer/AudioPlayer'; const mainMedia = css` height: 100%; @@ -95,6 +97,7 @@ type Props = { shouldHideAds: boolean; contentType?: string; contentLayout?: string; + isApps?: boolean; }; export const MainMedia = ({ @@ -112,8 +115,18 @@ export const MainMedia = ({ shouldHideAds, contentType, contentLayout, + isApps = false, }: Props) => { - return ( + const audioData = getAudioData(elements); + + return format.design === ArticleDesign.Audio && audioData ? ( + + ) : (
{elements.map((element, index) => ( - {format.design === ArticleDesign.Audio && audioData ? ( - - ) : ( - - )} + From 59847b922a6f2e88ec4652933df9b3abf981625e Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 24 Jul 2026 16:16:51 +0100 Subject: [PATCH 6/8] Make `isApps` required prop for MainMedia --- dotcom-rendering/src/components/MainMedia.tsx | 4 ++-- dotcom-rendering/src/layouts/CommentLayout.tsx | 1 + dotcom-rendering/src/layouts/HostedArticleLayout.tsx | 1 + dotcom-rendering/src/layouts/HostedVideoLayout.tsx | 1 + dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 1 + dotcom-rendering/src/layouts/InteractiveLayout.tsx | 1 + dotcom-rendering/src/layouts/LiveLayout.tsx | 1 + dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx | 1 + dotcom-rendering/src/layouts/PictureLayout.tsx | 1 + 9 files changed, 10 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index dec18decb35..8b0ac88363b 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/dotcom-rendering/src/components/MainMedia.tsx @@ -97,7 +97,7 @@ type Props = { shouldHideAds: boolean; contentType?: string; contentLayout?: string; - isApps?: boolean; + isApps: boolean; }; export const MainMedia = ({ @@ -115,7 +115,7 @@ export const MainMedia = ({ shouldHideAds, contentType, contentLayout, - isApps = false, + isApps, }: Props) => { const audioData = getAudioData(elements); diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 1a92416e027..cd70eb909e0 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -380,6 +380,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} + isApps={isApps} />
diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx index 35fcc51792a..be86237785f 100644 --- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx @@ -237,6 +237,7 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => { hideCaption={true} shouldHideAds={true} contentType={frontendData.contentType} + isApps={renderingTarget === 'Apps'} />
diff --git a/dotcom-rendering/src/layouts/HostedVideoLayout.tsx b/dotcom-rendering/src/layouts/HostedVideoLayout.tsx index 30373eb9397..75ae500b0d7 100644 --- a/dotcom-rendering/src/layouts/HostedVideoLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedVideoLayout.tsx @@ -222,6 +222,7 @@ export const HostedVideoLayout = (props: WebProps | AppProps) => { hideCaption={true} shouldHideAds={true} contentType={frontendData.contentType} + isApps={renderingTarget === 'Apps'} /> diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index 03779fc4c3a..b84ba59aa0e 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -378,6 +378,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} + isApps={isApps} /> {mainMedia && ( diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 017ff77e788..350406bddfc 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -341,6 +341,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} + isApps={isApps} /> diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx index 7e43fbfd72f..749b4af4031 100644 --- a/dotcom-rendering/src/layouts/LiveLayout.tsx +++ b/dotcom-rendering/src/layouts/LiveLayout.tsx @@ -604,6 +604,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => { article.shouldHideAds } contentLayout="LiveblogLayout" + isApps={isApps} /> diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx index 0642d8cada4..50fd037f3e9 100644 --- a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx +++ b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx @@ -422,6 +422,7 @@ export const NewsletterSignupLayout = (props: WebProps | AppsProps) => { hideCaption={true} editionId={article.editionId} shouldHideAds={article.shouldHideAds} + isApps={renderingTarget === 'Apps'} /> diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx index f4e3f55728c..7077d096779 100644 --- a/dotcom-rendering/src/layouts/PictureLayout.tsx +++ b/dotcom-rendering/src/layouts/PictureLayout.tsx @@ -437,6 +437,7 @@ export const PictureLayout = (props: WebProps | AppsProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} + isApps={isApps} /> From 40da4edaf5d629685ad76cdb9c748da5a3954013 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 24 Jul 2026 19:14:07 +0100 Subject: [PATCH 7/8] Have `renderElement` handle `AudioPlayer` --- dotcom-rendering/src/components/MainMedia.tsx | 15 +-------------- dotcom-rendering/src/layouts/CommentLayout.tsx | 1 - .../src/layouts/HostedArticleLayout.tsx | 1 - .../src/layouts/HostedVideoLayout.tsx | 1 - dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 1 - .../src/layouts/InteractiveLayout.tsx | 1 - dotcom-rendering/src/layouts/LiveLayout.tsx | 1 - .../src/layouts/NewsletterSignupLayout.tsx | 1 - dotcom-rendering/src/layouts/PictureLayout.tsx | 1 - .../src/layouts/StandardLayoutArticleGrid.tsx | 1 - 10 files changed, 1 insertion(+), 23 deletions(-) diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index 8b0ac88363b..871c4606715 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/dotcom-rendering/src/components/MainMedia.tsx @@ -5,13 +5,11 @@ import { ArticleDisplay, type ArticleFormat, } from '../lib/articleFormat'; -import { getAudioData } from '../lib/audio-data'; import type { EditionId } from '../lib/edition'; import { getZIndex } from '../lib/getZIndex'; import { RenderArticleElement } from '../lib/renderElement'; import type { Switches } from '../types/config'; import type { FEElement } from '../types/content'; -import { AudioPlayer } from './AudioPlayer/AudioPlayer'; const mainMedia = css` height: 100%; @@ -97,7 +95,6 @@ type Props = { shouldHideAds: boolean; contentType?: string; contentLayout?: string; - isApps: boolean; }; export const MainMedia = ({ @@ -115,18 +112,8 @@ export const MainMedia = ({ shouldHideAds, contentType, contentLayout, - isApps, }: Props) => { - const audioData = getAudioData(elements); - - return format.design === ArticleDesign.Audio && audioData ? ( - - ) : ( + return (
{elements.map((element, index) => ( { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} - isApps={isApps} />
diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx index be86237785f..35fcc51792a 100644 --- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx @@ -237,7 +237,6 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => { hideCaption={true} shouldHideAds={true} contentType={frontendData.contentType} - isApps={renderingTarget === 'Apps'} /> diff --git a/dotcom-rendering/src/layouts/HostedVideoLayout.tsx b/dotcom-rendering/src/layouts/HostedVideoLayout.tsx index 75ae500b0d7..30373eb9397 100644 --- a/dotcom-rendering/src/layouts/HostedVideoLayout.tsx +++ b/dotcom-rendering/src/layouts/HostedVideoLayout.tsx @@ -222,7 +222,6 @@ export const HostedVideoLayout = (props: WebProps | AppProps) => { hideCaption={true} shouldHideAds={true} contentType={frontendData.contentType} - isApps={renderingTarget === 'Apps'} /> diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index b84ba59aa0e..03779fc4c3a 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -378,7 +378,6 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} - isApps={isApps} /> {mainMedia && ( diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 350406bddfc..017ff77e788 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -341,7 +341,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} - isApps={isApps} /> diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx index 749b4af4031..7e43fbfd72f 100644 --- a/dotcom-rendering/src/layouts/LiveLayout.tsx +++ b/dotcom-rendering/src/layouts/LiveLayout.tsx @@ -604,7 +604,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => { article.shouldHideAds } contentLayout="LiveblogLayout" - isApps={isApps} /> diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx index 50fd037f3e9..0642d8cada4 100644 --- a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx +++ b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx @@ -422,7 +422,6 @@ export const NewsletterSignupLayout = (props: WebProps | AppsProps) => { hideCaption={true} editionId={article.editionId} shouldHideAds={article.shouldHideAds} - isApps={renderingTarget === 'Apps'} /> diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx index 7077d096779..f4e3f55728c 100644 --- a/dotcom-rendering/src/layouts/PictureLayout.tsx +++ b/dotcom-rendering/src/layouts/PictureLayout.tsx @@ -437,7 +437,6 @@ export const PictureLayout = (props: WebProps | AppsProps) => { isSensitive={article.config.isSensitive} editionId={article.editionId} shouldHideAds={article.shouldHideAds} - isApps={isApps} /> diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index f08b69cc9b9..84fb7928e6d 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -157,7 +157,6 @@ export const StandardLayoutArticleGrid = ({ shouldHideAds={article.shouldHideAds} contentType={article.contentType} contentLayout={`${ArticleDisplay[format.display]}Layout`} - isApps={isApps} /> From ad4d48690d5cdc7377afee89ab70ef52d07ea0d7 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 28 Jul 2026 14:03:11 +0100 Subject: [PATCH 8/8] Remove redundant ArticleDesign.Audio switch case --- dotcom-rendering/src/layouts/DecideLayout.tsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 182983ed48b..77803138313 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -193,15 +193,6 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { renderingTarget={renderingTarget} /> ); - case ArticleDesign.Audio: - return ( - - ); default: return ( { serverTime={serverTime} /> ); - case ArticleDesign.Audio: - return ( - - ); case ArticleDesign.Crossword: return (