myetv-player 1.5.0 → 1.6.1

package/dist/myetv-player.js

@@ -27,7 +27,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Indietro',
                 'settings_menu': 'Impostazioni',
                 'loading': 'Caricamento...',
-                'encoding_in_progress': 'Encoding in corso'
+                'encoding_in_progress': 'Encoding in corso',
+                'restart_video': 'Torna all\'inizio'
             },
 
             // English
@@ -51,7 +52,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Previous',
                 'settings_menu': 'Settings',
                 'loading': 'Loading...',
-                'encoding_in_progress': 'Encoding in progress'
+                'encoding_in_progress': 'Encoding in progress',
+                'restart_video': 'Restart the video'
             },
 
             // Español
@@ -75,7 +77,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Anterior',
                 'settings_menu': 'Configuración',
                 'loading': 'Cargando...',
-                'encoding_in_progress': 'Codificación en curso'
+                'encoding_in_progress': 'Codificación en curso',
+                'restart_video': 'Reiniciar el vídeo'
             },
 
             // Français
@@ -99,7 +102,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Précédent',
                 'settings_menu': 'Paramètres',
                 'loading': 'Chargement...',
-                'encoding_in_progress': 'Encodage en cours'
+                'encoding_in_progress': 'Encodage en cours',
+                'restart_video': 'Redémarrer la vidéo'
             },
 
             // Deutsch
@@ -123,7 +127,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Zurück',
                 'settings_menu': 'Einstellungen',
                 'loading': 'Laden...',
-                'encoding_in_progress': 'Kodierung läuft'
+                'encoding_in_progress': 'Kodierung läuft',
+                'restart_video': 'Video neu starten'
             },
 
             // Português
@@ -147,7 +152,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Anterior',
                 'settings_menu': 'Configurações',
                 'loading': 'Carregando...',
-                'encoding_in_progress': 'Codificação em andamento'
+                'encoding_in_progress': 'Codificação em andamento',
+                'restart_video': 'Restart video'
             },
 
             // 中文
@@ -171,7 +177,8 @@ class VideoPlayerI18n {
                 'playlist_prev': '上一个',
                 'settings_menu': '设置',
                 'loading': '加载中...',
-                'encoding_in_progress': '编码中'
+                'encoding_in_progress': '编码中',
+                'restart_video': '重新开始视频'
             },
 
             // 日本語
@@ -195,7 +202,8 @@ class VideoPlayerI18n {
                 'playlist_prev': '前へ',
                 'settings_menu': '設定',
                 'loading': '読み込み中...',
-                'encoding_in_progress': 'エンコード中'
+                'encoding_in_progress': 'エンコード中',
+                'restart_video': 'ビデオを再開'
             },
 
             // Русский
@@ -219,7 +227,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Назад',
                 'settings_menu': 'Настройки',
                 'loading': 'Загрузка...',
-                'encoding_in_progress': 'Кодирование'
+                'encoding_in_progress': 'Кодирование',
+                'restart_video': 'Перезапустить видео'
             },
 
             // العربية
@@ -243,7 +252,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'السابق',
                 'settings_menu': 'الإعدادات',
                 'loading': 'جاري التحميل...',
-                'encoding_in_progress': 'الترميز جارٍ'
+                'encoding_in_progress': 'الترميز جارٍ',
+                'restart_video': 'إعادة تشغيل الفيديو'
             },
 
             // 한국어 (Korean)
@@ -267,7 +277,8 @@ class VideoPlayerI18n {
                 'playlist_prev': '이전',
                 'settings_menu': '설정',
                 'loading': '로딩 중...',
-                'encoding_in_progress': '인코딩 진행 중'
+                'encoding_in_progress': '인코딩 진행 중',
+                'restart_video': 'Restart video'
             },
 
             // Polski
@@ -291,7 +302,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Wstecz',
                 'settings_menu': 'Ustawienia',
                 'loading': 'Ładowanie...',
