Merge pull request #14220 from guardian/doml/fix-autoplay-failure-ios

Handle state when browser pauses video

Author: domlander

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

@@ -133,7 +133,9 @@ export const LoopVideo = ({
 	const pauseVideo = (
 		reason: Extract<
 			PlayerStates,
-			'PAUSED_BY_USER' | 'PAUSED_BY_INTERSECTION_OBSERVER'
+			| 'PAUSED_BY_USER'
+			| 'PAUSED_BY_INTERSECTION_OBSERVER'
+			| 'PAUSED_BY_BROWSER'
 		>,
 	) => {
 		if (!vidRef.current) return;
@@ -239,6 +241,9 @@ export const LoopVideo = ({
 		};
 	}, [uniqueId]);
 
+	/**
+	 * Keeps track of whether the video has been in view or not.
+	 */
 	useEffect(() => {
 		if (isInView && !hasBeenInView) {
 			/**
@@ -274,7 +279,7 @@ export const LoopVideo = ({
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER')
 		) {
 			/**
-			 * check if the video has not been in view before tracking the play.
+			 * Check if the video has not been in view before tracking the play.
 			 * This is so we only track the first play.
 			 */
 			if (!hasBeenInView) {
@@ -294,8 +299,8 @@ export const LoopVideo = ({
 	]);
 
 	/**
-	 * Stops playback when the video is scrolled out of view, resumes playbacks
-	 * when the video is back in the viewport.
+	 * Stops playback when the video is scrolled out of view.
+	 * Resumes playback when the video is back in the viewport.
 	 */
 	useEffect(() => {
 		if (!vidRef.current || !hasBeenInView) return;
@@ -309,7 +314,7 @@ export const LoopVideo = ({
 		/**
 		 * 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
+		 * resume the video when it comes back in view.
 		 */
 		const isBackInView =
 			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
@@ -326,8 +331,8 @@ export const LoopVideo = ({
 	useEffect(() => {
 		const shouldShowPlayIcon =
 			playerState === 'PAUSED_BY_USER' ||
-			(!isAutoplayAllowed && playerState === 'NOT_STARTED');
-
+			playerState === 'PAUSED_BY_BROWSER' ||
+			(playerState === 'NOT_STARTED' && !isAutoplayAllowed);
 		setShowPlayIcon(shouldShowPlayIcon);
 	}, [playerState, isAutoplayAllowed]);
 
@@ -381,6 +386,22 @@ export const LoopVideo = ({
 		}
 	};
 
+	/**
+	 * If the video was paused and we know that it wasn't paused by the user
+	 * or the intersection observer, we can deduce that it was paused by the
+	 * browser. Therefore we need to apply the pause state to the video.
+	 */
+	const handlePause = () => {
+		if (
+			playerState === 'PAUSED_BY_USER' ||
+			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER'
+		) {
+			return;
+		}
+
+		pauseVideo('PAUSED_BY_BROWSER');
+	};
+
 	/**
 	 * If the video could not be loaded due to an error, report to
 	 * Sentry and log in the console.
@@ -471,6 +492,7 @@ export const LoopVideo = ({
 				handlePlayPauseClick={handlePlayPauseClick}
 				handleAudioClick={handleAudioClick}
 				handleKeyDown={handleKeyDown}
+				handlePause={handlePause}
 				onError={onError}
 				AudioIcon={AudioIcon}
 				preloadPartialData={preloadPartialData}

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -60,7 +60,15 @@ export const PLAYER_STATES = [
 	'NOT_STARTED',
 	'PLAYING',
 	'PAUSED_BY_USER',
+	/**
+	 * The video is paused when the user scrolls away.
+	 */
 	'PAUSED_BY_INTERSECTION_OBSERVER',
+	/**
+	 * The browser may elect to suspend playback under certain circumstances.
+	 * For example, iOS devices in low power mode will suspend playback on autoplaying videos.
+	 */
+	'PAUSED_BY_BROWSER',
 ] as const;
 
 export type PlayerStates = (typeof PLAYER_STATES)[number];
@@ -81,6 +89,7 @@ type Props = {
 	handlePlayPauseClick: (event: SyntheticEvent) => void;
 	handleAudioClick: (event: SyntheticEvent) => void;
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
+	handlePause: (event: SyntheticEvent) => void;
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
 	posterImage?: string;
@@ -111,6 +120,7 @@ export const LoopVideoPlayer = forwardRef(
 			handlePlayPauseClick,
 			handleAudioClick,
 			handleKeyDown,
+			handlePause,
 			onError,
 			AudioIcon,
 			preloadPartialData,
@@ -125,13 +135,19 @@ export const LoopVideoPlayer = forwardRef(
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
 				<video
 					id={loopVideoId}
+					css={videoStyles(width, height)}
 					ref={ref}
+					role="button"
+					tabIndex={0}
+					height={height}
+					width={width}
+					data-link-name={`gu-video-loop-${
+						showPlayIcon ? 'play' : 'pause'
+					}-${atomId}`}
 					preload={preloadPartialData ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}
 					playsInline={true}
-					height={height}
-					width={width}
 					poster={posterImage}
 					onCanPlay={() => {
 						setIsPlayable(true);
@@ -146,15 +162,10 @@ export const LoopVideoPlayer = forwardRef(
 							setCurrentTime(ref.current.currentTime);
 						}
 					}}
+					onPause={handlePause}
 					onClick={handlePlayPauseClick}
 					onKeyDown={handleKeyDown}
-					role="button"
-					tabIndex={0}
 					onError={onError}
-					css={videoStyles(width, height)}
-					data-link-name={`gu-video-loop-${
-						showPlayIcon ? 'play' : 'pause'
-					}-${atomId}`}
 				>
 					{/* Only mp4 is currently supported. Assumes the video file type is mp4. */}
 					{/* The start time is set to 1ms so that Safari will autoplay the video */}