Revert "Self styled subtitles (#14689)" (#14783)

This reverts commit 75ad4a8.

Author: abeddow91

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

@@ -12,7 +12,6 @@ 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,
@@ -173,12 +172,6 @@ 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;
@@ -665,7 +658,6 @@ export const LoopVideo = ({
 				showPlayIcon={showPlayIcon}
 				subtitleSource={subtitleSource}
 				subtitleSize={subtitleSize}
-				activeCue={activeCue}
 			/>
 		</figure>
 	);

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -13,12 +13,10 @@ import type {
 	SyntheticEvent,
 } from 'react';
 import { forwardRef } from 'react';
-import type { ActiveCue } from '../lib/useSubtitles';
 import type { Source } from '../lib/video';
 import { palette } from '../palette';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
 import { LoopVideoProgressBar } from './LoopVideoProgressBar';
-import { SubtitleOverlay } from './SubtitleOverlay';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
@@ -37,10 +35,8 @@ const videoStyles = (
 	object-fit: cover;
 
 	::cue {
-		/* Hide the cue by default as we prefer custom overlay */
-		visibility: hidden;
-
 		color: ${palette('--loop-video-subtitle-text')};
+
 		${subtitleSize === 'small' && textSans15};
 		${subtitleSize === 'medium' && textSans17};
 		${subtitleSize === 'large' && textSans20};
@@ -123,8 +119,6 @@ type Props = {
 	showPlayIcon: boolean;
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
-	/* used in custom subtitle overlays */
-	activeCue?: ActiveCue | null;
 };
 
 /**
@@ -164,11 +158,11 @@ export const LoopVideoPlayer = forwardRef(
 			showPlayIcon,
 			subtitleSource,
 			subtitleSize,
-			activeCue,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
 		const loopVideoId = `loop-video-${uniqueId}`;
+
 		return (
 			<>
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
@@ -219,23 +213,13 @@ export const LoopVideoPlayer = forwardRef(
 					))}
 					{subtitleSource !== undefined && (
 						<track
-							// Don't use default - it forces native rendering on iOS
-							default={false}
+							default={true}
 							kind="subtitles"
 							src={subtitleSource}
-							// Add label to ensure iOS recognizes it
-							label="English"
-							srcLang="en"
 						/>
 					)}
 					{FallbackImageComponent}
 				</video>
-				{!!activeCue?.text && (
-					<SubtitleOverlay
-						text={activeCue.text}
-						subtitleSize={subtitleSize}
-					/>
-				)}
 				{ref && 'current' in ref && ref.current && isPlayable && (
 					<>
 						{/* Play icon */}

dotcom-rendering/src/components/SubtitleOverlay.tsx

@@ -7335,10 +7335,6 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[86],
 	},
-	'--loop-video-subtitle-background': {
-		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
-		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
-	},
 	'--loop-video-subtitle-text': {
 		light: () => sourcePalette.neutral[100],
 		dark: () => sourcePalette.neutral[100],