-                'encoding_in_progress': 'Kodowanie w toku'
+                'encoding_in_progress': 'Kodowanie w toku',
+                'restart_video': 'Restart video'
             },
 
             // Magyar
@@ -315,7 +327,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Előző',
                 'settings_menu': 'Beállítások',
                 'loading': 'Betöltés...',
-                'encoding_in_progress': 'Kódolás folyamatban'
+                'encoding_in_progress': 'Kódolás folyamatban',
+                'restart_video': 'Restart video'
             },
 
             // Türkçe
@@ -339,7 +352,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Önceki',
                 'settings_menu': 'Ayarlar',
                 'loading': 'Yükleniyor...',
-                'encoding_in_progress': 'Kodlama devam ediyor'
+                'encoding_in_progress': 'Kodlama devam ediyor',
+                'restart_video': 'Restart video'
             },
 
             // Nederlands
@@ -363,7 +377,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Vorige',
                 'settings_menu': 'Instellingen',
                 'loading': 'Laden...',
-                'encoding_in_progress': 'Codering bezig'
+                'encoding_in_progress': 'Codering bezig',
+                'restart_video': 'Restart video'
             },
 
             // हिन्दी (Hindi)
@@ -387,7 +402,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'पिछला',
                 'settings_menu': 'सेटिंग्स',
                 'loading': 'लोड हो रहा है...',
-                'encoding_in_progress': 'एन्कोडिंग प्रगति में'
+                'encoding_in_progress': 'एन्कोडिंग प्रगति में',
+                'restart_video': 'Restart video'
             },
 
             // Svenska
@@ -411,7 +427,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Föregående',
                 'settings_menu': 'Inställningar',
                 'loading': 'Laddar...',
-                'encoding_in_progress': 'Kodning pågår'
+                'encoding_in_progress': 'Kodning pågår',
+                'restart_video': 'Restart video'
             },
 
             // Bahasa Indonesia
@@ -435,7 +452,8 @@ class VideoPlayerI18n {
                 'playlist_prev': 'Sebelumnya',
                 'settings_menu': 'Pengaturan',
                 'loading': 'Memuat...',
-                'encoding_in_progress': 'Encoding sedang berlangsung'
+                'encoding_in_progress': 'Encoding sedang berlangsung',
+                'restart_video': 'Restart video'
             }
         };
 
@@ -565,7 +583,8 @@ try {
                 'brand_logo': 'Brand logo',
                 'settings_menu': 'Settings',
                 'loading': 'Loading...',
-                'encoding_in_progress': 'Encoding in progress'
+                'encoding_in_progress': 'Encoding in progress',
+                'restart_video': 'Restart video'
             };
             return fallback[key] || key;
         },
