myetv-player 1.0.8 → 1.1.0

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

@@ -14,9 +14,19 @@
                 autoplay: options.autoplay !== undefined ? options.autoplay : false,
                 showYouTubeUI: options.showYouTubeUI !== undefined ? options.showYouTubeUI : false,
                 autoLoadFromData: options.autoLoadFromData !== undefined ? options.autoLoadFromData : true,
-                quality: options.quality || 'default',
+                quality: options.quality || 'auto',
                 enableQualityControl: options.enableQualityControl !== undefined ? options.enableQualityControl : true,
                 enableCaptions: options.enableCaptions !== undefined ? options.enableCaptions : true,
+
+                // Channel watermark option (default false - requires API key)
+                enableChannelWatermark: options.enableChannelWatermark !== undefined ? options.enableChannelWatermark : false,
+
+                // 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
             };
@@ -39,6 +49,12 @@
             this.captionStateCheckInterval = null;
             this.qualityMonitorInterval = null;
             this.resizeListenerAdded = false;
+            // Channel data cache
+            this.channelData = null;
+            //live streaming
+            this.isLiveStream = false;
+            this.liveCheckInterval = null;
+            this.isAtLiveEdge = true; // Track if viewer is at live edge
 
             this.api = player.getPluginAPI();
             if (this.api.player.options.debug) console.log('[YT Plugin] Constructor initialized', this.options);
@@ -77,6 +93,208 @@
             if (this.api.player.options.debug) console.log('[YT Plugin] Setup completed');
         }
 
+        /**
+     * Fetch YouTube channel information using YouTube Data API v3
+     */
+        async fetchChannelInfo(videoId) {
+            if (!this.options.apiKey) {
+                if (this.api.player.options.debug) {
+                    console.warn('[YT Plugin] API Key required to fetch channel information');
+                }
+                return null;
+            }
+
+            try {
+                const videoUrl = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=${this.options.apiKey}`;
+                const videoResponse = await fetch(videoUrl);
+                const videoData = await videoResponse.json();
+
+                if (!videoData.items || videoData.items.length === 0) {
+                    if (this.api.player.options.debug) {
+                        console.warn('[YT Plugin] Video not found');
+                    }
+                    return null;
+                }
+
+                const channelId = videoData.items[0].snippet.channelId;
+                const channelTitle = videoData.items[0].snippet.channelTitle;
+
+                const channelUrl = `https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${channelId}&key=${this.options.apiKey}`;
+                const channelResponse = await fetch(channelUrl);
+                const channelData = await channelResponse.json();
+
+                if (!channelData.items || channelData.items.length === 0) {
+                    if (this.api.player.options.debug) {
+                        console.warn('[YT Plugin] Channel not found');
+                    }
+                    return null;
+                }
+
+                const channel = channelData.items[0].snippet;
+
+                const channelInfo = {
+                    channelId: channelId,
+                    channelTitle: channelTitle,
+                    channelUrl: `https://www.youtube.com/channel/${channelId}`,
+                    thumbnailUrl: channel.thumbnails.high?.url || channel.thumbnails.default?.url || null
+                };
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Channel info fetched', channelInfo);
+                }
+
+                return channelInfo;
+
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error fetching channel info', error);
+                }
+                return null;
+            }
+        }
+
+        /**
+         * 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;
+            }
+
+            this.channelData = await this.fetchChannelInfo(this.videoId);
+
+            if (!this.channelData) {
+                return;
+            }
+
+            if (this.api.player.options) {
+                this.api.player.options.watermarkUrl = this.channelData.thumbnailUrl;
+                this.api.player.options.watermarkLink = this.channelData.channelUrl;
+                this.api.player.options.watermarkTitle = this.channelData.channelTitle;
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Player watermark options updated', {
+                        watermarkUrl: this.api.player.options.watermarkUrl,
+                        watermarkLink: this.api.player.options.watermarkLink,
+                        watermarkTitle: this.api.player.options.watermarkTitle
+                    });
+                }
+
+                if (this.api.player.initializeWatermark) {
+                    this.api.player.initializeWatermark();
+
+                    // Wait for watermark to be in DOM and apply circular style
+                    this.applyCircularWatermark();
+                }
+            }
+        }
+
+        applyCircularWatermark() {
+            let attempts = 0;
+            const maxAttempts = 20;
+
+            const checkAndApply = () => {
+                attempts++;
+
+                // Try all possible selectors for watermark elements
+                const watermarkSelectors = [
+                    '.watermark',
+                    '.watermark-image',
+                    '.watermark img',
+                    '.watermark a',
+                    '.watermark-link',
+                    '[class*="watermark"]',
+                    'img[src*="' + (this.channelData?.thumbnailUrl || '') + '"]'
+                ];
+
+                let found = false;
+
+                watermarkSelectors.forEach(selector => {
+                    try {
+                        const elements = this.api.container.querySelectorAll(selector);
+                        if (elements.length > 0) {
+                            elements.forEach(el => {
+                                el.style.borderRadius = '50%';
+                                el.style.overflow = 'hidden';
+                                found = true;
+
+                                if (this.api.player.options.debug) {
+                                    console.log('[YT Plugin] Applied circular style to:', selector, el);
+                                }
+                            });
+                        }
+                    } catch (e) {
+                        // Selector might not be valid, skip it
+                    }
+                });
+
+                if (!found && attempts < maxAttempts) {
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] Watermark not found yet, retry', attempts + '/' + maxAttempts);
+                    }
+                    setTimeout(checkAndApply, 200);
+                } else if (found) {
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] ✅ Watermark made circular successfully');
+                    }
+                } else {
+                    if (this.api.player.options.debug) {
+                        console.warn('[YT Plugin] Could not find watermark element after', maxAttempts, 'attempts');
+                    }
+                }
+            };
+
+            // Start checking
+            setTimeout(checkAndApply, 100);
+        }
+
+
+        /**
+         * Set auto caption language on player initialization
+         */
+        setAutoCaptionLanguage() {
+            if (!this.options.autoCaptionLanguage || !this.ytPlayer) {
+                return;
+            }
+
+            try {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Setting auto caption language to', this.options.autoCaptionLanguage);
+                }
+
+                this.ytPlayer.setOption('captions', 'reload', true);
+                this.ytPlayer.loadModule('captions');
+
+                this.ytPlayer.setOption('captions', 'track', {
+                    'translationLanguage': this.options.autoCaptionLanguage
+                });
+
+                this.captionsEnabled = true;
+
+                const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
+                if (subtitlesBtn) {
+                    subtitlesBtn.classList.add('active');
+                }
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Auto caption language set successfully');
+                }
+
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error setting auto caption language', error);
+                }
+            }
+        }
+
         handleResponsiveLayout() {
 
             const containerWidth = this.api.container.offsetWidth;
@@ -458,11 +676,15 @@ width: fit-content;
             const playerVars = {
                 autoplay: this.options.autoplay ? 1 : 0,
                 controls: this.options.showYouTubeUI ? 1 : 0,
+                fs: this.options.showYouTubeUI ? 1 : 0,
+                disablekb: 1,
                 modestbranding: 1,
                 rel: 0,
                 cc_load_policy: 1,
-                cc_lang_pref: 'en',
+                cc_lang_pref: this.options.autoCaptionLanguage || 'en',
+                hl: this.options.autoCaptionLanguage || 'en',
                 iv_load_policy: 3,
+                showinfo: 0,
                 ...options.playerVars
             };
 
@@ -497,62 +719,206 @@ width: fit-content;
         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();
                     }
