MainMediaGallery renders picture sources

Co-authored-by: Jamie B <[email protected]>
Co-authored-by: Marjan Kalanaki <[email protected]>

Author: 3 people

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

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { images } from '../../fixtures/generated/images';
+import { grid } from '../grid';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { MainMediaGallery } from './MainMediaGallery';
 
 const meta = {
@@ -11,5 +14,20 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const FirstStory = {
-	args: {},
+	args: {
+		mainMedia: images[0],
+		format: {
+			design: ArticleDesign.Gallery,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.News,
+		},
+	},
+	decorators: [
+		// To make it easier to see the top border above the date
+		(Story) => (
+			<div css={[grid.container]}>
+				<Story />
+			</div>
+		),
+	],
 } satisfies Story;

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -1 +1,62 @@
-export const MainMediaGallery = () => <>Hello world</>;
+import { css } from '@emotion/react';
+import { breakpoints, from } from '@guardian/source/foundations';
+import { grid } from '../grid';
+import { type ArticleFormat } from '../lib/articleFormat';
+import { getImage } from '../lib/image';
+import { type ImageBlockElement } from '../types/content';
+import { generateSources, Sources } from './Picture';
+
+type Props = {
+	mainMedia: ImageBlockElement;
+	format: ArticleFormat;
+};
+
+const styles = css`
+	${grid.column.all}
+	height: calc(80vh - 48px);
+	grid-row: 1/5;
+	${from.desktop} {
+		height: calc(100vh - 48px);
+	}
+`;
+
+export const MainMediaGallery = ({ mainMedia, format }: Props) => {
+	const asset = getImage(mainMedia.media.allImages);
+
+	if (asset === undefined) {
+		return null;
+	}
+
+	const width = parseInt(asset.fields.width, 10);
+	const height = parseInt(asset.fields.height, 10);
+
+	if (isNaN(width) || isNaN(height)) {
+		return null;
+	}
+
+	const sources = generateSources(asset.url, [
+		{ breakpoint: breakpoints.mobile, width: 480 },
+		{ breakpoint: breakpoints.mobileLandscape, width: 660 },
+		{ breakpoint: breakpoints.phablet, width: 740 },
+		{ breakpoint: breakpoints.tablet, width: 980 },
+		{ breakpoint: breakpoints.desktop, width: 1140 },
+		{ breakpoint: breakpoints.leftCol, width: 1300 },
+		{ breakpoint: breakpoints.wide, width: 1900 },
+	] as const);
+
+	const fallbackSource = sources[0];
+
+	return (
+		<figure css={styles}>
+			<picture>
+				<Sources sources={sources} />
+				<img
+					alt={mainMedia.data.alt}
+					src={fallbackSource?.lowResUrl}
+					width={fallbackSource?.width}
+					height={(fallbackSource?.width ?? 1) * 1.0}
+				/>
+			</picture>
+		</figure>
+	);
+};

dotcom-rendering/src/lib/image.ts

@@ -78,3 +78,20 @@ export const generateImageURL = ({
 		url.pathname
 	}?${params.toString()}`;
 };
+
+export const isSupported = (imageUrl: string): boolean => {
+	const supportedImages = ['jpg', 'jpeg', 'png', 'gif'];
+	return supportedImages.some((extension) =>
+		imageUrl.endsWith(`.${extension}`),
+	);
+};
+
+export const getImage = (images: Image[]): Image | undefined => {
+	const image = getMaster(images) ?? getLargest(images);
+
+	if (image?.url === undefined || !isSupported(image.url)) {
+		return undefined;
+	}
+
+	return image;
+};