myetv-player 1.3.0 → 1.5.0

package/dist/myetv-player.js

@@ -25,7 +25,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Video precedente (P)',
                 'playlist_next': 'Avanti',
                 'playlist_prev': 'Indietro',
-                'settings_menu': 'Impostazioni'
+                'settings_menu': 'Impostazioni',
+                'loading': 'Caricamento...',
+                'encoding_in_progress': 'Encoding in corso'
             },
 
             // English
@@ -47,7 +49,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Previous video (P)',
                 'playlist_next': 'Next',
                 'playlist_prev': 'Previous',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Settings',
+                'loading': 'Loading...',
+                'encoding_in_progress': 'Encoding in progress'
             },
 
             // Español
@@ -69,7 +73,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Siguiente',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Configuración'
+                'settings_menu': 'Configuración',
+                'loading': 'Cargando...',
+                'encoding_in_progress': 'Codificación en curso'
             },
 
             // Français
@@ -83,7 +89,7 @@ class VideoPlayerI18n {
                 'volume': 'Volume',
                 'playback_speed': 'Vitesse de lecture',
                 'video_quality': 'Qualité vidéo',
-                'picture_in_picture': 'Image dans l’image (P)',
+                'picture_in_picture': 'Image dans l\'image(P)',
                 'fullscreen': 'Plein écran (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Logo de marque',
@@ -91,7 +97,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vidéo précédente (P)',
                 'playlist_next': 'Suivant',
                 'playlist_prev': 'Précédent',
-                'settings_menu': 'Paramètres'
+                'settings_menu': 'Paramètres',
+                'loading': 'Chargement...',
+                'encoding_in_progress': 'Encodage en cours'
             },
 
             // Deutsch
@@ -113,7 +121,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vorheriges Video (P)',
                 'playlist_next': 'Weiter',
                 'playlist_prev': 'Zurück',
-                'settings_menu': 'Einstellungen'
+                'settings_menu': 'Einstellungen',
+                'loading': 'Laden...',
+                'encoding_in_progress': 'Kodierung läuft'
             },
 
             // Português
@@ -135,7 +145,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vídeo anterior (P)',
                 'playlist_next': 'Próximo',
                 'playlist_prev': 'Anterior',
-                'settings_menu': 'Configurações'
+                'settings_menu': 'Configurações',
+                'loading': 'Carregando...',
+                'encoding_in_progress': 'Codificação em andamento'
             },
 
             // 中文
@@ -157,7 +169,9 @@ class VideoPlayerI18n {
                 'prev_video': '上一个视频 (P)',
                 'playlist_next': '下一个',
                 'playlist_prev': '上一个',
-                'settings_menu': '设置'
+                'settings_menu': '设置',
+                'loading': '加载中...',
+                'encoding_in_progress': '编码中'
             },
 
             // 日本語
@@ -179,7 +193,9 @@ class VideoPlayerI18n {
                 'prev_video': '前の動画 (P)',
                 'playlist_next': '次へ',
                 'playlist_prev': '前へ',
-                'settings_menu': '設定'
+                'settings_menu': '設定',
+                'loading': '読み込み中...',
+                'encoding_in_progress': 'エンコード中'
             },
 
             // Русский
@@ -201,7 +217,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Предыдущее видео (P)',
                 'playlist_next': 'Далее',
                 'playlist_prev': 'Назад',
-                'settings_menu': 'Настройки'
+                'settings_menu': 'Настройки',
+                'loading': 'Загрузка...',
+                'encoding_in_progress': 'Кодирование'
             },
 
             // العربية
@@ -223,7 +241,9 @@ class VideoPlayerI18n {
                 'prev_video': 'الفيديو السابق (P)',
                 'playlist_next': 'التالي',
                 'playlist_prev': 'السابق',
-                'settings_menu': 'الإعدادات'
+                'settings_menu': 'الإعدادات',
+                'loading': 'جاري التحميل...',
+                'encoding_in_progress': 'الترميز جارٍ'
             },
 
             // 한국어 (Korean)
@@ -245,7 +265,9 @@ class VideoPlayerI18n {
                 'prev_video': '이전 비디오 (P)',
                 'playlist_next': '다음',
                 'playlist_prev': '이전',
-                'settings_menu': '설정'
+                'settings_menu': '설정',
+                'loading': '로딩 중...',
+                'encoding_in_progress': '인코딩 진행 중'
             },
 
             // Polski
@@ -267,7 +289,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Poprzednie wideo (P)',
                 'playlist_next': 'Dalej',
                 'playlist_prev': 'Wstecz',
