myetv-player 1.0.6 → 1.0.10

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

@@ -17,6 +17,13 @@
                 quality: options.quality || 'default',
                 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'
+
                 debug: true,
                 ...options
             };
@@ -39,6 +46,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 +90,200 @@
             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() {
+            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,10 +665,13 @@ 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,
                 ...options.playerVars
             };
@@ -645,6 +855,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 +881,481 @@ 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', {});
+
+        }
+
+        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);
+                    }
+
+                    // 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');
+                            }
+                            return;
+                        }
+
+                        const newDuration = this.ytPlayer.getDuration();
+                        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);
+                        }
+
+                        // If duration increased by more than 0.5 seconds, it's live
+                        if (difference > 0.5) {
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ✅ LIVE STREAM DETECTED (duration changing)');
+                            }
+                            this.isLiveStream = true;
+                            this.handleLiveStreamUI();
+                        } else {
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ℹ️ Regular video (duration stable)');
+                            }
+                            this.isLiveStream = false;
+                        }
+                    }, 3000);
+                }
+
+                // 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();
+
+            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');
+            if (progressContainer) {
+                progressContainer.style.opacity = '0.3';
+                progressContainer.style.pointerEvents = 'none';
+            }
+
+            // Wait a bit for YouTube to fully initialize
+            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');
+
+                        if (seekDifference < 2) {
+                            // DVR enabled - restore progress bar
+                            if (progressContainer) {
+                                progressContainer.style.opacity = '';
+                                progressContainer.style.pointerEvents = '';
+                            }
+
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ✅ DVR ENABLED - progress bar active');
+                            }
+
+                            this.ytPlayer.seekTo(duration, true);
+                        } else {
+                            // No DVR - keep progress bar disabled
+                            this.modifyProgressBarForLive();
+
+                            if (this.api.player.options.debug) {
+                                console.log('[YT Plugin] ❌ DVR DISABLED - progress bar locked');
+                            }
+                        }
+                    }, 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');
+
+            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';
+            }
+        }
+
+        restoreProgressBarNormal() {
+            const progressContainer = this.api.container.querySelector('.progress-container');
+            const progressHandle = this.api.container.querySelector('.progress-handle');
+
+            if (progressContainer) {
+                progressContainer.style.pointerEvents = '';
+                progressContainer.style.cursor = '';
+                progressContainer.style.opacity = '';
+            }
+
+            if (progressHandle) {
+                progressHandle.style.display = '';
+            }
+        }
+
+        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 && duration < 7200) {
+                                // 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();
+
+            // Restart normal time updates
+            if (!this.timeUpdateInterval) {
+                this.setupYouTubeSync();
+            }
+
+            if (this.api.player.options.debug) {
+                console.log('[YT Plugin] ✅ Transitioned from LIVE to REPLAY mode');
+            }
         }
 
         onApiChange(event) {
@@ -676,21 +1364,35 @@ 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');
+            }
         }
 
         // ===== QUALITY CONTROL METHODS =====
@@ -951,17 +1653,16 @@ width: fit-content;
             }
         }
 
-        // ===== SUBTITLES CONTROL METHODS =====
+        // ===== RECONSTRUCTED 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 +1675,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 +1689,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 +1726,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 +1747,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 +2138,6 @@ width: fit-content;
                                 subtitlesBtn.classList.remove('active');
                             }
                         }
-                        this.updateSubtitlesMenuActiveState();
                     }
                 } catch (e) {
                     // Ignore errors
@@ -1210,78 +2193,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 +2276,66 @@ 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');
+                    }
+                }
+            }
+
+            // 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', {});
@@ -1913,6 +2884,44 @@ 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;
+
         }
     }