Merge pull request #13466 from guardian/sa-add-caption-to-video-atom

Add caption to video atom

Author: SiAdcock

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { VideoAtom } from './VideoAtom';
 
 const meta = {
@@ -25,6 +26,13 @@ export const Default = {
 				mimeType: 'video/mp4',
 			},
 		],
+		isMainMedia: false,
+		format: {
+			theme: Pillar.News,
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Standard,
+		},
+		caption: 'This is a video caption',
 	},
 	decorators: [
 		(Story) => (

dotcom-rendering/src/components/VideoAtom.tsx

@@ -1,3 +1,5 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import { Caption } from './Caption';
 import { MaintainAspectRatio } from './MaintainAspectRatio';
 
 type AssetType = {
@@ -6,41 +8,61 @@ type AssetType = {
 };
 
 interface Props {
+	format: ArticleFormat;
 	assets: AssetType[];
+	isMainMedia: boolean;
 	poster?: string;
+	caption?: string;
 	height?: number;
 	width?: number;
 }
 
 export const VideoAtom = ({
+	format,
 	assets,
+	isMainMedia,
 	poster,
+	caption,
 	height = 259,
 	width = 460,
 }: Props) => {
 	if (assets.length === 0) return null; // Handle empty assets array
 	return (
-		<MaintainAspectRatio
-			height={height}
-			width={width}
-			data-spacefinder-role="inline"
-		>
-			{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption not available */}
-			<video
-				controls={true}
-				preload="metadata"
-				width={width}
+		<>
+			<MaintainAspectRatio
 				height={height}
-				poster={poster}
+				width={width}
+				data-spacefinder-role="inline"
 			>
-				{assets.map((asset, index) => (
-					<source key={index} src={asset.url} type={asset.mimeType} />
-				))}
-				<p>
-					{`Your browser doesn't support HTML5 video. Here is a `}
-					<a href={assets[0]?.url}>link to the video</a> instead.
-				</p>
-			</video>
-		</MaintainAspectRatio>
+				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption not available */}
+				<video
+					controls={true}
+					preload="metadata"
+					width={width}
+					height={height}
+					poster={poster}
+				>
+					{assets.map((asset, index) => (
+						<source
+							key={index}
+							src={asset.url}
+							type={asset.mimeType}
+						/>
+					))}
+					<p>
+						{`Your browser doesn't support HTML5 video. Here is a `}
+						<a href={assets[0]?.url}>link to the video</a> instead.
+					</p>
+				</video>
+			</MaintainAspectRatio>
+			{!!caption && (
+				<Caption
+					captionText={caption}
+					format={format}
+					mediaType="Video"
+					isMainMedia={isMainMedia}
+				/>
+			)}
+		</>
 	);
 };

dotcom-rendering/src/lib/renderElement.tsx

@@ -478,8 +478,11 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.MediaAtomBlockElement':
 			return (
 				<VideoAtom
+					format={format}
 					assets={element.assets}
 					poster={element.posterImage?.[0]?.url}
+					caption={element.title}
+					isMainMedia={isMainMedia}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.MiniProfilesBlockElement':