Merge pull request #14300 from guardian/rjr-fix-video-main-media-poster-images

Video atom as main media in articles - poster image fix

Author: KaliedaRik

dotcom-rendering/src/components/MainMedia.tsx

@@ -89,6 +89,7 @@ type Props = {
 	editionId: EditionId;
 	shouldHideAds: boolean;
 	contentType?: string;
+	contentLayout?: string;
 };
 
 export const MainMedia = ({
@@ -107,6 +108,7 @@ export const MainMedia = ({
 	editionId,
 	shouldHideAds,
 	contentType,
+	contentLayout,
 }: Props) => {
 	return (
 		<div css={[mainMedia, chooseWrapper(format)]}>
@@ -131,6 +133,7 @@ export const MainMedia = ({
 					editionId={editionId}
 					shouldHideAds={shouldHideAds}
 					contentType={contentType}
+					contentLayout={contentLayout}
 				/>
 			))}
 		</div>

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

@@ -54,6 +54,7 @@ type Props = {
 	byline?: string;
 	showByline?: boolean;
 	contentType?: string;
+	contentLayout?: string;
 };
 
 export const YoutubeBlockComponent = ({
@@ -95,6 +96,7 @@ export const YoutubeBlockComponent = ({
 	byline,
 	showByline,
 	contentType,
+	contentLayout,
 }: Props) => {
 	const [consentState, setConsentState] = useState<ConsentState | undefined>(
 		undefined,
@@ -113,13 +115,22 @@ export const YoutubeBlockComponent = ({
 	 */
 	const uniqueId = `${assetId}-${index}`;
 
-	// We need Video articles generated directly from Media Atom Maker
-	// to always show their poster (16:9) image, but in other cases
-	// use the override image (often supplied as 5:4 then cropped to 16:9)
 	const getPosterImage = () => {
+		// We need Video articles generated directly from Media Atom Maker
+		// to always show their poster (16:9) image, but in other cases
+		// use the override image (often supplied as 5:4 then cropped to 16:9)
 		if (contentType && contentType.toLowerCase() === 'video') {
 			return posterImage;
 		}
+
+		// For Standard Articles with a Video atom for their main media
+		// we need to display the poster image
+		if (contentLayout && contentLayout.toLowerCase() === 'standardlayout') {
+			return posterImage;
+		}
+
+		// Default behaviour is to use the override image, if supplied
+		// otherwise use the poster image
 		return overrideImage ?? posterImage;
 	};
 

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -519,6 +519,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									hideCaption={isMedia}
 									shouldHideAds={article.shouldHideAds}
 									contentType={article.contentType}
+									contentLayout="StandardLayout"
 								/>
 							</div>
 						</GridItem>

dotcom-rendering/src/lib/renderElement.tsx

@@ -97,6 +97,7 @@ type Props = {
 	isSectionedMiniProfilesArticle?: boolean;
 	shouldHideAds: boolean;
 	contentType?: string;
+	contentLayout?: string;
 };
 
 // updateRole modifies the role of an element in a way appropriate for most
@@ -159,6 +160,7 @@ export const renderElement = ({
 	isSectionedMiniProfilesArticle = false,
 	shouldHideAds,
 	contentType,
+	contentLayout,
 }: Props) => {
 	const isBlog =
 		format.design === ArticleDesign.LiveBlog ||
@@ -888,6 +890,7 @@ export const renderElement = ({
 						iconSizeOnMobile="large"
 						hidePillOnMobile={false}
 						contentType={contentType}
+						contentLayout={contentLayout}
 					/>
 				</Island>
 			);
@@ -956,6 +959,7 @@ export const RenderArticleElement = ({
 	isSectionedMiniProfilesArticle,
 	shouldHideAds,
 	contentType,
+	contentLayout,
 }: Props) => {
 	const withUpdatedRole = updateRole(element, format);
 
@@ -983,6 +987,7 @@ export const RenderArticleElement = ({
 		isSectionedMiniProfilesArticle,
 		shouldHideAds,
 		contentType,
+		contentLayout,
 	});
 
 	const needsFigure = !bareElements.has(element._type);