-                'settings_menu': 'Ustawienia'
+                'settings_menu': 'Ustawienia',
+                'loading': 'Ładowanie...',
+                'encoding_in_progress': 'Kodowanie w toku'
             },
 
             // Magyar
@@ -289,7 +313,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Előző videó (P)',
                 'playlist_next': 'Következő',
                 'playlist_prev': 'Előző',
-                'settings_menu': 'Beállítások'
+                'settings_menu': 'Beállítások',
+                'loading': 'Betöltés...',
+                'encoding_in_progress': 'Kódolás folyamatban'
             },
 
             // Türkçe
@@ -311,7 +337,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Önceki video (P)',
                 'playlist_next': 'Sonraki',
                 'playlist_prev': 'Önceki',
-                'settings_menu': 'Ayarlar'
+                'settings_menu': 'Ayarlar',
+                'loading': 'Yükleniyor...',
+                'encoding_in_progress': 'Kodlama devam ediyor'
             },
 
             // Nederlands
@@ -333,7 +361,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Vorige video (P)',
                 'playlist_next': 'Volgende',
                 'playlist_prev': 'Vorige',
-                'settings_menu': 'Instellingen'
+                'settings_menu': 'Instellingen',
+                'loading': 'Laden...',
+                'encoding_in_progress': 'Codering bezig'
             },
 
             // हिन्दी (Hindi)
@@ -355,7 +385,9 @@ class VideoPlayerI18n {
                 'prev_video': 'पिछला वीडियो (P)',
                 'playlist_next': 'अगला',
                 'playlist_prev': 'पिछला',
-                'settings_menu': 'सेटिंग्स'
+                'settings_menu': 'सेटिंग्स',
+                'loading': 'लोड हो रहा है...',
+                'encoding_in_progress': 'एन्कोडिंग प्रगति में'
             },
 
             // Svenska
@@ -377,7 +409,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Föregående video (P)',
                 'playlist_next': 'Nästa',
                 'playlist_prev': 'Föregående',
-                'settings_menu': 'Inställningar'
+                'settings_menu': 'Inställningar',
+                'loading': 'Laddar...',
+                'encoding_in_progress': 'Kodning pågår'
             },
 
             // Bahasa Indonesia
@@ -399,7 +433,9 @@ class VideoPlayerI18n {
                 'prev_video': 'Video sebelumnya (P)',
                 'playlist_next': 'Berikutnya',
                 'playlist_prev': 'Sebelumnya',
-                'settings_menu': 'Pengaturan'
+                'settings_menu': 'Pengaturan',
+                'loading': 'Memuat...',
+                'encoding_in_progress': 'Encoding sedang berlangsung'
             }
         };
 
@@ -527,7 +563,9 @@ try {
                 'fullscreen': 'Fullscreen (F)',
                 'auto': 'Auto',
                 'brand_logo': 'Brand logo',
-                'settings_menu': 'Settings'
+                'settings_menu': 'Settings',
+                'loading': 'Loading...',
+                'encoding_in_progress': 'Encoding in progress'
             };
             return fallback[key] || key;
         },
@@ -865,6 +903,59 @@ constructor(videoElement, options = {}) {
     }
 }
 
