Temporary commit. Add logs.

Author: domlander

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

@@ -113,7 +113,7 @@ export const LoopVideo = ({
 	const [isAutoplayAllowed, setIsAutoplayAllowed] = useState<boolean | null>(
 		null,
 	);
-	const [isRestoredFromBFCache, setIsRestoredFromBFCache] = useState(false);
+	const [isRestoredFromBFCache, setIsRestoredFromBFCache] = useState(0);
 
 	/**
 	 * Keep a track of whether the video has been in view. We only
@@ -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
@@ -259,6 +268,7 @@ export const LoopVideo = ({
 				handleCustomPlayYoutubeEvent,
 			);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- logs
 	}, [uniqueId, isRestoredFromBFCache]);
 
 	/**
@@ -311,10 +321,23 @@ 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;
 		}
 
+		console.log('autoplay useeffect - isInView', isInView);
+		console.log('autoplay useeffect - isPlayable', isPlayable);
+		console.log('autoplay useeffect - playerState', playerState);
+
 		if (
 			isInView &&
 			isPlayable &&
@@ -329,8 +352,10 @@ export const LoopVideo = ({
 				ophanTrackerWeb(atomId, 'loop')('play');
 			}
 
+			console.log('autoplay useeffect - Playing video!');
 			void playVideo();
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- Logs
 	}, [
 		isAutoplayAllowed,
 		isInView,
@@ -406,11 +431,20 @@ 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.
-				setIsRestoredFromBFCache(true);
+				console.log(
+					'The page was restored from the bfcache. Forcing update.',
+				);
+				console.log('bfcache useEffect - playerState', playerState);
+				console.log('bfcache useEffect - isPlayable', isPlayable);
+
+				setIsAutoplayAllowed(null);
+				setIsRestoredFromBFCache((prev) => prev + 1);
 			}
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- logs
 	}, []);
 
 	if (renderingTarget !== 'Web') return null;
@@ -421,6 +455,7 @@ export const LoopVideo = ({
 
 	const handleCanPlay = () => {
 		if (!isPlayable) {
+			console.log('Setting video as playable');
 			setIsPlayable(true);
 		}
 	};