+                });
+            }
+        }
+
+        // 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);
+                }
 
-                    // Controls visible: toggle play/pause
-                    this.togglePlayPauseYT();
-                } else if (pauseClick) {
-                    // Always toggle on click when pauseClick is enabled
-                    this.togglePlayPauseYT();
+                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;
 
@@ -578,6 +944,9 @@ width: fit-content;
                 this.mouseMoveOverlay.remove();
                 this.mouseMoveOverlay = null;
             }
+
+            // stop tracking mouse
+            this.stopMousePositionTracking();
         }
 
         hidePosterOverlay() {
@@ -632,12 +1001,46 @@ 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();
 
+            // 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();
 
@@ -645,6 +1048,10 @@ width: fit-content;
             setTimeout(() => this.hidePipFromSettingsMenuOnly(), 500);
             setTimeout(() => this.hidePipFromSettingsMenuOnly(), 1500);
             setTimeout(() => this.hidePipFromSettingsMenuOnly(), 3000);
+            // Check if this is a live stream
+            setTimeout(() => this.checkIfLiveStream(), 2000);
+            setTimeout(() => this.checkIfLiveStream(), 5000);
+
 
             // Listen for window resize
             if (!this.resizeListenerAdded) {
@@ -667,7 +1074,549 @@ width: fit-content;
                 setTimeout(() => this.setQuality(this.options.quality), 1000);
             }
 
+            // NEW: Update player watermark with channel data
+            if (this.options.enableChannelWatermark) {
+                this.updatePlayerWatermark();
+            }
+
+            // NEW: Set auto caption language
+            if (this.options.autoCaptionLanguage) {
+                setTimeout(() => this.setAutoCaptionLanguage(), 1500);
+            }
+
             this.api.triggerEvent('youtubeplugin:playerready', {});
+
+        }
+
+        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...');
+            }
+
+            if (!this.ytPlayer) {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] ytPlayer not available');
+                }
+                return false;
+            }
+
+            try {
+                // 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);
+                    }
+
+                    // 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');
+                        }
+                        this.isLiveStream = true;
+                        this.handleLiveStreamUI();
+                        return true;
+                    }
+                }
+
+                // 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);
+                    }
+
+                    setTimeout(() => {
+                        if (!this.ytPlayer || !this.ytPlayer.getDuration) {
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ytPlayer lost during duration check');
+                            }
+                            return;
+                        }
+
+                        const newDuration = this.ytPlayer.getDuration();
+                        const difference = Math.abs(newDuration - duration);
+
+                        if (this.api.player.options.debug) {
+                            console.log('[YT Plugin] Duration after 5s:', newDuration);
+                            console.log('[YT Plugin] Duration difference:', difference);
+                        }
+
+                        if (difference > 10) {
+                            if (this.api.player.options.debug) {
+                                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');
+                            }
+                            this.isLiveStream = false;
+                        }
+                    }, 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);
+                    }
+                }
+
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error checking live stream:', error);
+                }
+            }
+
+            return this.isLiveStream;
+        }
+
+        handleLiveStreamUI() {
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] 🎬 Applying live stream UI changes');
+                console.log('[YT Plugin] 📦 Container:', this.api.container);
+            }
+
+            // Stop time update for live streams
+            if (this.timeUpdateInterval) {
+                clearInterval(this.timeUpdateInterval);
+                this.timeUpdateInterval = null;
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] ✅ Time update interval stopped');
+                }
+            }
+
+            // Apply UI changes
+            this.hideTimeDisplay();
+            this.createLiveBadge();
+
+            // Check if DVR is available before disabling progress bar
+            this.checkDVRAvailability();
+
+            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() {
+            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';
+            }
+
+            // Set darkgoldenrod during test
+            if (progressFill) {
+                progressFill.style.backgroundColor = 'darkgoldenrod';
+            }
+
+            setTimeout(() => {
+                if (!this.ytPlayer) return;
+
+                try {
+                    const currentTime = this.ytPlayer.getCurrentTime();
+                    const duration = this.ytPlayer.getDuration();
+                    const testSeekPosition = Math.max(0, currentTime - 5);
+
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] 🔍 Testing DVR availability...');
+                    }
+
+                    this.ytPlayer.seekTo(testSeekPosition, true);
+
+                    setTimeout(() => {
+                        if (!this.ytPlayer) return;
+
+                        const newCurrentTime = this.ytPlayer.getCurrentTime();
+                        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 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 with theme color');
+                            }
+
+                            this.ytPlayer.seekTo(duration, true);
+                        } else {
+                            // No DVR - keep darkgoldenrod
+                            this.modifyProgressBarForLive();
+
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ❌ DVR DISABLED - progress bar locked with darkgoldenrod');
+                            }
+                        }
+                    }, 500);
+
+                } catch (error) {
+                    if (this.api.player.options.debug) {
+                        console.error('[YT Plugin] Error checking DVR:', error);
+                    }
+                    this.modifyProgressBarForLive();
+                }
+            }, 1000);
+        }
+
+        createLiveBadge() {
+            // Remove existing badge if present
+            let existingBadge = this.api.container.querySelector('.live-badge');
+            if (existingBadge) {
+                existingBadge.remove();
+            }
+
+            // Create LIVE badge
+            const liveBadge = document.createElement('div');
+            liveBadge.className = 'live-badge';
+            liveBadge.innerHTML = 'LIVE';
+            liveBadge.style.cssText = `
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        background: #ff0000;
+        color: white;
+        padding: 2px 8px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: bold;
+        cursor: pointer;
+        user-select: none;
+        margin-left: 8px;
+    `;
+
+            // Add pulsing indicator style
+            if (!document.getElementById('live-badge-style')) {
+                const style = document.createElement('style');
+                style.id = 'live-badge-style';
+                style.textContent = `
+            .live-indicator {
+                width: 8px;
+                height: 8px;
+                background: white;
+                border-radius: 50%;
+                animation: live-pulse 1.5s ease-in-out infinite;
+            }
+            @keyframes live-pulse {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.3; }
+            }
+        `;
+                document.head.appendChild(style);
+            }
+
+            // Click to return to live
+            liveBadge.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.seekToLive();
+            });
+
+            // Insert badge in control bar, next to time display area
+            const controlsLeft = this.api.container.querySelector('.controls-left');
+            if (controlsLeft) {
+                controlsLeft.appendChild(liveBadge);
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Live badge added to controls-left');
+                }
+            } else {
+                // Fallback: add to container
+                this.api.container.appendChild(liveBadge);
+                liveBadge.style.position = 'absolute';
+                liveBadge.style.left = '10px';
+                liveBadge.style.bottom = '50px';
+                liveBadge.style.zIndex = '11';
+            }
+        }
+
+        seekToLive() {
+            if (!this.ytPlayer || !this.isLiveStream) return;
+
+            try {
+                // For live streams, seek to the current live position
+                const duration = this.ytPlayer.getDuration();
+                this.ytPlayer.seekTo(duration, true);
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] ⏩ Seeking to live edge:', duration);
+                }
+
+                // Immediately update badge to red (will be confirmed by monitoring)
+                const badge = this.api.container.querySelector('.live-badge');
+                if (badge) {
+                    badge.style.background = '#ff0000';
+                    badge.textContent = 'LIVE';
+                    badge.title = '';
+                }
+
+                this.isAtLiveEdge = true;
+
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error seeking to live:', error);
+                }
+            }
+        }
+
+        hideTimeDisplay() {
+            // Hide both current time and duration elements
+            const currentTimeEl = this.api.container.querySelector('.current-time');
+            const durationEl = this.api.container.querySelector('.duration');
+
+            if (currentTimeEl) {
+                currentTimeEl.style.display = 'none';
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Current time hidden');
+                }
+            }
+
+            if (durationEl) {
+                durationEl.style.display = 'none';
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Duration hidden');
+                }
+            }
+        }
+
+        showTimeDisplay() {
+            const currentTimeEl = this.api.container.querySelector('.current-time');
+            const durationEl = this.api.container.querySelector('.duration');
+
+            if (currentTimeEl) {
+                currentTimeEl.style.display = '';
+            }
+
+            if (durationEl) {
+                durationEl.style.display = '';
+            }
+        }
+
+        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
+                progressContainer.style.pointerEvents = 'none';
+                progressContainer.style.cursor = 'default';
+                progressContainer.style.opacity = '0.6';
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Progress bar disabled for live stream');
+                }
+            }
+
+            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 = '';
+                progressContainer.style.cursor = '';
+                progressContainer.style.opacity = '';
+            }
+
+            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() {
+            if (this.liveCheckInterval) {
+                clearInterval(this.liveCheckInterval);
+            }
+
+            this.liveCheckInterval = setInterval(() => {
+                if (!this.ytPlayer || !this.isLiveStream) return;
+
+                try {
+                    const currentTime = this.ytPlayer.getCurrentTime();
+                    const duration = this.ytPlayer.getDuration();
+                    const latency = duration - currentTime;
+                    const playerState = this.ytPlayer.getPlayerState();
+
+                    const badge = this.api.container.querySelector('.live-badge');
+                    if (badge) {
+                        // Check player state first
+                        if (playerState === YT.PlayerState.PAUSED) {
+                            // Keep orange when paused - don't override
+                            badge.style.background = '#ff8800';
+                            badge.textContent = '⏸ LIVE';
+                            badge.title = 'Livestreaming in Pause';
+
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] 🟠 Live paused (monitoring)');
+                            }
+                        } else if (playerState === YT.PlayerState.PLAYING) {
+                            // Only update color if playing
+                            // Check latency only if duration is reasonable
+                            if (latency > 60) {
+                                // DE-SYNCED - Black background
+                                badge.style.background = '#1a1a1a';
+                                badge.textContent = 'LIVE';
+                                badge.title = `${Math.floor(latency)} seconds back from the live`;
+                                this.isAtLiveEdge = false;
+
+                                if (this.api.player.options.debug) {
+                                    console.log('[YT Plugin] ⚫ De-synced, latency:', latency.toFixed(1), 's');
+                                }
+                            } else {
+                                // AT LIVE EDGE - Red background
+                                badge.style.background = '#ff0000';
+                                badge.textContent = 'LIVE';
+                                badge.title = 'Livestreaming';
+                                this.isAtLiveEdge = true;
+
+                                if (this.api.player.options.debug) {
+                                    console.log('[YT Plugin] 🔴 At live edge');
+                                }
+                            }
+                        }
+                    }
+
+                } catch (error) {
+                    if (this.api.player.options.debug) {
+                        console.error('[YT Plugin] Error monitoring live:', error);
+                    }
+                }
+            }, 2000); // Check every 2 seconds
+        }
+
+        handleLiveStreamEnded() {
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] 📹 Handling live stream end transition');
+            }
+
+            // Stop live monitoring
+            if (this.liveCheckInterval) {
+                clearInterval(this.liveCheckInterval);
+                this.liveCheckInterval = null;
+            }
+
+            // Update badge to show "REPLAY" or remove it
+            const badge = this.api.container.querySelector('.live-badge');
+            if (badge) {
+                // Option 1: Change to REPLAY badge
+                badge.textContent = 'REPLAY';
+                badge.style.background = '#555555';
+                badge.style.cursor = 'default';
+                badge.title = 'Registrazione del live stream';
+
+                // Remove click handler since there's no live to seek to
+                const newBadge = badge.cloneNode(true);
+                badge.parentNode.replaceChild(newBadge, badge);
+
+                // Option 2: Remove badge entirely after 5 seconds
+                setTimeout(() => {
+                    if (newBadge && newBadge.parentNode) {
+                        newBadge.remove();
+                    }
+                }, 5000);
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] ✅ Badge updated to REPLAY mode');
+                }
+            }
+
+            // Restore normal player behavior
+            this.isLiveStream = false;
+            this.isAtLiveEdge = false;
+
+            // Re-enable progress bar
+            this.restoreProgressBarNormal();
+
+            // Show time display again
+            this.showTimeDisplay();
+
+            if (this.liveProgressInterval) {
+                clearInterval(this.liveProgressInterval);
+                this.liveProgressInterval = null;
+            }
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] ✅ Transitioned from LIVE to REPLAY mode');
+            }
         }
 
         onApiChange(event) {
@@ -676,21 +1625,34 @@ width: fit-content;
         }
 
         injectYouTubeCSSOverride() {
-            if (document.getElementById('youtube-controls-override')) return;
+            if (document.getElementById('youtube-controls-override')) {
+                return;
+            }
 
             const style = document.createElement('style');
             style.id = 'youtube-controls-override';
             style.textContent = `
-                .video-wrapper.youtube-active .quality-control,
-                .video-wrapper.youtube-active .subtitles-control {
-                    display: block !important;
-                    visibility: visible !important;
-                    opacity: 1 !important;
-                }
-            `;
+        .video-wrapper.youtube-active .quality-control,
+        .video-wrapper.youtube-active .subtitles-control {
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+        }
+        
+        /* Make watermark circular */
+        .video-wrapper .watermark,
+        .video-wrapper .watermark-image,
+        .video-wrapper .watermark img {
+            border-radius: 50% !important;
+            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');
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] CSS override injected (ToS compliant)');
+            }
         }
 
         // ===== QUALITY CONTROL METHODS =====
