From d37eab41c70ff408075954b1a326f4ddff319e17 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Tue, 16 Sep 2025 12:39:32 +0300
Subject: [PATCH] fix: Store reference to the current chapter span for dynamic
 updates

---
 .../controls/CustomChaptersOverlay.js         | 17 ++++++++++-
 .../components/controls/CustomSettingsMenu.js | 30 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js b/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
index 43b65807..53426c2a 100644
--- a/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
+++ b/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
@@ -97,6 +97,9 @@ class CustomChaptersOverlay extends Component {
         `;
         playlistTitle.appendChild(chapterTitle);
 
+        // Store reference to the current chapter span for dynamic updates
+        this.currentChapterSpan = chapterTitle.querySelector('span');
+
         const chapterClose = document.createElement('div');
         chapterClose.className = 'chapter-close';
         const closeBtn = document.createElement('button');
@@ -224,6 +227,7 @@ class CustomChaptersOverlay extends Component {
 
         const currentTime = this.player().currentTime();
         const chapterItems = this.chaptersList.querySelectorAll('.playlist-items');
+        let currentChapterIndex = -1;
 
         chapterItems.forEach((item, index) => {
             const chapter = this.chaptersData[index];
@@ -234,15 +238,21 @@ class CustomChaptersOverlay extends Component {
             const handle = item.querySelector('.playlist-drag-handle');
             const dynamic = item.querySelector('.meta-dynamic');
             if (isPlaying) {
+                currentChapterIndex = index;
                 item.classList.add('selected');
                 if (handle) handle.textContent = '▶';
-                if (dynamic) dynamic.textContent = dynamic.getAttribute('data-duration') || '';
+                if (dynamic) dynamic.textContent = dynamic.getAttribute('data-time-range') || this.getChapterTimeRange(chapter);
             } else {
                 item.classList.remove('selected');
                 if (handle) handle.textContent = String(index + 1);
                 if (dynamic) dynamic.textContent = dynamic.getAttribute('data-time-range') || this.getChapterTimeRange(chapter);
             }
         });
+
+        // Update the header chapter number
+        if (this.currentChapterSpan && currentChapterIndex !== -1) {
+            this.currentChapterSpan.textContent = `${currentChapterIndex + 1} / ${this.chaptersData.length}`;
+        }
     }
 
     updateActiveItem(activeIndex) {
@@ -271,6 +281,11 @@ class CustomChaptersOverlay extends Component {
                 }
             }
         });
+
+        // Update the header chapter number
+        if (this.currentChapterSpan) {
+            this.currentChapterSpan.textContent = `${activeIndex + 1} / ${this.chaptersData.length}`;
+        }
     }
 
     closeOverlay() {
diff --git a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
index d0793d3d..04d7093b 100644
--- a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
+++ b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
@@ -37,6 +37,7 @@ class CustomSettingsMenu extends Component {
       this.createSettingsButton();
       this.createSettingsOverlay();
       this.setupEventListeners();
+      this.restoreSubtitlePreference();
     });
   }
 
@@ -929,6 +930,35 @@ class CustomSettingsMenu extends Component {
     this.subtitlesSubmenu.style.display = 'none';
   }
 
+  restoreSubtitlePreference() {
+    const savedLanguage = this.userPreferences.getPreference('subtitleLanguage');
+    
+    if (savedLanguage) {
+      setTimeout(() => {
+        const player = this.player();
+        const tracks = player.textTracks();
+        
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          if (track.kind === 'subtitles') {
+            track.mode = 'disabled';
+          }
+        }
+        
+
+        for (let i = 0; i < tracks.length; i++) {
+          const track = tracks[i];
+          if (track.kind === 'subtitles' && track.language === savedLanguage) {
+            track.mode = 'showing';
+            console.log('✓ Restored subtitle preference:', savedLanguage, track.label);
+            this.refreshSubtitlesSubmenu();
+            break;
+          }
+        }
+      }, 500);
+    }
+  }
+
   handleClickOutside(e) {
     if (
       this.settingsOverlay &&