From b5365c3e4932bca5c2b15e623a448f9ab23f2d05 Mon Sep 17 00:00:00 2001
From: ikramBagban <107988060+IkramBagban@users.noreply.github.com>
Date: Mon, 21 Oct 2024 22:55:07 +0530
Subject: [PATCH 1/2] feat: persist caption settings in localStorage on track
 mode change (code100x#1493)

---
 src/components/VideoPlayer2.tsx | 53 +++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index 5995b7bb1..6eecab7b5 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -92,6 +92,52 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     return pipButtonContainer;
   };
 
+  // Fetch previously saved captions setting from localStorage
+  useEffect(() => {
+    if (!player) return;
+
+    const savedCaptionSetting = localStorage.getItem('captionSetting');
+
+    if (savedCaptionSetting && player) {
+      const tracks = player.textTracks();
+
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+
+        if (track) {
+          track.mode =
+            savedCaptionSetting === 'showing' ? 'showing' : 'disabled';
+        }
+      }
+    }
+  }, [player]);
+
+  useEffect(() => {
+    if (!player) return;
+
+    const handleTrackChange = () => {
+      const tracks = player.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.kind === 'subtitles' && track.language === 'en') {
+          // Save the mode to localStorage when it changes
+          track.addEventListener('modechange', () => {
+            localStorage.setItem('captionSetting', track.mode);
+          });
+        }
+      }
+    };
+
+    handleTrackChange();
+    return () => {
+      const tracks = player.textTracks();
+      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) {
@@ -255,11 +301,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();

From 0d3ef05ff72f9a315c32c606057b624a29eb3b17 Mon Sep 17 00:00:00 2001
From: ikramBagban <107988060+IkramBagban@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:24:30 +0530
Subject: [PATCH 2/2] refactor: combine both the with same dependancy

---
 src/components/VideoPlayer2.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index 6eecab7b5..bbe5df401 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -92,15 +92,13 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     return pipButtonContainer;
   };
 
-  // Fetch previously saved captions setting from localStorage
   useEffect(() => {
     if (!player) return;
 
     const savedCaptionSetting = localStorage.getItem('captionSetting');
+    const tracks = player.textTracks();
 
     if (savedCaptionSetting && player) {
-      const tracks = player.textTracks();
-
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
 
@@ -110,17 +108,11 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
         }
       }
     }
-  }, [player]);
-
-  useEffect(() => {
-    if (!player) return;
 
     const handleTrackChange = () => {
-      const tracks = player.textTracks();
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
         if (track.kind === 'subtitles' && track.language === 'en') {
-          // Save the mode to localStorage when it changes
           track.addEventListener('modechange', () => {
             localStorage.setItem('captionSetting', track.mode);
           });
@@ -130,7 +122,6 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
 
     handleTrackChange();
     return () => {
-      const tracks = player.textTracks();
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
         track.removeEventListener('modechange', handleTrackChange);
@@ -361,6 +352,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
       document.removeEventListener('keydown', handleKeyPress);
     };
   }, [player]);
+
   useEffect(() => {
     if (!player) {
       return;