diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 07bf5cf4..1561175d 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -97,6 +97,43 @@ export const VideoPlayer: FunctionComponent = ({ return pipButtonContainer; }; + useEffect(() => { + if (!player) return; + + const savedCaptionSetting = localStorage.getItem('captionSetting'); + const tracks = player.textTracks(); + + if (savedCaptionSetting && player) { + for (let i = 0; i < tracks.length; i++) { + const track = tracks[i]; + + if (track) { + track.mode = + savedCaptionSetting === 'showing' ? 'showing' : 'disabled'; + } + } + } + + const handleTrackChange = () => { + for (let i = 0; i < tracks.length; i++) { + const track = tracks[i]; + if (track.kind === 'subtitles' && track.language === 'en') { + track.addEventListener('modechange', () => { + localStorage.setItem('captionSetting', track.mode); + }); + } + } + }; + + handleTrackChange(); + return () => { + for (let i = 0; i < tracks.length; i++) { + const track = tracks[i]; + track.removeEventListener('modechange', handleTrackChange); + } + }; + }, [player]); + useEffect(() => { const t = searchParams.get('timestamp'); if (contentId && player && !t) { @@ -260,11 +297,8 @@ export const VideoPlayer: FunctionComponent = ({ const track = tracks[i]; if (track.kind === 'subtitles' && track.language === 'en') { - if (track.mode === 'hidden') { - track.mode = 'showing'; - } else { - track.mode = 'hidden'; - } + if (track.mode === 'disabled') track.mode = 'showing'; + else track.mode = 'disabled'; } } event.stopPropagation(); @@ -323,6 +357,7 @@ export const VideoPlayer: FunctionComponent = ({ document.removeEventListener('keydown', handleKeyPress); }; }, [player]); + useEffect(() => { if (!player) { return;