Add more listeners for m3u8 hls files

Author: abeddow91

dotcom-rendering/src/lib/useSubtitles.ts

@@ -26,19 +26,41 @@ export const useSubtitles = ({
 	useEffect(() => {
 		if (!video) return;
 
-		const textTracks = video.textTracks;
+		const tracks = 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 pickTrack = () => {
+			// choose the right one if you have labels/languages
+			const t =
+				Array.from(tracks).find((tt) => tt.kind === 'subtitles') ||
+				tracks[0];
 
-			setActiveTrack(track);
+			if (!t) return;
+
+			// make THIS track load cues
+			t.mode = 'hidden';
+			// disable others so the UA doesn't switch on you
+			for (const other of Array.from(tracks)) {
+				if (other !== t) other.mode = 'disabled';
+			}
+
+			setActiveTrack(t);
 		};
 
-		//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?
+		// 1) pick immediately if already present
+		pickTrack();
+
+		// 2) react when HLS adds tracks later (common on mobile)
+		const onAdd = () => pickTrack();
+		tracks.addEventListener('addtrack', onAdd);
+
+		// 3) also after metadata (some browsers populate then)
+		const onMeta = () => pickTrack();
+		video.addEventListener('loadedmetadata', onMeta);
+
+		return () => {
+			tracks.removeEventListener('addtrack', onAdd);
+			video.removeEventListener('loadedmetadata', onMeta);
+		};
 	}, [video]);
 
 	useEffect(() => {