feat(Card): Support mainVideo

The settings comes from the facia-tool via Frontend, when “Show Video” is enabled for a trail in a container, it should be displayed as a playable video inline instead or redirecting to the article itself. Currently, only Youtube Atoms are supported. There is currently no guarantee that the first atom will be the expected video, but it happens to be the case the vast majority of the time A minimum Card width of one third or three columns is required for the YouTube atom to be embedded, similar to the existing Frontend logic: https://github.com/guardian/frontend/blob/1c4555a9f/common/app/layout/cards/CardType.scala#L20-L23
guardian · Jul 4, 2023 · df5ac31 · df5ac31
1 parent d20d8a0
commit df5ac31
Show file tree

Hide file tree

Showing 18 changed files with 842 additions and 153 deletions.
diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
@@ -71,7 +71,7 @@ export const trails: [
 				kickerText: 'Kicker',
 			},
 		],
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -87,11 +87,25 @@ export const trails: [
 			design: ArticleDesign.Video,
 			display: ArticleDisplay.Standard,
 		},
-		mediaType: 'Video',
-		mediaDuration: 378,
 		dataLinkName: 'news | group-0 | card-@2',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: {
+			type: 'Video',
+			elementId: 'abcdef',
+			videoId: 'abcd',
+			title: 'some title',
+			duration: 378,
+			width: 480,
+			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,
+				},
+			],
+		},
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -110,7 +124,7 @@ export const trails: [
 		kickerText: 'Live',
 		dataLinkName: 'news | group-0 | card-@3',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -128,7 +142,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@4',
 		showQuotedHeadline: true,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -146,7 +160,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@5',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -165,7 +179,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@6',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -185,7 +199,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@7',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -204,7 +218,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@8',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -225,7 +239,7 @@ export const trails: [
 			'UK Covid live: England lockdown to be eased in stages, says PM, amid reports of nationwide mass testing',
 		dataLinkName: 'news | group-0 | card-@9',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -245,7 +259,7 @@ export const trails: [
 			'UK to infect up to 90 healthy volunteers with Covid in world first trial',
 		dataLinkName: 'news | group-0 | card-@10',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -265,7 +279,7 @@ export const trails: [
 			'Scottish government inadequately prepared for Covid, says watchdog',
 		dataLinkName: 'news | group-0 | card-@11',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -285,7 +299,7 @@ export const trails: [
 			'‘Encouraging’ signs for Covid vaccine as over-80s deaths fall in England',
 		dataLinkName: 'news | group-0 | card-@12',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -305,7 +319,7 @@ export const trails: [
 			'Contact tracing alone has little impact on curbing Covid spread, report finds',
 		dataLinkName: 'news | group-0 | card-@1',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -325,7 +339,7 @@ export const trails: [
 			'Ethnicity and poverty are Covid risk factors, new Oxford modelling tool shows',
 		dataLinkName: 'news | group-0 | card-@13',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -345,7 +359,7 @@ export const trails: [
 			'UK Covid: 799 more deaths and 10,625 new cases reported; Scottish schools in phased return from Monday – as it happened',
 		dataLinkName: 'news | group-0 | card-@14',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -365,7 +379,7 @@ export const trails: [
 			'QCovid: how improved algorithm can identify more higher-risk adults',
 		dataLinkName: 'news | group-0 | card-@1',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -383,7 +397,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@15',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -402,7 +416,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@16',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -421,7 +435,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@17',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},
@@ -440,7 +454,7 @@ export const trails: [
 		},
 		dataLinkName: 'news | group-0 | card-@18',
 		showQuotedHeadline: false,
-		showMainVideo: false,
+		mainMedia: undefined,
 		isExternalLink: false,
 		showLivePlayable: false,
 	},

diff --git a/dotcom-rendering/index.d.ts b/dotcom-rendering/index.d.ts
@@ -286,7 +286,12 @@ interface FEKeyEventsRequest {
 	filterKeyEvents: boolean;
 }
 
-type CardImageType = 'mainMedia' | 'avatar' | 'crossword' | 'slideshow';
+type CardImageType =
+	| 'picture'
+	| 'avatar'
+	| 'crossword'
+	| 'slideshow'
+	| 'video';
 
 type SmallHeadlineSize =
 	| 'tiny'

diff --git a/dotcom-rendering/makefile b/dotcom-rendering/makefile
@@ -206,6 +206,7 @@ gen-schema:
 	@git add src/model/article-schema.json
 	@git add src/model/front-schema.json
 	@git add src/model/block-schema.json
+	@git add src/model/tag-front-schema.json
 
 check-stories:
 	$(call log, "Checking Storybook stories")