Front card media atom image selection (#14187)

* Update mediaAtom schema to match frontend

* Return null if mainImage is an empty string so that the front can still render.

* Convert the images array on the video media types to a string.

This is because we only ever use the url string downstream.

* Refactor mediaAtom image handling by extracting `getLargestImageUrl` helper and replacing inline transformations with reusable logic.

* Rename `thumbnailImage` prop to `image` in `LoopVideo` component for consistency and update references accordingly.

# Conflicts:
#	dotcom-rendering/src/components/LoopVideo.importable.tsx

* Remove image tranformation as this now happens during the enhancement step

* Fix typos

* Remove transformation as this happens during the enhancement step

* Determine media image during enhancement

* Remove override images as we are deciding the image during the enhancement

* generate new schemas

* Fix types

Author: abeddow91

dotcom-rendering/fixtures/manual/trails.ts

@@ -99,12 +99,7 @@ export const trails: [
 			height: 288,
 			origin: 'The Guardian',
 			expired: false,
-			images: [
-				{
-					url: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
-					width: 600,
-				},
-			],
+			image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
 		},
 		isExternalLink: false,
 		showLivePlayable: false,
@@ -465,24 +460,7 @@ export const trails: [
 			width: 500,
 			height: 300,
 			origin: 'The Guardian',
-			images: [
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1920.jpg',
-					width: 1920,
-				},
-			],
+			image: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1920.jpg',
 			expired: false,
 		},
 		isExternalLink: false,
@@ -608,12 +586,7 @@ export const trails: [
 			height: 288,
 			origin: 'The Guardian',
 			expired: false,
-			images: [
-				{
-					url: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
-					width: 600,
-				},
-			],
+			image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
 		},
 		isExternalLink: false,
 		showLivePlayable: false,
@@ -794,28 +767,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			height: 300,
 			origin: 'SNTV',
 			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/2000.jpg',
