test

Author: domlander

.github/workflows/cicd.yml

@@ -20,18 +20,12 @@ jobs:
   lint:
     uses: ./.github/workflows/lint.yml
 
-  playwright:
-    needs: [container]
-    uses: ./.github/workflows/playwright.yml
-    with:
-      container-image: ${{ needs.container.outputs.container-image }}
-
   publish:
     permissions:
       id-token: write
       contents: read
       pull-requests: write # required by riff-raff action
-    needs: [container, prettier, jest, lint, playwright]
+    needs: [container, prettier, jest, lint]
     uses: ./.github/workflows/publish.yml
     with:
       container-image: ${{ needs.container.outputs.container-image }}

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

@@ -110,10 +110,10 @@ export const LoopVideo = ({
 	const [currentTime, setCurrentTime] = useState(0);
 	const [playerState, setPlayerState] =
 		useState<(typeof PLAYER_STATES)[number]>('NOT_STARTED');
-
 	const [isAutoplayAllowed, setIsAutoplayAllowed] = useState<boolean | null>(
 		null,
 	);
+	const [isRestoredFromBFCache, setIsRestoredFromBFCache] = useState(false);
 
 	/**
 	 * Keep a track of whether the video has been in view. We only
@@ -139,11 +139,15 @@ export const LoopVideo = ({
 			await startPlayPromise
 				.then(() => {
 					// Autoplay succeeded
+					console.log(
+						'playVideo function - Autoplay succeeded. Video playing. Setting player state to PLAYING',
+					);
 					dispatchOphanAttentionEvent('videoPlaying');
 					setPlayerState('PLAYING');
 				})
 				.catch((error: Error) => {
 					// Autoplay failed
+					console.log('playVideo function - Autoplay Failed');
 					logAndReportError(src, error);
 					setShowPosterImage(true);
 					setPlayerState('PAUSED_BY_BROWSER');
@@ -197,6 +201,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 +219,13 @@ export const LoopVideo = ({
 		 * `autoplayPreference` is explicitly `false`
 		 *  when the user has said they don't want autoplay video.
 		 */
+		console.log('Setup useeffect - isAutoplayAllowed', isAutoplayAllowed);
 		setIsAutoplayAllowed(
 			!userPrefersReducedMotion && autoplayPreference !== false,
 		);
+		if (!userPrefersReducedMotion && autoplayPreference !== false) {
+			console.log('Setup useeffect 2 - isAutoplayAllowed set to true');
+		}
 
 		/**
 		 * Mutes the current video when another video is unmuted
@@ -259,6 +271,7 @@ export const LoopVideo = ({
 				handleCustomPlayYoutubeEvent,
 			);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- logs
 	}, [uniqueId]);
 
 	/**
@@ -308,18 +321,37 @@ export const LoopVideo = ({
 	}, [isInView, hasBeenInView, atomId]);
 
 	/**
-	 * Autoplay the video when it comes into view.
+	 * Play/pause, including autoplay.
 	 */
 	useEffect(() => {
-		if (!vidRef.current || isAutoplayAllowed === false) {
+		console.log(
+			`autoplay useeffect - isRestoredFromBFCache: ${isRestoredFromBFCache}. isAutoplayAllowed: ${isAutoplayAllowed}. playerState: ${playerState}. isInView: ${isInView}`,
+		);
+
+		if (!vidRef.current || !isPlayable) {
 			return;
 		}
 
+		/**
+		 * Stops playback when the video is scrolled out of view.
+		 */
+		const isNoLongerInView =
+			playerState === 'PLAYING' && hasBeenInView && isInView === false;
+		if (isNoLongerInView) {
+			pauseVideo('PAUSED_BY_INTERSECTION_OBSERVER');
+			return;
+		}
+
+		/**
+		 * Autoplay/resume playback when the player comes into view or when
+		 * the page has been restored from the BFCache.
+		 */
 		if (
+			isAutoplayAllowed &&
 			isInView &&
-			isPlayable &&
 			(playerState === 'NOT_STARTED' ||
-				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER')
+				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' ||
+				(isRestoredFromBFCache && playerState === 'PAUSED_BY_BROWSER'))
 		) {
 			/**
 			 * Check if the video has not been in view before tracking the play.
@@ -329,8 +361,14 @@ export const LoopVideo = ({
 				ophanTrackerWeb(atomId, 'loop')('play');
 			}
 
+			console.log(
+				'autoplay useeffect - Playing video!',
+				isAutoplayAllowed,
+			);
+			setIsRestoredFromBFCache(false);
 			void playVideo();
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- Logs
 	}, [
 		isAutoplayAllowed,
 		isInView,
@@ -341,31 +379,6 @@ export const LoopVideo = ({
 		atomId,
 	]);
 
-	/**
-	 * 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;
-
-		const isNoLongerInView =
-			playerState === 'PLAYING' && isInView === false;
-		if (isNoLongerInView) {
-			pauseVideo('PAUSED_BY_INTERSECTION_OBSERVER');
-		}
-
-		/**
-		 * 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.
-		 */
-		const isBackInView =
-			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
-		if (isBackInView) {
-			void playVideo();
-		}
-	}, [isInView, hasBeenInView, playerState, playVideo]);
-
 	/**
 	 * Show the play icon when the video is not playing, except for when it is scrolled
 	 * out of view. In this case, the intersection observer will resume playback and
@@ -404,6 +417,32 @@ export const LoopVideo = ({
 		setPreloadPartialData(isAutoplayAllowed === false || !!isInView);
 	}, [isAutoplayAllowed, isInView]);
 
+	useEffect(() => {
+		window.addEventListener('pageshow', function (event) {
+			if (event.persisted) {
+				// The page was restored from the bfcache. Rerender the component to ensure video can autoplay.
+				console.log(
+					'BFCache useEffect - playerState',
+					'playerState',
+					playerState,
+					'isAutoplayAllowed',
+					isAutoplayAllowed,
+				);
+
+				// Reset the state to allow the video to autoplay again.
+				setIsAutoplayAllowed(null);
+				setPlayerState('NOT_STARTED');
+				setIsRestoredFromBFCache(true);
+			} else {
+				console.log(
+					'BFCache useEffect - setting isRestoredFromBFCache to false',
+				);
+				setIsRestoredFromBFCache(false);
+			}
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- logs
+	}, []);
+
 	if (renderingTarget !== 'Web') return null;
 
 	if (adapted) {
@@ -412,7 +451,10 @@ export const LoopVideo = ({
 
 	const handleCanPlay = () => {
 		if (!isPlayable) {
+			console.log('canPlay event fired - Setting video as playable');
 			setIsPlayable(true);
+		} else {
+			console.log('canPlay event fired - Video is already playable');
 		}
 	};
 
@@ -448,6 +490,8 @@ export const LoopVideo = ({
 			return;
 		}
 
+		console.log('handlePause - Pausing video due to browser conditions');
+
 		pauseVideo('PAUSED_BY_BROWSER');
 	};