Merge branch 'jm/new-sign-in-gate' of github.com:guardian/dotcom-rendering into jm/new-sign-in-gate

Juarez Mota · Juarez Mota · commit c859d9f58b12 · 2025-07-14T14:24:17.000+01:00
diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -327,8 +327,8 @@ export type Props = {
 	collectionId: number;
 	isNewsletter?: boolean;
 	/**
-	 * An immersive feature card variant. It dictates that the card has a full width background image on all breakpoints. It also dictates the the card change aspect ratio to 5:3 on desktop and 4:5 on mobile.
-	 *
+	 * An immersive feature card variant. It dictates that the card has a full width background image on
+	 * all breakpoints. It also dictates the the card change aspect ratio to 5:3 on desktop and 4:5 on mobile.
 	 */
 	isImmersive?: boolean;
 	showVideo?: boolean;
diff --git a/dotcom-rendering/src/components/LoopVideo.importable.tsx b/dotcom-rendering/src/components/LoopVideo.importable.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { log } from '@guardian/libs';
+import { log, storage } from '@guardian/libs';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { submitClickComponentEvent } from '../client/ophan/ophan';
 import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
@@ -12,7 +12,7 @@ import {
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { useConfig } from './ConfigContext';
-import type { PLAYER_STATES } from './LoopVideoPlayer';
+import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
 
 const videoContainerStyles = css`
@@ -80,11 +80,68 @@ export const LoopVideo = ({
 		threshold: 0.5,
 	});
 
+	const playVideo = useCallback(async () => {
+		if (!vidRef.current) return;
+
+		/** https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay#example_handling_play_failures */
+		const startPlayPromise = vidRef.current.play();
+
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- In earlier versions of the HTML specification, play() didn't return a value
+		if (startPlayPromise !== undefined) {
+			await startPlayPromise
+				.catch((error) => {
+					// Autoplay failed
+					const message = `Autoplay failure for loop video. Source: ${src} could not be played. Error: ${error}`;
+					if (error instanceof Error) {
+						window.guardian.modules.sentry.reportError(
+							new Error(message),
+							'loop-video',
+						);
+					}
+
+					log('dotcom', message);
+
+					setPosterImage(image);
+					setShowPlayIcon(true);
+				})
+				.then(() => {
+					// Autoplay succeeded
+					setPlayerState('PLAYING');
+				});
+		}
+	}, [src, image]);
+
+	const pauseVideo = (
+		reason: Extract<
+			PlayerStates,
+			'PAUSED_BY_USER' | 'PAUSED_BY_INTERSECTION_OBSERVER'
+		>,
+	) => {
+		if (!vidRef.current) return;
+
+		if (reason === 'PAUSED_BY_INTERSECTION_OBSERVER') {
+			setIsMuted(true);
+		}
+
+		setPlayerState(reason);
+		void vidRef.current.pause();
+	};
+
+	const playPauseVideo = () => {
+		if (playerState === 'PLAYING') {
+			if (isInView) {
+				pauseVideo('PAUSED_BY_USER');
+			}
+		} else {
+			void playVideo();
+		}
+	};
+
 	/**
 	 * Setup.
 	 *
-	 * Register the users motion preferences.
-	 * Creates event listeners to control playback when there are multiple videos.
+	 * 1. Register the user's motion preferences.
+	 * 2. Creates event listeners to control playback when there are multiple videos.
 	 */
 	useEffect(() => {
 		/**
@@ -93,7 +150,19 @@ export const LoopVideo = ({
 		const userPrefersReducedMotion = window.matchMedia(
 			'(prefers-reduced-motion: reduce)',
 		).matches;
-		setIsAutoplayAllowed(!userPrefersReducedMotion);
+
+		/**
+		 * The user indicates a preference for no flashing elements.
+		 * `flashingPreference` is `null` if no preference exists and
+		 * explicitly `false` when the reader has said they don't want flashing.
+		 */
+		const flashingPreferences = storage.local.get(
+			'gu.prefs.accessibility.flashing-elements',
+		);
+
+		setIsAutoplayAllowed(
+			!userPrefersReducedMotion && flashingPreferences !== false,
+		);
 
 		/**
 		 * Mutes the current video when another video is unmuted
@@ -113,7 +182,7 @@ export const LoopVideo = ({
 		};
 
 		/**
-		 * Mute the current video when a Youtube video is played
+		 * Mute the current video when a YouTube video is played
 		 * Triggered by the CustomEvent in YoutubeAtomPlayer.
 		 */
 		const handleCustomPlayYoutubeEvent = () => {
@@ -161,10 +230,9 @@ export const LoopVideo = ({
 			(playerState === 'NOT_STARTED' ||
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER')
 		) {
-			setPlayerState('PLAYING');
-			void vidRef.current.play();
+			void playVideo();
 		}
-	}, [isInView, isPlayable, playerState, isAutoplayAllowed]);
+	}, [isAutoplayAllowed, isInView, isPlayable, playerState, playVideo]);
 
 	/**
 	 * Stops playback when the video is scrolled out of view, resumes playbacks
@@ -176,9 +244,7 @@ export const LoopVideo = ({
 		const isNoLongerInView =
 			playerState === 'PLAYING' && isInView === false;
 		if (isNoLongerInView) {
-			setPlayerState('PAUSED_BY_INTERSECTION_OBSERVER');
-			void vidRef.current.pause();
-			setIsMuted(true);
+			pauseVideo('PAUSED_BY_INTERSECTION_OBSERVER');
 		}
 
 		/**
@@ -189,11 +255,9 @@ export const LoopVideo = ({
 		const isBackInView =
 			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
 		if (isBackInView) {
-			setPlayerState('PLAYING');
-
-			void vidRef.current.play();
+			void playVideo();
 		}
-	}, [isInView, hasBeenInView, playerState]);
+	}, [isInView, hasBeenInView, playerState, playVideo]);
 
 	/**
 	 * Show the play icon when the video is not playing, except for when it is scrolled
@@ -237,30 +301,6 @@ export const LoopVideo = ({
 
 	if (adapted) return fallbackImageComponent;
 
-	const playVideo = () => {
-		if (!vidRef.current) return;
-
-		setPlayerState('PLAYING');
-		void vidRef.current.play();
-	};
-
-	const pauseVideo = () => {
-		if (!vidRef.current) return;
-
-		setPlayerState('PAUSED_BY_USER');
-		void vidRef.current.pause();
-	};
-
-	const playPauseVideo = () => {
-		if (playerState === 'PLAYING') {
-			if (isInView) {
-				pauseVideo();
-			}
-		} else {
-			playVideo();
-		}
-	};
-
 	const handlePlayPauseClick = (event: React.SyntheticEvent) => {
 		event.preventDefault();
 		playPauseVideo();
@@ -280,12 +320,18 @@ export const LoopVideo = ({
 		}
 	};
 
+	/**
+	 * If the video could not be loaded due to an error, report to
+	 * Sentry and log in the console.
+	 */
 	const onError = () => {
+		const message = `Loop video could not be played. source: ${src}`;
+
 		window.guardian.modules.sentry.reportError(
-			new Error(`Loop video could not be played. source: ${src}`),
+			new Error(message),
 			'loop-video',
 		);
-		log('dotcom', `Loop video could not be played. source: ${src}`);
+		log('dotcom', message);
 	};
 
 	const seekForward = () => {
@@ -323,7 +369,7 @@ export const LoopVideo = ({
 				playPauseVideo();
 				break;
 			case 'Escape':
-				pauseVideo();
+				pauseVideo('PAUSED_BY_USER');
 				break;
 			case 'ArrowRight':
 				seekForward();
diff --git a/dotcom-rendering/src/components/LoopVideoPlayer.tsx b/dotcom-rendering/src/components/LoopVideoPlayer.tsx
@@ -58,6 +58,8 @@ export const PLAYER_STATES = [
 	'PAUSED_BY_INTERSECTION_OBSERVER',
 ] as const;
 
+export type PlayerStates = (typeof PLAYER_STATES)[number];
+
 type Props = {
 	src: string;
 	atomId: string;
@@ -67,7 +69,7 @@ type Props = {
 	fallbackImageComponent: JSX.Element;
 	isPlayable: boolean;
 	setIsPlayable: Dispatch<SetStateAction<boolean>>;
-	playerState: (typeof PLAYER_STATES)[number];
+	playerState: PlayerStates;
 	currentTime: number;
 	setCurrentTime: Dispatch<SetStateAction<number>>;
 	isMuted: boolean;
diff --git a/dotcom-rendering/src/components/VideoAtom.stories.tsx b/dotcom-rendering/src/components/VideoAtom.stories.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { VideoAtom } from './VideoAtom';
 
 const meta = {
@@ -25,6 +26,13 @@ export const Default = {
 				mimeType: 'video/mp4',
 			},
 		],
+		isMainMedia: false,
+		format: {
+			theme: Pillar.News,
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Standard,
+		},
+		caption: 'This is a video caption',
 	},
 	decorators: [
 		(Story) => (
diff --git a/dotcom-rendering/src/components/VideoAtom.tsx b/dotcom-rendering/src/components/VideoAtom.tsx
@@ -1,3 +1,5 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import { Caption } from './Caption';
 import { MaintainAspectRatio } from './MaintainAspectRatio';
 
 type AssetType = {
@@ -6,41 +8,61 @@ type AssetType = {
 };
 
 interface Props {
+	format: ArticleFormat;
 	assets: AssetType[];
+	isMainMedia: boolean;
 	poster?: string;
+	caption?: string;
 	height?: number;
 	width?: number;
 }
 
 export const VideoAtom = ({
+	format,
 	assets,
+	isMainMedia,
 	poster,
+	caption,
 	height = 259,
 	width = 460,
 }: Props) => {
 	if (assets.length === 0) return null; // Handle empty assets array
 	return (
-		<MaintainAspectRatio
-			height={height}
-			width={width}
-			data-spacefinder-role="inline"
-		>
-			{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption not available */}
-			<video
-				controls={true}
-				preload="metadata"
-				width={width}
+		<>
+			<MaintainAspectRatio
 				height={height}
-				poster={poster}
+				width={width}
+				data-spacefinder-role="inline"
 			>
-				{assets.map((asset, index) => (
-					<source key={index} src={asset.url} type={asset.mimeType} />
-				))}
-				<p>
-					{`Your browser doesn't support HTML5 video. Here is a `}
-					<a href={assets[0]?.url}>link to the video</a> instead.
-				</p>
-			</video>
-		</MaintainAspectRatio>
+				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption not available */}
+				<video
+					controls={true}
+					preload="metadata"
+					width={width}
+					height={height}
+					poster={poster}
+				>
+					{assets.map((asset, index) => (
+						<source
+							key={index}
+							src={asset.url}
+							type={asset.mimeType}
+						/>
+					))}
+					<p>
+						{`Your browser doesn't support HTML5 video. Here is a `}
+						<a href={assets[0]?.url}>link to the video</a> instead.
+					</p>
+				</video>
+			</MaintainAspectRatio>
+			{!!caption && (
+				<Caption
+					captionText={caption}
+					format={format}
+					mediaType="Video"
+					isMainMedia={isMainMedia}
+				/>
+			)}
+		</>
 	);
 };
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
@@ -478,8 +478,11 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.MediaAtomBlockElement':
 			return (
 				<VideoAtom
+					format={format}
 					assets={element.assets}
 					poster={element.posterImage?.[0]?.url}
+					caption={element.title}
+					isMainMedia={isMainMedia}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.MiniProfilesBlockElement':
