Test hidden native cue

Author: abeddow91

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

@@ -172,7 +172,7 @@ export const LoopVideo = ({
 		threshold: VISIBILITY_THRESHOLD,
 	});
 
-	const subtitles = useSubtitles({
+	const { activeCue, subtitlesAvailable } = useSubtitles({
 		video: vidRef.current,
 		playerState,
 		currentTime,
@@ -503,8 +503,8 @@ export const LoopVideo = ({
 			vidRef.current.getBoundingClientRect().height ||
 			vidRef.current.clientHeight ||
 			height;
-		const percentFromTop =
-			((videoHeight - pxFromBottom) / videoHeight) * 100;
+		let percentFromTop = ((videoHeight - pxFromBottom) / videoHeight) * 100;
+		percentFromTop = Math.min(98, Math.max(0, percentFromTop));
 
 		for (const cue of Array.from(track.cues)) {
 			if (cue instanceof VTTCue) {
@@ -666,8 +666,9 @@ export const LoopVideo = ({
 				showPlayIcon={showPlayIcon}
 				subtitleSource={subtitleSource}
 				subtitleSize={subtitleSize}
-				subtitles={subtitles}
+				subtitles={activeCue}
 				showNativeCaptions={false}
+				subtitlesAvailable={subtitlesAvailable}
 			/>
 		</figure>
 	);

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -128,6 +128,7 @@ type Props = {
 	subtitleSize: SubtitleSize;
 	subtitles?: ActiveCue | null;
 	showNativeCaptions?: boolean;
+	subtitlesAvailable?: boolean;
 };
 
 /**
@@ -164,6 +165,7 @@ export const LoopVideoPlayer = forwardRef(
 			subtitleSize,
 			subtitles,
 			showNativeCaptions = false,
+			subtitlesAvailable,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
@@ -228,9 +230,9 @@ export const LoopVideoPlayer = forwardRef(
 					)}
 					{FallbackImageComponent}
 				</video>
-				{!!subtitles?.text && (
+				{subtitlesAvailable && (
 					<SubtitleOverlay
-						text={subtitles.text}
+						text={subtitles?.text ?? ''}
 						subtitleSize={subtitleSize}
 					/>
 				)}

dotcom-rendering/src/lib/useSubtitles.ts

@@ -11,15 +11,17 @@ export type ActiveCue = {
 	startTime: number;
 	endTime: number;
 	text: string;
-};
+} | null;
 
 export const useSubtitles = ({
 	video,
 	playerState,
 	currentTime,
-}: Props): ActiveCue | null => {
+}: Props): { activeCue: ActiveCue; subtitlesAvailable: boolean } => {
 	const [activeTrack, setActiveTrack] = useState<TextTrack | null>(null);
-	const [activeCue, setActiveCue] = useState<ActiveCue | null>(null);
+	const [activeCue, setActiveCue] = useState<ActiveCue>(null);
+	const [subtitlesAvailable, setSubtitlesAvailable] = useState(false);
+
 	// only show subtitles if the video is actively playing or if its paused
 	const shouldShow = playerState === 'PLAYING' || currentTime > 0;
 
@@ -29,16 +31,22 @@ export const useSubtitles = ({
 		const textTracks = video.textTracks;
 
 		const setTrackFromList = () => {
-			const track = textTracks[0];
-			// We currently only support one text track per video, so we are ok to access [0] here. If we add additional languages, this will need updating.
-			if (!track) return;
-
+			const track = textTracks[0] ?? null;
 			setActiveTrack(track);
+
+			// Check if the <track> tag has finished loading
+			const el = video.querySelector('track');
+			if (el instanceof HTMLTrackElement && el.readyState === 2) {
+				setSubtitlesAvailable(true);
+			}
 		};
 
-		//Get Text track as soon as the video element is available.
 		setTrackFromList();
-		// TODO:: are there changes we need to listen for that might change the text track?
+
+		const changeListener = () => setTrackFromList();
+		textTracks.addEventListener('change', changeListener);
+
+		return () => textTracks.removeEventListener('change', changeListener);
 	}, [video]);
 
 	useEffect(() => {
@@ -52,9 +60,12 @@ export const useSubtitles = ({
 		// if we have a track and can show it, hide the native track
 		track.mode = 'hidden';
 
+		console.log('track.mode ', track.mode);
+
 		const onCueChange = () => {
 			const list = track.activeCues;
 			if (!list || list.length === 0) {
+				setActiveTrack(null);
 				return;
 			}
 			const cue = list[0] as VTTCue;
@@ -68,9 +79,9 @@ export const useSubtitles = ({
 		onCueChange();
 		return () => {
 			track.removeEventListener('cuechange', onCueChange);
-			track.mode = 'showing';
+			// track.mode = 'showing';
 		};
 	}, [activeTrack, shouldShow]);
 
-	return activeCue;
+	return { activeCue, subtitlesAvailable };
 };