@@ -629,6 +648,7 @@ constructor(videoElement, options = {}) {
     }
 
     this.options = {
+        playFromStartButton: false, // Enable play from start button (restart video)
         showQualitySelector: true,   // Enable quality selector button
         showSpeedControl: true,      // Enable speed control button
         showFullscreen: true,        // Enable fullscreen button
@@ -737,6 +757,7 @@ constructor(videoElement, options = {}) {
         'played': [],          // Fired when video starts playing
         'paused': [],          // Fired when video is paused
         'ended': [],           // Fired when video playback ends
+        'restarted': [],       // Fired when video is restarted from beginning
 
         // Playback state events
         'playing': [],         // Fired when video is actually playing (after buffering)
@@ -1454,6 +1475,7 @@ initializeElements() {
     this.progressHandle = this.controls?.querySelector('.progress-handle');
     this.seekTooltip = this.controls?.querySelector('.seek-tooltip');
 
+    this.playFromStartBtn = this.controls?.querySelector('.play-from-start-btn');
     this.playPauseBtn = this.controls?.querySelector('.play-pause-btn');
     this.muteBtn = this.controls?.querySelector('.mute-btn');
     this.fullscreenBtn = this.controls?.querySelector('.fullscreen-btn');
@@ -1559,6 +1581,51 @@ setupMenuToggles() {
     }
 }
 
+/**
+ * Restart video from beginning - Works with HTML5 video and ALL plugins
+ * @returns {this} Returns this for method chaining
+ */
+restartVideo() {
+    if (!this.video) return this;
+
+    const previousTime = this.getCurrentTime();
+    const wasPaused = this.isPaused();
+
+    // Set video to beginning (0 seconds)
+    // This works for both HTML5 video and plugins
+    this.video.currentTime = 0;
+
+    // Alternative: use seek method if available (for plugins)
+    if (typeof this.seek === 'function') {
+        this.seek(0);
+    }
+
+    // Auto-play after restart if video was playing
+    if (!wasPaused) {
+        // Use player's play method (works for HTML5 and plugins)
+        if (typeof this.play === 'function') {
+            this.play();
+        } else {
+            this.video.play().catch(error => {
+                if (this.options.debug) console.warn('⚠️ Restart play failed:', error);
+            });
+        }
+    }
+
+    if (this.options.debug) {
+        console.log(`🔄 Video restarted from ${this.formatTime(previousTime)} to 0:00`);
+    }
+
+    // Trigger custom event
+    this.triggerEvent('restarted', {
+        previousTime: previousTime,
+        duration: this.getDuration(),
+        autoPlayed: !wasPaused
+    });
+
+    return this;
+}
+
 updateVolumeSliderVisual() {
     if (!this.video || !this.container) return;
 
@@ -2762,6 +2829,14 @@ addEventListener(eventType, callback) {
     bindEvents() {
     if (this.video) {
 
+        // Play from start button
+        if (this.playFromStartBtn) {
+            this.playFromStartBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.restartVideo();
+            });
+        }
+
         // Playback events
         this.video.addEventListener('playing', () => {
             this.hideLoading();
@@ -3587,26 +3662,36 @@ createControls() {
 
             <div class="controls-main">
                 <div class="controls-left">
-                    <button class="control-btn play-pause-btn" data-tooltip="play_pause">
-                        <span class="icon play-icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
-                        <span class="icon pause-icon hidden"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg></span>
-                    </button>
+    ${this.options.playFromStartButton ? `
+<button class="control-btn play-from-start-btn" data-tooltip="restart_video">
+    <span class="icon restart-icon">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        </svg>
+    </span>
+</button>
+` : ''}
 
-                    <button class="control-btn mute-btn" data-tooltip="mute_unmute">
-    <span class="icon volume-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89z"/><path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12z"/></svg></span>
-    <span class="icon mute-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg></span>
-                    </button>
+<button class="control-btn play-pause-btn" data-tooltip="play_pause">
+    <span class="icon play-icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
+    <span class="icon pause-icon hidden"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg></span>
+</button>
 
-                    <div class="volume-container" data-mobile-slider="${this.options.volumeSlider}">
-    <input type="range" class="volume-slider" min="0" max="100" value="100" data-tooltip="volume">
-                    </div>
+    <button class="control-btn mute-btn" data-tooltip="mute_unmute">
+        <span class="icon volume-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89z"/><path d="M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12z"/></svg></span>
+        <span class="icon mute-icon hidden"><svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg></span>
+    </button>
 
-                    <div class="time-display">
-                        <span class="current-time">0:00</span>
-                        <span>/</span>
-                        <span class="duration">0:00</span>
-                    </div>
-                </div>
+    <div class="volume-container" data-mobile-slider="${this.options.volumeSlider}">
+        <input type="range" class="volume-slider" min="0" max="100" value="100" data-tooltip="volume">
+    </div>
+
+    <div class="time-display">
+        <span class="current-time">0:00</span>
+        <span>/</span>
+        <span class="duration">0:00</span>
+    </div>
+</div>
 
                 <div class="controls-right">
 <button class="control-btn playlist-prev-btn" data-tooltip="prevvideo" style="display: none;">
@@ -3623,7 +3708,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">
@@ -4494,6 +4579,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;
 
@@ -4545,6 +4635,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)
@@ -7220,6 +7315,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();
@@ -7384,35 +7489,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);