myetv-player 1.0.10 → 1.1.1

package/plugins/youtube/myetv-player-youtube-plugin.js

@@ -15,6 +15,7 @@
                 showYouTubeUI: options.showYouTubeUI !== undefined ? options.showYouTubeUI : false,
                 autoLoadFromData: options.autoLoadFromData !== undefined ? options.autoLoadFromData : true,
                 quality: options.quality || 'default',
+                
                 enableQualityControl: options.enableQualityControl !== undefined ? options.enableQualityControl : true,
                 enableCaptions: options.enableCaptions !== undefined ? options.enableCaptions : true,
 
@@ -24,10 +25,20 @@
                 // Auto caption language option
                 autoCaptionLanguage: options.autoCaptionLanguage || null, // e.g., 'it', 'en', 'es', 'de', 'fr'
 
+                // Enable or disable click over youtube player
+                mouseClick: options.mouseClick !== undefined ? options.mouseClick : false,
+
                 debug: true,
                 ...options
             };
 
+            // Normalize 'auto' to 'default' for YouTube API compatibility
+            if (this.options.quality === 'auto') {
+                this.options.quality = 'default';
+            }
+            // Track original user choice for UI display
+            this.userQualityChoice = options.quality || 'default';
+
             this.ytPlayer = null;
             this.isYouTubeReady = false;
             this.videoId = this.options.videoId;
@@ -154,6 +165,14 @@
          * Update main player watermark options with channel data
          */
         async updatePlayerWatermark() {
+            // Don't create watermark when YouTube native UI is active
+            if (this.options.showYouTubeUI) {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Skipping watermark - YouTube UI active');
+                }
+                return;
+            }
+
             if (!this.options.enableChannelWatermark || !this.videoId) {
                 return;
             }
@@ -673,6 +692,7 @@ width: fit-content;
                 cc_lang_pref: this.options.autoCaptionLanguage || 'en',
                 hl: this.options.autoCaptionLanguage || 'en',
                 iv_load_policy: 3,
+                showinfo: 0,
                 ...options.playerVars
             };
 
@@ -704,65 +724,334 @@ width: fit-content;
             this.api.triggerEvent('youtubeplugin:videoloaded', { videoId });
         }
 