-					width: 2000,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/3000.jpg',
-					width: 3000,
-				},
-			],
+			image: 'https://media.guim.co.uk/0cab2d745b3423b0fac318c9ee09b79678f568f8/0_56_3000_1688/3000.jpg',
 		},
 		showVideo: true,
 		image: {
@@ -849,28 +801,7 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 			height: 300,
 			origin: 'Reuters',
 			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/2000.jpg',
-					width: 2000,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/1000.jpg',
-					width: 1000,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/500.jpg',
-					width: 500,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/140.jpg',
-					width: 140,
-				},
-				{
-					url: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/5358.jpg',
-					width: 5358,
-				},
-			],
+			image: 'https://media.guim.co.uk/908aa315f66a09bc6ea607b6049cd72decd2dfa6/0_0_5358_3014/5358.jpg',
 		},
 		showVideo: true,
 		image: {

dotcom-rendering/src/components/Card/Card.stories.tsx

@@ -64,10 +64,7 @@ const mainVideo: MainMedia = {
 	title: '’I care, but I don’t care’: Life after the Queen’s death | Anywhere but Westminster',
 	expired: false,
 	duration: 200,
-	images: [480, 640, 960, 1024, 1200].map((width) => ({
-		url: `https://i.guim.co.uk/img/media/2eb01d138eb8fba6e59ce7589a60e3ff984f6a7a/0_0_1920_1080/1920.jpg?width=${width}&quality=45&dpr=2&s=none`,
-		width,
-	})),
+	image: `https://i.guim.co.uk/img/media/2eb01d138eb8fba6e59ce7589a60e3ff984f6a7a/0_0_1920_1080/1920.jpg?width=1200&quality=45&dpr=2&s=none`,
 	width: 480,
 	height: 288,
 	origin: 'The Guardian',

dotcom-rendering/src/components/Card/Card.tsx

@@ -265,14 +265,12 @@ const getMedia = ({
 		return {
 			type: 'loop-video',
 			mainMedia,
-			...(imageUrl && { imageUrl }),
 		} as const;
 	}
 	if (mainMedia?.type === 'Video' && canPlayInline) {
 		return {
 			type: 'video',
 			mainMedia,
-			...(imageUrl && { imageUrl }),
 		} as const;
 	}
 	if (slideshowImages) return { type: 'slideshow', slideshowImages } as const;
@@ -904,12 +902,12 @@ export const Card = ({
 									src={media.mainMedia.videoId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
-									thumbnailImage={
-										media.mainMedia.thumbnailImage ?? ''
-									}
+									image={media.mainMedia.image ?? ''}
 									fallbackImageComponent={
 										<CardPicture
-											mainImage={media.imageUrl ?? ''}
+											mainImage={
+												media.mainMedia.image ?? ''
+											}
 											imageSize={imageSize}
 											loading={imageLoading}
 											alt={media.imageAltText}
@@ -952,9 +950,8 @@ export const Card = ({
 																.duration
 												}
 												posterImage={
-													media.mainMedia.images
+													media.mainMedia.image
 												}
-												overrideImage={media.imageUrl}
 												width={media.mainMedia.width}
 												height={media.mainMedia.height}
 												origin={media.mainMedia.origin}
@@ -1013,15 +1010,7 @@ export const Card = ({
 									<div>
 										<CardPicture
 											mainImage={
-												media.imageUrl
-													? media.imageUrl
-													: media.mainMedia.images.reduce(
-															(prev, current) =>
-																prev.width >
-																current.width
-																	? prev
-																	: current,
-													  ).url
+												media.mainMedia.image ?? ''
 											}
 											imageSize={imageSize}
 											alt={headlineText}

dotcom-rendering/src/components/CardPicture.tsx

@@ -203,6 +203,9 @@ export const CardPicture = ({
 	aspectRatio = '5:3',
 	mobileAspectRatio,
 }: Props) => {
+	if (mainImage === '') {
+		return null;
+	}
 	const sources = generateSources(
 		mainImage,
 		decideImageWidths(imageSize, aspectRatio),

dotcom-rendering/src/components/FeatureCard.stories.tsx

@@ -258,12 +258,7 @@ export const Video: Story = {
 			title: 'Video Title',
 			duration: 120,
 			expired: false,
-			images: [
-				{
-					url: 'https://media.guim.co.uk/video-thumbnail.jpg',
-					width: 1920,
-				},
-			],
+			image: 'https://media.guim.co.uk/video-thumbnail.jpg',
 		},
 	},
 };

dotcom-rendering/src/components/FeatureCard.tsx

@@ -238,7 +238,6 @@ const getMedia = ({
 		return {
 			type: 'video',
 			mainMedia,
-			...(imageUrl && { imageUrl }),
 		} as const;
 	}
 
@@ -430,8 +429,7 @@ export const FeatureCard = ({
 										stickyVideos={false}
 										enableAds={false}
 										duration={mainMedia.duration}
-										posterImage={mainMedia.images}
-										overrideImage={media?.imageUrl}
+										posterImage={mainMedia.image}
 										width={300}
 										height={375}
 										origin="The Guardian"
@@ -479,15 +477,7 @@ export const FeatureCard = ({
 									<div>
 										<CardPicture
 											mainImage={
-												media.imageUrl
-													? media.imageUrl
-													: media.mainMedia.images.reduce(
-															(prev, current) =>
-																prev.width >
-																current.width
-																	? prev
-																	: current,
-													  ).url
+												media.mainMedia.image ?? ''
 											}
 											imageSize={imageSize}
 											alt={headlineText}

dotcom-rendering/src/components/FlexibleGeneral.stories.tsx

@@ -259,28 +259,7 @@ const liveUpdatesCard = {
 		title: 'Spain fans celebrate at final whistle as England fans left heartbroken – video',
 		duration: 0,
 		expired: false,
-		images: [
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/2000.jpg',
-				width: 2000,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/1000.jpg',
-				width: 1000,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/500.jpg',
-				width: 500,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/140.jpg',
-				width: 140,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/4791.jpg',
-				width: 4791,
-			},
-		],
+		image: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/4791.jpg',
 	},
 	isExternalLink: false,
 	discussionApiUrl,

dotcom-rendering/src/components/FlexibleSpecial.stories.tsx

@@ -54,28 +54,7 @@ const liveUpdatesCard = {
 		title: 'Spain fans celebrate at final whistle as England fans left heartbroken – video',
 		duration: 0,
 		expired: false,
-		images: [
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/2000.jpg',
-				width: 2000,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/1000.jpg',
-				width: 1000,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/500.jpg',
-				width: 500,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/140.jpg',
-				width: 140,
-			},
-			{
-				url: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/4791.jpg',
-				width: 4791,
-			},
-		],
+		image: 'https://media.guim.co.uk/68333e95233d9c68b32b56c12205c5ded94dfbf8/0_117_4791_2696/4791.jpg',
 	},
 	isExternalLink: false,
 	discussionApiUrl,

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

@@ -36,7 +36,7 @@ type Props = {
 	uniqueId: string;
 	width: number;
 	height: number;
-	thumbnailImage: string;
+	image: string;
 	fallbackImageComponent: JSX.Element;
 };
 
@@ -45,7 +45,7 @@ export const LoopVideo = ({
 	uniqueId,
 	width,
 	height,
-	thumbnailImage,
+	image,
 	fallbackImageComponent,
 }: Props) => {
 	const adapted = useShouldAdapt();
@@ -217,9 +217,9 @@ export const LoopVideo = ({
 			isAutoplayAllowed === false ||
 			(isInView === false && !hasBeenInView)
 		) {
-			setPosterImage(thumbnailImage);
+			setPosterImage(image);
 		}
-	}, [isAutoplayAllowed, isInView, hasBeenInView, thumbnailImage]);
+	}, [isAutoplayAllowed, isInView, hasBeenInView, image]);
 
 	/**
 	 * We almost always want to preload some of the video data. If a user has prefers-reduced-motion

dotcom-rendering/src/components/LoopVideo.stories.tsx

@@ -23,8 +23,7 @@ export const Default = {
 		uniqueId: 'test-video-1',
 		height: 720,
 		width: 900,
-		thumbnailImage:
-			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
+		image: 'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImageComponent: (
 			<CardPicture
 				mainImage="https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg"