Support cinemagraphs in feature cards

Author: domlander

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

@@ -24,7 +24,6 @@ const cardProps: CardProps = {
 		altText: 'alt text',
 	},
 	isExternalLink: false,
-	canPlayInline: true,
 	imageLoading: 'eager',
 	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
 	aspectRatio: '4:5',
@@ -35,6 +34,7 @@ const cardProps: CardProps = {
 	showClock: false,
 	imageSize: 'feature',
 	collectionId: 1,
+	uniqueId: `collection-1-feature-0`,
 };
 
 const aBasicLink = {
@@ -282,8 +282,7 @@ export const GalleryImmersive: Story = {
 	},
 };
 
-// A video article
-export const Video: Story = {
+export const YoutubeVideo: Story = {
 	args: {
 		format: {
 			...cardProps.format,
@@ -308,17 +307,17 @@ export const Video: Story = {
 	},
 };
 
-export const VideoImmersive: Story = {
+export const YoutubeVideoImmersive: Story = {
 	args: {
-		...Video.args,
+		...YoutubeVideo.args,
 		...Immersive.args,
 	},
 };
 
 // A standard (non-video) article with a video main media
-export const VideoMainMedia: Story = {
+export const YoutubeVideoMainMedia: Story = {
 	args: {
-		...Video.args,
+		...YoutubeVideo.args,
 		image: {
 			src: 'https://media.guim.co.uk/4612af5f4667888fa697139cf570b6373d93a710/2446_345_3218_1931/master/3218.jpg',
 			altText: 'alt text',
@@ -330,9 +329,9 @@ export const VideoMainMedia: Story = {
 	},
 };
 
-export const VideoMainMediaImmersive: Story = {
+export const YoutubeVideoMainMediaImmersive: Story = {
 	args: {
-		...VideoMainMedia.args,
+		...YoutubeVideoMainMedia.args,
 		...Immersive.args,
 	},
 };
@@ -379,3 +378,31 @@ export const WithSublinksLabsImmersive: Story = {
 		...Immersive.args,
 	},
 };
+
+export const WithSelfHostedVideo: Story = {
+	args: {
+		...cardProps,
+		showVideo: true,
+		mainMedia: {
+			type: 'SelfHostedVideo',
+			videoStyle: 'Loop',
+			atomId: 'atom-id-123',
+			sources: [
+				{
+					src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+					mimeType: 'video/mp4',
+				},
+			],
+			width: 900,
+			height: 720,
+			duration: 18,
+		},
+	},
+};
+
+export const WithSelfHostedImmersiveVideo: Story = {
+	args: {
+		...WithSelfHostedVideo.args,
+		isImmersive: true,
+	},
+};

dotcom-rendering/src/components/FeatureCard.tsx

@@ -24,6 +24,7 @@ import type {
 	DCRFrontImage,
 	DCRSupportingContent,
 } from '../types/front';
+import type { CardMediaType } from '../types/layout';
 import type { MainMedia } from '../types/mainMedia';
 import { BrandingLabel } from './BrandingLabel';
 import { CardFooter } from './Card/components/CardFooter';
@@ -40,6 +41,7 @@ import { FormatBoundary } from './FormatBoundary';
 import { Island } from './Island';
 import { MediaDuration } from './MediaDuration';
 import { Pill } from './Pill';
+import { SelfHostedVideo } from './SelfHostedVideo.importable';
 import { StarRating } from './StarRating/StarRating';
 import { SupportingContent } from './SupportingContent';
 import { WaveForm } from './WaveForm';
@@ -125,7 +127,7 @@ const immersiveOverlayContainerStyles = css`
 		* 48px is to ensure the gradient does not render the content inaccessible.
 		*/
 		width: 268px;
-		z-index: 1;
+		z-index: ${getZIndex('feature-card-overlay')};
 	}
 `;
 
@@ -152,11 +154,14 @@ const overlayMaskGradientStyles = (angle: string) => css`
 	);
 `;
 const overlayStyles = css`
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	text-align: start;
 	gap: ${space[1]}px;
 	padding: 64px ${space[2]}px ${space[2]}px;
+	/* Needs to be above self-hosted video  */
+	z-index: ${getZIndex('feature-card-overlay')};
 	backdrop-filter: blur(12px) brightness(0.5);
 	@supports not (backdrop-filter: blur(12px)) {
 		background-color: ${transparentColour(sourcePalette.neutral[10], 0.7)};
@@ -239,16 +244,35 @@ const getMedia = ({
 	imageUrl,
 	imageAltText,
 	mainMedia,
-	canPlayInline,
+	showVideo,
 }: {
 	imageUrl?: string;
 	imageAltText?: string;
 	mainMedia?: MainMedia;
-	canPlayInline?: boolean;
+	showVideo?: boolean;
 }) => {
-	if (mainMedia && mainMedia.type === 'YoutubeVideo' && canPlayInline) {
+	if (mainMedia?.type === 'SelfHostedVideo' && showVideo) {
+		let type: CardMediaType;
+		switch (mainMedia.videoStyle) {
+			case 'Loop':
+				type = 'loop-video';
+				break;
+			case 'Cinemagraph':
+				type = 'cinemagraph';
+				break;
+			default:
+				type = 'default-video';
+		}
+
+		return {
+			type,
+			mainMedia,
+		} as const;
+	}
+
+	if (mainMedia?.type === 'YoutubeVideo' && showVideo) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -305,12 +329,6 @@ export type Props = {
 	showClock?: boolean;
 	mainMedia?: MainMedia;
 	trailText?: string;
-	/**
-	 * Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
-	 * At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted.
-	 * Youtube requires a minimum width 200px.
-	 */
-	canPlayInline?: boolean;
 	kickerText?: string;
 	showPulsingDot?: boolean;
 	starRating?: Rating;
@@ -335,6 +353,7 @@ export type Props = {
 	 * The highlights container above the header is 0, the first container below the header is 1, etc.
 	 */
 	collectionId: number;
+	uniqueId: string;
 	isNewsletter?: boolean;
 	/**
 	 * An immersive feature card variant. It dictates that the card has a full width background image on
@@ -360,7 +379,6 @@ export const FeatureCard = ({
 	imageLoading,
 	showClock,
 	mainMedia,
-	canPlayInline,
 	kickerText,
 	showPulsingDot,
 	dataLinkName,
@@ -376,34 +394,37 @@ export const FeatureCard = ({
 	starRating,
 	showQuotes,
 	collectionId,
+	uniqueId,
 	isNewsletter = false,
 	isImmersive = false,
 	showVideo = false,
 	showLabsRedesign = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
-	const isVideoMainMedia = mainMedia?.type === 'YoutubeVideo';
 	const isVideoArticle = format.design === ArticleDesign.Video;
 
-	const videoDuration =
-		mainMedia?.type === 'YoutubeVideo' ? mainMedia.duration : undefined;
-
+	/**
+	 * Determine which type of media to use for the card.
+	 * For example, a video might be available, but if we don't want to show it, use an image instead.
+	 */
 	const media = getMedia({
 		imageUrl: image?.src,
 		imageAltText: image?.altText,
 		mainMedia,
-		canPlayInline,
+		showVideo,
 	});
 
-	const showYoutubeVideo =
-		canPlayInline && showVideo && mainMedia?.type === 'YoutubeVideo';
-
 	const showCardAge =
 		webPublicationDate !== undefined && showClock !== undefined;
 
 	const showCommentCount = discussionId !== undefined;
 
+	const isSelfHostedVideo =
+		media?.type === 'loop-video' ||
+		media?.type === 'default-video' ||
+		media?.type === 'cinemagraph';
+
 	const labsDataAttributes = branding
 		? getOphanComponents({
 				branding,
@@ -417,16 +438,16 @@ export const FeatureCard = ({
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div css={[baseCardStyles, hoverStyles, sublinkHoverStyles]}>
-					{!showYoutubeVideo && (
+					{media?.type !== 'youtube-video' && (
 						<CardLink
 							linkTo={linkTo}
 							headlineText={headlineText}
 							dataLinkName={dataLinkName}
 							isExternalLink={isExternalLink}
 						/>
 					)}
-					<div css={contentStyles}>
-						{showYoutubeVideo && (
+					<div className="contentStyles" css={contentStyles}>
+						{media?.type === 'youtube-video' && (
 							<div
 								data-chromatic="ignore"
 								data-component="youtube-atom"
@@ -441,15 +462,15 @@ export const FeatureCard = ({
 									defer={{ until: 'visible' }}
 								>
 									<YoutubeBlockComponent
-										id={mainMedia.id}
-										assetId={mainMedia.videoId}
+										id={media.mainMedia.id}
+										assetId={media.mainMedia.videoId}
 										index={collectionId}
-										expired={mainMedia.expired}
+										expired={media.mainMedia.expired}
 										format={format}
 										stickyVideos={false}
 										enableAds={false}
-										duration={mainMedia.duration}
-										posterImage={mainMedia.image}
+										duration={media.mainMedia.duration}
+										posterImage={media.mainMedia.image}
 										width={300}
 										height={375}
 										origin="The Guardian"
@@ -481,7 +502,7 @@ export const FeatureCard = ({
 								</Island>
 							</div>
 						)}
-						{!showYoutubeVideo && media && (
+						{media?.type !== 'youtube-video' && (
 							<div
 								css={css`
 									position: relative;
@@ -490,24 +511,41 @@ export const FeatureCard = ({
 									)};
 								`}
 							>
-								{media.type === 'video' && (
-									<div>
-										<CardPicture
-											mainImage={
+								{isSelfHostedVideo && (
+									<Island
+										priority="critical"
+										defer={{ until: 'visible' }}
+									>
+										<SelfHostedVideo
+											sources={media.mainMedia.sources}
+											atomId={media.mainMedia.atomId}
+											uniqueId={uniqueId}
+											height={media.mainMedia.height}
+											width={media.mainMedia.width}
+											// Only cinemagraphs are currently supported in feature cards
+											videoStyle="Cinemagraph"
+											posterImage={
 												media.mainMedia.image ?? ''
 											}
-											imageSize={imageSize}
-											alt={headlineText}
-											loading={imageLoading}
-											aspectRatio={aspectRatio}
-											mobileAspectRatio={
-												mobileAspectRatio
+											fallbackImage={
+												media.mainMedia.image ?? ''
 											}
+											fallbackImageSize={imageSize}
+											fallbackImageLoading={imageLoading}
+											fallbackImageAlt={
+												media.imageAltText
+											}
+											fallbackImageAspectRatio="5:4"
+											linkTo={linkTo}
+											subtitleSource={
+												media.mainMedia.subtitleSource
+											}
+											subtitleSize="large"
 										/>
-									</div>
+									</Island>
 								)}
 
-								{media.type === 'picture' && (
+								{media?.type === 'picture' && (
 									<>
 										<CardPicture
 											mainImage={media.imageUrl}
@@ -519,7 +557,7 @@ export const FeatureCard = ({
 												mobileAspectRatio
 											}
 										/>
-										{isVideoMainMedia &&
+										{mainMedia?.type === 'YoutubeVideo' &&
 											mainMedia.duration > 0 && (
 												<MediaDuration
 													mediaDuration={
@@ -697,14 +735,14 @@ export const FeatureCard = ({
 									</div>
 									{/* On video article cards, the duration is displayed in the footer */}
 									{!isVideoArticle &&
-									isVideoMainMedia &&
-									videoDuration !== undefined ? (
+									mainMedia?.type === 'YoutubeVideo' &&
+									!!Number(mainMedia.duration) ? (
 										<div css={videoPillStyles}>
 											<Pill
 												content={
 													<time>
 														{secondsToDuration(
-															videoDuration,
+															mainMedia.duration,
 														)}
 													</time>
 												}