Track card media in data-link-name

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

@@ -13,6 +13,7 @@ import {
 } from '../../lib/articleFormat';
 import { isMediaCard } from '../../lib/cardHelpers';
 import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
+import { replaceLinkNameMedia } from '../../lib/getDataLinkName';
 import { getZIndex } from '../../lib/getZIndex';
 import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
 import { BETA_CONTAINERS } from '../../model/enhanceCollections';
@@ -268,7 +269,7 @@ const getMedia = ({
 	}
 	if (mainMedia?.type === 'Video' && canPlayInline) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -566,6 +567,11 @@ export const Card = ({
 		isBetaContainer,
 	});
 
+	const resolvedDataLinkName =
+		media && dataLinkName
+			? replaceLinkNameMedia(dataLinkName, media.type)
+			: dataLinkName;
+
 	/**
 	 * For opinion type cards with avatars (which aren't onwards content)
 	 * we render the footer in a different location
@@ -757,7 +763,7 @@ export const Card = ({
 			<CardLink
 				linkTo={linkTo}
 				headlineText={headlineText}
-				dataLinkName={dataLinkName}
+				dataLinkName={resolvedDataLinkName}
 				isExternalLink={isExternalLink}
 			/>
 			{headlinePosition === 'outer' && (
@@ -899,7 +905,7 @@ export const Card = ({
 								/>
 							</Island>
 						)}
-						{media.type === 'video' && (
+						{media.type === 'youtube-video' && (
 							<>
 								{showVideo ? (
 									<div

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

@@ -173,7 +173,7 @@ export const ImageWrapper = ({
 			css={[
 				(imageType === 'slideshow' ||
 					imageType === 'picture' ||
-					imageType === 'video' ||
+					imageType === 'youtube-video' ||
 					imageType === 'loop-video') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({

dotcom-rendering/src/lib/decideTrail.ts

@@ -16,6 +16,11 @@ export const decideTrail = (trail: FETrailType, index = 0): TrailType => {
 		...trail,
 		image,
 		format,
-		dataLinkName: getDataLinkNameCard(format, '0', index),
+		dataLinkName: getDataLinkNameCard(
+			format,
+			'0',
+			index,
+			image ? 'picture' : 'none',
+		),
 	};
 };

dotcom-rendering/src/lib/getDataLinkName.ts

@@ -58,14 +58,34 @@ export type Group = `${number}` | `${number}+`;
  *
  * @see {JSX.IntrinsicAttributes}
  */
+
+type MediaType =
+	| 'podcast'
+	| 'loop-video'
+	| 'youtube-video'
+	| 'slideshow'
+	| 'avatar'
+	| 'crossword'
+	| 'picture'
+	| 'none';
+
 export const getDataLinkNameCard = (
 	format: ArticleFormat,
 	group: Group,
 	index: number,
+	mediaType: MediaType = 'none',
 	cardStyle?: FEFrontCardStyle,
 ): string =>
 	[
 		getLinkType(format, cardStyle),
 		`group-${group}`,
 		`card-@${Math.max(index + 1, 1)}`,
+		`media-${mediaType}`,
 	].join(' | ');
+
+export const replaceLinkNameMedia = (
+	dataLinkName: string,
+	mediaType: MediaType,
+): string => {
+	return dataLinkName.replace(/media-none/, `media-${mediaType}`);
+};

dotcom-rendering/src/model/enhanceCards.ts

@@ -326,6 +326,7 @@ export const enhanceCards = (
 			format,
 			group,
 			offset + index,
+			'none', // we don't know the media type for the card yet, so we set it to none and overwrite at the card level.
 			faciaCard.card.cardStyle.type,
 		);
 

dotcom-rendering/src/types/layout.ts

@@ -26,7 +26,7 @@ export type CardImageType =
 	| 'avatar'
 	| 'crossword'
 	| 'slideshow'
-	| 'video'
+	| 'youtube-video'
 	| 'loop-video'
 	| 'podcast';