diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 47811af5c5c..ce2d9114593 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/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 { appendLinkNameMedia } 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 + ? appendLinkNameMedia(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 = ({ {headlinePosition === 'outer' && ( @@ -899,7 +905,7 @@ export const Card = ({ /> )} - {media.type === 'video' && ( + {media.type === 'youtube-video' && ( <> {showVideo ? (
{ if (imageType === 'avatar') { @@ -115,7 +115,7 @@ const getImageDirection = ( type Props = { children: React.ReactNode; - imageType?: CardImageType; + imageType?: CardMediaType; imageSize: ImageSizeType; isBetaContainer: boolean; imagePositionOnDesktop: ImagePositionType; diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx index 259a7207e46..ea4f08cf61c 100644 --- a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx @@ -1,7 +1,7 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import { between, from, space, until } from '@guardian/source/foundations'; -import type { CardImageType } from '../../../types/layout'; +import type { CardMediaType } from '../../../types/layout'; const imageFixedSize = { tiny: 86, @@ -34,7 +34,7 @@ type Props = { children: React.ReactNode; imageSize: ImageSizeType; imageFixedSizes?: ImageFixedSizeOptions; - imageType?: CardImageType; + imageType?: CardMediaType; imagePositionOnDesktop: ImagePositionType; imagePositionOnMobile: ImagePositionType; /** @@ -173,7 +173,7 @@ export const ImageWrapper = ({ css={[ (imageType === 'slideshow' || imageType === 'picture' || - imageType === 'video' || + imageType === 'youtube-video' || imageType === 'loop-video') && isHorizontalOnDesktop && flexBasisStyles({ diff --git a/dotcom-rendering/src/lib/getDataLinkName.ts b/dotcom-rendering/src/lib/getDataLinkName.ts index d6473069582..1a0ba009975 100644 --- a/dotcom-rendering/src/lib/getDataLinkName.ts +++ b/dotcom-rendering/src/lib/getDataLinkName.ts @@ -1,5 +1,5 @@ import type { FEFrontCardStyle } from '../frontend/feFront'; -import type { RichLinkCardType } from '../types/layout'; +import type { CardMediaType, RichLinkCardType } from '../types/layout'; import { ArticleDesign, type ArticleFormat, @@ -58,6 +58,7 @@ export type Group = `${number}` | `${number}+`; * * @see {JSX.IntrinsicAttributes} */ + export const getDataLinkNameCard = ( format: ArticleFormat, group: Group, @@ -69,3 +70,12 @@ export const getDataLinkNameCard = ( `group-${group}`, `card-@${Math.max(index + 1, 1)}`, ].join(' | '); + +type MediaType = CardMediaType | 'none'; + +export const appendLinkNameMedia = ( + dataLinkName: string, + mediaType: MediaType, +): string => { + return `${dataLinkName} | media-${mediaType}`; +}; diff --git a/dotcom-rendering/src/types/layout.ts b/dotcom-rendering/src/types/layout.ts index ef1a4dccf13..1b9a6c1fe7c 100644 --- a/dotcom-rendering/src/types/layout.ts +++ b/dotcom-rendering/src/types/layout.ts @@ -21,12 +21,12 @@ export type RichLinkCardType = | 'external' | 'news'; -export type CardImageType = +export type CardMediaType = | 'picture' | 'avatar' | 'crossword' | 'slideshow' - | 'video' + | 'youtube-video' | 'loop-video' | 'podcast';