feat: persist caption settings in localStorage on track mode change (#1493) (#1503)

* feat: persist caption settings in localStorage on track mode change (#1493)

* refactor: combine both the with same dependancy

Author: IkramBagban

src/components/VideoPlayer2.tsx

@@ -97,6 +97,43 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     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<VideoPlayerProps> = ({
             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<VideoPlayerProps> = ({
       document.removeEventListener('keydown', handleKeyPress);
     };
   }, [player]);
+
   useEffect(() => {
     if (!player) {
       return;