make sure native captions dont show (#1075)

Author: ameer2468

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

@@ -297,6 +297,18 @@ export function CapVideoPlayer({
 			}
 		};
 
+		// Ensure all caption tracks remain hidden
+		const ensureTracksHidden = (): void => {
+			const tracks = Array.from(video.textTracks);
+			for (const track of tracks) {
+				if (track.kind === "captions" || track.kind === "subtitles") {
+					if (track.mode !== "hidden") {
+						track.mode = "hidden";
+					}
+				}
+			}
+		};
+
 		const handleLoadedMetadataWithTracks = () => {
 			setVideoLoaded(true);
 			if (!hasPlayedOnce) {
@@ -305,6 +317,11 @@ export function CapVideoPlayer({
 			setupTracks();
 		};
 
+		// Monitor for track changes and ensure they stay hidden
+		const handleTrackChange = () => {
+			ensureTracksHidden();
+		};
+
 		video.addEventListener("loadeddata", handleLoadedData);
 		video.addEventListener("canplay", handleCanPlay);
 		video.addEventListener("loadedmetadata", handleLoadedMetadataWithTracks);
@@ -313,6 +330,11 @@ export function CapVideoPlayer({
 		video.addEventListener("error", handleError as EventListener);
 		video.addEventListener("loadedmetadata", handleLoadedMetadataWithTracks);
 
+		// Add event listeners to monitor track changes
+		video.textTracks.addEventListener("change", handleTrackChange);
+		video.textTracks.addEventListener("addtrack", handleTrackChange);
+		video.textTracks.addEventListener("removetrack", handleTrackChange);
+
 		if (video.readyState === 4) {
 			handleLoadedData();
 		}
@@ -341,6 +363,9 @@ export function CapVideoPlayer({
 					"loadedmetadata",
 					handleLoadedMetadataWithTracks,
 				);
+				video.textTracks.removeEventListener("change", handleTrackChange);
+				video.textTracks.removeEventListener("addtrack", handleTrackChange);
+				video.textTracks.removeEventListener("removetrack", handleTrackChange);
 				if (retryTimeout.current) clearTimeout(retryTimeout.current);
 			};
 		}
@@ -355,6 +380,9 @@ export function CapVideoPlayer({
 				"loadedmetadata",
 				handleLoadedMetadataWithTracks,
 			);
+			video.textTracks.removeEventListener("change", handleTrackChange);
+			video.textTracks.removeEventListener("addtrack", handleTrackChange);
+			video.textTracks.removeEventListener("removetrack", handleTrackChange);
 			if (retryTimeout.current) {
 				clearTimeout(retryTimeout.current);
 			}
@@ -462,7 +490,6 @@ export function CapVideoPlayer({
 						kind="captions"
 						srcLang="en"
 						src={captionsSrc}
-						default
 					/>
 				</MediaPlayerVideo>
 			)}

apps/web/app/s/[videoId]/_components/HLSVideoPlayer.tsx

@@ -233,18 +233,47 @@ export function HLSVideoPlayer({
 			}
 		};
 
+		// Ensure all caption tracks remain hidden
+		const ensureTracksHidden = (): void => {
+			const tracks = video.textTracks;
+			for (let i = 0; i < tracks.length; i++) {
+				const track = tracks[i];
+				if (
+					track &&
+					(track.kind === "captions" || track.kind === "subtitles")
+				) {
+					if (track.mode !== "hidden") {
+						track.mode = "hidden";
+					}
+				}
+			}
+		};
+
 		const handleLoadedMetadata = (): void => {
 			setupTracks();
 		};
 
+		// Monitor for track changes and ensure they stay hidden
+		const handleTrackChange = () => {
+			ensureTracksHidden();
+		};
+
 		video.addEventListener("loadedmetadata", handleLoadedMetadata);
 
+		// Add event listeners to monitor track changes
+		video.textTracks.addEventListener("change", handleTrackChange);
+		video.textTracks.addEventListener("addtrack", handleTrackChange);
+		video.textTracks.addEventListener("removetrack", handleTrackChange);
+
 		if (video.readyState >= 1) {
 			setupTracks();
 		}
 
 		return () => {
 			video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+			video.textTracks.removeEventListener("change", handleTrackChange);
+			video.textTracks.removeEventListener("addtrack", handleTrackChange);
+			video.textTracks.removeEventListener("removetrack", handleTrackChange);
 			if (captionTrack) {
 				captionTrack.removeEventListener("cuechange", handleCueChange);
 			}
@@ -335,13 +364,7 @@ export function HLSVideoPlayer({
 				autoPlay={autoplay}
 			>
 				<track default kind="chapters" src={chaptersSrc} />
-				<track
-					label="English"
-					kind="captions"
-					srcLang="en"
-					src={captionsSrc}
-					default
-				/>
+				<track label="English" kind="captions" srcLang="en" src={captionsSrc} />
 			</MediaPlayerVideo>
 			{currentCue && toggleCaptions && (
 				<div