Add looping videos to articles

dotcom-rendering/src/components/Caption.tsx

@@ -315,7 +315,7 @@ export const Caption = ({
 			]}
 			data-spacefinder-role="inline"
 		>
-			{mediaType === 'YoutubeVideo' ? (
+			{mediaType === 'YoutubeVideo' || mediaType === 'SelfHostedVideo' ? (
 				<VideoIcon format={format} />
 			) : (
 				<CameraIcon format={format} />

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

@@ -0,0 +1,54 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import { convertAssetsToVideoSources, getSubtitleAsset } from '../lib/video';
+import type { MediaAtomBlockElement } from '../types/content';
+import { Caption } from './Caption';
+import { SelfHostedVideo } from './SelfHostedVideo.importable';
+
+type LoopVideoInArticleProps = {
+	element: MediaAtomBlockElement;
+	format: ArticleFormat;
+	isMainMedia: boolean;
+};
+
+export const LoopVideoInArticle = ({
+	element,
+	format,
+	isMainMedia,
+}: LoopVideoInArticleProps) => {
+	const posterImageUrl = element.posterImage?.[0]?.url;
+	const caption = element.title;
+
+	if (!posterImageUrl) {
+		return null;
+	}
+
+	return (
+		<>
+			<SelfHostedVideo
+				atomId={element.id}
+				fallbackImage={posterImageUrl}
+				fallbackImageAlt={caption}
+				fallbackImageAspectRatio="5:4"
+				fallbackImageLoading="lazy"
+				fallbackImageSize="small"
+				height={400}
+				linkTo="Article-embed-MediaAtomBlockElement"
+				posterImage={posterImageUrl}
+				sources={convertAssetsToVideoSources(element.assets)}
+				subtitleSize="medium"
+				subtitleSource={getSubtitleAsset(element.assets)}
+				videoStyle="Loop"
+				uniqueId={element.id}
+				width={500}
+			/>
+			{!!caption && (
+				<Caption
+					captionText={caption}
+					format={format}
+					isMainMedia={isMainMedia}
+					mediaType="SelfHostedVideo"
+				/>
+			)}
+		</>
+	);
+};

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

@@ -87,8 +87,8 @@ const dispatchOphanAttentionEvent = (
 	document.dispatchEvent(event);
 };
 
-const getOptimisedPosterImage = (mainImage: string): string => {
-	const resolution = window.devicePixelRatio >= 2 ? 'high' : 'low';
+const getOptimisedPosterImage = (mainImage: string, dpr: number): string => {
+	const resolution = dpr >= 2 ? 'high' : 'low';
 
 	return generateImageURL({
 		mainImage,
@@ -190,6 +190,8 @@ export const SelfHostedVideo = ({
 	const [hasBeenPlayed, setHasBeenPlayed] = useState(false);
 	const [hasTrackedPlay, setHasTrackedPlay] = useState(false);
 
+	const [devicePixelRatio, setDevicePixelRatio] = useState(1);
+
 	const VISIBILITY_THRESHOLD = 0.5;
 
 	/**
@@ -365,6 +367,8 @@ export const SelfHostedVideo = ({
 			}
 		});
 
+		setDevicePixelRatio(window.devicePixelRatio);
+
 		return () => {
 			document.removeEventListener(
 				customSelfHostedVideoPlayAudioEventName,
@@ -673,7 +677,7 @@ export const SelfHostedVideo = ({
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
 	const optimisedPosterImage = showPosterImage
-		? getOptimisedPosterImage(posterImage)
+		? getOptimisedPosterImage(posterImage, devicePixelRatio)
 		: undefined;
 
 	return (

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -2698,6 +2698,9 @@
                 },
                 "duration": {
                     "type": "number"
+                },
+                "videoPlayerFormat": {
+                    "$ref": "#/definitions/VideoPlayerFormat"
                 }
             },
             "required": [
@@ -2707,6 +2710,14 @@
                 "id"
             ]
         },
+        "VideoPlayerFormat": {
+            "enum": [
+                "Cinemagraph",
+                "Default",
+                "Loop"
+            ],
+            "type": "string"
+        },
         "MiniProfilesBlockElement": {
             "type": "object",
             "properties": {
@@ -5510,14 +5521,6 @@
                 }
             ]
         },
-        "VideoPlayerFormat": {
-            "enum": [
-                "Cinemagraph",
-                "Default",
-                "Loop"
-            ],
-            "type": "string"
-        },
         "Audio": {
             "allOf": [
                 {

dotcom-rendering/src/lib/renderElement.tsx

@@ -29,6 +29,7 @@ import { Island } from '../components/Island';
 import { ItemLinkBlockElement } from '../components/ItemLinkBlockElement';
 import { KeyTakeaways } from '../components/KeyTakeaways';
 import { KnowledgeQuizAtom } from '../components/KnowledgeQuizAtom.importable';
+import { LoopVideoInArticle } from '../components/LoopVideoInArticle.importable';
 import { MainMediaEmbedBlockComponent } from '../components/MainMediaEmbedBlockComponent';
 import { MapEmbedBlockComponent } from '../components/MapEmbedBlockComponent.importable';
 import { MiniProfiles } from '../components/MiniProfiles';
@@ -490,15 +491,46 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.MediaAtomBlockElement':
-			return (
-				<VideoAtom
-					format={format}
-					assets={element.assets}
-					poster={element.posterImage?.[0]?.url}
-					caption={element.title}
-					isMainMedia={isMainMedia}
-				/>
-			);
+			/*
+				- MediaAtomBlockElement is used for self-hosted videos
+				- Historically, these videos have been self-hosted for legal or sensitive reasons
+					- These videos play in the `VideoAtom` component
+				- Looping videos, introduced in July 2025, are also self-hosted
+					- Thus they are delivered as a MediaAtomBlockElement
+					- However they need to display in a different video player
+				- We need to differentiate between the two forms of video
+					- We can do this by interrogating the atom's metadata, which includes the new attribute `videoPlayerFormat`
+
+				- Note: we'll probably extend this functionality to handle new 'Cinemagraph' videos
+					- These may use the looping video, or yet another new, video player
+					- But they will still be Media Atoms
+			*/
+			if (element.videoPlayerFormat === 'Loop') {
+				return (
+					<>
+						<Island
+							priority="critical"
+							defer={{ until: 'visible' }}
+						>
+							<LoopVideoInArticle
+								element={element}
+								format={format}
+								isMainMedia={isMainMedia}
+							/>
+						</Island>
+					</>
+				);
+			} else {
+				return (
+					<VideoAtom
+						format={format}
+						assets={element.assets}
+						poster={element.posterImage?.[0]?.url}
+						caption={element.title}
+						isMainMedia={isMainMedia}
+					/>
+				);
+			}
 		case 'model.dotcomrendering.pageElements.MiniProfilesBlockElement':
 			return (
 				<MiniProfiles

dotcom-rendering/src/lib/video.ts

@@ -1,3 +1,5 @@
+import type { VideoAssets } from '../types/content';
+
 export type CustomPlayEventDetail = { uniqueId: string };
 
 export const customSelfHostedVideoPlayAudioEventName =
@@ -22,3 +24,28 @@ export const supportedVideoFileTypes = [
 ] as const;
 
 export type SupportedVideoFileType = (typeof supportedVideoFileTypes)[number];
+
+const isSupportedMimeType = (
+	mime: string | undefined,
+): mime is SupportedVideoFileType => {
+	if (!mime) return false;
+
+	return (supportedVideoFileTypes as readonly string[]).includes(mime);
+};
+
+/**
+ * The looping video player types its `sources` attribute as `Sources`.
+ * However, looping videos in articles are delivered as media atoms, which type
+ * their `assets` as `VideoAssets`. Which means that we need to alter the shape
+ * of the incoming `assets` to match the requirements of the outgoing `sources`.
+ */
+export const convertAssetsToVideoSources = (assets: VideoAssets[]): Source[] =>
+	assets
+		.filter((asset) => isSupportedMimeType(asset.mimeType))
+		.map((asset) => ({
+			src: asset.url,
+			mimeType: asset.mimeType as Source['mimeType'],
+		}));
+
+export const getSubtitleAsset = (assets: VideoAssets[]): string | undefined =>
+	assets.find((asset) => asset.mimeType === 'text/vtt')?.url;

dotcom-rendering/src/model/block-schema.json

@@ -2186,6 +2186,9 @@
                 },
                 "duration": {
                     "type": "number"
+                },
+                "videoPlayerFormat": {
+                    "$ref": "#/definitions/VideoPlayerFormat"
                 }
             },
             "required": [
@@ -2195,6 +2198,14 @@
                 "id"
             ]
         },
+        "VideoPlayerFormat": {
+            "enum": [
+                "Cinemagraph",
+                "Default",
+                "Loop"
+            ],
+            "type": "string"
+        },
         "MiniProfilesBlockElement": {
             "type": "object",
             "properties": {

dotcom-rendering/src/types/content.ts

@@ -1,5 +1,6 @@
 import { type CrosswordProps } from '@guardian/react-crossword';
 import type { ArticleFormat } from '../lib/articleFormat';
+import type { VideoPlayerFormat } from './mainMedia';
 
 export type StarRating = 0 | 1 | 2 | 3 | 4 | 5;
 
@@ -423,7 +424,7 @@ export interface MapBlockElement extends ThirdPartyEmbeddedContent {
 	role?: RoleType;
 }
 
-interface MediaAtomBlockElement {
+export interface MediaAtomBlockElement {
 	_type: 'model.dotcomrendering.pageElements.MediaAtomBlockElement';
 	elementId: string;
 	id: string;
@@ -434,6 +435,7 @@ interface MediaAtomBlockElement {
 	}[];
 	title?: string;
 	duration?: number;
+	videoPlayerFormat?: VideoPlayerFormat;
 }
 
 export interface MultiImageBlockElement {
@@ -939,7 +941,7 @@ export interface Image {
 	url: string;
 }
 
-interface VideoAssets {
+export interface VideoAssets {
 	url: string;
 	mimeType?: string;
 	fields?: {