Add support for Cinemagraphs in articles

Author: simonbyford

…ng/src/components/LoopVideoInArticle.tsx …/components/SelfHostedVideoInArticle.tsxdotcom-rendering/src/components/LoopVideoInArticle.tsx renamed to dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx dotcom-rendering/src/components/LoopVideoInArticle.tsx renamed to dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx

@@ -6,21 +6,24 @@ import {
 	getSubtitleAsset,
 } from '../lib/video';
 import type { MediaAtomBlockElement } from '../types/content';
+import type { VideoPlayerFormat } from '../types/mainMedia';
 import { Caption } from './Caption';
 import { Island } from './Island';
 import { SelfHostedVideo } from './SelfHostedVideo.importable';
 
-type LoopVideoInArticleProps = {
+type SelfHostedVideoInArticleProps = {
 	element: MediaAtomBlockElement;
 	format: ArticleFormat;
 	isMainMedia: boolean;
+	videoStyle: VideoPlayerFormat;
 };
 
-export const LoopVideoInArticle = ({
+export const SelfHostedVideoInArticle = ({
 	element,
 	format,
 	isMainMedia,
-}: LoopVideoInArticleProps) => {
+	videoStyle,
+}: SelfHostedVideoInArticleProps) => {
 	const posterImageUrl = element.posterImage?.[0]?.url;
 	const caption = element.title;
 	const firstVideoAsset = getFirstVideoAsset(element.assets);
@@ -59,7 +62,7 @@ export const LoopVideoInArticle = ({
 					sources={convertAssetsToVideoSources(element.assets)}
 					subtitleSize="medium"
 					subtitleSource={getSubtitleAsset(element.assets)}
-					videoStyle="Loop"
+					videoStyle={videoStyle}
 					uniqueId={element.id}
 					width={firstVideoAsset?.dimensions?.width ?? 500}
 					enableHls={false}

dotcom-rendering/src/lib/renderElement.tsx

@@ -29,7 +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';
+import { SelfHostedVideoInArticle } from '../components/SelfHostedVideoInArticle';
 import { MainMediaEmbedBlockComponent } from '../components/MainMediaEmbedBlockComponent';
 import { MapEmbedBlockComponent } from '../components/MapEmbedBlockComponent.importable';
 import { MiniProfiles } from '../components/MiniProfiles';
@@ -493,22 +493,16 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.MediaAtomBlockElement':
-			/*
-				- 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`
-			*/
-			if (element.videoPlayerFormat === 'Loop') {
+			if (
+				element.videoPlayerFormat &&
+				['Loop', 'Cinemagraph'].includes(element.videoPlayerFormat)
+			) {
 				return (
-					<LoopVideoInArticle
+					<SelfHostedVideoInArticle
 						element={element}
 						format={format}
 						isMainMedia={isMainMedia}
+						videoStyle={element.videoPlayerFormat}
 					/>
 				);
 			} else {