Merge branch 'mob/scrollable-products' into oa/navigation-arrows

Author: oliverabrahams

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -209,13 +209,10 @@ const generateFixedWidthColumStyles = ({
 	`);
 	for (const { breakpoint, width } of fixedSlideWidth.widthFromBreakpoints) {
 		fixedWidths.push(css`
-				${from[breakpoint]}; {
-					grid-template-columns: repeat(
-						${carouselLength},
-						${width}px
-					);
-				}
-			`);
+			${from[breakpoint]} {
+				grid-template-columns: repeat(${carouselLength}, ${width}px);
+			}
+		`);
 	}
 	return fixedWidths;
 };

dotcom-rendering/src/frontend/feFront.ts

@@ -112,6 +112,10 @@ export interface FEMediaAsset {
 	platform: string;
 	mimeType?: string;
 	assetType: string;
+	dimensions?: {
+		width: number;
+		height: number;
+	};
 }
 
 /** @see https://github.com/guardian/frontend/blob/0bf69f55a/common/app/model/content/Atom.scala#L158-L169 */
@@ -128,10 +132,6 @@ export interface FEMediaAtom {
 	activeVersion?: number;
 	videoPlayerFormat?: 'Default' | 'Loop' | 'Cinemagraph';
 	// channelId?: string; // currently unused
-	dimensions?: {
-		width: number;
-		height: number;
-	};
 }
 
 export type FEFrontCard = {

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

@@ -3247,21 +3247,6 @@
                         "Loop"
                     ],
                     "type": "string"
-                },
-                "dimensions": {
-                    "type": "object",
-                    "properties": {
-                        "width": {
-                            "type": "number"
-                        },
-                        "height": {
-                            "type": "number"
-                        }
-                    },
-                    "required": [
-                        "height",
-                        "width"
-                    ]
                 }
             },
             "required": [
@@ -3287,6 +3272,21 @@
                 },
                 "assetType": {
                     "type": "string"
+                },
+                "dimensions": {
+                    "type": "object",
+                    "properties": {
+                        "width": {
+                            "type": "number"
+                        },
+                        "height": {
+                            "type": "number"
+                        }
+                    },
+                    "required": [
+                        "height",
+                        "width"
+                    ]
                 }
             },
             "required": [

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

@@ -1420,21 +1420,6 @@
                         "Loop"
                     ],
                     "type": "string"
-                },
-                "dimensions": {
-                    "type": "object",
-                    "properties": {
-                        "width": {
-                            "type": "number"
-                        },
-                        "height": {
-                            "type": "number"
-                        }
-                    },
-                    "required": [
-                        "height",
-                        "width"
-                    ]
                 }
             },
             "required": [
@@ -1460,6 +1445,21 @@
                 },
                 "assetType": {
                     "type": "string"
+                },
+                "dimensions": {
+                    "type": "object",
+                    "properties": {
+                        "width": {
+                            "type": "number"
+                        },
+                        "height": {
+                            "type": "number"
+                        }
+                    },
+                    "required": [
+                        "height",
+                        "width"
+                    ]
                 }
             },
             "required": [

dotcom-rendering/src/model/enhanceCards.test.ts

@@ -11,13 +11,21 @@ describe('Enhance Cards', () => {
 				platform: 'Url',
 				mimeType: 'video/mp4',
 				assetType: 'Video',
+				dimensions: {
+					height: 400,
+					width: 500,
+				},
 			},
 			{
 				id: 'https://guim-example.co.uk/atomID-1.m3u8',
 				version: 1,
 				platform: 'Url',
 				mimeType: 'application/x-mpegURL',
 				assetType: 'Video',
+				dimensions: {
+					height: 400,
+					width: 500,
+				},
 			},
 		];
 		const mediaAtom: FEMediaAtom = {
@@ -73,13 +81,21 @@ describe('Enhance Cards', () => {
 				platform: 'Url',
 				mimeType: 'application/x-mpegURL',
 				assetType: 'Video',
+				dimensions: {
+					height: 400,
+					width: 500,
+				},
 			},
 			{
 				id: 'https://guim-example.co.uk/atomID-1.mp4',
 				version: 1,
 				platform: 'Url',
 				mimeType: 'video/mp4',
 				assetType: 'Video',
+				dimensions: {
+					height: 400,
+					width: 500,
+				},
 			},
 		];
 		const mediaAtom: FEMediaAtom = {

dotcom-rendering/src/model/enhanceCards.ts

@@ -204,10 +204,10 @@ export const getActiveMediaAtom = (
 			({ version }) => version === mediaAtom.activeVersion,
 		);
 
-		const videoAssets = assets.filter(
+		const firstVideoAsset = assets.filter(
 			({ assetType }) => assetType === 'Video',
-		);
-		if (!videoAssets.length) return undefined;
+		)[0];
+		if (!firstVideoAsset) return undefined;
 
 		const image = decideMediaAtomImage(
 			videoReplace,
@@ -219,7 +219,7 @@ export const getActiveMediaAtom = (
 		 * Each version of a media atom will contain assets for self-hosted OR YouTube, but not both.
 		 * Therefore, we check the platform of the first asset and assume the rest are the same.
 		 */
-		if (assets[0]?.platform === 'Url') {
+		if (firstVideoAsset.platform === 'Url') {
 			/**
 			 * Take one source for each supported video file type.
 			 */
@@ -249,20 +249,20 @@ export const getActiveMediaAtom = (
 				})),
 				subtitleSource: subtitleAsset?.id,
 				duration: mediaAtom.duration ?? 0,
-				width: mediaAtom.dimensions?.width ?? 500,
-				height: mediaAtom.dimensions?.height ?? 400,
+				width: firstVideoAsset.dimensions?.width ?? 500,
+				height: firstVideoAsset.dimensions?.height ?? 400,
 				image,
 			};
 		}
 
 		/**
 		 * There should only be one asset for Youtube atoms.
 		 */
-		if (assets[0]?.platform === 'Youtube') {
+		if (firstVideoAsset.platform === 'Youtube') {
 			return {
 				type: 'YoutubeVideo',
 				id: mediaAtom.id,
-				videoId: assets[0].id,
+				videoId: firstVideoAsset.id,
 				duration: mediaAtom.duration ?? 0,
 				title: mediaAtom.title,
 				// Size fixed to a 5:3 ratio