Merge branch 'main' into ei/add-xcust-param-to-skimlinks

Author: charleycampbell

dotcom-rendering/package.json

@@ -37,7 +37,7 @@
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "22.5.0",
+		"@guardian/libs": "23.0.0",
 		"@guardian/ophan-tracker-js": "2.2.10",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",

dotcom-rendering/playwright.config.ts

@@ -11,9 +11,9 @@ export const PORT = isDev ? 3030 : 9000;
  */
 export default defineConfig({
 	testDir: './playwright/tests',
-	// Don't run tests _within_ files in parallel as this causes flakiness locally - investigating
+	// Don't run tests _within_ files in parallel locally as this causes flakiness
 	// Test files still run in parallel as per the number of workers set below
-	fullyParallel: false,
+	fullyParallel: !!process.env.CI,
 	// Fail the build on CI if you accidentally left test.only in the source code
 	forbidOnly: !!process.env.CI,
 	// Retry on CI only

dotcom-rendering/src/components/Lazy.tsx

@@ -30,7 +30,7 @@ export const Lazy = ({ children, margin, disableFlexStyles }: Props) => {
 	// being loaded as part of a Chromatic story or not so that
 	// we can prevent lazy loading our storybook snapshots that we
 	// use for visual regression
-	const renderChildren = hasBeenSeen || Lazy.disabled;
+	const renderChildren = !!hasBeenSeen || Lazy.disabled;
 	return (
 		<div ref={setRef} css={!disableFlexStyles && flexGrowStyles}>
 			{renderChildren && <>{children}</>}

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

@@ -6,6 +6,7 @@ import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { useConfig } from './ConfigContext';
+import type { PLAYER_STATES } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
 
 const videoContainerStyles = css`
@@ -20,7 +21,6 @@ type Props = {
 	height: number;
 	thumbnailImage: string;
 	fallbackImageComponent: JSX.Element;
-	hasAudio?: boolean;
 };
 
 export const LoopVideo = ({
@@ -30,16 +30,21 @@ export const LoopVideo = ({
 	height,
 	thumbnailImage,
 	fallbackImageComponent,
-	hasAudio = true,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
 	const vidRef = useRef<HTMLVideoElement>(null);
 	const [isPlayable, setIsPlayable] = useState(false);
-	const [isPlaying, setIsPlaying] = useState(false);
 	const [isMuted, setIsMuted] = useState(true);
 	const [currentTime, setCurrentTime] = useState(0);
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	const [playerState, setPlayerState] =
+		useState<(typeof PLAYER_STATES)[number]>('NOT_STARTED');
+
+	// The user indicates a preference for reduced motion: https://web.dev/articles/prefers-reduced-motion
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState<
+		boolean | null
+	>(null);
+
 	/**
 	 * Keep a track of whether the video has been in view. We only want to
 	 * pause the video if it has been in view.
@@ -52,51 +57,83 @@ export const LoopVideo = ({
 	});
 
 	/**
-	 * Pause the video when the user scrolls past it.
+	 * Register the users motion preferences.
 	 */
 	useEffect(() => {
-		if (!vidRef.current) return;
+		const userPrefersReducedMotion = window.matchMedia(
+			'(prefers-reduced-motion: reduce)',
+		).matches;
+		setPrefersReducedMotion(userPrefersReducedMotion);
+	}, []);
 
-		if (isInView) {
-			// We only autoplay the first time the video comes into view.
-			if (hasBeenInView) return;
+	/**
+	 * Autoplays the video when it comes into view.
+	 */
+	useEffect(() => {
+		if (!vidRef.current || playerState === 'PAUSED_BY_USER') return;
 
-			if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-				setPrefersReducedMotion(true);
+		if (isInView && isPlayable && playerState !== 'PLAYING') {
+			if (prefersReducedMotion !== false) {
 				return;
 			}
 
-			setIsPlaying(true);
-			void vidRef.current.play();
-
+			setPlayerState('PLAYING');
 			setHasBeenInView(true);
+
+			void vidRef.current.play();
 		}
+	}, [isInView, isPlayable, playerState, prefersReducedMotion]);
 
-		if (!isInView && hasBeenInView && isPlayable && isPlaying) {
-			setIsPlaying(false);
+	/**
+	 * Stops playback when the video is scrolled out of view, resumes playbacks
+	 * when the video is back in the viewport.
+	 */
+	useEffect(() => {
+		if (!vidRef.current || !hasBeenInView) return;
+
+		const isNoLongerInView = playerState === 'PLAYING' && !isInView;
+		if (isNoLongerInView) {
+			setPlayerState('PAUSED_BY_INTERSECTION_OBSERVER');
 			void vidRef.current.pause();
+			setIsMuted(true);
+		}
+
+		// If a user action paused the video, they have indicated
+		// that they don't want to watch the video. Therefore, don't
+		// resume the video when it comes back in view
+		const isBackInView =
+			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
+		if (isBackInView) {
+			setPlayerState('PLAYING');
+
+			void vidRef.current.play();
 		}
-	}, [isInView, hasBeenInView, isPlayable, isPlaying]);
+	}, [isInView, hasBeenInView, playerState]);
 
 	if (renderingTarget !== 'Web') return null;
 
 	if (adapted) return fallbackImageComponent;
 
 	const playVideo = () => {
 		if (!vidRef.current) return;
-		setIsPlaying(true);
+
+		setPlayerState('PLAYING');
+		setHasBeenInView(true);
 		void vidRef.current.play();
 	};
 
 	const pauseVideo = () => {
 		if (!vidRef.current) return;
-		setIsPlaying(false);
+
+		setPlayerState('PAUSED_BY_USER');
 		void vidRef.current.pause();
 	};
 
 	const playPauseVideo = () => {
-		if (isPlaying) {
-			pauseVideo();
+		if (playerState === 'PLAYING') {
+			if (isInView) {
+				pauseVideo();
+			}
 		} else {
 			playVideo();
 		}
@@ -166,6 +203,20 @@ export const LoopVideo = ({
 
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
+	// We only show a poster image when the user has indicated that they do
+	// not want videos to play automatically, e.g. prefers reduced motion. Otherwise,
+	// we do not need to download the image as the video will be autoplayed.
+	const posterImage =
+		!!prefersReducedMotion || isInView === false
+			? thumbnailImage
+			: undefined;
+
+	const showPlayIcon =
+		playerState === 'PAUSED_BY_USER' ||
+		(!!prefersReducedMotion && playerState === 'NOT_STARTED');
+
+	const shouldPreloadData = !!isInView || prefersReducedMotion === false;
+
 	return (
 		<div
 			ref={setNode}
@@ -177,24 +228,23 @@ export const LoopVideo = ({
 				videoId={videoId}
 				width={width}
 				height={height}
-				hasAudio={hasAudio}
+				posterImage={posterImage}
 				fallbackImageComponent={fallbackImageComponent}
 				currentTime={currentTime}
 				setCurrentTime={setCurrentTime}
 				ref={vidRef}
 				isPlayable={isPlayable}
 				setIsPlayable={setIsPlayable}
-				isPlaying={isPlaying}
-				setIsPlaying={setIsPlaying}
+				playerState={playerState}
+				setPlayerState={setPlayerState}
 				isMuted={isMuted}
 				setIsMuted={setIsMuted}
 				handleClick={handleClick}
 				handleKeyDown={handleKeyDown}
 				onError={onError}
 				AudioIcon={AudioIcon}
-				thumbnailImage={
-					prefersReducedMotion ? thumbnailImage : undefined
-				}
+				shouldPreload={shouldPreloadData}
+				showPlayIcon={showPlayIcon}
 			/>
 		</div>
 	);