+/**
+ * Decode HTML entities to normal characters
+ * @param {string} text - Text with HTML entities
+ * @returns {string} Decoded text
+ */
+decodeHTMLEntities(text) {
+    if (!text) return '';
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = text;
+    return textarea.value;
+}
+
+// check if the device is Fire TV
+isFireTV() {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes('aftm') ||
+        ua.includes('aftb') ||
+        ua.includes('afts') ||
+        ua.includes('aftmm') ||
+        ua.includes('aftt');
+}
+
+// apply Fire TV specific optimizations
+optimizeVideoForFireTV() {
+    if (!this.isFireTV() || !this.video) return;
+
+    if (this.options.debug) {
+        console.log('Fire TV detected - applying optimizations');
+    }
+
+    // set playsinline attributes
+    this.video.setAttribute('playsinline', '');
+    this.video.setAttribute('webkit-playsinline', '');
+
+    // CSS optimizations
+    this.video.style.transform = 'translateZ(0)';
+    this.video.style.webkitTransform = 'translateZ(0)';
+    this.video.style.backfaceVisibility = 'hidden';
+    this.video.style.webkitBackfaceVisibility = 'hidden';
+    this.video.style.willChange = 'transform';
+
+    // force repaint on loadeddata
+    this.video.addEventListener('loadeddata', () => {
+        if (this.options.debug) {
+            console.log('Fire TV: Video loaded, forcing repaint');
+        }
+        this.video.style.display = 'none';
+        setTimeout(() => {
+            this.video.style.display = 'block';
+        }, 10);
+    }, { once: true });
+}
+
 getPlayerState() {
     return {
         isPlaying: !this.isPaused(),
@@ -1108,6 +1199,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) {
@@ -1159,6 +1255,7 @@ createPlayerStructure() {
 
     this.container = wrapper;
 
+    this.optimizeVideoForFireTV();
     this.createInitialLoading();
     this.createLoadingOverlay();
     this.collectVideoQualities();
@@ -1199,14 +1296,14 @@ createTitleOverlay() {
 
     const titleText = document.createElement('h2');
     titleText.className = 'title-text';
-    titleText.textContent = this.options.videoTitle || '';
+    titleText.textContent = this.decodeHTMLEntities(this.options.videoTitle) || '';
     overlay.appendChild(titleText);
 
     // add subtitles
     if (this.options.videoSubtitle) {
         const subtitleText = document.createElement('p');
         subtitleText.className = 'subtitle-text';
-        subtitleText.textContent = this.options.videoSubtitle;
+        subtitleText.textContent = this.decodeHTMLEntities(this.options.videoSubtitle);
         overlay.appendChild(subtitleText);
     }
 
@@ -1261,7 +1358,7 @@ setVideoTitle(title) {
     if (this.titleOverlay) {
         const titleElement = this.titleOverlay.querySelector('.title-text');
         if (titleElement) {
-            titleElement.textContent = this.options.videoTitle;
+            titleElement.textContent = this.decodeHTMLEntities(this.options.videoTitle);
         }
 
         if (title) {
@@ -1743,9 +1840,10 @@ updateProgress() {
         this.progressHandle.style.left = progress + '%';
     }
 
+    // Always call updateTimeDisplay, regardless of duration validity
     this.updateTimeDisplay();
 
-    // Trigger timeupdate event (with throttling to avoid too many events)
+    // Trigger timeupdate event with throttling
     if (!this.lastTimeUpdate || Date.now() - this.lastTimeUpdate > 250) {
         this.triggerEvent('timeupdate', {
             currentTime: this.getCurrentTime(),
@@ -1824,6 +1922,8 @@ updateDuration() {
     if (this.durationEl && this.video && this.video.duration && !isNaN(this.video.duration)) {
         this.durationEl.textContent = this.formatTime(this.video.duration);
     }
+    // Call updateTimeDisplay to handle all states (loading, encoding, normal)
+    this.updateTimeDisplay();
 }
 
 changeSpeed(e) {
@@ -2116,7 +2216,7 @@ switchToVideo(newVideoElement, shouldPlay = false) {
     if (newTitle && this.options.showTitleOverlay) {
         this.options.videoTitle = newTitle;
         if (this.titleText) {
-            this.titleText.textContent = newTitle;
+            this.titleText.textContent = this.decodeHTMLEntities(newTitle);
         }
     }
 
@@ -2710,6 +2810,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.showLoading();
             }
+
+            // Update time display to show "Loading..." during initial buffering
+            this.updateTimeDisplay();
+
             // Trigger loadstart event - browser started loading media
             this.triggerEvent('loadstart');
         });
@@ -2717,6 +2821,9 @@ addEventListener(eventType, callback) {
         this.video.addEventListener('loadedmetadata', () => {
             this.updateDuration();
 
+            // Update time display when metadata is loaded
+            this.updateTimeDisplay();
+
             // Trigger loadedmetadata event - video metadata loaded
             this.triggerEvent('loadedmetadata', {
                 duration: this.getDuration(),
@@ -2734,6 +2841,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.hideLoading();
             }
+
+            // Update time display when data is loaded
+            this.updateTimeDisplay();
+
             // Trigger loadeddata event - current frame data loaded
             this.triggerEvent('loadeddata', {
                 currentTime: this.getCurrentTime()
@@ -2744,6 +2855,10 @@ addEventListener(eventType, callback) {
             if (!this.isChangingQuality) {
                 this.hideLoading();
             }
+
+            // Update time display when video can play
+            this.updateTimeDisplay();
+
             // Trigger canplay event - video can start playing
             this.triggerEvent('canplay', {
                 currentTime: this.getCurrentTime(),
@@ -2751,6 +2866,21 @@ addEventListener(eventType, callback) {
             });
         });
 
+        // Also add to waiting event
+        this.video.addEventListener('waiting', () => {
+            if (!this.isChangingQuality) {
+                this.showLoading();
+
+                // Update time display during buffering
+                this.updateTimeDisplay();
+
+                // Trigger waiting event - video is buffering
+                this.triggerEvent('waiting', {
+                    currentTime: this.getCurrentTime()
+                });
+            }
+        });
+
         this.video.addEventListener('progress', () => {
             this.updateBuffer();
             // Trigger progress event - browser is downloading media
@@ -3486,30 +3616,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">
@@ -3522,8 +3634,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>
                     ` : ''}
@@ -3535,13 +3647,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>
@@ -3638,44 +3743,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';
-
-        // 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');
-
-        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';
+    // always show settings
+    settingsControl.style.display = 'block';
 
-        // Show original controls
-        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 && 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';
 }
 
 /**
@@ -3687,54 +3770,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>`;
@@ -3744,9 +3813,6 @@ populateSettingsMenu() {
     }
 
     settingsMenu.innerHTML = menuHTML;
-
-    // Add scrollbar if needed
-    this.addSettingsMenuScrollbar();
 }
 
 /**
@@ -3756,12 +3822,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')) {
@@ -3794,9 +3875,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();
 
@@ -7731,63 +7846,79 @@ removePluginControlButton(buttonId) {
 }
 
 getBufferedTime() {
-        if (!this.video || !this.video.buffered || this.video.buffered.length === 0) return 0;
-        try {
-            return this.video.buffered.end(this.video.buffered.length - 1);
-        } catch (error) {
-            return 0;
-        }
+    if (!this.video || !this.video.buffered || this.video.buffered.length === 0) return 0;
+    try {
+        return this.video.buffered.end(this.video.buffered.length - 1);
+    } catch (error) {
+        return 0;
     }
+}
 
-    clearTitleTimeout() {
-        if (this.titleTimeout) {
-            clearTimeout(this.titleTimeout);
-            this.titleTimeout = null;
-        }
+clearTitleTimeout() {
+    if (this.titleTimeout) {
+        clearTimeout(this.titleTimeout);
+        this.titleTimeout = null;
     }
+}
 
-    skipTime(seconds) {
-        if (!this.video || !this.video.duration || this.isChangingQuality) return;
+skipTime(seconds) {
+    if (!this.video || !this.video.duration || this.isChangingQuality) return;
 
-        this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
-    }
+    this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
+}
 
 updateTimeDisplay() {
-    // update current time
+    // Update current time
     if (this.currentTimeEl && this.video) {
         this.currentTimeEl.textContent = this.formatTime(this.video.currentTime || 0);
     }
 
-    // update duration or show badge if encoding
+    // Update duration or show appropriate message
     if (this.durationEl && this.video) {
         const duration = this.video.duration;
-
-        // check if duration is valid
-        if (!duration || isNaN(duration) || !isFinite(duration)) {
-            // Video in encoding - show badge instead of duration
-            this.durationEl.innerHTML = '<span class="encoding-badge">Encoding in progress</span>';
+        const readyState = this.video.readyState;
+        const currentTime = this.video.currentTime;
+        const networkState = this.video.networkState;
+
+        // Check for initial buffering state
+        // readyState < 2 means not enough data to play (HAVE_NOTHING or HAVE_METADATA)
+        // currentTime === 0 and duration === 0 indicates initial loading
+        const isInitialBuffering = (readyState < 2 && currentTime === 0) ||
+            (currentTime === 0 && (!duration || duration === 0) && networkState === 2);
+
+        // Check if duration is invalid (NaN or Infinity)
+        const isDurationInvalid = !duration || isNaN(duration) || !isFinite(duration);
+
+        if (isInitialBuffering) {
+            // Initial buffering - show loading message
+            this.durationEl.textContent = t('loading');
+            this.durationEl.classList.remove('encoding-state');
+            this.durationEl.classList.add('loading-state');
+        } else if (isDurationInvalid) {
+            // Video is encoding (FFmpeg still processing) - show encoding badge
+            this.durationEl.textContent = t('encoding_in_progress');
+            this.durationEl.classList.remove('loading-state');
             this.durationEl.classList.add('encoding-state');
         } else {
-            // valid duration - show normal
+            // Valid duration - show normal time
             this.durationEl.textContent = this.formatTime(duration);
-            this.durationEl.classList.remove('encoding-state');
+            this.durationEl.classList.remove('encoding-state', 'loading-state');
         }
     }
 }
 
+formatTime(seconds) {
+    if (isNaN(seconds) || seconds < 0) return '0:00';
 
-    formatTime(seconds) {
-        if (isNaN(seconds) || seconds < 0) return '0:00';
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
 
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const secs = Math.floor(seconds % 60);
-
-        if (hours > 0) {
-            return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-        }
-        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     }
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
 
 }