myetv-player 1.2.0 → 1.4.0

package/dist/myetv-player.js

@@ -9,14 +9,15 @@ class VideoPlayerI18n {
             // Italiano
             'it': {
                 'subtitles': 'Sottotitoli (C)',
-                'subtitlesdisable': 'Disabilita Sottotitoli',
-                'subtitlesenable': 'Abilita Sottotitoli',
+                'subtitlesoff': 'Disattivati',
+                'subtitlesdisable': 'Disabilita sottotitoli',
+                'subtitlesenable': 'Abilita sottotitoli',
                 'play_pause': 'Play/Pausa (Spazio)',
                 'mute_unmute': 'Muta/Smuta (M)',
                 'volume': 'Volume',
                 'playback_speed': 'Velocità riproduzione',
                 'video_quality': 'Qualità video',
-                'picture_in_picture': 'Picture-in-Picture (P)',
+                'picture_in_picture': 'Finestra sovrapposta (P)',
                 'fullscreen': 'Schermo intero (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo',
@@ -30,6 +31,7 @@ class VideoPlayerI18n {
             // English
             'en': {
                 'subtitles': 'Subtitles (C)',
+                'subtitlesoff': 'Off',
                 'subtitlesdisable': 'Disable Subtitles',
                 'subtitlesenable': 'Enable Subtitles',
                 'play_pause': 'Play/Pause (Space)',
@@ -45,24 +47,21 @@ class VideoPlayerI18n {
                 'prev_video': 'Previous video (P)',
                 'playlist_next': 'Next',
                 'playlist_prev': 'Previous',
-                'next_video': 'Next video (N)',
-                'prev_video': 'Previous video (P)',
-                'playlist_next': 'Next',
-                'playlist_prev': 'Previous',
                 'settings_menu': 'Settings'
             },
 
             // Español
             'es': {
                 'subtitles': 'Subtítulos (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'Desactivados',
+                'subtitlesdisable': 'Desactivar subtítulos',
+                'subtitlesenable': 'Activar subtítulos',
                 'play_pause': 'Reproducir/Pausar (Espacio)',
                 'mute_unmute': 'Silenciar (M)',
                 'volume': 'Volumen',
                 'playback_speed': 'Velocidad de reproducción',
                 'video_quality': 'Calidad de vídeo',
-                'picture_in_picture': 'Picture-in-Picture (P)',
+                'picture_in_picture': 'Imagen en imagen (P)',
                 'fullscreen': 'Pantalla completa (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo de marca',
@@ -70,20 +69,21 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Siguiente',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Configuración'
             },
 
             // Français
             'fr': {
                 'subtitles': 'Sous-titres (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'Désactivés',
+                'subtitlesdisable': 'Désactiver les sous-titres',
+                'subtitlesenable': 'Activer les sous-titres',
                 'play_pause': 'Lecture/Pause (Espace)',
                 'mute_unmute': 'Muet (M)',
                 'volume': 'Volume',
                 'playback_speed': 'Vitesse de lecture',
                 'video_quality': 'Qualité vidéo',
-                'picture_in_picture': 'Picture-in-Picture (P)',
+                'picture_in_picture': 'Image dans l’image (P)',
                 'fullscreen': 'Plein écran (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo de marque',
@@ -91,20 +91,21 @@ class VideoPlayerI18n {
                 'prev_video': 'Vidéo précédente (P)',
                 'playlist_next': 'Suivant',
                 'playlist_prev': 'Précédent',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Paramètres'
             },
 
             // Deutsch
             'de': {
                 'subtitles': 'Untertitel (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'Aus',
+                'subtitlesdisable': 'Untertitel deaktivieren',
+                'subtitlesenable': 'Untertitel aktivieren',
                 'play_pause': 'Abspielen/Pausieren (Leertaste)',
                 'mute_unmute': 'Stumm (M)',
                 'volume': 'Lautstärke',
                 'playback_speed': 'Wiedergabegeschwindigkeit',
                 'video_quality': 'Videoqualität',
-                'picture_in_picture': 'Picture-in-Picture (P)',
+                'picture_in_picture': 'Bild-in-Bild (P)',
                 'fullscreen': 'Vollbild (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Markenlogo',
@@ -112,20 +113,21 @@ class VideoPlayerI18n {
                 'prev_video': 'Vorheriges Video (P)',
                 'playlist_next': 'Weiter',
                 'playlist_prev': 'Zurück',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Einstellungen'
             },
 
             // Português
             'pt': {
                 'subtitles': 'Legendas (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'Desativadas',
+                'subtitlesdisable': 'Desativar legendas',
+                'subtitlesenable': 'Ativar legendas',
                 'play_pause': 'Reproduzir/Pausar (Espaço)',
                 'mute_unmute': 'Silenciar (M)',
                 'volume': 'Volume',
                 'playback_speed': 'Velocidade de reprodução',
                 'video_quality': 'Qualidade do vídeo',
-                'picture_in_picture': 'Picture-in-Picture (P)',
+                'picture_in_picture': 'Imagem em imagem (P)',
                 'fullscreen': 'Tela cheia (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo da marca',
@@ -133,14 +135,15 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Próximo',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Configurações'
             },
 
             // 中文
             'zh': {
                 'subtitles': '字幕 (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': '关闭',
+                'subtitlesdisable': '禁用字幕',
+                'subtitlesenable': '启用字幕',
                 'play_pause': '播放/暂停 (空格)',
                 'mute_unmute': '静音 (M)',
                 'volume': '音量',
@@ -154,14 +157,15 @@ class VideoPlayerI18n {
                 'prev_video': '上一个视频 (P)',
                 'playlist_next': '下一个',
                 'playlist_prev': '上一个',
-                'settings_menu': 'Settings'
+                'settings_menu': '设置'
             },
 
             // 日本語
             'ja': {
                 'subtitles': '字幕 (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'オフ',
+                'subtitlesdisable': '字幕を無効にする',
+                'subtitlesenable': '字幕を有効にする',
                 'play_pause': '再生/一時停止 (スペース)',
                 'mute_unmute': 'ミュート (M)',
                 'volume': '音量',
@@ -175,14 +179,15 @@ class VideoPlayerI18n {
                 'prev_video': '前の動画 (P)',
                 'playlist_next': '次へ',
                 'playlist_prev': '前へ',
-                'settings_menu': 'Settings'
+                'settings_menu': '設定'
             },
 
             // Русский
             'ru': {
                 'subtitles': 'Субтитры (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'Выкл',
+                'subtitlesdisable': 'Отключить субтитры',
+                'subtitlesenable': 'Включить субтитры',
                 'play_pause': 'Воспроизведение/Пауза (Пробел)',
                 'mute_unmute': 'Звук (M)',
                 'volume': 'Громкость',
@@ -196,14 +201,15 @@ class VideoPlayerI18n {
                 'prev_video': 'Предыдущее видео (P)',
                 'playlist_next': 'Далее',
                 'playlist_prev': 'Назад',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Настройки'
             },
 
             // العربية
             'ar': {
                 'subtitles': 'الترجمة (C)',
-                'subtitlesdisable': 'Disable Subtitles',
-                'subtitlesenable': 'Enable Subtitles',
+                'subtitlesoff': 'إيقاف',
+                'subtitlesdisable': 'تعطيل الترجمة',
+                'subtitlesenable': 'تفعيل الترجمة',
                 'play_pause': 'تشغيل/إيقاف مؤقت (مسافة)',
                 'mute_unmute': 'كتم الصوت (M)',
                 'volume': 'مستوى الصوت',
@@ -217,10 +223,187 @@ class VideoPlayerI18n {
                 'prev_video': 'الفيديو السابق (P)',
                 'playlist_next': 'التالي',
                 'playlist_prev': 'السابق',
-                'settings_menu': 'Settings'
+                'settings_menu': 'الإعدادات'
+            },
+
+            // 한국어 (Korean)
+            'ko': {
+                'subtitles': '자막 (C)',
+                'subtitlesoff': '끄기',
+                'subtitlesdisable': '자막 비활성화',
+                'subtitlesenable': '자막 활성화',
+                'play_pause': '재생/일시정지 (스페이스)',
+                'mute_unmute': '음소거 (M)',
+                'volume': '음량',
+                'playback_speed': '재생 속도',
+                'video_quality': '비디오 품질',
+                'picture_in_picture': '화면 속 화면 (P)',
+                'fullscreen': '전체 화면 (F)',
+                'auto': '자동',
+                'brand_logo': '브랜드 로고',
+                'next_video': '다음 비디오 (N)',
+                'prev_video': '이전 비디오 (P)',
+                'playlist_next': '다음',
+                'playlist_prev': '이전',
+                'settings_menu': '설정'
+            },
+
+            // Polski
+            'pl': {
+                'subtitles': 'Napisy (C)',
+                'subtitlesoff': 'Wyłączone',
+                'subtitlesdisable': 'Wyłącz napisy',
+                'subtitlesenable': 'Włącz napisy',
+                'play_pause': 'Odtwarzaj/Pauza (Spacja)',
+                'mute_unmute': 'Wycisz (M)',
+                'volume': 'Głośność',
+                'playback_speed': 'Prędkość odtwarzania',
+                'video_quality': 'Jakość wideo',
+                'picture_in_picture': 'Obraz w obrazie (P)',
+                'fullscreen': 'Pełny ekran (F)',
+                'auto': 'Auto',
+                'brand_logo': 'Logo marki',
+                'next_video': 'Następne wideo (N)',
+                'prev_video': 'Poprzednie wideo (P)',
+                'playlist_next': 'Dalej',
+                'playlist_prev': 'Wstecz',
+                'settings_menu': 'Ustawienia'
+            },
+
+            // Magyar
+            'hu': {
+                'subtitles': 'Feliratok (C)',
+                'subtitlesoff': 'Kikapcsolva',
+                'subtitlesdisable': 'Feliratok kikapcsolása',
+                'subtitlesenable': 'Feliratok bekapcsolása',
+                'play_pause': 'Lejátszás/Szünet (Szóköz)',
+                'mute_unmute': 'Némítás (M)',
+                'volume': 'Hangerő',
+                'playback_speed': 'Lejátszási sebesség',
+                'video_quality': 'Videó minősége',
+                'picture_in_picture': 'Kép a képben (P)',
+                'fullscreen': 'Teljes képernyő (F)',
+                'auto': 'Auto',
+                'brand_logo': 'Márka logó',
+                'next_video': 'Következő videó (N)',
+                'prev_video': 'Előző videó (P)',
+                'playlist_next': 'Következő',
+                'playlist_prev': 'Előző',
+                'settings_menu': 'Beállítások'
+            },
+
+            // Türkçe
+            'tr': {
+                'subtitles': 'Altyazılar (C)',
+                'subtitlesoff': 'Kapalı',
+                'subtitlesdisable': 'Altyazıları kapat',
+                'subtitlesenable': 'Altyazıları aç',
+                'play_pause': 'Oynat/Duraklat (Boşluk)',
+                'mute_unmute': 'Sessize al (M)',
+                'volume': 'Ses düzeyi',
+                'playback_speed': 'Oynatma hızı',
+                'video_quality': 'Video kalitesi',
+                'picture_in_picture': 'Resim içinde resim (P)',
+                'fullscreen': 'Tam ekran (F)',
+                'auto': 'Otomatik',
+                'brand_logo': 'Marka logosu',
+                'next_video': 'Sonraki video (N)',
+                'prev_video': 'Önceki video (P)',
+                'playlist_next': 'Sonraki',
+                'playlist_prev': 'Önceki',
+                'settings_menu': 'Ayarlar'
+            },
+
+            // Nederlands
+            'nl': {
+                'subtitles': 'Ondertitels (C)',
+                'subtitlesoff': 'Uit',
+                'subtitlesdisable': 'Ondertitels uitschakelen',
+                'subtitlesenable': 'Ondertitels inschakelen',
+                'play_pause': 'Afspelen/Pauzeren (Spatie)',
+                'mute_unmute': 'Dempen (M)',
+                'volume': 'Volume',
+                'playback_speed': 'Afspeelsnelheid',
+                'video_quality': 'Videokwaliteit',
+                'picture_in_picture': 'Beeld-in-beeld (P)',
+                'fullscreen': 'Volledig scherm (F)',
+                'auto': 'Auto',
+                'brand_logo': 'Merklogo',
+                'next_video': 'Volgende video (N)',
+                'prev_video': 'Vorige video (P)',
+                'playlist_next': 'Volgende',
+                'playlist_prev': 'Vorige',
+                'settings_menu': 'Instellingen'
+            },
+
+            // हिन्दी (Hindi)
+            'hi': {
+                'subtitles': 'उपशीर्षक (C)',
+                'subtitlesoff': 'बंद',
+                'subtitlesdisable': 'उपशीर्षक अक्षम करें',
+                'subtitlesenable': 'उपशीर्षक सक्षम करें',
+                'play_pause': 'चलाएं/रोकें (स्पेस)',
+                'mute_unmute': 'म्यूट (M)',
+                'volume': 'वॉल्यूम',
+                'playback_speed': 'प्लेबैक गति',
+                'video_quality': 'वीडियो गुणवत्ता',
+                'picture_in_picture': 'चित्र-में-चित्र (P)',
+                'fullscreen': 'पूर्ण स्क्रीन (F)',
+                'auto': 'स्वतः',
+                'brand_logo': 'ब्रांड लोगो',
+                'next_video': 'अगला वीडियो (N)',
+                'prev_video': 'पिछला वीडियो (P)',
+                'playlist_next': 'अगला',
+                'playlist_prev': 'पिछला',
+                'settings_menu': 'सेटिंग्स'
+            },
+
+            // Svenska
+            'sv': {
+                'subtitles': 'Undertexter (C)',
+                'subtitlesoff': 'Av',
+                'subtitlesdisable': 'Inaktivera undertexter',
+                'subtitlesenable': 'Aktivera undertexter',
+                'play_pause': 'Spela/Pausa (Blanksteg)',
+                'mute_unmute': 'Stäng av ljud (M)',
+                'volume': 'Volym',
+                'playback_speed': 'Uppspelningshastighet',
+                'video_quality': 'Videokvalitet',
+                'picture_in_picture': 'Bild i bild (P)',
+                'fullscreen': 'Fullskärm (F)',
+                'auto': 'Auto',
+                'brand_logo': 'Varumärkeslogotyp',
+                'next_video': 'Nästa video (N)',
+                'prev_video': 'Föregående video (P)',
+                'playlist_next': 'Nästa',
+                'playlist_prev': 'Föregående',
+                'settings_menu': 'Inställningar'
+            },
+
+            // Bahasa Indonesia
+            'id': {
+                'subtitles': 'Teks (C)',
+                'subtitlesoff': 'Mati',
+                'subtitlesdisable': 'Nonaktifkan teks',
+                'subtitlesenable': 'Aktifkan teks',
+                'play_pause': 'Putar/Jeda (Spasi)',
+                'mute_unmute': 'Bisu (M)',
+                'volume': 'Volume',
+                'playback_speed': 'Kecepatan pemutaran',
+                'video_quality': 'Kualitas video',
+                'picture_in_picture': 'Gambar-dalam-gambar (P)',
+                'fullscreen': 'Layar penuh (F)',
+                'auto': 'Otomatis',
+                'brand_logo': 'Logo merek',
+                'next_video': 'Video berikutnya (N)',
+                'prev_video': 'Video sebelumnya (P)',
+                'playlist_next': 'Berikutnya',
+                'playlist_prev': 'Sebelumnya',
+                'settings_menu': 'Pengaturan'
             }
         };
 
+
         // THEN detect language (after defining translations)
         this.currentLanguage = this.detectLanguage();
     }
@@ -925,6 +1108,11 @@ markPlayerReady() {
             this.video.style.pointerEvents = '';
         }
 
+        // UPDATE SETTINGS MENU VISIBILITY IF APPLICABLE
+        if (typeof this.updateSettingsMenuVisibility === 'function') {
+            this.updateSettingsMenuVisibility();
+        }
+
         // INITIALIZE AUTO-HIDE AFTER EVERYTHING IS READY
         setTimeout(() => {
             if (this.options.autoHide && !this.autoHideInitialized) {
@@ -3303,30 +3491,12 @@ createControls() {
     <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M12.5 4v8l-7-4zm-8 0v8l7-4z"/></svg></span>
 </button>
 
-                    ${this.options.showSubtitles ? `
-                    <div class="subtitles-control" style="display: none;">
-                        <button class="control-btn subtitles-btn" data-tooltip="subtitles">
-    <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"/><path d="M6.096 4.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152M6.096 9.972c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152m4.915 0c.234 0 .44.05.617.152.177.1.312.235.405.403.093.169.14.36.14.577 0 .216-.047.406-.14.572a1.03 1.03 0 0 1-.405.403 1.2 1.2 0 0 1-.617.152 1.2 1.2 0 0 1-.615-.152 1.03 1.03 0 0 1-.406-.403 1.28 1.28 0 0 1-.14-.572c0-.216.046-.408.14-.577.093-.168.228-.303.406-.403.177-.101.383-.152.615-.152"/></svg></span>
+                    <div class="settings-control">
+                        <button class="control-btn settings-btn" data-tooltip="settings_menu">
+                            <span class="icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg></span>
                         </button>
-                        <div class="subtitles-menu">
-                            <div class="subtitles-option active" data-track="off">Off</div>
-                        </div>
-                    </div>
-                    ` : ''}
-
-                    ${this.options.showSpeedControl ? `
-                    <div class="speed-control">
-                        <button class="control-btn speed-btn" data-tooltip="playback_speed">1x</button>
-                        <div class="speed-menu">
-                            <div class="speed-option" data-speed="0.5">0.5x</div>
-                            <div class="speed-option" data-speed="0.75">0.75x</div>
-                            <div class="speed-option active" data-speed="1">1x</div>
-                            <div class="speed-option" data-speed="1.25">1.25x</div>
-                            <div class="speed-option" data-speed="1.5">1.5x</div>
-                            <div class="speed-option" data-speed="2">2x</div>
-                        </div>
+                        <div class="settings-menu"></div>
                     </div>
-                    ` : ''}
 
                     ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
                     <div class="quality-control">
@@ -3339,8 +3509,8 @@ createControls() {
                         <div class="quality-menu">
                             <div class="quality-option selected" data-quality="auto">${this.t('auto')}</div>
                             ${this.originalSources.map(s =>
-        `<div class="quality-option" data-quality="${s.quality}">${s.quality}</div>`
-    ).join('')}
+                                `<div class="quality-option" data-quality="${s.quality}">${s.quality}</div>`
+                            ).join('')}
                         </div>
                     </div>
                     ` : ''}
@@ -3352,13 +3522,6 @@ createControls() {
                     </button>
                     ` : ''}
 
-                    <div class="settings-control">
-                        <button class="control-btn settings-btn" data-tooltip="settings_menu">
-                            <span class="icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52z"/></svg></span>
-                        </button>
-                        <div class="settings-menu"></div>
-                    </div>
-
                     ${this.options.showFullscreen ? `
                     <button class="control-btn fullscreen-btn" data-tooltip="fullscreen">
                         <span class="icon fullscreen-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
@@ -3455,44 +3618,22 @@ checkScreenSize() {
     }
 }
 
-/* Update settings menu visibility based on screen size */
+/* Update settings menu visibility */
 updateSettingsMenuVisibility() {
     const settingsControl = this.controls?.querySelector('.settings-control');
     if (!settingsControl) return;
 
-    if (this.isSmallScreen) {
-        // Show settings menu and hide individual controls
-        settingsControl.style.display = 'block';
+    // always show settings
+    settingsControl.style.display = 'block';
 
-        // Hide controls that will be moved to settings menu
-        const pipBtn = this.controls.querySelector('.pip-btn');
-        const speedControl = this.controls.querySelector('.speed-control');
-        const subtitlesControl = this.controls.querySelector('.subtitles-control');
+    // Populate settings menu
+    this.populateSettingsMenu();
 
-        if (pipBtn) pipBtn.style.display = 'none';
-        if (speedControl) speedControl.style.display = 'none';
-        if (subtitlesControl) subtitlesControl.style.display = 'none';
-
-        this.populateSettingsMenu();
-    } else {
-        // Hide settings menu and show individual controls
-        settingsControl.style.display = 'none';
-
-        // Show original controls
-        const pipBtn = this.controls.querySelector('.pip-btn');
-        const speedControl = this.controls.querySelector('.speed-control');
-        const subtitlesControl = this.controls.querySelector('.subtitles-control');
-
-        if (pipBtn && this.options.showPictureInPicture && this.isPiPSupported) {
-            pipBtn.style.display = 'flex';
-        }
-        if (speedControl && this.options.showSpeedControl) {
-            speedControl.style.display = 'block';
-        }
-        if (subtitlesControl && this.options.showSubtitles && this.textTracks.length > 0) {
-            subtitlesControl.style.display = 'block';
-        }
-    }
+    // hide speed and subtitles controls
+    const speedControl = this.controls.querySelector('.speed-control');
+    const subtitlesControl = this.controls.querySelector('.subtitles-control');
+    if (speedControl) speedControl.style.display = 'none';
+    if (subtitlesControl) subtitlesControl.style.display = 'none';
 }
 
 /**
@@ -3504,54 +3645,40 @@ populateSettingsMenu() {
 
     let menuHTML = '';
 
-    // Picture-in-Picture option
-    if (this.options.showPictureInPicture && this.isPiPSupported) {
-        const pipLabel = this.t('picture_in_picture') || 'Picture-in-Picture';
-        menuHTML += `<div class="settings-option" data-action="pip">
-            <span class="settings-option-label">${pipLabel}</span>
-        </div>`;
-    }
-
-    // Speed Control - expandable
+    // SPEED - always included
     if (this.options.showSpeedControl) {
         const speedLabel = this.t('playback_speed') || 'Playback Speed';
         const currentSpeed = this.video ? this.video.playbackRate : 1;
-
-        menuHTML += `
-            <div class="settings-expandable-wrapper">
-                <div class="settings-option expandable-trigger" data-action="speed-expand">
-                    <span class="settings-option-label">${speedLabel}: ${currentSpeed}x</span>
-                    <span class="expand-arrow">▼</span>
-                </div>
-                <div class="settings-expandable-content" style="display: none;">`;
+        menuHTML += `<div class="settings-expandable-wrapper">
+            <div class="settings-option expandable-trigger" data-action="speed-expand">
+                <span class="settings-option-label">${speedLabel} <strong>${currentSpeed}x</strong></span>
+                <span class="expand-arrow">▶</span>
+            </div>
+            <div class="settings-expandable-content" style="display: none;">`;
 
         const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
         speeds.forEach(speed => {
             const isActive = Math.abs(speed - currentSpeed) < 0.01;
             menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-speed="${speed}">${speed}x</div>`;
         });
-
         menuHTML += `</div></div>`;
     }
 
-    // Subtitles - expandable
+    // SUBTITLES - always included
     if (this.options.showSubtitles && this.textTracks && this.textTracks.length > 0) {
         const subtitlesLabel = this.t('subtitles') || 'Subtitles';
         const currentTrack = this.currentSubtitleTrack;
-        const currentLabel = this.subtitlesEnabled && currentTrack ? currentTrack.label : (this.t('subtitlesoff') || 'Off');
+        const currentLabel = this.subtitlesEnabled ? (currentTrack ? currentTrack.label : 'Unknown') : (this.t('subtitlesoff') || 'Off');
 
-        menuHTML += `
-            <div class="settings-expandable-wrapper">
-                <div class="settings-option expandable-trigger" data-action="subtitles-expand">
-                    <span class="settings-option-label">${subtitlesLabel}: ${currentLabel}</span>
-                    <span class="expand-arrow">▼</span>
-                </div>
-                <div class="settings-expandable-content" style="display: none;">`;
+        menuHTML += `<div class="settings-expandable-wrapper">
+            <div class="settings-option expandable-trigger" data-action="subtitles-expand">
+                <span class="settings-option-label">${subtitlesLabel} <strong>${currentLabel}</strong></span>
+                <span class="expand-arrow">▶</span>
+            </div>
+            <div class="settings-expandable-content" style="display: none;">`;
 
-        // Off option
         menuHTML += `<div class="settings-suboption ${!this.subtitlesEnabled ? 'active' : ''}" data-track="off">${this.t('subtitlesoff') || 'Off'}</div>`;
 
-        // Subtitle tracks
         this.textTracks.forEach((trackData, index) => {
             const isActive = this.currentSubtitleTrack === trackData.track;
             menuHTML += `<div class="settings-suboption ${isActive ? 'active' : ''}" data-track="${index}">${trackData.label}</div>`;
@@ -3561,9 +3688,6 @@ populateSettingsMenu() {
     }
 
     settingsMenu.innerHTML = menuHTML;
-
-    // Add scrollbar if needed
-    this.addSettingsMenuScrollbar();
 }
 
 /**
@@ -3573,12 +3697,27 @@ addSettingsMenuScrollbar() {
     const settingsMenu = this.controls?.querySelector('.settings-menu');
     if (!settingsMenu) return;
 
-    const playerHeight = this.container.offsetHeight;
-    const maxMenuHeight = playerHeight - 100;
+    const settingsBtn = document.querySelector('.settings-btn');
+    if (!settingsBtn) return;
 
-    settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
-    settingsMenu.style.overflowY = 'auto';
-    settingsMenu.style.overflowX = 'hidden';
+    // helper to update menu height
+    const updateMenuHeight = () => {
+        if (settingsMenu.classList.contains('active')) {
+            const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+            const btnRect = settingsBtn.getBoundingClientRect();
+            const spaceBelow = containerRect.bottom - btnRect.bottom;
+            const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+            settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+            settingsMenu.style.overflowY = 'auto';
+            settingsMenu.style.overflowX = 'hidden';
+        }
+    };
+
+    // run initially
+    updateMenuHeight();
+
+    // recalculate on window resize
+    window.addEventListener('resize', updateMenuHeight);
 
     // Add scrollbar styling
     if (!document.getElementById('player-settings-scrollbar-style')) {
@@ -3611,9 +3750,43 @@ addSettingsMenuScrollbar() {
  * Bind settings menu events
  */
 bindSettingsMenuEvents() {
+    const settingsBtn = this.controls?.querySelector('.settings-btn');
     const settingsMenu = this.controls?.querySelector('.settings-menu');
-    if (!settingsMenu) return;
+    if (!settingsMenu || !settingsBtn) return;
 
+    // toggle menu on button click
+    settingsBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        settingsMenu.classList.toggle('active');
+
+        // when menu is opened, set max height and overflow
+        if (settingsMenu.classList.contains('active')) {
+            const settingsBtn = document.querySelector('.settings-btn');
+            const containerRect = settingsMenu.parentElement.parentElement.getBoundingClientRect();
+            const btnRect = settingsBtn.getBoundingClientRect();
+            const spaceBelow = containerRect.bottom - btnRect.bottom;
+            const maxMenuHeight = Math.max(100, Math.min(250, spaceBelow - 20));
+
+            settingsMenu.style.maxHeight = `${maxMenuHeight}px`;
+            settingsMenu.style.overflowY = 'auto';
+            settingsMenu.style.overflowX = 'hidden';
+        } else {
+            settingsMenu.style.maxHeight = 'none';
+            settingsMenu.style.overflowY = 'visible';
+        }
+
+    });
+
+    // close menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!settingsBtn?.contains(e.target) && !settingsMenu?.contains(e.target)) {
+            settingsMenu?.classList.remove('active');
+            settingsMenu.style.maxHeight = 'none';
+            settingsMenu.style.overflowY = 'visible';
+        }
+    });
+
+    // manage clicks inside the menu
     settingsMenu.addEventListener('click', (e) => {
         e.stopPropagation();
 
@@ -5719,46 +5892,99 @@ parseTimeToSeconds(timeStr) {
  * Create visual chapter markers on the progress bar
  */
 createChapterMarkers() {
-    if (!this.progressContainer || !this.video || !this.chapters) {
+    if (!this.progressContainer || !this.video || !this.chapters) return;
+
+    const duration = this.video.duration;
+    if (!duration || isNaN(duration)) {
+        // Wait for metadata
+        const loadedMetadataHandler = () => {
+            this.createChapterMarkers();
+            this.video.removeEventListener('loadedmetadata', loadedMetadataHandler);
+        };
+        this.video.addEventListener('loadedmetadata', loadedMetadataHandler);
         return;
     }
 
-    // Create container for chapter markers
+    // Remove existing markers
+    const existingMarkers = this.progressContainer.querySelector('.chapter-markers-container');
+    if (existingMarkers) {
+        existingMarkers.remove();
+    }
+
+    // Create container for chapter segments
     const markersContainer = document.createElement('div');
     markersContainer.className = 'chapter-markers-container';
 
+    // Create segments for each chapter
     this.chapters.forEach((chapter, index) => {
-        const marker = document.createElement('div');
-        marker.className = 'chapter-marker';
-        marker.setAttribute('data-chapter-index', index);
-        marker.setAttribute('data-chapter-time', chapter.time);
-        marker.setAttribute('data-chapter-title', chapter.title);
-
-        // Set custom color if provided
-        if (chapter.color) {
-            marker.style.backgroundColor = chapter.color;
+        const nextChapter = this.chapters[index + 1];
+        const startPercent = (chapter.time / duration) * 100;
+        const endPercent = nextChapter ? (nextChapter.time / duration) * 100 : 100;
+
+        // Calculate segment width minus the gap
+        const gapSize = nextChapter ? 6 : 0; // 6px gap between segments
+        const widthPercent = endPercent - startPercent;
+
+        // Create segment container
+        const segment = document.createElement('div');
+        segment.className = 'chapter-segment';
+        segment.style.cssText = `
+            position: absolute;
+            left: ${startPercent}%;
+            top: 0;
+            width: calc(${widthPercent}% - ${gapSize}px);
+            height: 100%;
+            background: rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            z-index: 3;
+            transition: background 0.2s;
+            pointer-events: none;
+        `;
+
+        segment.setAttribute('data-chapter-index', index);
+        segment.setAttribute('data-chapter-time', chapter.time);
+        segment.setAttribute('data-chapter-title', chapter.title);
+
+        markersContainer.appendChild(segment);
+
+        // Add marker at the START of next segment (transparent divider)
+        if (nextChapter) {
+            const marker = document.createElement('div');
+            marker.className = 'chapter-marker';
+            marker.style.cssText = `
+                position: absolute !important;
+                left: ${endPercent}% !important;
+                top: 0 !important;
+                width: 6px !important;
+                height: 100% !important;
+                background: transparent !important;
+                border: none !important;
+                box-shadow: none !important;
+                margin-left: -3px !important;
+                cursor: pointer !important;
+                z-index: 10 !important;
+            `;
+
+            marker.setAttribute('data-chapter-time', nextChapter.time);
+            marker.setAttribute('data-chapter-title', nextChapter.title);
+
+            // Click on marker to jump to chapter start
+            marker.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.jumpToChapter(index + 1);
+            });
+
+            markersContainer.appendChild(marker);
         }
-
-        markersContainer.appendChild(marker);
     });
 
     // Insert markers container into progress container
     this.progressContainer.appendChild(markersContainer);
     this.chapterMarkersContainer = markersContainer;
 
-    // Update marker positions when video duration is known
-    if (this.video.duration && !isNaN(this.video.duration)) {
-        this.updateChapterMarkerPositions();
-    } else {
-        // Wait for metadata to be loaded
-        const loadedMetadataHandler = () => {
-            this.updateChapterMarkerPositions();
-            this.video.removeEventListener('loadedmetadata', loadedMetadataHandler);
-        };
-        this.video.addEventListener('loadedmetadata', loadedMetadataHandler);
+    if (this.options.debug) {
+        console.log(`Chapter markers created: ${this.chapters.length} segments`);
     }
-
-    if (this.options.debug) console.log('📚 Chapter markers created on timeline');
 }
 
 /**
@@ -5783,70 +6009,278 @@ updateChapterMarkerPositions() {
 }
 
 /**
- * Create chapter tooltip
+ * Create chapter tooltip with title and image
  */
 createChapterTooltip() {
-    if (!this.progressContainer) {
-        return;
+    if (!this.progressContainer) return;
+
+    // Remove existing chapter tooltip
+    let chapterTooltip = this.progressContainer.querySelector('.chapter-tooltip');
+    if (chapterTooltip) {
+        chapterTooltip.remove();
     }
 
-    const tooltip = document.createElement('div');
-    tooltip.className = 'chapter-tooltip';
-    tooltip.style.opacity = '0';
-    tooltip.style.visibility = 'hidden';
+    // Create chapter tooltip container (positioned ABOVE the time tooltip)
+    chapterTooltip = document.createElement('div');
+    chapterTooltip.className = 'chapter-tooltip';
+    chapterTooltip.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 35px);
+        left: 0;
+        background: rgba(28, 28, 28, 0.95);
+        color: #fff;
+        border-radius: 4px;
+        pointer-events: none;
+        visibility: hidden;
+        opacity: 0;
+        z-index: 100001;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        max-width: 300px;
+        overflow: hidden;
+        transform: translateX(-50%);
+        transition: opacity 0.15s, visibility 0.15s;
+        display: flex;
+        flex-direction: column;
+    `;
 
-    // Tooltip content structure
-    tooltip.innerHTML = `
-        <div class="chapter-tooltip-image"></div>
-        <div class="chapter-tooltip-title"></div>
-        <div class="chapter-tooltip-time"></div>
+    // Create inner content structure
+    chapterTooltip.innerHTML = `
+        <div class="chapter-tooltip-content" style="display: flex; flex-direction: column; gap: 8px; padding: 8px;">
+            <div class="chapter-tooltip-image" style="
+                width: 100%;
+                height: 120px;
+                background-size: cover;
+                background-position: center;
+                border-radius: 3px;
+                display: none;
+            "></div>
+            <div class="chapter-tooltip-info" style="display: flex; flex-direction: column; gap: 4px;">
+                <div class="chapter-tooltip-title" style="
+                    font-size: 13px;
+                    font-weight: 600;
+                    color: #fff;
+                    max-width: 280px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                "></div>
+                <div class="chapter-tooltip-time" style="
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: rgba(255, 255, 255, 0.8);
+                "></div>
+            </div>
+        </div>
     `;
 
-    this.progressContainer.appendChild(tooltip);
-    this.chapterTooltip = tooltip;
+    this.progressContainer.appendChild(chapterTooltip);
+    this.chapterTooltip = chapterTooltip;
 
-    if (this.options.debug) console.log('📚 Chapter tooltip created');
+    if (this.options.debug) {
+        console.log('Chapter tooltip created');
+    }
 }
 
 /**
- * Bind chapter-related events
+ * Bind chapter-related events - tooltip on progressbar mousemove
  */
 bindChapterEvents() {
-    if (!this.chapterMarkersContainer || !this.chapterTooltip) {
-        return;
+    if (!this.progressContainer) return;
+
+    // Remove existing chapter tooltip if present
+    let chapterTooltip = this.progressContainer.querySelector('.chapter-tooltip-hover');
+    if (chapterTooltip) {
+        chapterTooltip.remove();
     }
 
-    // Hover on chapter markers
-    const markers = this.chapterMarkersContainer.querySelectorAll('.chapter-marker');
+    // Create chapter tooltip
+    chapterTooltip = document.createElement('div');
+    chapterTooltip.className = 'chapter-tooltip-hover';
+    chapterTooltip.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 35px);
+        left: 0;
+        background: rgba(28, 28, 28, 0.95);
+        color: #fff;
+        border-radius: 4px;
+        padding: 8px;
+        pointer-events: none;
+        visibility: hidden;
+        opacity: 0;
+        z-index: 100001;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        max-width: 300px;
+        transform: translateX(-50%);
+        transition: opacity 0.15s, visibility 0.15s;
+    `;
 
-    markers.forEach((marker, index) => {
-        marker.addEventListener('mouseenter', (e) => {
-            this.showChapterTooltip(index, e);
-        });
+    this.progressContainer.appendChild(chapterTooltip);
+    this.chapterTooltip = chapterTooltip;
 
-        marker.addEventListener('mousemove', (e) => {
-            this.updateChapterTooltipPosition(e);
-        });
+    // Get player container for edge detection
+    const getPlayerBounds = () => {
+        return this.container ? this.container.getBoundingClientRect() : null;
+    };
 
-        marker.addEventListener('mouseleave', () => {
-            this.hideChapterTooltip();
-        });
+    // Mousemove handler to show tooltip with title and image
+    this.progressContainer.addEventListener('mousemove', (e) => {
+        if (!this.video || !this.video.duration || !this.chapters || this.chapters.length === 0) {
+            return;
+        }
 
-        // Click to jump to chapter
-        marker.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.jumpToChapter(index);
-        });
+        const rect = this.progressContainer.getBoundingClientRect();
+        const playerRect = getPlayerBounds();
+        const mouseX = e.clientX - rect.left;
+        const percentage = Math.max(0, Math.min(1, mouseX / rect.width));
+        const time = percentage * this.video.duration;
+
+        // Find chapter at current time
+        let currentChapter = null;
+        for (let i = this.chapters.length - 1; i >= 0; i--) {
+            if (time >= this.chapters[i].time) {
+                currentChapter = this.chapters[i];
+                break;
+            }
+        }
+
+        if (currentChapter) {
+            // Build tooltip HTML
+            let tooltipHTML = '<div style="display: flex; flex-direction: column; gap: 6px;">';
+
+            // Add image if available
+            if (currentChapter.image) {
+                tooltipHTML += `
+                    <div style="
+                        width: 100%;
+                        height: 120px;
+                        background-image: url('${currentChapter.image}');
+                        background-size: cover;
+                        background-position: center;
+                        border-radius: 3px;
+                    "></div>
+                `;
+            }
+
+            // Add title
+            tooltipHTML += `
+                <div style="
+                    font-size: 13px;
+                    font-weight: 600;
+                    max-width: 280px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                ">
+                    ${currentChapter.title}
+                </div>
+            `;
+
+            // Add time
+            tooltipHTML += `
+                <div style="
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: rgba(255, 255, 255, 0.8);
+                ">
+                    ${this.formatTime(currentChapter.time)}
+                </div>
+            `;
+
+            tooltipHTML += '</div>';
+
+            chapterTooltip.innerHTML = tooltipHTML;
+            chapterTooltip.style.visibility = 'visible';
+            chapterTooltip.style.opacity = '1';
+
+            // Position tooltip with edge detection
+            setTimeout(() => {
+                const tooltipWidth = chapterTooltip.offsetWidth;
+                const tooltipHalfWidth = tooltipWidth / 2;
+                const absoluteX = e.clientX;
+
+                if (playerRect) {
+                    // Left edge
+                    if (absoluteX - tooltipHalfWidth < playerRect.left) {
+                        chapterTooltip.style.left = `${playerRect.left - rect.left + tooltipHalfWidth}px`;
+                    }
+                    // Right edge
+                    else if (absoluteX + tooltipHalfWidth > playerRect.right) {
+                        chapterTooltip.style.left = `${playerRect.right - rect.left - tooltipHalfWidth}px`;
+                    }
+                    // Normal center
+                    else {
+                        chapterTooltip.style.left = `${mouseX}px`;
+                    }
+                } else {
+                    chapterTooltip.style.left = `${mouseX}px`;
+                }
+            }, 0);
+        } else {
+            chapterTooltip.style.visibility = 'hidden';
+            chapterTooltip.style.opacity = '0';
+        }
+    });
+
+    // Mouseleave handler
+    this.progressContainer.addEventListener('mouseleave', () => {
+        chapterTooltip.style.visibility = 'hidden';
+        chapterTooltip.style.opacity = '0';
     });
 
     // Update active chapter during playback
     if (this.video) {
-        this.video.addEventListener('timeupdate', () => {
-            this.updateActiveChapter();
-        });
+        this.video.addEventListener('timeupdate', () => this.updateActiveChapter());
     }
 
-    if (this.options.debug) console.log('📚 Chapter events bound');
+    if (this.options.debug) {
+        console.log('Chapter events bound with tooltip');
+    }
+}
+
+/**
+ * Update chapter name in title overlay dynamically
+ */
+updateChapterInTitleOverlay() {
+    if (!this.video || !this.chapters || this.chapters.length === 0) return;
+
+    const titleOverlay = this.container ? this.container.querySelector('.title-overlay') : null;
+    if (!titleOverlay) return;
+
+    // Find or create chapter name element
+    let chapterElement = titleOverlay.querySelector('.chapter-name');
+    if (!chapterElement) {
+        chapterElement = document.createElement('div');
+        chapterElement.className = 'chapter-name';
+        chapterElement.style.cssText = `
+            font-size: 13px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 0.9);
+            margin-top: 6px;
+            max-width: 400px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        `;
+        titleOverlay.appendChild(chapterElement);
+    }
+
+    // Find current chapter
+    const currentTime = this.video.currentTime;
+    let currentChapter = null;
+    for (let i = this.chapters.length - 1; i >= 0; i--) {
+        if (currentTime >= this.chapters[i].time) {
+            currentChapter = this.chapters[i];
+            break;
+        }
+    }
+
+    // Update or hide chapter name
+    if (currentChapter) {
+        chapterElement.textContent = currentChapter.title;
+        chapterElement.style.display = 'block';
+    } else {
+        chapterElement.style.display = 'none';
+    }
 }
 
 /**
@@ -5950,9 +6384,7 @@ jumpToChapter(chapterIndex) {
  * Update active chapter marker during playback
  */
 updateActiveChapter() {
-    if (!this.video || !this.chapterMarkersContainer || !this.chapters) {
-        return;
-    }
+    if (!this.video || !this.chapterMarkersContainer || !this.chapters) return;
 
     const currentTime = this.video.currentTime;
     const markers = this.chapterMarkersContainer.querySelectorAll('.chapter-marker');
@@ -5974,6 +6406,9 @@ updateActiveChapter() {
             marker.classList.remove('active');
         }
     });
+
+    // Update chapter name in title overlay
+    this.updateChapterInTitleOverlay();
 }
 
 /**