Remove attention tracking useEffect

Author: domlander

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

@@ -30,6 +30,8 @@ import type {
 import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
+const VISIBILITY_THRESHOLD = 0.5;
+
 const videoContainerStyles = (
 	isCinemagraph: boolean,
 	aspectRatio: number,
@@ -98,6 +100,26 @@ const logAndReportError = (src: string, error: Error) => {
 	log('dotcom', message);
 };
 
+/**
+ * Initiates attention tracking for ophan
+ */
+const trackAttention = async (
+	videoElement: HTMLVideoElement,
+	atomId: string,
+) => {
+	try {
+		const ophan = await getOphan('Web');
+		ophan.trackComponentAttention(
+			`gu-video-loop-${atomId}`,
+			videoElement,
+			VISIBILITY_THRESHOLD,
+			true,
+		);
+	} catch (error) {
+		log('dotcom', 'Failed to track video attention:', error);
+	}
+};
+
 const dispatchOphanAttentionEvent = (
 	eventType: 'videoPlaying' | 'videoPause',
 ) => {
@@ -198,8 +220,6 @@ export const SelfHostedVideo = ({
 	const [width, setWidth] = useState(expectedWidth);
 	const [height, setHeight] = useState(expectedHeight);
 
-	const VISIBILITY_THRESHOLD = 0.5;
-
 	/**
 	 * All controls on the video are hidden: the video looks like a GIF.
 	 * This includes but may not be limited to: audio icon, play/pause icon, subtitles, progress bar.
@@ -355,6 +375,13 @@ export const SelfHostedVideo = ({
 			setHasPageBecomeActive(true);
 		};
 
+		/**
+		 * Initialise Ophan attention tracking
+		 */
+		if (vidRef.current) {
+			void trackAttention(vidRef.current, atomId);
+		}
+
 		document.addEventListener(
 			customSelfHostedVideoPlayAudioEventName,
 			handleCustomPlayAudioEvent,
@@ -388,31 +415,7 @@ export const SelfHostedVideo = ({
 				handlePageBecomesVisible();
 			});
 		};
-	}, [uniqueId]);
-
-	/**
-	 * Initiates attention tracking for ophan
-	 */
-	useEffect(() => {
-		const video = vidRef.current;
-		if (!video) return;
-
-		const trackAttention = async () => {
-			try {
-				const ophan = await getOphan('Web');
-				ophan.trackComponentAttention(
-					`gu-video-loop-${atomId}`,
-					video,
-					VISIBILITY_THRESHOLD,
-					true,
-				);
-			} catch (error) {
-				log('dotcom', 'Failed to track video attention:', error);
-			}
-		};
-
-		void trackAttention();
-	}, [atomId]);
+	}, [uniqueId, atomId]);
 
 	/**
 	 * Keeps track of whether the video has been in view or not.