Merge pull request #13850 from guardian/doml/loop-video-keyboard

Loop video - extra keyboard options

Author: domlander

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

@@ -58,7 +58,7 @@ export const LoopVideo = ({
 		if (!vidRef.current) return;
 
 		if (isInView) {
-			// We only want to autoplay the first time the video comes into view.
+			// We only autoplay the first time the video comes into view.
 			if (hasBeenInView) return;
 
 			if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
@@ -82,19 +82,31 @@ export const LoopVideo = ({
 
 	if (adapted) return fallbackImageComponent;
 
-	const handleClick = (event: React.SyntheticEvent) => {
-		event.preventDefault();
+	const playVideo = () => {
+		if (!vidRef.current) return;
+		setIsPlaying(true);
+		void vidRef.current.play();
+	};
+
+	const pauseVideo = () => {
 		if (!vidRef.current) return;
+		setIsPlaying(false);
+		void vidRef.current.pause();
+	};
 
+	const playPauseVideo = () => {
 		if (isPlaying) {
-			setIsPlaying(false);
-			void vidRef.current.pause();
+			pauseVideo();
 		} else {
-			setIsPlaying(true);
-			void vidRef.current.play();
+			playVideo();
 		}
 	};
 
+	const handleClick = (event: React.SyntheticEvent) => {
+		event.preventDefault();
+		playPauseVideo();
+	};
+
 	const onError = () => {
 		window.guardian.modules.sentry.reportError(
 			new Error(`Loop video could not be played. source: ${src}`),
@@ -134,14 +146,20 @@ export const LoopVideo = ({
 		switch (event.key) {
 			case 'Enter':
 			case ' ':
-				handleClick(event);
+				playPauseVideo();
+				break;
+			case 'Escape':
+				pauseVideo();
 				break;
 			case 'ArrowRight':
 				seekForward();
 				break;
 			case 'ArrowLeft':
 				seekBackward();
 				break;
+			case 'm':
+				setIsMuted(!isMuted);
+				break;
 		}
 	};