Use dimensions from video assets

Author: simonbyford

dotcom-rendering/src/components/LoopVideoInArticle.importable.tsx

@@ -1,5 +1,9 @@
 import type { ArticleFormat } from '../lib/articleFormat';
-import { convertAssetsToVideoSources, getSubtitleAsset } from '../lib/video';
+import {
+	convertAssetsToVideoSources,
+	getFirstVideoAsset,
+	getSubtitleAsset,
+} from '../lib/video';
 import type { MediaAtomBlockElement } from '../types/content';
 import { Caption } from './Caption';
 import { SelfHostedVideo } from './SelfHostedVideo.importable';
@@ -17,6 +21,7 @@ export const LoopVideoInArticle = ({
 }: LoopVideoInArticleProps) => {
 	const posterImageUrl = element.posterImage?.[0]?.url;
 	const caption = element.title;
+	const firstVideoAsset = getFirstVideoAsset(element.assets);
 
 	if (!posterImageUrl) {
 		return null;
@@ -28,18 +33,18 @@ export const LoopVideoInArticle = ({
 				atomId={element.id}
 				fallbackImage={posterImageUrl}
 				fallbackImageAlt={caption}
-				fallbackImageAspectRatio="5:4"
+				fallbackImageAspectRatio={firstVideoAsset?.aspectRatio ?? '5:4'}
 				fallbackImageLoading="lazy"
 				fallbackImageSize="small"
-				height={400}
+				height={firstVideoAsset?.dimensions?.height ?? 400}
 				linkTo="Article-embed-MediaAtomBlockElement"
 				posterImage={posterImageUrl}
 				sources={convertAssetsToVideoSources(element.assets)}
 				subtitleSize="medium"
 				subtitleSource={getSubtitleAsset(element.assets)}
 				videoStyle="Loop"
 				uniqueId={element.id}
-				width={500}
+				width={firstVideoAsset?.dimensions?.width ?? 500}
 			/>
 			{!!caption && (
 				<Caption

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -2110,6 +2110,24 @@
                 "mimeType": {
                     "type": "string"
                 },
+                "dimensions": {
+                    "type": "object",
+                    "properties": {
+                        "width": {
+                            "type": "number"
+                        },
+                        "height": {
+                            "type": "number"
+                        }
+                    },
+                    "required": [
+                        "height",
+                        "width"
+                    ]
+                },
+                "aspectRatio": {
+                    "type": "string"
+                },
                 "fields": {
                     "type": "object",
                     "properties": {

dotcom-rendering/src/lib/video.ts

@@ -49,3 +49,9 @@ export const convertAssetsToVideoSources = (assets: VideoAssets[]): Source[] =>
 
 export const getSubtitleAsset = (assets: VideoAssets[]): string | undefined =>
 	assets.find((asset) => asset.mimeType === 'text/vtt')?.url;
+
+export const getFirstVideoAsset = (
+	assets: VideoAssets[],
+): VideoAssets | undefined => {
+	return assets.find((asset) => isSupportedMimeType(asset.mimeType));
+};

dotcom-rendering/src/model/block-schema.json

@@ -1598,6 +1598,24 @@
                 "mimeType": {
                     "type": "string"
                 },
+                "dimensions": {
+                    "type": "object",
+                    "properties": {
+                        "width": {
+                            "type": "number"
+                        },
+                        "height": {
+                            "type": "number"
+                        }
+                    },
+                    "required": [
+                        "height",
+                        "width"
+                    ]
+                },
+                "aspectRatio": {
+                    "type": "string"
+                },
                 "fields": {
                     "type": "object",
                     "properties": {

dotcom-rendering/src/types/content.ts

@@ -944,6 +944,11 @@ export interface Image {
 export interface VideoAssets {
 	url: string;
 	mimeType?: string;
+	dimensions?: {
+		width: number;
+		height: number;
+	};
+	aspectRatio?: string;
 	fields?: {
 		source?: string;
 		embeddable?: string;