+setAdaptiveQuality() {
+    if (!this.ytPlayer) return;
+
+    try {
+        // Check network connection speed if available
+        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+        let suggestedQuality = 'default';
+
+        if (connection) {
+            const effectiveType = connection.effectiveType; // '4g', '3g', '2g', 'slow-2g'
+            const downlink = connection.downlink; // Mbps
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] Connection:', effectiveType, 'Downlink:', downlink, 'Mbps');
+            }
+
+            // Set quality based on connection speed
+            if (effectiveType === 'slow-2g' || downlink < 0.5) {
+                suggestedQuality = 'small'; // 240p
+            } else if (effectiveType === '2g' || downlink < 1) {
+                suggestedQuality = 'medium'; // 360p
+            } else if (effectiveType === '3g' || downlink < 2.5) {
+                suggestedQuality = 'large'; // 480p
+            } else if (downlink < 5) {
+                suggestedQuality = 'hd720'; // 720p
+            } else if (downlink < 10) {
+                suggestedQuality = 'hd1080'; // 1080p
+            } else if (downlink < 20) {
+                suggestedQuality = 'hd1440'; // 1440p (2K)
+            } else if (downlink < 35) {
+                suggestedQuality = 'hd2160'; // 2160p (4K)
+            } else {
+                suggestedQuality = 'highres'; // 8K o migliore disponibile
+            }
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] Setting suggested quality:', suggestedQuality);
+            }
+
+            this.ytPlayer.setPlaybackQuality(suggestedQuality);
+        } else {
+            // Fallback: start with medium quality on unknown devices
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] Connection API not available, using large (480p) as safe default');
+            }
+            this.ytPlayer.setPlaybackQuality('large'); // 480p come default sicuro
+        }
+    } catch (error) {
+        if (this.api.player.options.debug) {
+            console.error('[YT Plugin] Error setting adaptive quality:', error);
+        }
+    }
+}
+
+startBufferMonitoring() {
+    if (this.bufferMonitorInterval) {
+        clearInterval(this.bufferMonitorInterval);
+    }
+
+    let bufferingCount = 0;
+    let lastState = null;
+
+    this.bufferMonitorInterval = setInterval(() => {
+        if (!this.ytPlayer) return;
+
+        try {
+            const state = this.ytPlayer.getPlayerState();
+
+            // Detect buffering (state 3)
+            if (state === YT.PlayerState.BUFFERING) {
+                bufferingCount++;
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Buffering detected, count:', bufferingCount);
+                }
+
+                // If buffering happens too often, reduce quality
+                if (bufferingCount >= 3) {
+                    const currentQuality = this.ytPlayer.getPlaybackQuality();
+                    const availableQualities = this.ytPlayer.getAvailableQualityLevels();
+
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] Too much buffering, current quality:', currentQuality);
+                        console.log('[YT Plugin] Available qualities:', availableQualities);
+                    }
+
+                    // Quality hierarchy (highest to lowest)
+                    const qualityLevels = ['highres', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny'];
+                    const currentIndex = qualityLevels.indexOf(currentQuality);
+
+                    // Try to go to next lower quality
+                    if (currentIndex < qualityLevels.length - 1) {
+                        const lowerQuality = qualityLevels[currentIndex + 1];
+
+                        // Check if lower quality is available
+                        if (availableQualities.includes(lowerQuality)) {
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] Reducing quality to:', lowerQuality);
+                            }
+
+                            this.ytPlayer.setPlaybackQuality(lowerQuality);
+                            bufferingCount = 0; // Reset counter
+                        }
+                    }
+                }
+            } else if (state === YT.PlayerState.PLAYING) {
+                // Reset buffering count when playing smoothly
+                if (lastState === YT.PlayerState.BUFFERING) {
+                    setTimeout(() => {
+                        if (this.ytPlayer.getPlayerState() === YT.PlayerState.PLAYING) {
+                            bufferingCount = Math.max(0, bufferingCount - 1);
+                        }
+                    }, 5000); // Wait 5 seconds of smooth playback
+                }
+            }
+
+            lastState = state;
+        } catch (error) {
+            if (this.api.player.options.debug) {
+                console.error('[YT Plugin] Error in buffer monitoring:', error);
+            }
+        }
+    }, 1000); // Check every second
+}
+
         createMouseMoveOverlay() {
             if (this.mouseMoveOverlay) return;
 
+            // Do NOT create overlay if YouTube native UI is enabled (ToS compliant)
+            if (this.options.showYouTubeUI) {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Skipping overlay - YouTube native UI enabled (ToS compliant)');
+                }
+
+                // Enable clicks on YouTube player
+                if (this.options.mouseClick !== false) {
+                    this.enableYouTubeClicks();
+                }
+
+                // Setup mouse detection for custom controls visibility
+                this.setupMouseMoveDetection();
+                return;
+            }
+
             this.mouseMoveOverlay = document.createElement('div');
             this.mouseMoveOverlay.className = 'yt-mousemove-overlay';
-            this.mouseMoveOverlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:transparent;pointer-events:auto;cursor:default;';
-
-            this.api.container.insertBefore(this.mouseMoveOverlay, this.api.controls);
 
