Ab/subtitle test

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

@@ -42,6 +42,7 @@ import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';
 import { LoopVideo } from '../LoopVideo.importable';
+import type { SubtitleSize } from '../LoopVideoPlayer';
 import { Pill } from '../Pill';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
@@ -159,6 +160,7 @@ export type Props = {
 	showKickerImage?: boolean;
 	isInAllBoostsTest?: boolean;
 	fixImageWidth?: boolean;
+	subtitleSize?: SubtitleSize;
 	/** Determines if the headline should be positioned within the content or outside the content */
 	headlinePosition?: 'inner' | 'outer';
 	/** Feature flag for the labs redesign work */
@@ -404,6 +406,7 @@ export const Card = ({
 	isInAllBoostsTest = false,
 	headlinePosition = 'inner',
 	showLabsRedesign = false,
+	subtitleSize = 'small',
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -872,6 +875,8 @@ export const Card = ({
 				</div>
 			)}
 
+			{/** Don't merge this! */}
+			<p>subtitleSize: {subtitleSize}</p>
 			<CardLayout
 				cardBackgroundColour={backgroundColour}
 				mediaPositionOnDesktop={mediaPositionOnDesktop}
@@ -957,7 +962,17 @@ export const Card = ({
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideo
-									sources={media.mainMedia.sources}
+									// sources={media.mainMedia.sources}
+									sources={[
+										// {
+										// 	src: "https://uploads.guimcode.co.uk/2025/10/07/Andy_test_6_oct--9d8d52da-da51-4ca0-9e04-ae6868c9afba-3.1.m3u8",
+										// 	mimeType: "application/vnd.apple.mpegurl"
+										// },
+										{
+											src: 'https://uploads.guimcode.co.uk/2025/10/07/Andy_test_6_oct--9d8d52da-da51-4ca0-9e04-ae6868c9afba-3.0.mp4',
+											mimeType: 'video/mp4',
+										},
+									]}
 									atomId={media.mainMedia.atomId}
 									uniqueId={uniqueId}
 									height={media.mainMedia.height}
@@ -969,6 +984,10 @@ export const Card = ({
 									fallbackImageAlt={media.imageAltText}
 									fallbackImageAspectRatio="5:4"
 									linkTo={linkTo}
+									subtitleSource={
+										'https://uploads.guimcode.co.uk/2025/10/07/Andy_test_6_oct--9d8d52da-da51-4ca0-9e04-ae6868c9afba-3.1captions_00001.vtt'
+									}
+									subtitleSize={subtitleSize}
 								/>
 							</Island>
 						)}

dotcom-rendering/src/components/FlexibleGeneral.stories.tsx

@@ -324,6 +324,7 @@ export const SplashBoostLevels: Story = {
 
 		return (
 			<>
+				<Section title="Default" boostLevel="default" />
 				<Section title="Boosted" boostLevel="boost" />
 				<Section title="Mega boosted" boostLevel="megaboost" />
 				<Section title="Giga boosted" boostLevel="gigaboost" />

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -21,6 +21,7 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
+import type { SubtitleSize } from './LoopVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
@@ -153,6 +154,7 @@ type BoostedSplashProperties = {
 	supportingContentAlignment: Alignment;
 	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
+	subtitleSize: SubtitleSize;
 	avatarUrl?: string;
 };
 
@@ -183,6 +185,7 @@ const decideSplashCardProperties = (
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 			return {
@@ -198,6 +201,7 @@ const decideSplashCardProperties = (
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'megaboost':
 			return {
@@ -214,6 +218,7 @@ const decideSplashCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 		case 'gigaboost':
 			return {
@@ -230,6 +235,7 @@ const decideSplashCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 	}
 };
@@ -290,6 +296,7 @@ const SplashCardLayout = ({
 		supportingContentAlignment,
 		liveUpdatesAlignment,
 		trailTextSize,
+		subtitleSize,
 	} = decideSplashCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
@@ -339,6 +346,7 @@ const SplashCardLayout = ({
 					trailTextSize={trailTextSize}
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
+					subtitleSize={subtitleSize}
 					headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
 					showLabsRedesign={showLabsRedesign}
 				/>
@@ -352,6 +360,7 @@ type BoostedCardProperties = {
 	mediaSize: MediaSizeType;
 	liveUpdatesPosition: Position;
 	supportingContentAlignment: Alignment;
+	subtitleSize: SubtitleSize;
 };
 
 /**
@@ -375,6 +384,7 @@ const decideCardProperties = (
 				liveUpdatesPosition: 'outer',
 				supportingContentAlignment:
 					supportingContentLength >= 2 ? 'horizontal' : 'vertical',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 		default:
@@ -388,6 +398,7 @@ const decideCardProperties = (
 				liveUpdatesPosition: 'inner',
 				supportingContentAlignment:
 					supportingContentLength >= 2 ? 'horizontal' : 'vertical',
+				subtitleSize: 'small',
 			};
 	}
 };
@@ -428,6 +439,7 @@ const FullWidthCardLayout = ({
 		mediaSize,
 		supportingContentAlignment,
 		liveUpdatesPosition,
+		subtitleSize,
 	} = decideCardProperties(
 		card.supportingContent?.length ?? 0,
 		card.boostLevel,
@@ -492,6 +504,7 @@ const FullWidthCardLayout = ({
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
 					showLabsRedesign={showLabsRedesign}
+					subtitleSize={subtitleSize}
 				/>
 			</LI>
 		</UL>

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -19,6 +19,7 @@ import { UL } from './Card/components/UL';
 import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FrontCard } from './FrontCard';
+import type { SubtitleSize } from './LoopVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
@@ -42,6 +43,7 @@ type BoostProperties = {
 	supportingContentAlignment: Alignment;
 	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
+	subtitleSize: SubtitleSize;
 };
 
 /**
@@ -70,6 +72,7 @@ const determineCardProperties = (
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 			return {
@@ -85,6 +88,7 @@ const determineCardProperties = (
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'megaboost':
 			return {
@@ -99,6 +103,7 @@ const determineCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 		case 'gigaboost':
 			return {
@@ -113,6 +118,7 @@ const determineCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 	}
 };
@@ -155,6 +161,7 @@ export const OneCardLayout = ({
 		supportingContentAlignment,
 		liveUpdatesAlignment,
 		trailTextSize,
+		subtitleSize,
 	} = determineCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
@@ -195,6 +202,7 @@ export const OneCardLayout = ({
 					showKickerImage={card.format.design === ArticleDesign.Audio}
 					headlinePosition={isSplashCard ? 'outer' : 'inner'}
 					showLabsRedesign={showLabsRedesign}
+					subtitleSize={subtitleSize}
 				/>
 			</LI>
 		</UL>

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

@@ -18,8 +18,12 @@ import {
 } 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 +121,8 @@ type Props = {
 	fallbackImageAlt: CardPictureProps['alt'];
 	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
 	linkTo: string;
+	subtitleSource?: string;
+	subtitleSize: SubtitleSize;
 };
 
 export const LoopVideo = ({
@@ -132,6 +138,8 @@ export const LoopVideo = ({
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
 	linkTo,
+	subtitleSource,
+	subtitleSize,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -336,6 +344,36 @@ export const LoopVideo = ({
 		};
 	}, [uniqueId]);
 
+	useEffect(() => {
+		const video = vidRef.current;
+		if (!video) return;
+
+		const enableSubs = () => {
+			const track = video.textTracks?.[0];
+			if (!track) return;
+			track.mode = 'showing';
+
+			// adjust cue line safely (no VTTCue import needed)
+			const cues = track.cues ? Array.from(track.cues) : [];
+			for (const cue of cues) {
+				if ('line' in cue) {
+					cue.line = -2;
+				}
+			}
+		};
+
+		// run now (if things are already loaded) and when media/track become usable
+		enableSubs();
+		video.addEventListener('loadeddata', enableSubs);
+		// Some browsers fire this when the track becomes available
+		video.textTracks.addEventListener?.('addtrack', enableSubs);
+
+		return () => {
+			video.removeEventListener('loadeddata', enableSubs);
+			video.textTracks.removeEventListener?.('addtrack', enableSubs);
+		};
+	}, [subtitleSource]);
+
 	/**
 	 * Initiates attention tracking for ophan
 	 */
@@ -478,6 +516,8 @@ export const LoopVideo = ({
 		return FallbackImageComponent;
 	}
 
+	const handleLoadedMetadata = () => {};
+
 	const handleLoadedData = () => {
 		if (vidRef.current) {
 			setHasAudio(doesVideoHaveAudio(vidRef.current));
@@ -617,6 +657,7 @@ export const LoopVideo = ({
 				isPlayable={isPlayable}
 				playerState={playerState}
 				isMuted={isMuted}
+				handleLoadedMetadata={handleLoadedMetadata}
 				handleLoadedData={handleLoadedData}
 				handleCanPlay={handleCanPlay}
 				handlePlayPauseClick={handlePlayPauseClick}
@@ -627,6 +668,8 @@ export const LoopVideo = ({
 				AudioIcon={hasAudio ? AudioIcon : null}
 				preloadPartialData={preloadPartialData}
 				showPlayIcon={showPlayIcon}
+				subtitleSource={subtitleSource}
+				subtitleSize={subtitleSize}
 			/>
 		</figure>
 	);