Reconcile with main branch code

Author: RikRootsGuardian

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { log, storage } from '@guardian/libs';
+import { space } from '@guardian/source/foundations';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -11,15 +12,20 @@ import { getZIndex } from '../lib/getZIndex';
 import { generateImageURL } from '../lib/image';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
+import { useSubtitles } from '../lib/useSubtitles';
 import type { CustomPlayEventDetail, Source } from '../lib/video';
 import {
 	customLoopPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
+import type {
+	PLAYER_STATES,
+	PlayerStates,
+	SubtitleSize,
+} from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
-import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const videoContainerStyles = css`
@@ -117,6 +123,8 @@ type Props = {
 	fallbackImageAlt: CardPictureProps['alt'];
 	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
 	linkTo: string;
+	subtitleSource?: string;
+	subtitleSize: SubtitleSize;
 };
 
 export const LoopVideo = ({
@@ -132,6 +140,8 @@ export const LoopVideo = ({
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
 	linkTo,
+	subtitleSource,
+	subtitleSize,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -155,6 +165,8 @@ export const LoopVideo = ({
 	 * want to pause the video if it has been in view.
 	 */
 	const [hasBeenInView, setHasBeenInView] = useState(false);
+	const [hasBeenPlayed, setHasBeenPlayed] = useState(false);
+	const [hasTrackedPlay, setHasTrackedPlay] = useState(false);
 
 	const [devicePixelRatio, setDevicePixelRatio] = useState(1);
 
@@ -165,6 +177,12 @@ export const LoopVideo = ({
 		threshold: VISIBILITY_THRESHOLD,
 	});
 
+	const activeCue = useSubtitles({
+		video: vidRef.current,
+		playerState,
+		currentTime,
+	});
+
 	const playVideo = useCallback(async () => {
 		const video = vidRef.current;
 		if (!video) return;
@@ -178,6 +196,7 @@ export const LoopVideo = ({
 				.then(() => {
 					// Autoplay succeeded
 					dispatchOphanAttentionEvent('videoPlaying');
+					setHasBeenPlayed(true);
 					setPlayerState('PLAYING');
 				})
 				.catch((error: Error) => {
@@ -387,6 +406,19 @@ export const LoopVideo = ({
 		}
 	}, [isInView, hasBeenInView, atomId, linkTo]);
 
+	/**
+	 * Track the first successful video play in Ophan.
+	 *
+	 * This effect runs only after the video has actually started playing
+	 * for the first time. This is to ensure we don't double-report the event.
+	 */
+	useEffect(() => {
+		if (!hasBeenPlayed || hasTrackedPlay) return;
+
+		ophanTrackerWeb(atomId, 'loop')('play');
+		setHasTrackedPlay(true);
+	}, [atomId, hasBeenPlayed, hasTrackedPlay]);
+
 	/**
 	 * Handle play/pause, when instigated by the browser.
 	 */
@@ -416,14 +448,6 @@ export const LoopVideo = ({
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' ||
 				(hasPageBecomeActive && playerState === 'PAUSED_BY_BROWSER'))
 		) {
-			/**
-			 * Check if the video has not been in view before tracking the play.
-			 * This is so we only track the first play.
-			 */
-			if (!hasBeenInView) {
-				ophanTrackerWeb(atomId, 'loop')('play');
-			}
-
 			setHasPageBecomeActive(false);
 			void playVideo();
 		}
@@ -482,6 +506,25 @@ export const LoopVideo = ({
 		return FallbackImageComponent;
 	}
 
+	const handleLoadedMetadata = () => {
+		const video = vidRef.current;
+		if (!video) return;
+
+		const track = video.textTracks[0];
+		if (!track?.cues) return;
+		const pxFromBottom = space[3];
+		const videoHeight = video.getBoundingClientRect().height;
+		const percentFromTop =
+			((videoHeight - pxFromBottom) / videoHeight) * 100;
+
+		for (const cue of Array.from(track.cues)) {
+			if (cue instanceof VTTCue) {
+				cue.snapToLines = false;
+				cue.line = percentFromTop;
+			}
+		}
+	};
+
 	const handleLoadedData = () => {
 		if (vidRef.current) {
 			setHasAudio(doesVideoHaveAudio(vidRef.current));
@@ -621,6 +664,7 @@ export const LoopVideo = ({
 				isPlayable={isPlayable}
 				playerState={playerState}
 				isMuted={isMuted}
+				handleLoadedMetadata={handleLoadedMetadata}
 				handleLoadedData={handleLoadedData}
 				handleCanPlay={handleCanPlay}
 				handlePlayPauseClick={handlePlayPauseClick}
@@ -631,6 +675,9 @@ export const LoopVideo = ({
 				AudioIcon={hasAudio ? AudioIcon : null}
 				preloadPartialData={preloadPartialData}
 				showPlayIcon={showPlayIcon}
+				subtitleSource={subtitleSource}
+				subtitleSize={subtitleSize}
+				activeCue={activeCue}
 			/>
 		</figure>
 	);