Play video when page becomes active

Author: domlander

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,25 @@ export const LoopVideo = ({
 			setIsMuted(true);
 		};
 
+		/**
+		 * Handle the case where the page is restored from the cache.
+		 */
+		const handleRestoreFromCache = (event: PageTransitionEvent) => {
+			if (event.persisted) {
+				setIsAutoplayAllowed(doesUserPermitAutoplay());
+				setHasPageBecomeActive(true);
+			} else {
+				setHasPageBecomeActive(false);
+			}
+		};
+
+		/**
+		 * Handle the case where the user navigates back to the page.
+		 */
+		const handlePageBecomesVisible = () => {
+			setHasPageBecomeActive(true);
+		};
+
 		document.addEventListener(
 			customLoopPlayAudioEventName,
 			handleCustomPlayAudioEvent,
@@ -286,6 +305,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 +323,12 @@ export const LoopVideo = ({
 				customYoutubePlayEventName,
 				handleCustomPlayYoutubeEvent,
 			);
+			window.removeEventListener('pageshow', function (event) {
+				handleRestoreFromCache(event);
+			});
+			document.removeEventListener('visibilitychange', () => {
+				handlePageBecomesVisible();
+			});
 		};
 	}, [uniqueId]);
 
@@ -350,6 +383,10 @@ export const LoopVideo = ({
 	 * Handle play/pause, when instigated by the browser.
 	 */
 	useEffect(() => {
+		console.log('isPlayable', isPlayable);
+		console.log('playerState', playerState);
+		console.log('isAutoplayAllowed', isAutoplayAllowed);
+
 		if (!vidRef.current || !isPlayable) {
 			return;
 		}
@@ -373,7 +410,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 +420,7 @@ export const LoopVideo = ({
 				ophanTrackerWeb(atomId, 'loop')('play');
 			}
 
-			setIsRestoredFromBFCache(false);
+			setHasPageBecomeActive(false);
 			void playVideo();
 		}
 	}, [
@@ -393,7 +430,7 @@ export const LoopVideo = ({
 		playerState,
 		playVideo,
 		hasBeenInView,
-		isRestoredFromBFCache,
+		hasPageBecomeActive,
 		atomId,
 	]);
 
@@ -435,30 +472,6 @@ export const LoopVideo = ({
 		setPreloadPartialData(isAutoplayAllowed === false || !!isInView);
 	}, [isAutoplayAllowed, isInView]);
 
-	/**
-	 * Handle the case where the user navigates back to the page.
-	 */
-	useEffect(() => {
-		const handleRestoreFromCache = (event: PageTransitionEvent) => {
-			if (event.persisted) {
-				setIsAutoplayAllowed(doesUserPermitAutoplay());
-				setIsRestoredFromBFCache(true);
-			} else {
-				setIsRestoredFromBFCache(false);
-			}
-		};
-
-		window.addEventListener('pageshow', function (event) {
-			handleRestoreFromCache(event);
-		});
-
-		return () => {
-			window.removeEventListener('pageshow', function (event) {
-				handleRestoreFromCache(event);
-			});
-		};
-	}, []);
-
 	if (renderingTarget !== 'Web') return null;
 
 	if (adapted) {