@@ -918,27 +1880,57 @@ width: fit-content;
             if (!this.ytPlayer || !this.ytPlayer.setPlaybackQuality) return false;
 
             try {
-                // Try multiple methods to force quality change
-                this.ytPlayer.setPlaybackQuality(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 });
@@ -951,17 +1943,16 @@ width: fit-content;
             }
         }
 
-        // ===== SUBTITLES CONTROL METHODS =====
+        // ===== SUBTITLE METHODS =====
 
         /**
-         * Load available captions and create menu
+         * Load available captions and create subtitle control
          */
         loadAvailableCaptions() {
             if (!this.ytPlayer || !this.options.enableCaptions) return;
 
-            // Prevent creating menu multiple times
             if (this.subtitlesMenuCreated) {
-                if (this.api.player.options.debug) console.log('[YT Plugin] Subtitles menu already created, skipping');
+                if (this.api.player.options.debug) console.log('[YT Plugin] Subtitles menu already created');
                 return;
             }
 
@@ -974,7 +1965,6 @@ width: fit-content;
                     if (this.api.player.options.debug) console.log('[YT Plugin] Captions module error:', e.message);
                 }
 
-                // FIXED: If tracklist is available and populated, use it
                 if (captionModule && Array.isArray(captionModule) && captionModule.length > 0) {
                     this.availableCaptions = captionModule.map((track, index) => {
                         const isAutomatic = track.kind === 'asr' || track.isautomatic || track.kind === 'auto';
@@ -989,39 +1979,36 @@ width: fit-content;
                     });
 
                     if (this.api.player.options.debug) console.log('[YT Plugin] ✅ Captions loaded:', this.availableCaptions);
-                    this.createSubtitlesControl(true); // true = has tracklist
+                    this.createSubtitlesControl();
                     this.subtitlesMenuCreated = true;
 
                 } else if (this.captionCheckAttempts < 5) {
-                    // Retry if tracklist not yet available
                     this.captionCheckAttempts++;
                     if (this.api.player.options.debug) console.log(`[YT Plugin] Retry caption load (${this.captionCheckAttempts}/5)`);
                     setTimeout(() => this.loadAvailableCaptions(), 1000);
 
                 } else {
-                    // FIXED: After 5 attempts without tracklist, use Off/On (Auto) buttons
-                    if (this.api.player.options.debug) console.log('[YT Plugin] No tracklist found - using Off/On (Auto)');
-                    this.availableCaptions = []; // Empty tracklist
-                    this.createSubtitlesControl(false); // false = no tracklist, use On/Off buttons
+                    if (this.api.player.options.debug) console.log('[YT Plugin] No tracklist - creating basic control');
+                    this.availableCaptions = [];
+                    this.createSubtitlesControl();
                     this.subtitlesMenuCreated = true;
                 }
 
             } catch (error) {
                 if (this.api.player.options.debug) console.error('[YT Plugin] Error loading captions:', error);
-                this.createSubtitlesControl(false); // Fallback to On/Off buttons
+                this.createSubtitlesControl();
                 this.subtitlesMenuCreated = true;
             }
         }
 
         /**
-         * Create subtitles control button and menu
-         * @param {boolean} hasTracklist - true if YouTube provides caption tracks, false for auto captions only
+         * Create subtitle control in the control bar
          */
