WIP - Trying to change the line cues are rendered on

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -875,6 +875,8 @@ export const Card = ({
 				</div>
 			)}
 
+			{/** Don't merge this! */}
+			<p>subtitleSize: {subtitleSize}</p>
 			<CardLayout
 				cardBackgroundColour={backgroundColour}
 				mediaPositionOnDesktop={mediaPositionOnDesktop}
@@ -960,7 +962,19 @@ export const Card = ({
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideo
-									sources={media.mainMedia.sources}
+									// sources={media.mainMedia.sources}
+									sources={[
+										{
+											// Test loop with subtitles
+											src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
+											// src: 'https://uploads.guim.co.uk/2025/08/20/Allaire+loop+--83f7d9ab-b1ff-439c-9631-8febd724829b-1.m3u8',
+											mimeType: 'application/x-mpegURL',
+										},
+										{
+											src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+											mimeType: 'video/mp4',
+										},
+									]}
 									atomId={media.mainMedia.atomId}
 									uniqueId={uniqueId}
 									height={media.mainMedia.height}

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

@@ -486,6 +486,23 @@ export const LoopVideo = ({
 		return FallbackImageComponent;
 	}
 
+	const handleLoadedMetadata = () => {
+		if (!vidRef.current) return;
+
+		console.log('textTracks', vidRef.current.textTracks);
+
+		const track = vidRef.current.textTracks[0];
+		if (!track?.cues) return;
+
+		console.log('cues', track.cues);
+
+		for (const cue of Array.from(track.cues)) {
+			if (cue instanceof VTTCue) {
+				cue.line = -2;
+			}
+		}
+	};
+
 	const handleLoadedData = () => {
 		if (vidRef.current) {
 			setHasAudio(doesVideoHaveAudio(vidRef.current));
@@ -625,6 +642,7 @@ export const LoopVideo = ({
 				isPlayable={isPlayable}
 				playerState={playerState}
 				isMuted={isMuted}
+				handleLoadedMetadata={handleLoadedMetadata}
 				handleLoadedData={handleLoadedData}
 				handleCanPlay={handleCanPlay}
 				handlePlayPauseClick={handlePlayPauseClick}

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -106,6 +106,7 @@ type Props = {
 	currentTime: number;
 	setCurrentTime: Dispatch<SetStateAction<number>>;
 	isMuted: boolean;
+	handleLoadedMetadata: (event: SyntheticEvent) => void;
 	handleLoadedData: (event: SyntheticEvent) => void;
 	handleCanPlay: (event: SyntheticEvent) => void;
 	handlePlayPauseClick: (event: SyntheticEvent) => void;
@@ -140,6 +141,7 @@ export const LoopVideoPlayer = forwardRef(
 			currentTime,
 			setCurrentTime,
 			isMuted,
+			handleLoadedMetadata,
 			handleLoadedData,
 			handleCanPlay,
 			handlePlayPauseClick,
@@ -177,6 +179,7 @@ export const LoopVideoPlayer = forwardRef(
 					muted={isMuted}
 					playsInline={true}
 					poster={posterImage}
+					onLoadedMetadata={handleLoadedMetadata}
 					onLoadedData={handleLoadedData}
 					onCanPlay={handleCanPlay}
 					onCanPlayThrough={handleCanPlay}