-            // Pass mousemove to core player WITHOUT constantly resetting timer
-            this.mouseMoveOverlay.addEventListener('mousemove', (e) => {
-                // Let the core handle mousemove - it has its own autoHide logic
-                if (this.api.player.onMouseMove) {
-                    this.api.player.onMouseMove(e);
-                }
-            });
+            // Apply pointer-events based on mouseClick option
+            const pointerEvents = this.options.mouseClick ? 'none' : 'auto';
+
+            this.mouseMoveOverlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background: transparent;
+        pointer-events: ${pointerEvents};
+        cursor: default;
+    `;
 
-            this.mouseMoveOverlay.addEventListener('click', (e) => {
-                const doubleTap = this.api.player.options.doubleTapPause;
-                const pauseClick = this.api.player.options.pauseClick;
+            this.api.container.insertBefore(this.mouseMoveOverlay, this.api.controls);
 
-                if (doubleTap) {
-                    let controlsHidden = false;
+            // Setup mouse detection
+            this.setupMouseMoveDetection();
 
-                    if (this.api.controls) {
-                        controlsHidden = this.api.controls.classList.contains('hide');
+            // Only add event listeners if mouseClick is disabled
+            if (!this.options.mouseClick) {
+                this.mouseMoveOverlay.addEventListener('mousemove', (e) => {
+                    if (this.api.player.onMouseMove) {
+                        this.api.player.onMouseMove(e);
                     }
+                });
+
+                this.mouseMoveOverlay.addEventListener('click', (e) => {
+                    const doubleTap = this.api.player.options.doubleTapPause;
+                    const pauseClick = this.api.player.options.pauseClick;
 
-                    if (!controlsHidden) {
-                        const controls = this.player.container.querySelector('.controls');
-                        if (controls) {
-                            controlsHidden = controls.classList.contains('hide');
+                    if (doubleTap) {
+                        let controlsHidden = false;
+                        if (this.api.controls) {
+                            controlsHidden = this.api.controls.classList.contains('hide');
                         }
-                    }
 
-                    if (!controlsHidden && this.api.controls) {
-                        const style = window.getComputedStyle(this.api.controls);
-                        controlsHidden = style.opacity === '0' || style.visibility === 'hidden';
-                    }
+                        if (!controlsHidden) {
+                            const controls = this.player.container.querySelector('.controls');
+                            if (controls) {
+                                controlsHidden = controls.classList.contains('hide');
+                            }
+                        }
 
-                    if (controlsHidden) {
-                        if (this.api.player.showControlsNow) {
-                            this.api.player.showControlsNow();
+                        if (!controlsHidden && this.api.controls) {
+                            const style = window.getComputedStyle(this.api.controls);
+                            controlsHidden = style.opacity === '0' || style.visibility === 'hidden';
                         }
-                        if (this.api.player.resetAutoHideTimer) {
-                            this.api.player.resetAutoHideTimer();
+
+                        if (controlsHidden) {
+                            if (this.api.player.showControlsNow) {
+                                this.api.player.showControlsNow();
+                            }
+                            if (this.api.player.resetAutoHideTimer) {
+                                this.api.player.resetAutoHideTimer();
+                            }
+                            return;
                         }
-                        return;
+
+                        this.togglePlayPauseYT();
+                    } else if (pauseClick) {
+                        this.togglePlayPauseYT();
                     }
+                });
+            }
+        }
 
-                    // Controls visible: toggle play/pause
-                    this.togglePlayPauseYT();
-                } else if (pauseClick) {
-                    // Always toggle on click when pauseClick is enabled
-                    this.togglePlayPauseYT();
+        // monitor mouse movement over container
+        setupMouseMoveDetection() {
+            // track last mouse position
+            this.lastMouseX = null;
+            this.lastMouseY = null;
+            this.mouseCheckInterval = null;
+
+            // Listener on container
+            this.api.container.addEventListener('mouseenter', () => {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Mouse entered player container');
+                }
+
+                //  show controls immediately
+                if (this.api.player.showControlsNow) {
+                    this.api.player.showControlsNow();
+                }
+                if (this.api.player.resetAutoHideTimer) {
+                    this.api.player.resetAutoHideTimer();
+                }
+
+                // start monitoring
+                this.startMousePositionTracking();
+            });
+
+            this.api.container.addEventListener('mouseleave', () => {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Mouse left player container');
+                }
+
+                // stop monitoring
+                this.stopMousePositionTracking();
+            });
+
+            // capture mouse move on container
+            this.api.container.addEventListener('mousemove', (e) => {
+                this.lastMouseX = e.clientX;
+                this.lastMouseY = e.clientY;
+
+                if (this.api.player.onMouseMove) {
+                    this.api.player.onMouseMove(e);
+                }
+
+                if (this.api.player.resetAutoHideTimer) {
+                    this.api.player.resetAutoHideTimer();
                 }
             });
         }
 
+        // check mouse position on iframe
+        startMousePositionTracking() {
+            if (this.mouseCheckInterval) return;
+
+            this.mouseCheckInterval = setInterval(() => {
+                // Listener to capture mouse position on iframe
+                const handleGlobalMove = (e) => {
+                    const newX = e.clientX;
+                    const newY = e.clientY;
+
+                    // if mouse is moving
+                    if (this.lastMouseX !== newX || this.lastMouseY !== newY) {
+                        this.lastMouseX = newX;
+                        this.lastMouseY = newY;
+
+                        // verify if mouse is enter the container
+                        const rect = this.api.container.getBoundingClientRect();
+                        const isInside = (
+                            newX >= rect.left &&
+                            newX <= rect.right &&
+                            newY >= rect.top &&
+                            newY <= rect.bottom
+                        );
+
+                        if (isInside) {
+                            if (this.api.player.showControlsNow) {
+                                this.api.player.showControlsNow();
+                            }
+                            if (this.api.player.resetAutoHideTimer) {
+                                this.api.player.resetAutoHideTimer();
+                            }
+                        }
+                    }
+                };
+
+                // Listener temp
+                document.addEventListener('mousemove', handleGlobalMove, { once: true, passive: true });
+            }, 100); // Check ogni 100ms
+        }
+
+        stopMousePositionTracking() {
+            if (this.mouseCheckInterval) {
+                clearInterval(this.mouseCheckInterval);
+                this.mouseCheckInterval = null;
+            }
+        }
+
+
+        // enable or disable clicks over youtube player
+        enableYouTubeClicks() {
+            if (this.ytPlayerContainer) {
+                this.ytPlayerContainer.style.pointerEvents = 'auto';
+
+                const iframe = this.ytPlayerContainer.querySelector('iframe');
+                if (iframe) {
+                    iframe.style.pointerEvents = 'auto';
+                }
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] YouTube clicks enabled - overlay transparent');
+                }
+            }
+        }
+
         togglePlayPauseYT() {
             if (!this.ytPlayer) return;
 
@@ -788,6 +1077,9 @@ width: fit-content;
                 this.mouseMoveOverlay.remove();
                 this.mouseMoveOverlay = null;
             }
+
+            // stop tracking mouse
+            this.stopMousePositionTracking();
         }
 
         hidePosterOverlay() {
@@ -842,11 +1134,47 @@ width: fit-content;
             document.head.appendChild(forceVisibilityCSS);
             if (this.api.player.options.debug) console.log('[YT Plugin] 🎨 CSS force visibility injected');
 
+            // Enable YouTube clicks if option is set
+            if (this.options.mouseClick) {
+                this.enableYouTubeClicks();
+            }
             this.hideLoadingOverlay();
             this.hideInitialLoading();
             this.injectYouTubeCSSOverride();
 
             this.syncControls();
+            // Start buffer monitoring for auto quality adjustment
+            this.startBufferMonitoring();
+
+            // Hide custom controls when YouTube native UI is enabled
+            if (this.options.showYouTubeUI) {
+                // Hide controls
+                if (this.api.controls) {
+                    this.api.controls.style.display = 'none';
+                    this.api.controls.style.opacity = '0';
+                    this.api.controls.style.visibility = 'hidden';
+                    this.api.controls.style.pointerEvents = 'none';
+                }
+
+                // Hide overlay title
+                const overlayTitle = this.api.container.querySelector('.title-overlay');
+                if (overlayTitle) {
+                    overlayTitle.style.display = 'none';
+                    overlayTitle.style.opacity = '0';
+                    overlayTitle.style.visibility = 'hidden';
+                }
+
+                // Hide watermark
+                const watermark = this.api.container.querySelector('.watermark');
+                if (watermark) {
+                    watermark.style.display = 'none';
+                    watermark.style.opacity = '0';
+                    watermark.style.visibility = 'hidden';
+                }
+
+                // Force hide via CSS
+                this.forceHideCustomControls();
+            }
 
             // Handle responsive layout for PiP and subtitles buttons
             this.handleResponsiveLayout();
@@ -858,6 +1186,8 @@ width: fit-content;
             // Check if this is a live stream
             setTimeout(() => this.checkIfLiveStream(), 2000);
             setTimeout(() => this.checkIfLiveStream(), 5000);
+            // Set adaptive quality based on connection
+            setTimeout(() => this.setAdaptiveQuality(), 1000);
 
 
             // Listen for window resize
@@ -895,14 +1225,41 @@ width: fit-content;
 
         }
 
+        forceHideCustomControls() {
+            const existingStyle = document.getElementById('yt-force-hide-controls');
+            if (existingStyle) {
+                return;
+            }
+
+            const style = document.createElement('style');
+            style.id = 'yt-force-hide-controls';
+            style.textContent = `
+        .video-wrapper.youtube-native-ui .controls,
+        .video-wrapper.youtube-native-ui .title-overlay,
+        .video-wrapper.youtube-native-ui .watermark {
+            display: none !important;
+            opacity: 0 !important;
+            visibility: hidden !important;
+            pointer-events: none !important;
+        }
+    `;
+            document.head.appendChild(style);
+
+            this.api.container.classList.add('youtube-native-ui');
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] CSS injected - custom elements hidden (simple method)');
+            }
+        }
+
         checkIfLiveStream() {
             if (this.api.player.options.debug) {
-                console.log('[YT Plugin] 🔍 Starting live stream check...');
+                console.log('[YT Plugin] Starting live stream check...');
             }
 
             if (!this.ytPlayer) {
                 if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] ❌ ytPlayer not available');
+                    console.log('[YT Plugin] ytPlayer not available');
                 }
                 return false;
             }
@@ -911,14 +1268,15 @@ width: fit-content;
                 // Method 1: Check video data for isLive property
                 if (this.ytPlayer.getVideoData) {
                     const videoData = this.ytPlayer.getVideoData();
+
                     if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] 📹 Video Data:', videoData);
+                        console.log('[YT Plugin] Video Data:', videoData);
                     }
 
                     // Check if video data indicates it's live
                     if (videoData.isLive || videoData.isLiveBroadcast) {
                         if (this.api.player.options.debug) {
-                            console.log('[YT Plugin] ✅ LIVE detected via videoData.isLive');
+                            console.log('[YT Plugin] LIVE detected via videoData.isLive');
                         }
                         this.isLiveStream = true;
                         this.handleLiveStreamUI();
@@ -926,19 +1284,18 @@ width: fit-content;
                     }
                 }
 
-                // Method 2: Check duration (live streams have special duration values)
+                // Method 2: Check duration - live streams have special duration values
                 if (this.ytPlayer.getDuration) {
                     const duration = this.ytPlayer.getDuration();
+
                     if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] ⏱️ Initial duration:', duration);
+                        console.log('[YT Plugin] Initial duration:', duration);
                     }
 
-                    // For live streams, duration changes over time
-                    // Wait 3 seconds and check again
                     setTimeout(() => {
                         if (!this.ytPlayer || !this.ytPlayer.getDuration) {
                             if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ❌ ytPlayer lost during duration check');
+                                console.log('[YT Plugin] ytPlayer lost during duration check');
                             }
                             return;
                         }
@@ -947,37 +1304,36 @@ width: fit-content;
                         const difference = Math.abs(newDuration - duration);
 
                         if (this.api.player.options.debug) {
-                            console.log('[YT Plugin] ⏱️ Duration after 3s:', newDuration);
-                            console.log('[YT Plugin] 📊 Duration difference:', difference);
+                            console.log('[YT Plugin] Duration after 5s:', newDuration);
+                            console.log('[YT Plugin] Duration difference:', difference);
                         }
 
-                        // If duration increased by more than 0.5 seconds, it's live
-                        if (difference > 0.5) {
+                        if (difference > 10) {
                             if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ✅ LIVE STREAM DETECTED (duration changing)');
+                                console.log('[YT Plugin] LIVE STREAM DETECTED - duration changing significantly');
                             }
                             this.isLiveStream = true;
                             this.handleLiveStreamUI();
                         } else {
                             if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ℹ️ Regular video (duration stable)');
+                                console.log('[YT Plugin] Regular video - duration stable');
                             }
                             this.isLiveStream = false;
                         }
-                    }, 3000);
+                    }, 5000);
                 }
 
                 // Method 3: Check player state
                 if (this.ytPlayer.getPlayerState) {
                     const state = this.ytPlayer.getPlayerState();
                     if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] 🎮 Player state:', state);
+                        console.log('[YT Plugin] Player state:', state);
                     }
                 }
 
             } catch (error) {
                 if (this.api.player.options.debug) {
-                    console.error('[YT Plugin] ❌ Error checking live stream:', error);
+                    console.error('[YT Plugin] Error checking live stream:', error);
                 }
             }
 
@@ -1008,20 +1364,36 @@ width: fit-content;
 
             this.startLiveMonitoring();
 
+            // Force progress bar to 100% for live streams
+            this.liveProgressInterval = setInterval(() => {
+                if (this.isLiveStream && this.api.player.progressFilled) {
+                    this.api.player.progressFilled.style.width = '100%';
+
+                    if (this.api.player.progressHandle) {
+                        this.api.player.progressHandle.style.left = '100%';
+                    }
+                }
+            }, 100); // Every 100ms to override any other updates
+
             if (this.api.player.options.debug) {
                 console.log('[YT Plugin] ✅ Live UI setup complete');
             }
         }
 
         checkDVRAvailability() {
-            // Disable progress bar immediately while testing
             const progressContainer = this.api.container.querySelector('.progress-container');
+            const progressFill = this.api.container.querySelector('.progress-fill');
+
             if (progressContainer) {
                 progressContainer.style.opacity = '0.3';
                 progressContainer.style.pointerEvents = 'none';
             }
 
-            // Wait a bit for YouTube to fully initialize
+            // Set darkgoldenrod during test
+            if (progressFill) {
+                progressFill.style.backgroundColor = 'darkgoldenrod';
+            }
+
             setTimeout(() => {
                 if (!this.ytPlayer) return;
 
@@ -1043,25 +1415,31 @@ width: fit-content;
                         const seekDifference = Math.abs(newCurrentTime - testSeekPosition);
 
                         const progressContainer = this.api.container.querySelector('.progress-container');
+                        const progressFill = this.api.container.querySelector('.progress-fill');
 
                         if (seekDifference < 2) {
-                            // DVR enabled - restore progress bar
+                            // DVR enabled - restore with theme color
                             if (progressContainer) {
                                 progressContainer.style.opacity = '';
                                 progressContainer.style.pointerEvents = '';
                             }
 
+                            // Remove inline style to use theme color
+                            if (progressFill) {
+                                progressFill.style.backgroundColor = ''; // Let theme CSS handle color
+                            }
+
                             if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ✅ DVR ENABLED - progress bar active');
+                                console.log('[YT Plugin] ✅ DVR ENABLED - progress bar active with theme color');
                             }
 
                             this.ytPlayer.seekTo(duration, true);
                         } else {
-                            // No DVR - keep progress bar disabled
+                            // No DVR - keep darkgoldenrod
                             this.modifyProgressBarForLive();
 
                             if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ❌ DVR DISABLED - progress bar locked');
+                                console.log('[YT Plugin] ❌ DVR DISABLED - progress bar locked with darkgoldenrod');
                             }
                         }
                     }, 500);
@@ -1209,6 +1587,7 @@ width: fit-content;
         modifyProgressBarForLive() {
             const progressContainer = this.api.container.querySelector('.progress-container');
             const progressHandle = this.api.container.querySelector('.progress-handle');
+            const progressFill = this.api.container.querySelector('.progress-fill');
 
             if (progressContainer) {
                 // Disable all pointer events on progress bar
@@ -1224,11 +1603,21 @@ width: fit-content;
             if (progressHandle) {
                 progressHandle.style.display = 'none';
             }
+
+            // Change color to darkgoldenrod when disabled
+            if (progressFill) {
+                progressFill.style.backgroundColor = 'darkgoldenrod';
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Progress fill color changed to darkgoldenrod');
+                }
+            }
         }
 
         restoreProgressBarNormal() {
             const progressContainer = this.api.container.querySelector('.progress-container');
             const progressHandle = this.api.container.querySelector('.progress-handle');
+            const progressFill = this.api.container.querySelector('.progress-fill');
 
             if (progressContainer) {
                 progressContainer.style.pointerEvents = '';
@@ -1239,6 +1628,15 @@ width: fit-content;
             if (progressHandle) {
                 progressHandle.style.display = '';
             }
+
+            // Remove inline backgroundColor to let CSS theme take over
+            if (progressFill) {
+                progressFill.style.backgroundColor = ''; // Reset to theme color
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Progress fill color restored to theme default');
+                }
+            }
         }
 
         startLiveMonitoring() {
@@ -1270,7 +1668,7 @@ width: fit-content;
                         } else if (playerState === YT.PlayerState.PLAYING) {
                             // Only update color if playing
                             // Check latency only if duration is reasonable
-                            if (latency > 60 && duration < 7200) {
+                            if (latency > 60) {
                                 // DE-SYNCED - Black background
                                 badge.style.background = '#1a1a1a';
                                 badge.textContent = 'LIVE';
@@ -1348,9 +1746,9 @@ width: fit-content;
             // Show time display again
             this.showTimeDisplay();
 
-            // Restart normal time updates
-            if (!this.timeUpdateInterval) {
-                this.setupYouTubeSync();
+            if (this.liveProgressInterval) {
+                clearInterval(this.liveProgressInterval);
+                this.liveProgressInterval = null;
             }
 
             if (this.api.player.options.debug) {
@@ -1386,12 +1784,11 @@ width: fit-content;
             overflow: hidden !important;
         }
     `;
