Merge branch 'ph-20250829-1858-supporter-gate' of https://github.com/guardian/dotcom-rendering into ph-20250829-1858-supporter-gate

Author: shtukas

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

@@ -148,7 +148,7 @@ export const LoopVideo = ({
 	const [isAutoplayAllowed, setIsAutoplayAllowed] = useState<boolean | null>(
 		null,
 	);
-	const [isRestoredFromBFCache, setIsRestoredFromBFCache] = useState(false);
+	const [hasPageBecomeActive, setHasPageBecomeActive] = useState(false);
 
 	/**
 	 * Keep a track of whether the video has been in view. We only
@@ -278,6 +278,28 @@ export const LoopVideo = ({
 			setIsMuted(true);
 		};
 
+		/**
+		 * When the page is restored from BFCache, we need to retrigger autoplay,
+		 * as the video player state will be PAUSED_BY_BROWSER.
+		 */
+		const handleRestoreFromCache = (event: PageTransitionEvent) => {
+			if (event.persisted) {
+				setIsAutoplayAllowed(doesUserPermitAutoplay());
+				setHasPageBecomeActive(true);
+			} else {
+				setHasPageBecomeActive(false);
+			}
+		};
+
+		/**
+		 * When a user navigates away from the page and the page is hidden, the video will be
+		 * paused by the browser, as the video is not visible. (e.g. switched tab, minimised window).
+		 * When the page becomes visible again, we need to retrigger autoplay.
+		 */
+		const handlePageBecomesVisible = () => {
+			setHasPageBecomeActive(true);
+		};
+
 		document.addEventListener(
 			customLoopPlayAudioEventName,
 			handleCustomPlayAudioEvent,
@@ -286,6 +308,14 @@ export const LoopVideo = ({
 			customYoutubePlayEventName,
 			handleCustomPlayYoutubeEvent,
 		);
+		window.addEventListener('pageshow', function (event) {
+			handleRestoreFromCache(event);
+		});
+		document.addEventListener('visibilitychange', () => {
+			if (document.visibilityState === 'visible') {
+				handlePageBecomesVisible();
+			}
+		});
 
 		return () => {
 			document.removeEventListener(
@@ -296,6 +326,12 @@ export const LoopVideo = ({
 				customYoutubePlayEventName,
 				handleCustomPlayYoutubeEvent,
 			);
+			window.removeEventListener('pageshow', function (event) {
+				handleRestoreFromCache(event);
+			});
+			document.removeEventListener('visibilitychange', () => {
+				handlePageBecomesVisible();
+			});
 		};
 	}, [uniqueId]);
 
@@ -373,7 +409,7 @@ export const LoopVideo = ({
 			isInView &&
 			(playerState === 'NOT_STARTED' ||
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' ||
-				(isRestoredFromBFCache && playerState === 'PAUSED_BY_BROWSER'))
+				(hasPageBecomeActive && playerState === 'PAUSED_BY_BROWSER'))
 		) {
 			/**
 			 * Check if the video has not been in view before tracking the play.
@@ -383,7 +419,7 @@ export const LoopVideo = ({
 				ophanTrackerWeb(atomId, 'loop')('play');
 			}
 
-			setIsRestoredFromBFCache(false);
+			setHasPageBecomeActive(false);
 			void playVideo();
 		}
 	}, [
@@ -393,7 +429,7 @@ export const LoopVideo = ({
 		playerState,
 		playVideo,
 		hasBeenInView,
-		isRestoredFromBFCache,
+		hasPageBecomeActive,
 		atomId,
 	]);
 
@@ -435,20 +471,6 @@ export const LoopVideo = ({
 		setPreloadPartialData(isAutoplayAllowed === false || !!isInView);
 	}, [isAutoplayAllowed, isInView]);
 
-	/**
-	 * Handle the case where the user navigates back to the page.
-	 */
-	useEffect(() => {
-		window.addEventListener('pageshow', function (event) {
-			if (event.persisted) {
-				setIsAutoplayAllowed(doesUserPermitAutoplay());
-				setIsRestoredFromBFCache(true);
-			} else {
-				setIsRestoredFromBFCache(false);
-			}
-		});
-	}, []);
-
 	if (renderingTarget !== 'Web') return null;
 
 	if (adapted) {