diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts b/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts index 76743078418..656b3477827 100644 --- a/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts +++ b/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts @@ -32,6 +32,8 @@ export const Audio: FEArticle = { source: 'The Guardian', }, url: 'https://audio.guim.co.uk/2026/02/27-42462-gdn.alr.060326.NA_GAVIN_FRANCIS_MENTALILLNESS.mp3', + urlWithAds: + 'https://flex.acast.com/audio.guim.co.uk/2026/02/27-42462-gdn.alr.060326.NA_GAVIN_FRANCIS_MENTALILLNESS.mp3', mimeType: 'audio/mpeg', }, ], diff --git a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx index 958a5b7f88e..5ed64dcbd48 100644 --- a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx +++ b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx @@ -185,18 +185,11 @@ const PlaySVG = () => ( ); -const buildUrl = (basicUrl: string, shouldUseAcast?: boolean) => { - return shouldUseAcast - ? basicUrl.replace('https://', 'https://flex.acast.com/') - : basicUrl; -}; - type Props = { id: string; trackUrl: string; kicker: string; title?: string; - shouldUseAcast?: boolean; duration: number; }; @@ -205,7 +198,6 @@ export const AudioAtom = ({ trackUrl, kicker, title, - shouldUseAcast, duration, }: Props): JSX.Element => { const audioEl = useRef(null); @@ -214,10 +206,6 @@ export const AudioAtom = ({ // update current time and progress bar position const [currentTime, setCurrentTime] = useState(0); const [percentPlayed, setPercentPlayed] = useState(0); - // url - const [urlToUse, setUrlToUse] = useState( - buildUrl(trackUrl, shouldUseAcast), - ); useEffect(() => { const audioElCurrent = audioEl.current; @@ -245,7 +233,7 @@ export const AudioAtom = ({ updateCurrentTimeAndPosition, ) : undefined; - }, [audioEl, setCurrentTime, shouldUseAcast]); + }, [audioEl, setCurrentTime]); // update duration time const [durationTime, setDurationTime] = useState(duration); @@ -301,11 +289,6 @@ export const AudioAtom = ({ return () => document.removeEventListener('keydown', keyListener); }, [audioEl, progressBarEl]); - // If Acast is enabled, replace the default url with an ad enabled one - useEffect(() => { - setUrlToUse(buildUrl(trackUrl, shouldUseAcast)); - }, [shouldUseAcast, trackUrl]); - const playAudio = () => { setIsPlaying(true); void audioEl.current?.play(); @@ -330,7 +313,7 @@ export const AudioAtom = ({ {/* eslint-disable-next-line jsx-a11y/media-has-caption -- TODO */}
diff --git a/dotcom-rendering/src/components/AudioAtomWrapper.island.tsx b/dotcom-rendering/src/components/AudioAtomWrapper.island.tsx index e8d531610f4..20fe0bd4e1b 100644 --- a/dotcom-rendering/src/components/AudioAtomWrapper.island.tsx +++ b/dotcom-rendering/src/components/AudioAtomWrapper.island.tsx @@ -5,6 +5,7 @@ import { AudioAtom } from './AudioAtom/AudioAtom'; type Props = { id: string; trackUrl: string; + trackUrlWithAds: string; kicker: string; title?: string | undefined; duration: number; @@ -26,6 +27,7 @@ type Props = { export const AudioAtomWrapper = ({ id, trackUrl, + trackUrlWithAds, kicker, title, duration, @@ -37,6 +39,7 @@ export const AudioAtomWrapper = ({ // * ACast * // ***************** const [shouldUseAcast, setShouldUseAcast] = useState(false); + useEffect(() => { onConsentChange((state) => { // Should we use ad enabled audio? If so, then set the shouldUseAcast @@ -57,11 +60,10 @@ export const AudioAtomWrapper = ({ return ( ); }; diff --git a/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx b/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx index 4f85515b7f1..f4bac6e0e42 100644 --- a/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx +++ b/dotcom-rendering/src/components/AudioPlayerWrapper.island.tsx @@ -6,6 +6,7 @@ type Props = { mediaId: string; duration?: number; src: string; + srcWithAds: string; contentIsNotSensitive: boolean; isAcastEnabled: boolean; }; @@ -23,6 +24,7 @@ type Props = { export const AudioPlayerWrapper = ({ duration, src, + srcWithAds, mediaId, contentIsNotSensitive, isAcastEnabled, @@ -41,13 +43,11 @@ export const AudioPlayerWrapper = ({ const consentForAcast = getConsentFor('acast', consentState); if (consentForAcast) { - setFinalSrc( - src.replace('https://', 'https://flex.acast.com/'), - ); + setFinalSrc(srcWithAds); } }); } - }, [src, contentIsNotSensitive, isAcastEnabled]); + }, [src, srcWithAds, contentIsNotSensitive, isAcastEnabled]); return ; }; diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json index c3d1e9c404b..f2ede600760 100644 --- a/dotcom-rendering/src/frontend/schemas/feArticle.json +++ b/dotcom-rendering/src/frontend/schemas/feArticle.json @@ -938,6 +938,9 @@ "trackUrl": { "type": "string" }, + "trackUrlWithAds": { + "type": "string" + }, "duration": { "type": "number" }, @@ -955,7 +958,8 @@ "elementId", "id", "kicker", - "trackUrl" + "trackUrl", + "trackUrlWithAds" ] }, "RoleType": { @@ -1002,6 +1006,9 @@ "url": { "type": "string" }, + "urlWithAds": { + "type": "string" + }, "mimeType": { "type": "string" }, @@ -1024,7 +1031,8 @@ } }, "required": [ - "url" + "url", + "urlWithAds" ] }, "BlockquoteBlockElement": { diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx index d3b68d8c2ba..5225f3a32ae 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ b/dotcom-rendering/src/layouts/AudioLayout.tsx @@ -335,6 +335,9 @@ export const AudioLayout = (props: WebProps | AppProps) => { !!article.config.switches.acast } src={audioData.audioDownloadUrl} + srcWithAds={ + audioData.audioDownloadUrlWithAds + } mediaId={audioData.mediaId} /> diff --git a/dotcom-rendering/src/lib/audio-data.ts b/dotcom-rendering/src/lib/audio-data.ts index 3527de50ea1..22a07ccfeb3 100644 --- a/dotcom-rendering/src/lib/audio-data.ts +++ b/dotcom-rendering/src/lib/audio-data.ts @@ -3,7 +3,12 @@ import type { FEElement } from '../types/content'; export const getAudioData = ( mainMediaElements: FEElement[] | undefined, ): - | { audioDownloadUrl: string; mediaId: string; durationSeconds?: number } + | { + audioDownloadUrl: string; + audioDownloadUrlWithAds: string; + mediaId: string; + durationSeconds?: number; + } | undefined => { const audioBlockElement = mainMediaElements?.find( (element) => @@ -17,6 +22,7 @@ export const getAudioData = ( const total = (isNaN(mins) ? 0 : mins) * 60 + (isNaN(secs) ? 0 : secs); return { audioDownloadUrl: audioBlockElement.assets[0].url, + audioDownloadUrlWithAds: audioBlockElement.assets[0].urlWithAds, mediaId: audioBlockElement.id, durationSeconds: total > 0 ? total : undefined, }; diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index 2277dea5826..1eb19ce3907 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -189,6 +189,7 @@ export const renderElement = ({