Temporary commit. Add logs.

Author: domlander

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

@@ -197,6 +197,10 @@ export const LoopVideo = ({
 	 * 2. Creates event listeners to control playback when there are multiple videos.
 	 */
 	useEffect(() => {
+		console.log(
+			'Setup useeffect - isRestoredFromBFCache',
+			isRestoredFromBFCache,
+		);
 		/**
 		 * The user indicates a preference for reduced motion: https://web.dev/articles/prefers-reduced-motion
 		 */
@@ -211,9 +215,14 @@ export const LoopVideo = ({
 		 * `autoplayPreference` is explicitly `false`
 		 *  when the user has said they don't want autoplay video.
 		 */
+		console.log('Setup useeffect 1 - isAutoplayAllowed', isAutoplayAllowed);
 		setIsAutoplayAllowed(
 			!userPrefersReducedMotion && autoplayPreference !== false,
 		);
+		console.log(
+			'Setup useeffect 2 - isAutoplayAllowed',
+			!userPrefersReducedMotion && autoplayPreference !== false,
+		);
 
 		/**
 		 * Mutes the current video when another video is unmuted
@@ -311,6 +320,15 @@ export const LoopVideo = ({
 	 * Autoplay the video when it comes into view.
 	 */
 	useEffect(() => {
+		console.log(
+			'autoplay useeffect - isRestoredFromBFCache',
+			isRestoredFromBFCache,
+		);
+		console.log(
+			'autoplay useeffect - isAutoplayAllowed',
+			isAutoplayAllowed,
+		);
+
 		if (!vidRef.current || isAutoplayAllowed === false) {
 			return;
 		}
@@ -331,6 +349,7 @@ export const LoopVideo = ({
 
 			void playVideo();
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- Logs
 	}, [
 		isAutoplayAllowed,
 		isInView,
@@ -406,8 +425,14 @@ export const LoopVideo = ({
 
 	useEffect(() => {
 		window.addEventListener('pageshow', function (event) {
+			console.log('event', event);
 			if (event.persisted) {
 				// The page was restored from the bfcache. Rerender the component to ensure video can autoplay.
+				console.log(
+					'The page was restored from the bfcache. Forcing update.',
+				);
+
+				setIsAutoplayAllowed(null);
 				setIsRestoredFromBFCache(true);
 			}
 		});