-
             document.head.appendChild(style);
             this.api.container.classList.add('youtube-active');
 
             if (this.api.player.options.debug) {
-                console.log('YT Plugin: CSS override injected');
+                console.log('[YT Plugin] CSS override injected (ToS compliant)');
             }
         }
 
@@ -1440,7 +1837,7 @@ width: fit-content;
                 const actualQuality = this.ytPlayer.getPlaybackQuality();
 
                 // Only update UI if in AUTO mode, otherwise respect manual selection
-                if (this.currentQuality === 'default' || this.currentQuality === 'auto') {
+                if (this.userQualityChoice === 'default' || this.userQualityChoice === 'auto') {
                     if (actualQuality !== this.currentPlayingQuality) {
                         this.currentPlayingQuality = actualQuality;
                         if (this.api.player.options.debug) {
@@ -1620,27 +2017,59 @@ width: fit-content;
             if (!this.ytPlayer || !this.ytPlayer.setPlaybackQuality) return false;
 
             try {
-                // Try multiple methods to force quality change
-                this.ytPlayer.setPlaybackQuality(quality);
+                // Track user's quality choice for display
+                this.userQualityChoice = quality;
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Setting quality to:', quality);
+                    console.log('[YT Plugin] Current quality:', this.ytPlayer.getPlaybackQuality());
+                    console.log('[YT Plugin] Available qualities:', this.ytPlayer.getAvailableQualityLevels());
+                }
 
-                // Also try setPlaybackQualityRange if available
-                if (this.ytPlayer.setPlaybackQualityRange) {
-                    this.ytPlayer.setPlaybackQualityRange(quality, quality);
+                // Check if requested quality is actually available
+                const availableLevels = this.ytPlayer.getAvailableQualityLevels();
+                if (quality !== 'default' && quality !== 'auto' && !availableLevels.includes(quality)) {
+                    if (this.api.player.options.debug) {
+                        console.warn('[YT Plugin] Requested quality not available:', quality);
+                    }
                 }
 
                 // Update state
                 this.currentQuality = quality;
-                this.currentPlayingQuality = quality; // Force UI update
+
+                // Set the quality
+                this.ytPlayer.setPlaybackQuality(quality);
+
+                // Also try setPlaybackQualityRange for better enforcement
+                if (this.ytPlayer.setPlaybackQualityRange) {
+                    this.ytPlayer.setPlaybackQualityRange(quality, quality);
+                }
 
                 // Force UI update immediately
                 this.updateQualityMenuPlayingState(quality);
-
-                // Update button display
                 const qualityLabel = this.getQualityLabel(quality);
-                this.updateQualityButtonDisplay(qualityLabel, '');
+
+                // For manual quality selection, show only the selected quality
+                if (quality !== 'default' && quality !== 'auto') {
+                    this.updateQualityButtonDisplay(qualityLabel, '');
+                } else {
+                    // For auto mode, show "Auto" and let monitoring update the actual quality
+                    this.updateQualityButtonDisplay('Auto', '');
+                }
 
                 if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] Quality set to:', quality);
+                    // Check actual quality after a moment
+                    setTimeout(() => {
+                        if (this.ytPlayer && this.ytPlayer.getPlaybackQuality) {
+                            const actualQuality = this.ytPlayer.getPlaybackQuality();
+                            console.log('[YT Plugin] Actual quality after 1s:', actualQuality);
+                            if (actualQuality !== quality && quality !== 'default' && quality !== 'auto') {
+                                console.warn('[YT Plugin] YouTube did not apply requested quality. This may mean:');
+                                console.warn('  - The quality is not available for this video');
+                                console.warn('  - Embedding restrictions apply');
+                                console.warn('  - Network/bandwidth limitations');
+                            }
+                        }
+                    }, 1000); // Check every 1 second for faster updates
                 }
 
                 this.api.triggerEvent('youtubeplugin:qualitychanged', { quality });
@@ -1653,7 +2082,7 @@ width: fit-content;
             }
         }
 
-        // ===== RECONSTRUCTED SUBTITLE METHODS =====
+        // ===== SUBTITLE METHODS =====
 
         /**
          * Load available captions and create subtitle control
@@ -2311,31 +2740,6 @@ width: fit-content;
                 }
             }
 
-            // Check for de-sync when user seeks during live
-            if (this.isLiveStream && event.data === YT.PlayerState.PLAYING) {
-                setTimeout(() => {
-                    if (!this.ytPlayer) return;
-
-                    const currentTime = this.ytPlayer.getCurrentTime();
-                    const duration = this.ytPlayer.getDuration();
-                    const latency = duration - currentTime;
-
-                    // If latency > 60s and duration is reasonable, user has seeked back
-                    if (latency > 60 && duration < 7200) {
-                        const badge = this.api.container.querySelector('.live-badge');
-                        if (badge) {
-                            badge.style.background = '#1a1a1a';
-                            badge.title = `${Math.floor(latency)} seconds back from the live`;
-                            this.isAtLiveEdge = false;
-
-                            if (this.api.player.options.debug) {
-                                console.log('[YT Plugin] ⚫ User seeked back, de-synced from live');
-                            }
-                        }
-                    }
-                }, 500);
-            }
-
             switch (event.data) {
                 case YT.PlayerState.PLAYING:
                     this.api.triggerEvent('played', {});
@@ -2386,18 +2790,39 @@ width: fit-content;
         }
 
         onPlayerError(event) {
-            const errorMessages = {
-                2: 'Invalid video ID',
-                5: 'HTML5 player error',
-                100: 'Video not found or private',
-                101: 'Video not allowed in embedded players',
-                150: 'Video not allowed in embedded players'
-            };
-            const errorMsg = errorMessages[event.data] || 'Unknown error';
-            if (this.api.player.options.debug) console.error('[YT Plugin] Error:', errorMsg);
+            const errorCode = event.data;
+
+            if (this.api.player.options.debug) {
+                console.error('[YT Plugin] Player error:', errorCode);
+            }
+
+            // Error codes che indicano video non disponibile
+            const unavailableErrors = [
+                2,   // Invalid video ID
+                5,   // HTML5 player error
+                100, // Video not found / removed
+                101, // Video not allowed to be played in embedded players (private/restricted)
+                150  // Same as 101
+            ];
+
+            if (unavailableErrors.includes(errorCode)) {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Video unavailable, triggering ended event');
+                }
+
+                // Trigger the ended event from your player API
+                this.api.triggerEvent('ended', {
+                    reason: 'video_unavailable',
+                    errorCode: errorCode
+                });
+
+                // Optional: show poster overlay again
+                this.showPosterOverlay();
+            }
+
             this.api.triggerEvent('youtubeplugin:error', {
-                errorCode: event.data,
-                errorMessage: errorMsg
+                errorCode: errorCode,
+                videoId: this.videoId
             });
         }
 
@@ -2700,7 +3125,24 @@ width: fit-content;
                     const duration = this.ytPlayer.getDuration();
 
                     if (this.api.player.progressFilled && duration) {
-                        const progress = (currentTime / duration) * 100;
+                        let progress;
+
+                        // For live streams, always show progress at 100%
+                        if (this.isLiveStream) {
+                            progress = 100;
+                        } else {
+                            // For regular videos, calculate normally
+                            progress = (currentTime / duration) * 100;
+                        }
+
+                        // Check if live badge exists = it's a live stream
+                        const liveBadge = this.api.container.querySelector('.live-badge');
+
+                        if (liveBadge) {
+                            // Force 100% for live streams
+                            progress = 100;
+                        }
+
                         this.api.player.progressFilled.style.width = `${progress}%`;
                         if (this.api.player.progressHandle) {
                             this.api.player.progressHandle.style.left = `${progress}%`;
@@ -2869,6 +3311,16 @@ width: fit-content;
                 this.ytPlayerContainer = null;
             }
 
+            if (this.bufferMonitorInterval) {
+                clearInterval(this.bufferMonitorInterval);
+                this.bufferMonitorInterval = null;
+            }
+
+            if (this.qualityMonitorInterval) {
+                clearInterval(this.qualityMonitorInterval);
+                this.qualityMonitorInterval = null;
+            }
+
             this.removeMouseMoveOverlay();
 
             this.api.container.classList.remove('youtube-active');
@@ -2922,6 +3374,10 @@ width: fit-content;
             this.isLiveStream = false;
             this.isAtLiveEdge = false;
 
+            if (this.liveProgressInterval) {
+                clearInterval(this.liveProgressInterval);
+                this.liveProgressInterval = null;
+            }
         }
     }