Check flashing preferences before allowing autoplaying looping videos.

Flashing preferences are a guardian accessibility setting. The value is held in local storage.

If the user has explicitly indicated they do not want flashing, we disable looping videos.

Author: abeddow91

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

@@ -1,5 +1,5 @@
 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 { getZIndex } from '../lib/getZIndex';
@@ -80,8 +80,8 @@ export const LoopVideo = ({
 	/**
 	 * 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(() => {
 		/**
@@ -90,7 +90,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
@@ -110,7 +122,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 = () => {
@@ -190,7 +202,7 @@ export const LoopVideo = ({
 
 			void vidRef.current.play();
 		}
-	}, [isInView, hasBeenInView, playerState]);
+	}, [isInView, hasBeenInView, playerState, isAutoplayAllowed]);
 
 	/**
 	 * Show the play icon when the video is not playing, except for when it is scrolled