Merge pull request #14827 from guardian/doml/refactor-main-media-video

domlander · web-flow · commit 33cdc9cd19d4 · 2025-11-13T09:36:14.000Z
Refactor video in MainMedia type
diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
@@ -101,7 +101,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@2',
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
@@ -316,7 +316,7 @@ export const trails: [
 		headline: 'How plastics are invading our brain cells – video',
 		dataLinkName: 'media | group-0 | card-@11',
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: '966acc06-a238-4d5f-b477-816eec0476f3',
 			videoId: '4JUvvbpx2So',
 			duration: 322,
@@ -408,7 +408,7 @@ export const trails: [
 		dataLinkName: 'news | group-0 | card-@18',
 		supportingContent: getSublinks(3),
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
@@ -560,7 +560,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			"Amorim said the team proved by the victory against City that they 'can leave anyone outside the squad and manage to win'",
 		webPublicationDate: '2024-12-16T15:21:02.000Z',
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: 'fa2ee832-c5e7-4305-8387-f0277d2d9e27',
 			videoId: '9kIN--VV2LQ',
 			duration: 117,
@@ -587,7 +587,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			'News Group Newspapers offered Harry ‘full and unequivocal apology’ for ‘serious intrusion’ by the paper',
 		webPublicationDate: '2025-01-22T18:51:14.000Z',
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: '03ac0c90-3a66-448c-8562-b66a9ca9360e',
 			videoId: '_2wsSKq6yAk',
 			duration: 71,
@@ -655,7 +655,8 @@ export const loopVideoCard: DCRFrontCard = {
 	headline: 'Headline for looping video card',
 	trailText: 'Trail text for looping video card',
 	mainMedia: {
-		type: 'LoopVideo',
+		type: 'SelfHostedVideo',
+		videoStyle: 'Loop',
 		atomId: '3cb22b60-2c3f-48d6-8bce-38c956907cce',
 		sources: [
 			{
diff --git a/dotcom-rendering/src/components/Caption.stories.tsx b/dotcom-rendering/src/components/Caption.stories.tsx
@@ -203,7 +203,7 @@ export const WhenOverlaidWithStars = {
 export const ForVideos = {
 	args: {
 		...Standard.args,
-		mediaType: 'Video',
+		mediaType: 'YoutubeVideo',
 	},
 	parameters: {
 		chromatic: {
diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx
@@ -307,15 +307,15 @@ export const Caption = ({
 				shouldLimitWidth && limitedWidth,
 				isOverlaid ? overlaidStyles(format) : bottomMarginStyles,
 				isMainMedia &&
-					(isBlog || mediaType === 'Video') &&
+					(isBlog || mediaType === 'YoutubeVideo') &&
 					tabletCaptionPadding,
 				padCaption && captionPadding,
 				isImmersive && immersivePadding,
 				isGallery && galleryStyles,
 			]}
 			data-spacefinder-role="inline"
 		>
-			{mediaType === 'Video' ? (
+			{mediaType === 'YoutubeVideo' ? (
 				<VideoIcon format={format} />
 			) : (
 				<CameraIcon format={format} />
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -61,7 +61,7 @@ const aBasicLink = {
 };
 
 const mainVideo: MainMedia = {
-	type: 'Video',
+	type: 'YoutubeVideo',
 	id: '1234-abcdef-09876-xyz',
 	videoId: '8M_yH-e9cq8',
 	title: '’I care, but I don’t care’: Life after the Queen’s death | Anywhere but Westminster',
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -279,13 +279,13 @@ const getMedia = ({
 	canPlayInline?: boolean;
 	isBetaContainer: boolean;
 }) => {
-	if (mainMedia?.type === 'LoopVideo' && canPlayInline) {
+	if (mainMedia?.type === 'SelfHostedVideo' && canPlayInline) {
 		return {
 			type: 'loop-video',
 			mainMedia,
 		} as const;
 	}
-	if (mainMedia?.type === 'Video' && canPlayInline) {
+	if (mainMedia?.type === 'YoutubeVideo' && canPlayInline) {
 		return {
 			type: 'youtube-video',
 			mainMedia,
@@ -429,14 +429,16 @@ export const Card = ({
 	 * It is treated as a media card in the design system.
 	 */
 	const isVideoArticle =
-		mainMedia?.type === 'Video' && format.design === ArticleDesign.Video;
+		mainMedia?.type === 'YoutubeVideo' &&
+		format.design === ArticleDesign.Video;
 
 	/**
 	 * Articles with a video as the main media but not classified as "video articles"
 	 * are styled differently and are not treated as media cards.
 	 */
 	const isVideoMainMedia =
-		mainMedia?.type === 'Video' && format.design !== ArticleDesign.Video;
+		mainMedia?.type === 'YoutubeVideo' &&
+		format.design !== ArticleDesign.Video;
 
 	const isLabs = format.theme === ArticleSpecial.Labs;
 
diff --git a/dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx b/dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx
@@ -55,7 +55,7 @@ export const WithVideo = {
 	args: {
 		...WithAge.args,
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			duration: 972,
 		},
 	},
diff --git a/dotcom-rendering/src/components/Card/components/CardFooter.tsx b/dotcom-rendering/src/components/Card/components/CardFooter.tsx
@@ -53,8 +53,8 @@ const labStyles = css`
 `;
 
 type MainMedia =
-	| { type: 'Video'; duration: number }
-	| { type: 'LoopVideo'; duration: number }
+	| { type: 'YoutubeVideo'; duration: number }
+	| { type: 'SelfHostedVideo'; duration: number }
 	| { type: 'Audio'; duration: string }
 	| { type: 'Gallery'; count: string };
 
@@ -85,7 +85,7 @@ export const CardFooter = ({
 		return <footer css={labStyles}>{cardBranding}</footer>;
 	}
 
-	if (mainMedia?.type === 'Video') {
+	if (mainMedia?.type === 'YoutubeVideo') {
 		return (
 			<footer css={contentStyles}>
 				<Pill
diff --git a/dotcom-rendering/src/components/FeatureCard.stories.tsx b/dotcom-rendering/src/components/FeatureCard.stories.tsx
@@ -294,7 +294,7 @@ export const Video: Story = {
 			altText: 'alt text',
 		},
 		mainMedia: {
-			type: 'Video',
+			type: 'YoutubeVideo',
 			id: 'video-id',
 			videoId: 'video-id',
 			height: 1080,
diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -246,7 +246,7 @@ const getMedia = ({
 	mainMedia?: MainMedia;
 	canPlayInline?: boolean;
 }) => {
-	if (mainMedia && mainMedia.type === 'Video' && canPlayInline) {
+	if (mainMedia && mainMedia.type === 'YoutubeVideo' && canPlayInline) {
 		return {
 			type: 'video',
 			mainMedia,
@@ -383,11 +383,11 @@ export const FeatureCard = ({
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
-	const isVideoMainMedia = mainMedia?.type === 'Video';
+	const isVideoMainMedia = mainMedia?.type === 'YoutubeVideo';
 	const isVideoArticle = format.design === ArticleDesign.Video;
 
 	const videoDuration =
-		mainMedia?.type === 'Video' ? mainMedia.duration : undefined;
+		mainMedia?.type === 'YoutubeVideo' ? mainMedia.duration : undefined;
 
 	const media = getMedia({
 		imageUrl: image?.src,
@@ -397,7 +397,7 @@ export const FeatureCard = ({
 	});
 
 	const showYoutubeVideo =
-		canPlayInline && showVideo && mainMedia?.type === 'Video';
+		canPlayInline && showVideo && mainMedia?.type === 'YoutubeVideo';
 
 	const showCardAge =
 		webPublicationDate !== undefined && showClock !== undefined;
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
@@ -261,7 +261,7 @@ const liveUpdatesCard = {
 	showQuotedHeadline: false,
 	dataLinkName: 'news | group-0 | card-@1',
 	mainMedia: {
-		type: 'Video',
+		type: 'YoutubeVideo',
 		id: 'fd00c892-407f-4d99-adfb-a8d12eada25f',
 		videoId: '04lLgC1NioA',
 		height: 300,
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -106,7 +106,9 @@ const ImmersiveCardLayout = ({
 	collectionId,
 	showLabsRedesign,
 }: ImmersiveCardLayoutProps) => {
-	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
+	const isLoopingVideo =
+		card.mainMedia?.type === 'SelfHostedVideo' &&
+		card.mainMedia.videoStyle === 'Loop';
 
 	return (
 		<UL padBottom={true}>
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
@@ -51,7 +51,7 @@ const liveUpdatesCard = {
 	showQuotedHeadline: false,
 	dataLinkName: 'news | group-0 | card-@1',
 	mainMedia: {
-		type: 'Video',
+		type: 'YoutubeVideo',
 		id: 'fd00c892-407f-4d99-adfb-a8d12eada25f',
 		videoId: '04lLgC1NioA',
 		height: 300,
diff --git a/dotcom-rendering/src/components/GuVideoBlockComponent.tsx b/dotcom-rendering/src/components/GuVideoBlockComponent.tsx
@@ -39,7 +39,7 @@ export const GuVideoBlockComponent = ({
 					captionText={caption}
 					format={format}
 					credit={credit}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -178,7 +178,7 @@ export const HighlightsCard = ({
 
 					{!!mainMedia && isMediaCard && (
 						<div>
-							{mainMedia.type === 'Video' && (
+							{mainMedia.type === 'YoutubeVideo' && (
 								<Pill
 									content={secondsToDuration(
 										mainMedia.duration,
diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
@@ -41,7 +41,9 @@ export const ScrollableFeature = ({
 			visibleCarouselSlidesOnTablet={3}
 		>
 			{trails.map((card) => {
-				const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
+				const isLoopingVideo =
+					card.mainMedia?.type === 'SelfHostedVideo' &&
+					card.mainMedia.videoStyle === 'Loop';
 
 				return (
 					<ScrollableCarousel.Item key={card.url}>
diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -39,7 +39,9 @@ export const StaticFeatureTwo = ({
 	return (
 		<UL direction="row">
 			{cards.map((card) => {
-				const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
+				const isLoopingVideo =
+					card.mainMedia?.type === 'SelfHostedVideo' &&
+					card.mainMedia.videoStyle === 'Loop';
 
 				return (
 					<LI
diff --git a/dotcom-rendering/src/components/VideoAtom.tsx b/dotcom-rendering/src/components/VideoAtom.tsx
@@ -59,7 +59,7 @@ export const VideoAtom = ({
 				<Caption
 					captionText={caption}
 					format={format}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/components/VideoFacebookBlockComponent.importable.tsx b/dotcom-rendering/src/components/VideoFacebookBlockComponent.importable.tsx
@@ -72,7 +72,7 @@ export const VideoFacebookBlockComponent = ({
 						captionText={caption}
 						format={format}
 						credit={credit}
-						mediaType="Video"
+						mediaType="YoutubeVideo"
 						isMainMedia={isMainMedia}
 					/>
 				)}
diff --git a/dotcom-rendering/src/components/VimeoBlockComponent.tsx b/dotcom-rendering/src/components/VimeoBlockComponent.tsx
@@ -67,7 +67,7 @@ export const VimeoBlockComponent = ({
 					captionText={caption}
 					format={format}
 					credit={credit}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomExpiredOverlay.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomExpiredOverlay.tsx
@@ -85,7 +85,7 @@ export const YoutubeAtomExpiredOverlay = ({
 					captionText={mediaTitle ?? ''}
 					format={format}
 					displayCredit={false}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx
@@ -279,7 +279,10 @@ export const YoutubeAtomFeatureCardOverlay = ({
 						showLivePlayable={false}
 						mainMedia={
 							isVideoArticle
-								? { type: 'Video', duration: duration ?? 0 }
+								? {
+										type: 'YoutubeVideo',
+										duration: duration ?? 0,
+								  }
 								: undefined
 						}
 					/>
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -231,7 +231,7 @@ export const YoutubeBlockComponent = ({
 					captionText={mediaTitle ?? ''}
 					format={format}
 					displayCredit={false}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/components/YoutubeEmbedBlockComponent.tsx b/dotcom-rendering/src/components/YoutubeEmbedBlockComponent.tsx
@@ -55,7 +55,7 @@ export const YoutubeEmbedBlockComponent = ({
 					captionText={caption}
 					format={format}
 					credit={credit}
-					mediaType="Video"
+					mediaType="YoutubeVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
diff --git a/dotcom-rendering/src/frontend/schemas/feFront.json b/dotcom-rendering/src/frontend/schemas/feFront.json
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
