Merge branch 'main' into jm/feat-sign-in-gate-v2

juabara · web-flow · commit d39df4bb50e1 · 2025-09-26T11:41:49.000+01:00
diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
@@ -613,8 +613,12 @@ export const loopVideoCard: DCRFrontCard = {
 	mainMedia: {
 		type: 'LoopVideo',
 		atomId: '3cb22b60-2c3f-48d6-8bce-38c956907cce',
-		videoId:
-			'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+		sources: [
+			{
+				mimeType: 'video/mp4',
+				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+			},
+		],
 		duration: 0,
 		width: 500,
 		height: 400,
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -851,7 +851,7 @@ export const Card = ({
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideo
-									src={media.mainMedia.videoId}
+									sources={media.mainMedia.sources}
 									atomId={media.mainMedia.atomId}
 									uniqueId={uniqueId}
 									height={media.mainMedia.height}
diff --git a/dotcom-rendering/src/components/LoopVideo.importable.tsx b/dotcom-rendering/src/components/LoopVideo.importable.tsx
@@ -11,15 +11,15 @@ import { getZIndex } from '../lib/getZIndex';
 import { generateImageURL } from '../lib/image';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
-import type { CustomPlayEventDetail } from '../lib/video';
+import type { CustomPlayEventDetail, Source } from '../lib/video';
 import {
 	customLoopPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
-import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
+import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const videoContainerStyles = css`
@@ -105,7 +105,7 @@ const doesVideoHaveAudio = (video: HTMLVideoElement): boolean => {
 };
 
 type Props = {
-	src: string;
+	sources: Source[];
 	atomId: string;
 	uniqueId: string;
 	height: number;
@@ -120,7 +120,7 @@ type Props = {
 };
 
 export const LoopVideo = ({
-	src,
+	sources,
 	atomId,
 	uniqueId,
 	height,
@@ -164,10 +164,11 @@ export const LoopVideo = ({
 	});
 
 	const playVideo = useCallback(async () => {
-		if (!vidRef.current) return;
+		const video = vidRef.current;
+		if (!video) return;
 
 		/** https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay#example_handling_play_failures */
-		const startPlayPromise = vidRef.current.play();
+		const startPlayPromise = video.play();
 
 		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- In earlier versions of the HTML specification, play() didn't return a value
 		if (startPlayPromise !== undefined) {
@@ -179,12 +180,12 @@ export const LoopVideo = ({
 				})
 				.catch((error: Error) => {
 					// Autoplay failed
-					logAndReportError(src, error);
+					logAndReportError(video.src, error);
 					setShowPosterImage(true);
 					setPlayerState('PAUSED_BY_BROWSER');
 				});
 		}
-	}, [src]);
+	}, []);
 
 	const pauseVideo = (
 		reason: Extract<
@@ -529,7 +530,9 @@ export const LoopVideo = ({
 	 * Sentry and log in the console.
 	 */
 	const onError = () => {
-		const message = `Loop video could not be played. source: ${src}`;
+		const message = `Loop video could not be played. source: ${
+			vidRef.current?.currentSrc ?? 'unknown'
+		}`;
 
 		window.guardian.modules.sentry.reportError(
 			new Error(message),
@@ -601,7 +604,7 @@ export const LoopVideo = ({
 			data-component="gu-video-loop"
 		>
 			<LoopVideoPlayer
-				src={src}
+				sources={sources}
 				atomId={atomId}
 				uniqueId={uniqueId}
 				width={width}
diff --git a/dotcom-rendering/src/components/LoopVideo.stories.tsx b/dotcom-rendering/src/components/LoopVideo.stories.tsx
@@ -22,7 +22,12 @@ type Story = StoryObj<typeof LoopVideo>;
 export const Default: Story = {
 	name: 'Default',
 	args: {
-		src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+		sources: [
+			{
+				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+				mimeType: 'video/mp4',
+			},
+		],
 		uniqueId: 'test-video-1',
 		atomId: 'test-atom-1',
 		height: 720,
@@ -33,11 +38,33 @@ export const Default: Story = {
 	},
 };
 
+export const WithM3U8File: Story = {
+	name: 'With M3U8 file',
+	args: {
+		...Default.args,
+		sources: [
+			{
+				src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
+				mimeType: 'application/x-mpegURL',
+			},
+			{
+				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+				mimeType: 'video/mp4',
+			},
+		],
+	},
+};
+
 export const Without5to4Ratio: Story = {
 	name: 'Without 5:4 aspect ratio',
 	args: {
 		...Default.args,
-		src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
+		sources: [
+			{
+				src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
+				mimeType: 'video/mp4',
+			},
+		],
 		height: 1080,
 		width: 1920,
 	},
diff --git a/dotcom-rendering/src/components/LoopVideoPlayer.tsx b/dotcom-rendering/src/components/LoopVideoPlayer.tsx
@@ -8,6 +8,7 @@ import type {
 	SyntheticEvent,
 } from 'react';
 import { forwardRef } from 'react';
+import type { Source } from '../lib/video';
 import { palette } from '../palette';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
 import { LoopVideoProgressBar } from './LoopVideoProgressBar';
@@ -74,7 +75,7 @@ export const PLAYER_STATES = [
 export type PlayerStates = (typeof PLAYER_STATES)[number];
 
 type Props = {
-	src: string;
+	sources: Source[];
 	atomId: string;
 	uniqueId: string;
 	width: number;
@@ -105,7 +106,7 @@ type Props = {
 export const LoopVideoPlayer = forwardRef(
 	(
 		{
-			src,
+			sources,
 			atomId,
 			uniqueId,
 			width,
@@ -170,9 +171,14 @@ export const LoopVideoPlayer = forwardRef(
 					onKeyDown={handleKeyDown}
 					onError={onError}
 				>
-					{/* Only mp4 is currently supported. Assumes the video file type is mp4. */}
-					{/* The start time is set to 1ms so that Safari will autoplay the video */}
-					<source src={`${src}#t=0.001`} type="video/mp4" />
+					{sources.map((source) => (
+						<source
+							key={source.mimeType}
+							/* The start time is set to 1ms so that Safari will autoplay the video */
+							src={`${source.src}#t=0.001`}
+							type={source.mimeType}
+						/>
+					))}
 					{FallbackImageComponent}
 				</video>
 				{ref && 'current' in ref && ref.current && isPlayable && (
@@ -207,7 +213,7 @@ export const LoopVideoPlayer = forwardRef(
 							>
 								<div
 									css={audioIconContainerStyles}
-									data-testId={`${
+									data-testid={`${
 										isMuted ? 'unmute' : 'mute'
 									}-icon`}
 								>
diff --git a/dotcom-rendering/src/components/LoopVideoProgressBar.tsx b/dotcom-rendering/src/components/LoopVideoProgressBar.tsx
@@ -45,7 +45,7 @@ export const LoopVideoProgressBar = ({
 
 	/**
 	 * We achieve a smooth progress bar by using CSS transitions. Given that
-	 * onTimeUpdate firesevery 250ms or so, this means that the time on the
+	 * onTimeUpdate fires every 250ms or so, this means that the time on the
 	 * progress bar is always about 0.25s behind and begins 0.25s late.
 	 * Therefore, when calculating the progress percentage, we take 0.25s off the duration.
 	 *
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -121,13 +121,13 @@ export const YoutubeBlockComponent = ({
 		// We need Video articles generated directly from Media Atom Maker
 		// to always show their poster (16:9) image, but in other cases
 		// use the override image (often supplied as 5:4 then cropped to 16:9)
-		if (contentType && contentType.toLowerCase() === 'video') {
+		if (contentType?.toLowerCase() === 'video') {
 			return posterImage;
 		}
 
 		// For Standard Articles with a Video atom for their main media
 		// we need to display the poster image
-		if (contentLayout && contentLayout.toLowerCase() === 'standardlayout') {
+		if (contentLayout?.toLowerCase() === 'standardlayout') {
 			return posterImage;
 		}
 
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -5288,8 +5288,23 @@
                         "atomId": {
                             "type": "string"
                         },
-                        "videoId": {
-                            "type": "string"
+                        "sources": {
+                            "type": "array",
+                            "items": {
+                                "type": "object",
+                                "properties": {
+                                    "src": {
+                                        "type": "string"
+                                    },
+                                    "mimeType": {
+                                        "$ref": "#/definitions/SupportedVideoFileType"
+                                    }
+                                },
+                                "required": [
+                                    "mimeType",
+                                    "src"
+                                ]
+                            }
                         },
                         "height": {
                             "type": "number"
@@ -5308,13 +5323,21 @@
                         "atomId",
                         "duration",
                         "height",
+                        "sources",
                         "type",
-                        "videoId",
                         "width"
                     ]
                 }
             ]
         },
+        "SupportedVideoFileType": {
+            "enum": [
+                "application/vnd.apple.mpegurl",
+                "application/x-mpegURL",
+                "video/mp4"
+            ],
+            "type": "string"
+        },
         "Audio": {
             "allOf": [
                 {
diff --git a/dotcom-rendering/src/frontend/schemas/feFront.json b/dotcom-rendering/src/frontend/schemas/feFront.json
@@ -3922,8 +3922,23 @@
                         "atomId": {
                             "type": "string"
                         },
-                        "videoId": {
-                            "type": "string"
+                        "sources": {
+                            "type": "array",
+                            "items": {
+                                "type": "object",
+                                "properties": {
+                                    "src": {
+                                        "type": "string"
+                                    },
+                                    "mimeType": {
+                                        "$ref": "#/definitions/SupportedVideoFileType"
+                                    }
+                                },
+                                "required": [
+                                    "mimeType",
+                                    "src"
+                                ]
+                            }
                         },
                         "height": {
                             "type": "number"
@@ -3942,13 +3957,21 @@
                         "atomId",
                         "duration",
                         "height",
+                        "sources",
                         "type",
-                        "videoId",
                         "width"
                     ]
                 }
             ]
         },
+        "SupportedVideoFileType": {
+            "enum": [
+                "application/vnd.apple.mpegurl",
+                "application/x-mpegURL",
+                "video/mp4"
+            ],
+            "type": "string"
+        },
         "Audio": {
             "allOf": [
                 {
diff --git a/dotcom-rendering/src/lib/video.ts b/dotcom-rendering/src/lib/video.ts
@@ -2,3 +2,19 @@ export type CustomPlayEventDetail = { uniqueId: string };
 
 export const customLoopPlayAudioEventName = 'looping-video:play-with-audio';
 export const customYoutubePlayEventName = 'youtube-video:play';
+
+export type Source = {
+	src: string;
+	mimeType: SupportedVideoFileType;
+};
+
+/**
+ * Order is important here - the browser will use the first type it supports.
+ */
+export const supportedVideoFileTypes = [
+	'application/x-mpegURL', // HLS format
+	'application/vnd.apple.mpegurl', // Alternative HLS format
+	'video/mp4', // MP4 format
+] as const;
+
+export type SupportedVideoFileType = (typeof supportedVideoFileTypes)[number];
diff --git a/dotcom-rendering/src/model/enhanceCards.test.ts b/dotcom-rendering/src/model/enhanceCards.test.ts
@@ -2,20 +2,20 @@ import type { FEMediaAsset, FEMediaAtom } from '../frontend/feFront';
 import { getActiveMediaAtom } from './enhanceCards';
 
 describe('Enhance Cards', () => {
-	it('filters out m3u8 assets until supported by DCR', () => {
+	it('prioritises m3u8 assets over MP4 assets', () => {
 		const videoReplace = true;
 		const assets: FEMediaAsset[] = [
 			{
-				id: 'https://guim-example.co.uk/atomID-1.m3u8',
+				id: 'https://guim-example.co.uk/atomID-1.mp4',
 				version: 1,
 				platform: 'Url',
-				mimeType: 'application/vnd.apple.mpegurl',
+				mimeType: 'video/mp4',
 			},
 			{
-				id: 'https://guim-example.co.uk/atomID-1.mp4',
+				id: 'https://guim-example.co.uk/atomID-1.m3u8',
 				version: 1,
 				platform: 'Url',
-				mimeType: 'video/mp4',
+				mimeType: 'application/x-mpegURL',
 			},
 		];
 		const mediaAtom: FEMediaAtom = {
@@ -39,7 +39,16 @@ describe('Enhance Cards', () => {
 			height: 400,
 			image: '',
 			type: 'LoopVideo',
-			videoId: 'https://guim-example.co.uk/atomID-1.mp4',
+			sources: [
+				{
+					mimeType: 'application/x-mpegURL',
+					src: 'https://guim-example.co.uk/atomID-1.m3u8',
+				},
+				{
+					mimeType: 'video/mp4',
+					src: 'https://guim-example.co.uk/atomID-1.mp4',
+				},
+			],
 			width: 500,
 		});
 	});
diff --git a/dotcom-rendering/src/model/enhanceCards.ts b/dotcom-rendering/src/model/enhanceCards.ts
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts

Original file line number	Diff line number	Diff line change
`@@ -851,7 +851,7 @@ export const Card = ({`
`851`	`851`	`defer={{ until: 'visible' }}`
`852`	`852`	`>`
`853`	`853`	`<LoopVideo`
`854`		`- src={media.mainMedia.videoId}`
	`854`	`+ sources={media.mainMedia.sources}`
`855`	`855`	`atomId={media.mainMedia.atomId}`
`856`	`856`	`uniqueId={uniqueId}`
`857`	`857`	`height={media.mainMedia.height}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export const LoopVideoProgressBar = ({`
`45`	`45`
`46`	`46`	`/**`
`47`	`47`	`* We achieve a smooth progress bar by using CSS transitions. Given that`
`48`		`- * onTimeUpdate firesevery 250ms or so, this means that the time on the`
	`48`	`+ * onTimeUpdate fires every 250ms or so, this means that the time on the`
`49`	`49`	`* progress bar is always about 0.25s behind and begins 0.25s late.`
`50`	`50`	`* Therefore, when calculating the progress percentage, we take 0.25s off the duration.`
`51`	`51`	`*`
Original file line number	Diff line number	Diff line change
`@@ -121,13 +121,13 @@ export const YoutubeBlockComponent = ({`
`121`	`121`	`// We need Video articles generated directly from Media Atom Maker`
`122`	`122`	`// to always show their poster (16:9) image, but in other cases`
`123`	`123`	`// use the override image (often supplied as 5:4 then cropped to 16:9)`
`124`		`- if (contentType && contentType.toLowerCase() === 'video') {`
	`124`	`+ if (contentType?.toLowerCase() === 'video') {`
`125`	`125`	`return posterImage;`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`// For Standard Articles with a Video atom for their main media`
`129`	`129`	`// we need to display the poster image`
`130`		`- if (contentLayout && contentLayout.toLowerCase() === 'standardlayout') {`
	`130`	`+ if (contentLayout?.toLowerCase() === 'standardlayout') {`
`131`	`131`	`return posterImage;`
`132`	`132`	`}`
`133`	`133`