add basic main media placeholder for hosted article layout

Author: cemms1

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -6,6 +6,7 @@ import {
 } from '@guardian/source/foundations';
 import { HostedContentHeader } from '../components/HostedContentHeader';
 import { Island } from '../components/Island';
+import { MainMedia } from '../components/MainMedia';
 import { Section } from '../components/Section';
 import { ShareButton } from '../components/ShareButton.importable';
 import { grid } from '../grid';
@@ -50,10 +51,8 @@ const shareButtonWrapper = css`
 
 export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	const {
-		content: {
-			frontendData: { headline, standfirst, pageId, webTitle },
-		},
 		format,
+		content: { frontendData: article },
 	} = props;
 
 	return (
@@ -82,17 +81,33 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 						css={[
 							grid.column.all,
 							css`
-								min-height: 200px;
+								overflow: hidden;
+								max-height: 400px;
 							`,
 						]}
 					>
-						Main media
+						<MainMedia
+							format={format}
+							elements={article.mainMediaElements}
+							host={article.config.host}
+							pageId={article.pageId}
+							webTitle={article.webTitle}
+							ajaxUrl={article.config.ajaxUrl}
+							abTests={article.config.abTests}
+							switches={article.config.switches}
+							isAdFreeUser={article.isAdFreeUser}
+							isSensitive={article.config.isSensitive}
+							editionId={article.editionId}
+							hideCaption={true}
+							shouldHideAds={true}
+							contentType={article.contentType}
+						/>
 					</div>
 					<div
 						css={[grid.between('centre-column-start', 'grid-end')]}
 					>
 						{/** @todo Use ArticleHeadline component */}
-						{headline}
+						{article.headline}
 					</div>
 				</header>
 				<div
@@ -115,8 +130,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 									defer={{ until: 'visible' }}
 								>
 									<ShareButton
-										pageId={pageId}
-										webTitle={webTitle}
+										pageId={article.pageId}
+										webTitle={article.webTitle}
 										format={format}
 										context="ArticleMeta"
 									/>
@@ -128,7 +143,7 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 						Onward content
 					</div>
 					<div css={[border, grid.column.centre, 'grid-row: 1']}>
-						{standfirst}
+						{article.standfirst}
 					</div>
 					<div css={[border, grid.column.centre]}>Meta</div>
 					<article css={[border, grid.column.centre]}>Body</article>