diff --git a/apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx b/apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx index 6b49819c02..9eae370b6a 100644 --- a/apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx +++ b/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 /> )} diff --git a/apps/web/app/s/[videoId]/_components/HLSVideoPlayer.tsx b/apps/web/app/s/[videoId]/_components/HLSVideoPlayer.tsx index 6ba78e9ecd..a8dc133bec 100644 --- a/apps/web/app/s/[videoId]/_components/HLSVideoPlayer.tsx +++ b/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} > - + {currentCue && toggleCaptions && (