Merge pull request #13843 from guardian/doml/loop-video-prefers-reduced-motion

Don't autoplay if user prefers reduced motion

Author: domlander

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

@@ -8,29 +8,29 @@ import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { useConfig } from './ConfigContext';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
 
-const videoContainerStyles = (height: number, width: number) => css`
+const videoContainerStyles = css`
 	z-index: ${getZIndex('loop-video-container')};
 	position: relative;
-	height: ${height}px;
-	width: ${width}px;
 `;
 
 type Props = {
 	src: string;
 	videoId: string;
 	width?: number;
 	height?: number;
+	thumbnailImage: string;
+	fallbackImageComponent: JSX.Element;
 	hasAudio?: boolean;
-	fallbackImage: JSX.Element;
 };
 
 export const LoopVideo = ({
 	src,
 	videoId,
 	width = 600,
 	height = 360,
+	thumbnailImage,
+	fallbackImageComponent,
 	hasAudio = true,
-	fallbackImage,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -39,6 +39,7 @@ export const LoopVideo = ({
 	const [isPlaying, setIsPlaying] = useState(false);
 	const [isMuted, setIsMuted] = useState(true);
 	const [currentTime, setCurrentTime] = useState(0);
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
 	/**
 	 * Keep a track of whether the video has been in view. We only want to
 	 * pause the video if it has been in view.
@@ -57,11 +58,17 @@ export const LoopVideo = ({
 		if (!vidRef.current) return;
 
 		if (isInView) {
-			if (!hasBeenInView) {
-				// When the video first comes into view, it should autoplay
-				setIsPlaying(true);
-				void vidRef.current.play();
+			// We only want to autoplay the first time the video comes into view.
+			if (hasBeenInView) return;
+
+			if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+				setPrefersReducedMotion(true);
+				return;
 			}
+
+			setIsPlaying(true);
+			void vidRef.current.play();
+
 			setHasBeenInView(true);
 		}
 
@@ -73,7 +80,7 @@ export const LoopVideo = ({
 
 	if (renderingTarget !== 'Web') return null;
 
-	if (adapted) return fallbackImage;
+	if (adapted) return fallbackImageComponent;
 
 	const handleClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
@@ -141,18 +148,14 @@ export const LoopVideo = ({
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
 	return (
-		<div
-			className="loop-video-container"
-			ref={setNode}
-			css={videoContainerStyles(height, width)}
-		>
+		<div ref={setNode} css={videoContainerStyles}>
 			<LoopVideoPlayer
 				src={src}
 				videoId={videoId}
 				width={width}
 				height={height}
 				hasAudio={hasAudio}
-				fallbackImage={fallbackImage}
+				fallbackImageComponent={fallbackImageComponent}
 				currentTime={currentTime}
 				setCurrentTime={setCurrentTime}
 				ref={vidRef}
@@ -166,6 +169,9 @@ export const LoopVideo = ({
 				handleKeyDown={handleKeyDown}
 				onError={onError}
 				AudioIcon={AudioIcon}
+				thumbnailImage={
+					prefersReducedMotion ? thumbnailImage : undefined
+				}
 			/>
 		</div>
 	);

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

@@ -23,9 +23,11 @@ export const Default = {
 		videoId: 'test-video-1',
 		height: 337.5,
 		width: 600,
-		fallbackImage: (
+		thumbnailImage:
+			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
+		fallbackImageComponent: (
 			<CardPicture
-				mainImage="https://i.guim.co.uk/img/media/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/91_0_1800_1080/master/1800.jpg?width=465&dpr=1&s=none&crop=5%3A4"
+				mainImage="https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg"
 				imageSize="large"
 				loading="eager"
 			/>

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -42,7 +42,7 @@ type Props = {
 	width: number;
 	height: number;
 	hasAudio: boolean;
-	fallbackImage: JSX.Element;
+	fallbackImageComponent: JSX.Element;
 	isPlayable: boolean;
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
 	isPlaying: boolean;
@@ -55,6 +55,12 @@ type Props = {
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
+	/**
+	 * We ONLY show a thumbnail image when the user has indicated that they do
+	 * not want videos to play automatically, e.g. prefers reduced motion. Otherwise,
+	 * we do not bother downloading the image, as the video will be autoplayed.
+	 */
+	thumbnailImage?: string;
 };
 
 /**
@@ -69,7 +75,8 @@ export const LoopVideoPlayer = forwardRef(
 			width,
 			height,
 			hasAudio,
-			fallbackImage,
+			fallbackImageComponent,
+			thumbnailImage,
 			isPlayable,
 			setIsPlayable,
 			isPlaying,
@@ -93,12 +100,13 @@ export const LoopVideoPlayer = forwardRef(
 				<video
 					id={loopVideoId}
 					ref={ref}
-					preload="none"
+					preload={thumbnailImage ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}
 					playsInline={true}
 					height={height}
 					width={width}
+					poster={thumbnailImage ?? undefined}
 					onPlaying={() => {
 						setIsPlaying(true);
 					}}
@@ -126,7 +134,7 @@ export const LoopVideoPlayer = forwardRef(
 					performance on supported browsers. https://web.dev/articles/video-and-source-tags */}
 					{/* <source src={webmSrc} type="video/webm"> */}
 					<source src={src} type="video/mp4" />
-					{fallbackImage}
+					{fallbackImageComponent}
 				</video>
 				{ref && 'current' in ref && ref.current && (
 					<>