Reintroduce subtitles file and use in looping video (#14804)

* Use subtitles file and use in looping video

* WIP - Trying to change the line cues are rendered on

* Update hardcoded assets for testing m3u8, mp4 and vtt. This needs to be removed before merge

* Remove background colour as this does not affect the existing cue box drawn by the browser. It instead draws another box around the cue box which is not desired.

* Require CORS without credentials using "anonymous". This ensure the subtitles are available to JS on all browsers.

* Measure the height of the video and set the absolute positioning of the cues by % off of that.

* Remove background colour palette for subtitles as the background colour cannot currently be modified whilst we only support the browser subtitle implementation.

* Remove hardcoded testing properties

* Reduce space from bottom to 12px on browser cues

* Alias vidRef.current to video for easier parsing

* Remove height protection as we should always be able to retrieve getBoundingClientRect

* Add comment to support future development of the loop video player

* Temporarily remove looping video stories to unblock PR.

* fix linting

---------

Co-authored-by: Dominik Lander <[email protected]>

Author: abeddow91

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';
@@ -156,6 +157,7 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: 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 */
@@ -405,6 +407,7 @@ export const Card = ({
 	showKickerImage = false,
 	headlinePosition = 'inner',
 	showLabsRedesign = false,
+	subtitleSize = 'small',
 	enableLoopVideoCORS = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
@@ -953,6 +956,10 @@ export const Card = ({
 									fallbackImageAlt={media.imageAltText}
 									fallbackImageAspectRatio="5:4"
 									linkTo={linkTo}
+									subtitleSource={
+										media.mainMedia.subtitleSource
+									}
+									subtitleSize={subtitleSize}
 									enableLoopVideoCORS={enableLoopVideoCORS}
 								/>
 							</Island>

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

@@ -323,6 +323,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 = {
@@ -157,6 +158,7 @@ type BoostedSplashProperties = {
 	supportingContentAlignment: Alignment;
 	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
+	subtitleSize: SubtitleSize;
 	avatarUrl?: string;
 };
 
@@ -187,6 +189,7 @@ const decideSplashCardProperties = (
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 			return {
@@ -202,6 +205,7 @@ const decideSplashCardProperties = (
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'megaboost':
 			return {
@@ -218,6 +222,7 @@ const decideSplashCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 		case 'gigaboost':
 			return {
@@ -234,6 +239,7 @@ const decideSplashCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 	}
 };
@@ -298,6 +304,7 @@ const SplashCardLayout = ({
 		supportingContentAlignment,
 		liveUpdatesAlignment,
 		trailTextSize,
+		subtitleSize,
 	} = decideSplashCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
@@ -347,6 +354,7 @@ const SplashCardLayout = ({
 					trailTextSize={trailTextSize}
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
+					subtitleSize={subtitleSize}
 					headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
 					showLabsRedesign={showLabsRedesign}
 					enableLoopVideoCORS={enableLoopVideoCORS}
@@ -361,6 +369,7 @@ type BoostedCardProperties = {
 	mediaSize: MediaSizeType;
 	liveUpdatesPosition: Position;
 	supportingContentAlignment: Alignment;
+	subtitleSize: SubtitleSize;
 };
 
 /**
@@ -384,6 +393,7 @@ const decideCardProperties = (
 				liveUpdatesPosition: 'outer',
 				supportingContentAlignment:
 					supportingContentLength >= 2 ? 'horizontal' : 'vertical',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 		default:
@@ -397,6 +407,7 @@ const decideCardProperties = (
 				liveUpdatesPosition: 'inner',
 				supportingContentAlignment:
 					supportingContentLength >= 2 ? 'horizontal' : 'vertical',
+				subtitleSize: 'small',
 			};
 	}
 };
@@ -440,6 +451,7 @@ const FullWidthCardLayout = ({
 		mediaSize,
 		supportingContentAlignment,
 		liveUpdatesPosition,
+		subtitleSize,
 	} = decideCardProperties(
 		card.supportingContent?.length ?? 0,
 		card.boostLevel,
@@ -505,6 +517,7 @@ const FullWidthCardLayout = ({
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
 					showLabsRedesign={showLabsRedesign}
+					subtitleSize={subtitleSize}
 					enableLoopVideoCORS={enableLoopVideoCORS}
 				/>
 			</LI>

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 = {
@@ -43,6 +44,7 @@ type BoostProperties = {
 	supportingContentAlignment: Alignment;
 	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
+	subtitleSize: SubtitleSize;
 };
 
 /**
@@ -71,6 +73,7 @@ const determineCardProperties = (
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'boost':
 			return {
@@ -86,6 +89,7 @@ const determineCardProperties = (
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
+				subtitleSize: 'medium',
 			};
 		case 'megaboost':
 			return {
@@ -100,6 +104,7 @@ const determineCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 		case 'gigaboost':
 			return {
@@ -114,6 +119,7 @@ const determineCardProperties = (
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
+				subtitleSize: 'large',
 			};
 	}
 };
@@ -159,6 +165,7 @@ export const OneCardLayout = ({
 		supportingContentAlignment,
 		liveUpdatesAlignment,
 		trailTextSize,
+		subtitleSize,
 	} = determineCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
@@ -199,6 +206,7 @@ export const OneCardLayout = ({
 					showKickerImage={card.format.design === ArticleDesign.Audio}
 					headlinePosition={isSplashCard ? 'outer' : 'inner'}
 					showLabsRedesign={showLabsRedesign}
+					subtitleSize={subtitleSize}
 					enableLoopVideoCORS={enableLoopVideoCORS}
 				/>
 			</LI>

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 {
@@ -18,8 +19,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 +122,8 @@ type Props = {
 	fallbackImageAlt: CardPictureProps['alt'];
 	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
 	linkTo: string;
+	subtitleSource?: string;
+	subtitleSize: SubtitleSize;
 	/** Feature flag for the enabling CORS loading on looping video */
 	enableLoopVideoCORS?: boolean;
 };
@@ -134,6 +141,8 @@ export const LoopVideo = ({
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
 	linkTo,
+	subtitleSource,
+	subtitleSize,
 	enableLoopVideoCORS = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
@@ -489,6 +498,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));
@@ -628,6 +656,7 @@ export const LoopVideo = ({
 				isPlayable={isPlayable}
 				playerState={playerState}
 				isMuted={isMuted}
+				handleLoadedMetadata={handleLoadedMetadata}
 				handleLoadedData={handleLoadedData}
 				handleCanPlay={handleCanPlay}
 				handlePlayPauseClick={handlePlayPauseClick}
@@ -638,6 +667,8 @@ export const LoopVideo = ({
 				AudioIcon={hasAudio ? AudioIcon : null}
 				preloadPartialData={preloadPartialData}
 				showPlayIcon={showPlayIcon}
+				subtitleSource={subtitleSource}
+				subtitleSize={subtitleSize}
 				enableLoopVideoCORS={enableLoopVideoCORS}
 			/>
 		</figure>

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

@@ -12,6 +12,7 @@ const meta = {
 	parameters: {
 		chromatic: {
 			viewports: [breakpoints.mobile, breakpoints.wide],
+			disableSnapshot: true,
 		},
 	},
 } satisfies Meta<typeof LoopVideo>;