Merge pull request #14285 from guardian/doml/optimise-poster-image-loops

Loop videos: Reduce size of poster image

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -891,11 +891,11 @@ export const Card = ({
 							>
 								<LoopVideo
 									src={media.mainMedia.videoId}
+									atomId={media.mainMedia.atomId}
+									uniqueId={uniqueId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
-									image={media.mainMedia.image ?? ''}
-									uniqueId={uniqueId}
-									atomId={media.mainMedia.atomId}
+									posterImage={media.mainMedia.image ?? ''}
 									fallbackImage={media.mainMedia.image ?? ''}
 									fallbackImageSize={imageSize}
 									fallbackImageLoading={imageLoading}

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

@@ -8,6 +8,7 @@ import {
 	submitComponentEvent,
 } from '../client/ophan/ophan';
 import { getZIndex } from '../lib/getZIndex';
+import { generateImageURL } from '../lib/image';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
 import type { CustomPlayEventDetail } from '../lib/video';
@@ -60,13 +61,24 @@ const dispatchOphanAttentionEvent = (
 	document.dispatchEvent(event);
 };
 
+const getOptimisedPosterImage = (mainImage: string): string => {
+	const resolution = window.devicePixelRatio >= 2 ? 'high' : 'low';
+
+	return generateImageURL({
+		mainImage,
+		imageWidth: 940, // The widest a looping video can be: Flexible special, giga-boosted
+		resolution,
+		aspectRatio: '5:4',
+	});
+};
+
 type Props = {
 	src: string;
 	atomId: string;
 	uniqueId: string;
-	width: number;
 	height: number;
-	image: string;
+	width: number;
+	posterImage: string;
 	fallbackImage: CardPictureProps['mainImage'];
 	fallbackImageSize: CardPictureProps['imageSize'];
 	fallbackImageLoading: CardPictureProps['loading'];
@@ -78,9 +90,9 @@ export const LoopVideo = ({
 	src,
 	atomId,
 	uniqueId,
-	width,
 	height,
-	image,
+	width,
+	posterImage,
 	fallbackImage,
 	fallbackImageSize,
 	fallbackImageLoading,
@@ -94,9 +106,7 @@ export const LoopVideo = ({
 	const [isMuted, setIsMuted] = useState(true);
 	const [showPlayIcon, setShowPlayIcon] = useState(false);
 	const [preloadPartialData, setPreloadPartialData] = useState(false);
-	const [posterImage, setPosterImage] = useState<string | undefined>(
-		undefined,
-	);
+	const [showPosterImage, setShowPosterImage] = useState<boolean>(false);
 	const [currentTime, setCurrentTime] = useState(0);
 	const [playerState, setPlayerState] =
 		useState<(typeof PLAYER_STATES)[number]>('NOT_STARTED');
@@ -135,11 +145,11 @@ export const LoopVideo = ({
 				.catch((error: Error) => {
 					// Autoplay failed
 					logAndReportError(src, error);
-					setPosterImage(image);
+					setShowPosterImage(true);
 					setPlayerState('PAUSED_BY_BROWSER');
 				});
 		}
-	}, [src, image]);
+	}, [src]);
 
 	const pauseVideo = (
 		reason: Extract<
@@ -381,9 +391,9 @@ export const LoopVideo = ({
 			isAutoplayAllowed === false ||
 			(isInView === false && !hasBeenInView)
 		) {
-			setPosterImage(image);
+			setShowPosterImage(true);
 		}
-	}, [isAutoplayAllowed, isInView, hasBeenInView, image]);
+	}, [isAutoplayAllowed, isInView, hasBeenInView]);
 
 	/**
 	 * We almost always want to preload some of the video data. If a user has prefers-reduced-motion
@@ -506,6 +516,10 @@ export const LoopVideo = ({
 
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
+	const optimisedPosterImage = showPosterImage
+		? getOptimisedPosterImage(posterImage)
+		: undefined;
+
 	return (
 		<figure
 			ref={setNode}
@@ -519,7 +533,7 @@ export const LoopVideo = ({
 				uniqueId={uniqueId}
 				width={width}
 				height={height}
-				posterImage={posterImage}
+				posterImage={optimisedPosterImage}
 				FallbackImageComponent={FallbackImageComponent}
 				currentTime={currentTime}
 				setCurrentTime={setCurrentTime}

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

@@ -27,7 +27,8 @@ export const Default: Story = {
 		atomId: 'test-atom-1',
 		height: 720,
 		width: 900,
-		image: 'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
+		posterImage:
+			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImage: '',
 	},
 };