-        createSubtitlesControl(hasTracklist) {
+        createSubtitlesControl() {
             let subtitlesControl = this.api.container.querySelector('.subtitles-control');
             if (subtitlesControl) {
                 if (this.api.player.options.debug) console.log('[YT Plugin] Subtitles control exists - updating menu');
-                this.populateSubtitlesMenu(hasTracklist);
+                this.buildSubtitlesMenu();
                 return;
             }
 
@@ -1029,13 +2016,13 @@ width: fit-content;
             if (!controlsRight) return;
 
             const subtitlesHTML = `
-                <div class="subtitles-control">
-                    <button class="control-btn subtitles-btn" data-tooltip="Subtitles">
-                        <span class="icon">CC</span>
-                    </button>
-                    <div class="subtitles-menu"></div>
-                </div>
-            `;
+        <div class="subtitles-control">
+            <button class="control-btn subtitles-btn" data-tooltip="Subtitles">
+                <span class="icon">CC</span>
+            </button>
+            <div class="subtitles-menu"></div>
+        </div>
+    `;
 
             const qualityControl = controlsRight.querySelector('.quality-control');
             if (qualityControl) {
@@ -1050,89 +2037,376 @@ width: fit-content;
             }
 
             if (this.api.player.options.debug) console.log('[YT Plugin] Subtitles control created');
-            this.populateSubtitlesMenu(hasTracklist);
+            this.buildSubtitlesMenu();
             this.bindSubtitlesButton();
             this.checkInitialCaptionState();
             this.startCaptionStateMonitoring();
         }
 
         /**
-         * Populate subtitles menu with tracks or On/Off buttons
-         * FIXED: Correctly handles both scenarios
-         * @param {boolean} hasTracklist - true if tracks available, false for auto captions only
+         * Build the subtitles menu
          */
-        populateSubtitlesMenu(hasTracklist) {
+        buildSubtitlesMenu() {
             const subtitlesMenu = this.api.container.querySelector('.subtitles-menu');
             if (!subtitlesMenu) return;
+
             subtitlesMenu.innerHTML = '';
 
-            // OFF option
-            const offItem = document.createElement('div');
-            offItem.className = 'subtitles-option';
-            offItem.textContent = 'Off';
-            offItem.dataset.track = 'off';
-            offItem.addEventListener('click', (e) => {
+            // Off option
+            const offOption = document.createElement('div');
+            offOption.className = 'subtitles-option';
+            offOption.textContent = 'Off';
+            offOption.dataset.id = 'off';
+            offOption.addEventListener('click', (e) => {
                 e.stopPropagation();
                 this.disableCaptions();
+                this.updateMenuSelection('off');
+                subtitlesMenu.classList.remove('show');
             });
-            subtitlesMenu.appendChild(offItem);
+            subtitlesMenu.appendChild(offOption);
 
-            // Show available caption tracks if any
+            // If captions are available
             if (this.availableCaptions.length > 0) {
-                this.availableCaptions.forEach(caption => {
-                    const menuItem = document.createElement('div');
-                    menuItem.className = 'subtitles-option';
-                    menuItem.textContent = caption.label;
-                    menuItem.addEventListener('click', () => this.setCaptions(caption.index));
-                    menuItem.dataset.track = caption.index;
-                    menuItem.dataset.languageCode = caption.languageCode;
-                    // Display only - no click handler
-                    subtitlesMenu.appendChild(menuItem);
+                // Add original languages
+                this.availableCaptions.forEach((caption, index) => {
+                    const option = document.createElement('div');
+                    option.className = 'subtitles-option';
+                    option.textContent = caption.label;
+                    option.dataset.id = `caption-${index}`;
+                    option.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        this.setCaptionTrack(caption.languageCode);
+                        this.updateMenuSelection(`caption-${index}`);
+                        subtitlesMenu.classList.remove('show');
+                    });
+                    subtitlesMenu.appendChild(option);
                 });
             } else {
-                // No tracklist - show ON (Auto) option
-                const onItem = document.createElement('div');
-                onItem.className = 'subtitles-option';
-                onItem.textContent = 'On (Auto)';
-                onItem.dataset.track = 'auto';
-                onItem.addEventListener('click', (e) => {
+                // Auto-caption only (without tracklist)
+                const autoOption = document.createElement('div');
+                autoOption.className = 'subtitles-option';
+                autoOption.textContent = 'Auto-generated';
+                autoOption.dataset.id = 'auto';
+                autoOption.addEventListener('click', (e) => {
                     e.stopPropagation();
                     this.enableAutoCaptions();
+                    this.updateMenuSelection('auto');
+                    subtitlesMenu.classList.remove('show');
+                });
+                subtitlesMenu.appendChild(autoOption);
+            }
+
+            // Always add "Auto-translate" (both with and without tracklist)
+            const translateOption = document.createElement('div');
+            translateOption.className = 'subtitles-option translate-option';
+            translateOption.textContent = 'Auto-translate';
+            translateOption.dataset.id = 'translate';
+            translateOption.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.showTranslationMenu();
+            });
+            subtitlesMenu.appendChild(translateOption);
+        }
+
+        /**
+         * Show translation menu (submenu)
+         */
+        showTranslationMenu() {
+            if (this.api.player.options.debug) console.log('[YT Plugin] showTranslationMenu called');
+
+            const subtitlesMenu = this.api.container.querySelector('.subtitles-menu');
+            if (!subtitlesMenu) return;
+
+            // Clear and rebuild with translation languages
+            subtitlesMenu.innerHTML = '';
+
+            // Back option
+            const backOption = document.createElement('div');
+            backOption.className = 'subtitles-option back-option';
+            backOption.innerHTML = '← Back';
+            backOption.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (this.api.player.options.debug) console.log('[YT Plugin] Back clicked');
+                this.buildSubtitlesMenu();
+            });
+            subtitlesMenu.appendChild(backOption);
+
+            // Add translation languages
+            const translationLanguages = this.getTopTranslationLanguages();
+            translationLanguages.forEach(lang => {
+                const option = document.createElement('div');
+                option.className = 'subtitles-option';
+                option.textContent = lang.name;
+                option.dataset.id = `translate-${lang.code}`;
+                option.dataset.langcode = lang.code;
+
+                if (this.api.player.options.debug) console.log('[YT Plugin] Creating option for:', lang.name, lang.code);
+
+                option.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    if (this.api.player.options.debug) console.log('[YT Plugin] Language clicked:', lang.code, lang.name);
+                    if (this.api.player.options.debug) console.log('[YT Plugin] this:', this);
+                    if (this.api.player.options.debug) console.log('[YT Plugin] About to call setTranslatedCaptions with:', lang.code);
+
+                    const result = this.setTranslatedCaptions(lang.code);
+
+                    if (this.api.player.options.debug) console.log('[YT Plugin] setTranslatedCaptions returned:', result);
+
+                    this.updateMenuSelection(`translate-${lang.code}`);
+                    subtitlesMenu.classList.remove('show');
+
+                    // Return to main menu
+                    setTimeout(() => this.buildSubtitlesMenu(), 300);
                 });
-                subtitlesMenu.appendChild(onItem);
+
+                subtitlesMenu.appendChild(option);
+            });
+
+            if (this.api.player.options.debug) console.log('[YT Plugin] Translation menu built with', translationLanguages.length, 'languages');
+        }
+
+        /**
+         * Update selection in the menu
+         */
+        updateMenuSelection(selectedId) {
+            const subtitlesMenu = this.api.container.querySelector('.subtitles-menu');
+            if (!subtitlesMenu) return;
+
+            // Remove all selections
+            subtitlesMenu.querySelectorAll('.subtitles-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+
+            // Add selection to current option
+            const selectedOption = subtitlesMenu.querySelector(`[data-id="${selectedId}"]`);
+            if (selectedOption) {
+                selectedOption.classList.add('selected');
+            }
+
+            // Update button state
+            const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
+            if (subtitlesBtn) {
+                if (selectedId === 'off') {
+                    subtitlesBtn.classList.remove('active');
+                } else {
+                    subtitlesBtn.classList.add('active');
+                }
             }
         }
 
+        /**
+         * Bind subtitle button (toggle)
+         */
         bindSubtitlesButton() {
             const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
             if (!subtitlesBtn) return;
 
-            // Remove existing event listeners by cloning
             const newBtn = subtitlesBtn.cloneNode(true);
             subtitlesBtn.parentNode.replaceChild(newBtn, subtitlesBtn);
 
             newBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
-                this.toggleCaptions();
+
+                // Toggle: if active disable, otherwise enable first available
+                if (this.captionsEnabled) {
+                    this.disableCaptions();
+                    this.updateMenuSelection('off');
+                } else {
+                    if (this.availableCaptions.length > 0) {
+                        const firstCaption = this.availableCaptions[0];
+                        this.setCaptionTrack(firstCaption.languageCode);
+                        this.updateMenuSelection('caption-0');
+                    } else {
+                        this.enableAutoCaptions();
+                        this.updateMenuSelection('auto');
+                    }
+                }
             });
         }
 
+        /**
+         * Set a specific caption track
+         */
+        setCaptionTrack(languageCode) {
+            if (!this.ytPlayer) return false;
+
+            try {
+                this.ytPlayer.setOption('captions', 'track', { languageCode: languageCode });
+                this.ytPlayer.loadModule('captions');
+
+                this.captionsEnabled = true;
+                this.currentCaption = languageCode;
+                this.currentTranslation = null;
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Caption track set:', languageCode);
+                }
+
+                return true;
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error setting caption track:', error);
+                }
+                return false;
+            }
+        }
+
+        /**
+         * Set automatic translation
+         */
+        setTranslatedCaptions(translationLanguageCode) {
+            if (this.api.player.options.debug) console.log('[YT Plugin] setTranslatedCaptions called with:', translationLanguageCode);
+
+            if (!this.ytPlayer) {
+                if (this.api.player.options.debug) console.error('[YT Plugin] ytPlayer not available');
+                return false;
+            }
+
+            try {
+                if (this.api.player.options.debug) console.log('[YT Plugin] Available captions:', this.availableCaptions);
+
+                if (this.availableCaptions.length > 0) {
+                    // WITH TRACKLIST: Use first available caption as base
+                    const baseLanguageCode = this.availableCaptions[0].languageCode;
+                    if (this.api.player.options.debug) console.log('[YT Plugin] Using base language:', baseLanguageCode);
+
+                    this.ytPlayer.setOption('captions', 'track', {
+                        'languageCode': baseLanguageCode,
+                        'translationLanguage': {
+                            'languageCode': translationLanguageCode
+                        }
+                    });
+                } else {
+                    // WITHOUT TRACKLIST: Get current auto-generated track
+                    if (this.api.player.options.debug) console.log('[YT Plugin] No tracklist - getting auto-generated track');
+
+                    let currentTrack = null;
+                    try {
+                        currentTrack = this.ytPlayer.getOption('captions', 'track');
+                        if (this.api.player.options.debug) console.log('[YT Plugin] Current track:', currentTrack);
+                    } catch (e) {
+                        if (this.api.player.options.debug) console.log('[YT Plugin] Could not get current track:', e.message);
+                    }
+
+                    if (currentTrack && currentTrack.languageCode) {
+                        // Use auto-generated language as base
+                        if (this.api.player.options.debug) console.log('[YT Plugin] Using auto-generated language:', currentTrack.languageCode);
+
+                        this.ytPlayer.setOption('captions', 'track', {
+                            'languageCode': currentTrack.languageCode,
+                            'translationLanguage': {
+                                'languageCode': translationLanguageCode
+                            }
+                        });
+                    } else {
+                        // Fallback: try with 'en' as base
+                        if (this.api.player.options.debug) console.log('[YT Plugin] Fallback: using English as base');
+
+                        this.ytPlayer.setOption('captions', 'track', {
+                            'languageCode': 'en',
+                            'translationLanguage': {
+                                'languageCode': translationLanguageCode
+                            }
+                        });
+                    }
+                }
+
+                this.captionsEnabled = true;
+                this.currentTranslation = translationLanguageCode;
+
+                if (this.api.player.options.debug) console.log('[YT Plugin] ✅ Translation applied');
+
+                return true;
+            } catch (error) {
+                if (this.api.player.options.debug) console.error('[YT Plugin] Error setting translation:', error);
+                return false;
+            }
+        }
+
+        /**
+         * Get language name from code
+         */
+        getLanguageName(languageCode) {
+            const languages = this.getTopTranslationLanguages();
+            const lang = languages.find(l => l.code === languageCode);
+            return lang ? lang.name : languageCode;
+        }
+
+        /**
+         * Enable automatic captions
+         */
+        enableAutoCaptions() {
+            if (!this.ytPlayer) return false;
+
+            try {
+                this.ytPlayer.setOption('captions', 'reload', true);
+                this.ytPlayer.loadModule('captions');
+
+                this.captionsEnabled = true;
+                this.currentCaption = null;
+                this.currentTranslation = null;
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Auto captions enabled');
+                }
+
+                return true;
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error enabling auto captions:', error);
+                }
+                return false;
+            }
+        }
+
+        /**
+         * Disable captions
+         */
+        disableCaptions() {
+            if (!this.ytPlayer) return false;
+
+            try {
+                this.ytPlayer.unloadModule('captions');
+
+                this.captionsEnabled = false;
+                this.currentCaption = null;
+                this.currentTranslation = null;
+
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] Captions disabled');
+                }
+
+                return true;
+            } catch (error) {
+                if (this.api.player.options.debug) {
+                    console.error('[YT Plugin] Error disabling captions:', error);
+                }
+                return false;
+            }
+        }
+
+        /**
+         * Check initial caption state
+         */
         checkInitialCaptionState() {
             setTimeout(() => {
                 try {
                     const currentTrack = this.ytPlayer.getOption('captions', 'track');
                     if (currentTrack && currentTrack.languageCode) {
                         this.captionsEnabled = true;
-                        const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
-                        if (subtitlesBtn) subtitlesBtn.classList.add('active');
-                        this.updateSubtitlesMenuActiveState();
+                        this.updateMenuSelection('caption-0');
+                    } else {
+                        this.updateMenuSelection('off');
                     }
                 } catch (e) {
-                    // Ignore errors
+                    this.updateMenuSelection('off');
                 }
             }, 1500);
         }
 
+        /**
+         * Monitor caption state
+         */
         startCaptionStateMonitoring() {
             if (this.captionStateCheckInterval) {
                 clearInterval(this.captionStateCheckInterval);
@@ -1154,7 +2428,6 @@ width: fit-content;
                                 subtitlesBtn.classList.remove('active');
                             }
                         }
-                        this.updateSubtitlesMenuActiveState();
                     }
                 } catch (e) {
                     // Ignore errors
@@ -1210,78 +2483,6 @@ width: fit-content;
             }
         }
 
-        setTranslatedCaptions(translationLanguageCode) {
-            if (!this.ytPlayer) return false;
-
-            try {
-                // First, disable current captions if any
-                if (this.captionsEnabled) {
-                    this.ytPlayer.unloadModule('captions');
-                }
-
-                // If no caption tracks exist, try to enable auto-generated captions
-                if (this.availableCaptions.length === 0) {
-                    if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] Enabling auto-generated captions with translation to:', translationLanguageCode);
-                    }
-
-                    // Enable auto-generated captions with translation
-                    this.ytPlayer.setOption('captions', 'track', {
-                        translationLanguage: translationLanguageCode
-                    });
-                    this.ytPlayer.loadModule('captions');
-                    this.currentCaption = null;
-                } else {
-                    // Use the first available caption track as base for translation
-                    const baseCaption = this.availableCaptions[0];
-
-                    if (this.api.player.options.debug) {
-                        console.log('[YT Plugin] Translating from', baseCaption.languageCode, 'to', translationLanguageCode);
-                    }
-
-                    // Set caption with translation
-                    this.ytPlayer.setOption('captions', 'track', {
-                        languageCode: baseCaption.languageCode,
-                        translationLanguage: translationLanguageCode
-                    });
-                    this.ytPlayer.loadModule('captions');
-                    this.currentCaption = baseCaption.index;
-                }
-
-                // Update state
-                this.captionsEnabled = true;
-                this.currentTranslation = translationLanguageCode;
-
-                // Update UI
-                const subtitlesBtn = this.api.container.querySelector('.subtitles-btn');
-                if (subtitlesBtn) subtitlesBtn.classList.add('active');
-
-                // Update menu state
-                this.updateSubtitlesMenuActiveState();
-
-                // Close the menu
-                const subtitlesMenu = this.api.container.querySelector('.subtitles-menu');
-                if (subtitlesMenu) {
-                    subtitlesMenu.classList.remove('show');
-                }
-
-                if (this.api.player.options.debug) {
-                    console.log('[YT Plugin] ✅ Auto-translation enabled:', translationLanguageCode);
-                }
-
-                this.api.triggerEvent('youtubeplugin:captionchanged', {
-                    translationLanguage: translationLanguageCode
-                });
-
-                return true;
-            } catch (error) {
-                if (this.api.player.options.debug) {
-                    console.error('[YT Plugin] Error setting translated captions:', error);
-                }
-                return false;
-            }
-        }
-
         /**
          * Enable automatic captions (when no tracklist available)
          */
@@ -1365,6 +2566,41 @@ width: fit-content;
             const playIcon = this.api.container.querySelector('.play-icon');
             const pauseIcon = this.api.container.querySelector('.pause-icon');
 
+            // Get live badge
+            const badge = this.api.container.querySelector('.live-badge');
+
+            // Handle live stream ended
+            if (this.isLiveStream && event.data === YT.PlayerState.ENDED) {
+                if (this.api.player.options.debug) {
+                    console.log('[YT Plugin] 🔴➡️📹 Live stream ended (player state: ENDED)');
+                }
+                this.handleLiveStreamEnded();
+                return;
+            }
+
+            // Update live badge based on state
+            if (this.isLiveStream && badge) {
+                if (event.data === YT.PlayerState.PAUSED) {
+                    // Orange when paused during live
+                    badge.style.background = '#ff8800';
+                    badge.textContent = '⏸ LIVE';
+                    badge.title = 'Livestreaming in Pause';
+
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] 🟠 Live paused');
+                    }
+                } else if (event.data === YT.PlayerState.PLAYING) {
+                    // Red when playing (will be checked for de-sync below)
+                    badge.style.background = '#ff0000';
+                    badge.textContent = 'LIVE';
+                    badge.title = 'Livestreaming';
+
+                    if (this.api.player.options.debug) {
+                        console.log('[YT Plugin] 🔴 Live playing');
+                    }
+                }
+            }
+
             switch (event.data) {
                 case YT.PlayerState.PLAYING:
                     this.api.triggerEvent('played', {});
@@ -1729,7 +2965,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}%`;
@@ -1913,6 +3166,48 @@ width: fit-content;
             }
 
             this.showPosterOverlay();
+
+            if (this.liveCheckInterval) {
+                clearInterval(this.liveCheckInterval);
+                this.liveCheckInterval = null;
+            }
+
+            // Restore normal UI when destroying
+            if (this.isLiveStream) {
+                this.showTimeDisplay();
+                this.restoreProgressBarNormal();
+
+                const liveBadge = this.api.container.querySelector('.live-badge');
+                if (liveBadge) {
+                    liveBadge.remove();
+                }
+            }
+
+            // Clear live stream intervals
+            if (this.liveCheckInterval) {
+                clearInterval(this.liveCheckInterval);
+                this.liveCheckInterval = null;
+            }
+
+            // Restore normal UI
+            if (this.isLiveStream) {
+                this.showTimeDisplay();
+                this.restoreProgressBarNormal();
+
+                const liveBadge = this.api.container.querySelector('.live-badge');
+                if (liveBadge) {
+                    liveBadge.remove();
+                }
+            }
+
+            // Reset live stream tracking
+            this.isLiveStream = false;
+            this.isAtLiveEdge = false;
+
+            if (this.liveProgressInterval) {
+                clearInterval(this.liveProgressInterval);
+                this.liveProgressInterval = null;
+            }
         }
     }