myetv-player 1.4.0 → 1.6.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(),
@@ -1164,6 +1255,7 @@ createPlayerStructure() {
 
     this.container = wrapper;
 
+    this.optimizeVideoForFireTV();
     this.createInitialLoading();
     this.createLoadingOverlay();
     this.collectVideoQualities();
@@ -1204,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);
     }
 
@@ -1266,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) {
@@ -1748,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(),
@@ -1829,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) {
@@ -2121,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);
         }
     }
 
@@ -2715,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');
         });
@@ -2722,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(),
@@ -2739,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()
@@ -2749,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(),
@@ -2756,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
@@ -3498,7 +3623,7 @@ createControls() {
                         <div class="settings-menu"></div>
                     </div>
 
-                    ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
+${(this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1) || this.options.adaptiveQualityControl ? `
                     <div class="quality-control">
                         <button class="control-btn quality-btn" data-tooltip="video_quality">
                             <div class="quality-btn-text">
@@ -4369,6 +4494,11 @@ updateQualityDisplay() {
 }
 
 updateQualityButton() {
+    if (this.isAdaptiveStream) {
+        if (this.options.debug) console.log('🔒 Adaptive streaming active - quality button managed by streaming.js');
+        return;
+    }
+
     const qualityBtn = this.controls?.querySelector('.quality-btn');
     if (!qualityBtn) return;
 
@@ -4420,6 +4550,11 @@ updateQualityMenu() {
     const qualityMenu = this.controls?.querySelector('.quality-menu');
     if (!qualityMenu) return;
 
+    if (this.isAdaptiveStream) {
+        if (this.options.debug) console.log('🔒 Adaptive streaming active - quality menu managed by streaming.js');
+        return;
+    }
+
     let menuHTML = '';
 
     // Check if adaptive streaming is active (HLS/DASH)
@@ -7095,6 +7230,16 @@ async loadAdaptiveLibraries() {
     }
 
     try {
+        // Initialize quality selection to Auto BEFORE creating player
+
+        // FORCE Auto mode - always reset at initialization
+        this.selectedQuality = 'auto';
+        this.qualityEventsInitialized = false;
+
+        if (this.options.debug) {
+            console.log('🔍 initializeDash - FORCED selectedQuality to:', this.selectedQuality);
+        }
+
         // Destroy existing DASH player
         if (this.dashPlayer) {
             this.dashPlayer.destroy();
@@ -7259,35 +7404,464 @@ disableDashTextTracks() {
         }
     }
 
-    updateAdaptiveQualities() {
-        this.adaptiveQualities = [];
+updateAdaptiveQualities() {
+    this.adaptiveQualities = [];
 
+    if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+        try {
+            // dash.js 5.x - Get ALL video tracks
+            const videoTracks = this.dashPlayer.getTracksFor('video');
+
+            if (this.options.debug) {
+                console.log('✅ DASH getTracksFor result:', videoTracks);
+            }
+
+            if (videoTracks && videoTracks.length > 0) {
+                // Collect qualities from ALL video tracks
+                const allQualities = [];
+
+                videoTracks.forEach((track, trackIndex) => {
+                    const bitrateList = track.bitrateList || [];
+
+                    if (this.options.debug) {
+                        console.log(`✅ Track ${trackIndex} (${track.codec}):`, bitrateList);
+                    }
+
+                    bitrateList.forEach((bitrate, index) => {
+                        allQualities.push({
+                            trackIndex: trackIndex,
+                            bitrateIndex: index,
+                            label: `${bitrate.height}p`,
+                            height: bitrate.height,
+                            width: bitrate.width,
+                            bandwidth: bitrate.bandwidth,
+                            codec: track.codec
+                        });
+                    });
+                });
+
+                // Sort by height (descending) and remove duplicates
+                const uniqueHeights = [...new Set(allQualities.map(q => q.height))];
+                uniqueHeights.sort((a, b) => b - a);
+
+                this.adaptiveQualities = uniqueHeights.map((height, index) => {
+                    const quality = allQualities.find(q => q.height === height);
+                    return {
+                        index: index,
+                        label: `${height}p`,
+                        height: height,
+                        trackIndex: quality.trackIndex,
+                        bitrateIndex: quality.bitrateIndex,
+                        bandwidth: quality.bandwidth,
+                        codec: quality.codec
+                    };
+                });
+
+                if (this.options.debug) {
+                    console.log('✅ All DASH qualities merged:', this.adaptiveQualities);
+                }
+            }
+        } catch (error) {
+            if (this.options.debug) {
+                console.error('❌ Error getting DASH qualities:', error);
+            }
+        }
+    } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+        const levels = this.hlsPlayer.levels;
+        this.adaptiveQualities = levels.map((level, index) => ({
+            index: index,
+            label: this.getQualityLabel(level.height, level.width),
+            height: level.height,
+            bandwidth: level.bitrate
+        }));
+    }
+
+    if (this.options.adaptiveQualityControl) {
+        this.updateAdaptiveQualityMenu();
+    }
+
+    if (this.options.debug) {
+        console.log('📡 Adaptive qualities available:', this.adaptiveQualities);
+        console.log('📡 Selected quality mode:', this.selectedQuality);
+    }
+}
+
+updateAdaptiveQualityMenu() {
+    const qualityMenu = this.controls?.querySelector('.quality-menu');
+    if (!qualityMenu) {
+        if (this.options.debug) console.log('❌ Quality menu not found in DOM');
+        return;
+    }
+
+    if (this.adaptiveQualities.length === 0) {
+        if (this.options.debug) console.log('❌ No adaptive qualities to display');
+        return;
+    }
+
+    // Generate menu HTML with "Auto" option
+    const isAutoActive = this.selectedQuality === 'auto';
+    let menuHTML = `<div class="quality-option ${isAutoActive ? 'active' : ''}" data-quality="auto">Auto</div>`;
+
+    // Add all quality options
+    this.adaptiveQualities.forEach((quality) => {
+        const isActive = this.selectedQuality === quality.height;
+
+        if (this.options.debug) {
+            console.log('🔍 Quality item:', quality.label, 'height:', quality.height, 'active:', isActive);
+        }
+
+        menuHTML += `<div class="quality-option ${isActive ? 'active' : ''}" data-quality="${quality.height}">
+            ${quality.label}
+            <span class="quality-playing" style="display: none; color: #4CAF50; margin-left: 8px; font-size: 0.85em;">● Playing</span>
+        </div>`;
+    });
+
+    qualityMenu.innerHTML = menuHTML;
+
+    if (this.options.debug) {
+        console.log('✅ Quality menu populated with', this.adaptiveQualities.length, 'options');
+    }
+
+    // Bind events ONCE
+    if (!this.qualityEventsInitialized) {
+        this.bindAdaptiveQualityEvents();
+        this.qualityEventsInitialized = true;
+    }
+
+    // Update display
+    this.updateAdaptiveQualityDisplay();
+}
+
+updateAdaptiveQualityDisplay() {
+    if (!this.dashPlayer && !this.hlsPlayer) return;
+
+    let currentHeight = null;
+
+    try {
         if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
-            const bitrates = this.dashPlayer.getBitrateInfoListFor('video');
-            this.adaptiveQualities = bitrates.map((bitrate, index) => ({
-                index: index,
-                label: this.getQualityLabel(bitrate.height, bitrate.width),
-                height: bitrate.height,
-                bandwidth: bitrate.bandwidth
-            }));
+            // Get video element to check actual resolution
+            if (this.video && this.video.videoHeight) {
+                currentHeight = this.video.videoHeight;
+            }
+
+            if (this.options.debug) {
+                console.log('📊 Current video height:', currentHeight, 'Selected mode:', this.selectedQuality);
+            }
         } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
-            const levels = this.hlsPlayer.levels;
-            this.adaptiveQualities = levels.map((level, index) => ({
-                index: index,
-                label: this.getQualityLabel(level.height, level.width),
-                height: level.height,
-                bandwidth: level.bitrate
-            }));
+            const currentLevel = this.hlsPlayer.currentLevel;
+            if (currentLevel >= 0 && this.hlsPlayer.levels[currentLevel]) {
+                currentHeight = this.hlsPlayer.levels[currentLevel].height;
+            }
+        }
+
+        // Update button text (top text)
+        const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+        if (qualityBtnText) {
+            if (this.selectedQuality === 'auto') {
+                qualityBtnText.textContent = 'Auto';
+            } else {
+                qualityBtnText.textContent = `${this.selectedQuality}p`;
+            }
+        }
+
+        // Update current quality display (bottom text) - ONLY in Auto mode
+        const currentQualityText = this.controls?.querySelector('.quality-btn .current-quality');
+        if (currentQualityText) {
+            if (this.selectedQuality === 'auto' && currentHeight) {
+                currentQualityText.textContent = `${currentHeight}p`;
+                currentQualityText.style.display = 'block';
+            } else {
+                currentQualityText.textContent = '';
+                currentQualityText.style.display = 'none';
+            }
+        }
+
+        // Update menu active states
+        const qualityMenu = this.controls?.querySelector('.quality-menu');
+        if (qualityMenu) {
+            // Remove all active states
+            qualityMenu.querySelectorAll('.quality-option').forEach(opt => {
+                opt.classList.remove('active');
+            });
+
+            // Set active based on selection
+            if (this.selectedQuality === 'auto') {
+                const autoOption = qualityMenu.querySelector('[data-quality="auto"]');
+                if (autoOption) autoOption.classList.add('active');
+            } else {
+                const selectedOption = qualityMenu.querySelector(`[data-quality="${this.selectedQuality}"]`);
+                if (selectedOption) selectedOption.classList.add('active');
+            }
+
+            // Hide all playing indicators
+            qualityMenu.querySelectorAll('.quality-playing').forEach(el => {
+                el.style.display = 'none';
+            });
+
+            // Show playing indicator only in Auto mode
+            if (this.selectedQuality === 'auto' && currentHeight) {
+                const playingOption = qualityMenu.querySelector(`[data-quality="${currentHeight}"] .quality-playing`);
+                if (playingOption) {
+                    playingOption.style.display = 'inline';
+                }
+            }
+        }
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error updating quality display:', error);
+    }
+}
+
+updateQualityButtonText() {
+    const qualityBtn = this.controls?.querySelector('.quality-btn .selected-quality');
+    if (!qualityBtn) return;
+
+    if (this.selectedQuality === 'auto' || !this.selectedQuality) {
+        qualityBtn.textContent = this.t('auto');
+    } else {
+        const quality = this.adaptiveQualities.find(q => q.index === parseInt(this.selectedQuality));
+        qualityBtn.textContent = quality ? quality.label : 'Auto';
+    }
+}
+
+bindAdaptiveQualityEvents() {
+    const qualityMenu = this.controls?.querySelector('.quality-menu');
+    const qualityBtn = this.controls?.querySelector('.quality-btn');
+
+    if (!qualityMenu || !qualityBtn) return;
+
+    // Toggle menu
+    qualityBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        qualityMenu.classList.toggle('active');
+
+        // Update display when opening
+        if (qualityMenu.classList.contains('active')) {
+            this.updateAdaptiveQualityDisplay();
         }
+    });
 
-        if (this.options.adaptiveQualityControl) {
-            this.updateAdaptiveQualityMenu();
+    // Close menu on outside click
+    const closeMenuHandler = (e) => {
+        if (!qualityBtn.contains(e.target) && !qualityMenu.contains(e.target)) {
+            qualityMenu.classList.remove('active');
         }
+    };
+    document.addEventListener('click', closeMenuHandler);
+
+    // Handle quality selection
+    qualityMenu.addEventListener('click', (e) => {
+        const option = e.target.closest('.quality-option');
+        if (!option) return;
+
+        e.stopPropagation();
+
+        const qualityData = option.getAttribute('data-quality');
 
         if (this.options.debug) {
-            console.log('📡 Adaptive qualities available:', this.adaptiveQualities);
+            console.log('🎬 Quality clicked - raw data:', qualityData, 'type:', typeof qualityData);
+        }
+
+        if (qualityData === 'auto') {
+            // Enable auto mode
+            this.selectedQuality = 'auto';
+
+            if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+                this.dashPlayer.updateSettings({
+                    streaming: {
+                        abr: {
+                            autoSwitchBitrate: { video: true }
+                        }
+                    }
+                });
+                if (this.options.debug) console.log('✅ Auto quality enabled');
+            } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+                this.hlsPlayer.currentLevel = -1;
+            }
+
+        } else {
+            // Manual quality selection
+            const selectedHeight = parseInt(qualityData, 10);
+
+            if (isNaN(selectedHeight)) {
+                if (this.options.debug) console.error('❌ Invalid quality data:', qualityData);
+                return;
+            }
+
+            if (this.options.debug) {
+                console.log('🎬 Setting manual quality to height:', selectedHeight);
+            }
+
+            this.selectedQuality = selectedHeight;
+
+            if (this.adaptiveStreamingType === 'dash') {
+                this.setDashQualityByHeight(selectedHeight);
+            } else if (this.adaptiveStreamingType === 'hls') {
+                const levelIndex = this.hlsPlayer.levels.findIndex(l => l.height === selectedHeight);
+                if (levelIndex >= 0) {
+                    this.hlsPlayer.currentLevel = levelIndex;
+                }
+            }
         }
+
+        // Update display immediately
+        this.updateAdaptiveQualityDisplay();
+
+        // Close menu
+        qualityMenu.classList.remove('active');
+    });
+
+    if (this.options.debug) {
+        console.log('✅ Quality events bound');
     }
+}
+
+setDashQualityByHeight(targetHeight) {
+    if (!this.dashPlayer) return;
+
+    try {
+        const targetQuality = this.adaptiveQualities.find(q => q.height === targetHeight);
+        if (!targetQuality) {
+            if (this.options.debug) console.error('❌ Quality not found for height:', targetHeight);
+            return;
+        }
+
+        if (this.options.debug) {
+            console.log('🎬 Setting quality:', targetQuality);
+        }
+
+        // Disable auto quality
+        this.dashPlayer.updateSettings({
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: { video: false }
+                }
+            }
+        });
+
+        // Get current video track
+        const currentTrack = this.dashPlayer.getCurrentTrackFor('video');
+
+        if (!currentTrack) {
+            if (this.options.debug) console.error('❌ No current video track');
+            return;
+        }
+
+        // Find the correct track for this quality
+        const allTracks = this.dashPlayer.getTracksFor('video');
+        let targetTrack = null;
+
+        for (const track of allTracks) {
+            if (track.bitrateList && track.bitrateList[targetQuality.bitrateIndex]) {
+                const bitrate = track.bitrateList[targetQuality.bitrateIndex];
+                if (bitrate.height === targetHeight) {
+                    targetTrack = track;
+                    break;
+                }
+            }
+        }
+
+        if (!targetTrack) {
+            if (this.options.debug) console.error('❌ Target track not found');
+            return;
+        }
+
+        // Switch track if different
+        if (currentTrack.index !== targetTrack.index) {
+            this.dashPlayer.setCurrentTrack(targetTrack);
+            if (this.options.debug) {
+                console.log('✅ Switched to track:', targetTrack.index);
+            }
+        }
+
+        // Force quality on current track
+        setTimeout(() => {
+            try {
+                // Use the MediaPlayer API to set quality
+                this.dashPlayer.updateSettings({
+                    streaming: {
+                        abr: {
+                            initialBitrate: { video: targetQuality.bandwidth / 1000 },
+                            maxBitrate: { video: targetQuality.bandwidth / 1000 },
+                            minBitrate: { video: targetQuality.bandwidth / 1000 }
+                        }
+                    }
+                });
+
+                if (this.options.debug) {
+                    console.log('✅ Quality locked to:', targetHeight + 'p', 'bandwidth:', targetQuality.bandwidth);
+                }
+
+                // Update button text immediately
+                const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+                if (qualityBtnText) {
+                    qualityBtnText.textContent = `${targetHeight}p`;
+                }
+
+                // Force reload of segments at new quality
+                const currentTime = this.video.currentTime;
+                this.dashPlayer.seek(currentTime + 0.1);
+                setTimeout(() => {
+                    this.dashPlayer.seek(currentTime);
+                }, 100);
+
+            } catch (innerError) {
+                if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+            }
+        }, 100);
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error in setDashQualityByHeight:', error);
+    }
+}
+
+setDashQuality(qualityIndex) {
+    if (!this.dashPlayer) return;
+
+    try {
+        const selectedQuality = this.adaptiveQualities[qualityIndex];
+        if (!selectedQuality) {
+            if (this.options.debug) console.error('❌ Quality not found at index:', qualityIndex);
+            return;
+        }
+
+        if (this.options.debug) {
+            console.log('🎬 Setting DASH quality:', selectedQuality);
+        }
+
+        // Disable auto quality
+        this.dashPlayer.updateSettings({
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: { video: false }
+                }
+            }
+        });
+
+        // Set the specific quality using bitrateIndex
+        setTimeout(() => {
+            try {
+                this.dashPlayer.setQualityFor('video', selectedQuality.bitrateIndex);
+
+                if (this.options.debug) {
+                    console.log('✅ DASH quality set to bitrateIndex:', selectedQuality.bitrateIndex, 'height:', selectedQuality.height);
+                }
+
+                // Update button text immediately
+                const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+                if (qualityBtnText) {
+                    qualityBtnText.textContent = selectedQuality.label;
+                }
+
+            } catch (innerError) {
+                if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+            }
+        }, 100);
+
+    } catch (error) {
+        if (this.options.debug) console.error('❌ Error in setDashQuality:', error);
+    }
+}
 
     handleAdaptiveError(data) {
         if (this.options.debug) console.error('📡 Fatal adaptive streaming error:', data);
@@ -7721,63 +8295,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')}`;
+}
 
 }