unified-video-framework 1.4.255 → 1.4.257

package/packages/web/dist/WebPlayer.js

@@ -94,8 +94,8 @@ export class WebPlayer extends BasePlayer {
         this.youtubePlayerReady = false;
         this.youtubeIframe = null;
         this.youtubeTimeTrackingInterval = null;
-        this.youtubeAvailableQualities = [];
-        this.youtubeCurrentQuality = null;
+        this.isYouTubeLive = false;
+        this.useYouTubeNativeControls = false;
         this.clickToUnmuteHandler = null;
     }
     debugLog(message, ...args) {
@@ -896,7 +896,7 @@ export class WebPlayer extends BasePlayer {
             width: '100%',
             height: '100%',
             playerVars: {
-                controls: 0,
+                controls: this.config.youtubeNativeControls !== false ? 1 : 0,
                 disablekb: 0,
                 fs: 0,
                 iv_load_policy: 3,
@@ -953,11 +953,11 @@ export class WebPlayer extends BasePlayer {
             if (this.config.muted) {
                 this.youtubePlayer.mute();
             }
-            this.extractYouTubeAvailableQualities();
+            this.detectYouTubeLiveStatus();
             this.getYouTubeVideoTitle();
             setTimeout(() => {
                 this.updateMetadataUI();
-                this.updateSettingsMenu();
+                this.updateControlsVisibility();
             }, 500);
         }
         this.startYouTubeTimeTracking();
@@ -971,9 +971,6 @@ export class WebPlayer extends BasePlayer {
                 this.state.isPaused = false;
                 this.state.isBuffering = false;
                 this.updateYouTubeUI('playing');
-                setTimeout(() => {
-                    this.extractYouTubeAvailableQualities();
-                }, 1000);
                 this.emit('onPlay');
                 break;
             case window.YT.PlayerState.PAUSED:
@@ -986,9 +983,6 @@ export class WebPlayer extends BasePlayer {
             case window.YT.PlayerState.BUFFERING:
                 this.state.isBuffering = true;
                 this.updateYouTubeUI('buffering');
-                setTimeout(() => {
-                    this.extractYouTubeAvailableQualities();
-                }, 500);
                 this.emit('onBuffering', true);
                 break;
             case window.YT.PlayerState.ENDED:
@@ -1002,8 +996,9 @@ export class WebPlayer extends BasePlayer {
                 this.state.duration = this.youtubePlayer.getDuration();
                 this.updateYouTubeUI('cued');
                 setTimeout(() => {
-                    this.getYouTubeVideoTitle();
-                }, 100);
+                    this.detectYouTubeLiveStatus();
+                    this.updateControlsVisibility();
+                }, 500);
                 break;
         }
     }
@@ -1072,6 +1067,120 @@ export class WebPlayer extends BasePlayer {
             this.getYouTubeVideoTitleFromOEmbed();
         }
     }
+    detectYouTubeLiveStatus() {
+        if (!this.youtubePlayer || !this.youtubePlayerReady)
+            return;
+        try {
+            const videoData = this.youtubePlayer.getVideoData();
+            this.isYouTubeLive = videoData?.isLive || false;
+            this.useYouTubeNativeControls = this.config.youtubeNativeControls !== false;
+            this.debugLog('YouTube Live status:', {
+                isLive: this.isYouTubeLive,
+                useNativeControls: this.useYouTubeNativeControls,
+                videoId: videoData?.video_id
+            });
+        }
+        catch (error) {
+            this.debugWarn('Could not detect YouTube Live status:', error);
+            try {
+                const duration = this.youtubePlayer.getDuration();
+                this.isYouTubeLive = !duration || duration === 0;
+                this.useYouTubeNativeControls = this.config.youtubeNativeControls !== false;
+                this.debugLog('YouTube Live detected via duration check:', {
+                    duration,
+                    isLive: this.isYouTubeLive,
+                    useNativeControls: this.useYouTubeNativeControls
+                });
+            }
+            catch (e) {
+                this.debugWarn('Could not check YouTube duration for Live detection:', e);
+            }
+        }
+    }
+    updateControlsVisibility() {
+        const controlsContainer = document.getElementById('uvf-controls-container');
+        if (!controlsContainer)
+            return;
+        if (this.youtubePlayer && this.useYouTubeNativeControls) {
+            controlsContainer.style.display = 'none';
+            if (!this.config.youtubeNativeControls) {
+                this.recreateYouTubePlayerWithNativeControls();
+            }
+            this.debugLog('✅ YouTube native controls enabled', {
+                isLive: this.isYouTubeLive,
+                reason: this.config.youtubeNativeControls !== false ? 'Default behavior (all YouTube content)' : 'Live stream detected'
+            });
+        }
+        else {
+            controlsContainer.style.display = 'flex';
+            this.debugLog('✅ Custom controls enabled for YouTube video');
+        }
+    }
+    recreateYouTubePlayerWithNativeControls() {
+        if (!this.source?.metadata?.videoId)
+            return;
+        const videoId = this.source.metadata.videoId;
+        const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
+        const container = this.playerWrapper || this.video?.parentElement;
+        if (!container)
+            return;
+        if (this.youtubePlayer) {
+            this.youtubePlayer.destroy();
+        }
+        const existingContainer = container.querySelector(`#youtube-player-${videoId}`);
+        if (existingContainer) {
+            existingContainer.remove();
+        }
+        const iframeContainer = document.createElement('div');
+        iframeContainer.id = `youtube-player-${videoId}`;
+        iframeContainer.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    `;
+        container.appendChild(iframeContainer);
+        this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
+            videoId: videoId,
+            width: '100%',
+            height: '100%',
+            playerVars: {
+                autoplay: this.config.autoPlay ? 1 : 0,
+                controls: 1,
+                modestbranding: 1,
+                rel: 0,
+                showinfo: 0,
+                iv_load_policy: 3,
+                playsinline: 1,
+                start: Math.floor(currentTime)
+            },
+            events: {
+                onReady: () => {
+                    this.youtubePlayerReady = true;
+                    this.debugLog('YouTube player with native controls ready');
+                    this.emit('onReady');
+                },
+                onStateChange: (event) => this.onYouTubePlayerStateChange(event),
+                onError: (event) => this.onYouTubePlayerError(event)
+            }
+        });
+    }
+    toggleYouTubeControls(useNative = !this.useYouTubeNativeControls) {
+        if (!this.youtubePlayer) {
+            this.debugWarn('Cannot toggle YouTube controls - no YouTube player active');
+            return;
+        }
+        this.useYouTubeNativeControls = useNative;
+        this.config.youtubeNativeControls = useNative;
+        this.updateControlsVisibility();
+        this.debugLog('YouTube controls toggled:', {
+            useNative: this.useYouTubeNativeControls,
+            isLive: this.isYouTubeLive
+        });
+        this.showNotification(`YouTube Controls: ${this.useYouTubeNativeControls ? 'Native' : 'Custom'}`);
+    }
     async getYouTubeVideoTitleFromOEmbed() {
         if (!this.source?.metadata?.videoId)
             return;
@@ -1094,172 +1203,10 @@ export class WebPlayer extends BasePlayer {
             this.debugWarn('Could not get YouTube title from oembed API:', error);
         }
     }
-    extractYouTubeAvailableQualities(retryCount = 0) {
-        if (!this.youtubePlayer || !this.youtubePlayerReady) {
-            this.debugLog('YouTube player not ready for quality extraction');
-            return;
-        }
-        try {
-            const availableQualityLevels = this.youtubePlayer.getAvailableQualityLevels();
-            this.debugLog('🔍 YouTube quality detection attempt', retryCount + 1, '- Found levels:', availableQualityLevels);
-            this.debugLog('🔍 YouTube player state:', this.youtubePlayer.getPlayerState());
-            this.debugLog('🔍 Current YouTube quality:', this.youtubePlayer.getPlaybackQuality());
-            if ((!availableQualityLevels || availableQualityLevels.length === 0 || (availableQualityLevels.length === 1 && availableQualityLevels[0] === 'auto')) && retryCount < 5) {
-                this.debugLog('No meaningful qualities detected, retrying in', (retryCount + 1) * 1000, 'ms...');
-                setTimeout(() => {
-                    this.extractYouTubeAvailableQualities(retryCount + 1);
-                }, (retryCount + 1) * 1000);
-                return;
-            }
-            const qualityMap = {
-                'hd2160': { label: '4K', value: 'hd2160', height: 2160 },
-                'hd1440': { label: '1440p', value: 'hd1440', height: 1440 },
-                'hd1080': { label: '1080p', value: 'hd1080', height: 1080 },
-                'hd720': { label: '720p', value: 'hd720', height: 720 },
-                'large': { label: '480p', value: 'large', height: 480 },
-                'medium': { label: '360p', value: 'medium', height: 360 },
-                'small': { label: '240p', value: 'small', height: 240 },
-                'tiny': { label: '144p', value: 'tiny', height: 144 },
-                'auto': { label: 'Auto', value: 'auto', height: 0 }
-            };
-            this.youtubeAvailableQualities = [];
-            this.youtubeAvailableQualities.push({ label: 'Auto', value: 'auto', height: 0 });
-            if (availableQualityLevels && availableQualityLevels.length > 0) {
-                availableQualityLevels.forEach((qualityLevel) => {
-                    if (qualityLevel !== 'auto' && qualityMap[qualityLevel]) {
-                        this.youtubeAvailableQualities.push(qualityMap[qualityLevel]);
-                    }
-                });
-                const autoQuality = this.youtubeAvailableQualities.shift();
-                this.youtubeAvailableQualities.sort((a, b) => (b.height || 0) - (a.height || 0));
-                if (autoQuality)
-                    this.youtubeAvailableQualities.unshift(autoQuality);
-            }
-            this.debugLog('✅ Successfully mapped YouTube qualities:', this.youtubeAvailableQualities);
-            try {
-                const currentQuality = this.youtubePlayer.getPlaybackQuality();
-                this.youtubeCurrentQuality = qualityMap[currentQuality] || qualityMap['auto'];
-                this.debugLog('Current YouTube quality:', this.youtubeCurrentQuality);
-            }
-            catch (e) {
-                this.debugWarn('Could not get current YouTube quality:', e);
-                this.youtubeCurrentQuality = qualityMap['auto'];
-            }
-            this.detectAvailableQualities();
-            this.debugLog('🚀 YouTube qualities successfully detected! Available qualities now:', this.availableQualities.length);
-            this.updateQualityBadge();
-            setTimeout(() => {
-                this.debugLog('🔄 Force refreshing settings menu with YouTube qualities');
-                this.updateSettingsMenu();
-            }, 100);
-        }
-        catch (error) {
-            this.debugWarn('Could not extract YouTube qualities:', error);
-            if (retryCount < 3) {
-                setTimeout(() => {
-                    this.extractYouTubeAvailableQualities(retryCount + 1);
-                }, 2000);
-            }
-        }
-    }
-    setYouTubeQuality(qualityLevel) {
-        if (!this.youtubePlayer)
-            return;
-        try {
-            const qualityMap = {
-                'hd2160': { label: '4K', value: 'hd2160', height: 2160 },
-                'hd1440': { label: '1440p', value: 'hd1440', height: 1440 },
-                'hd1080': { label: '1080p', value: 'hd1080', height: 1080 },
-                'hd720': { label: '720p', value: 'hd720', height: 720 },
-                'large': { label: '480p', value: 'large', height: 480 },
-                'medium': { label: '360p', value: 'medium', height: 360 },
-                'small': { label: '240p', value: 'small', height: 240 },
-                'tiny': { label: '144p', value: 'tiny', height: 144 },
-                'auto': { label: 'Auto', value: 'auto', height: 0 }
-            };
-            this.debugLog('📊 Attempting to set YouTube quality to:', qualityLevel);
-            if (qualityLevel === 'auto') {
-                this.youtubePlayer.setPlaybackQuality(qualityLevel);
-            }
-            else {
-                try {
-                    if (typeof this.youtubePlayer.setPlaybackQualityRange === 'function') {
-                        this.youtubePlayer.setPlaybackQualityRange(qualityLevel, qualityLevel);
-                        this.debugLog('✅ setPlaybackQualityRange called for:', qualityLevel);
-                    }
-                }
-                catch (e) {
-                    this.debugWarn('setPlaybackQualityRange failed:', e);
-                }
-                try {
-                    this.youtubePlayer.setPlaybackQuality(qualityLevel);
-                    this.debugLog('✅ setPlaybackQuality called for:', qualityLevel);
-                }
-                catch (e) {
-                    this.debugWarn('setPlaybackQuality failed:', e);
-                }
-                try {
-                    const wasPlaying = this.youtubePlayer.getPlayerState() === window.YT.PlayerState.PLAYING;
-                    if (wasPlaying) {
-                        this.youtubePlayer.pauseVideo();
-                        setTimeout(() => {
-                            this.youtubePlayer.setPlaybackQuality(qualityLevel);
-                            this.youtubePlayer.playVideo();
-                        }, 100);
-                    }
-                }
-                catch (e) {
-                    this.debugWarn('Force quality change with pause/play failed:', e);
-                }
-            }
-            setTimeout(() => {
-                try {
-                    const currentQuality = this.youtubePlayer.getPlaybackQuality();
-                    this.youtubeCurrentQuality = qualityMap[currentQuality] || qualityMap['auto'];
-                    this.debugLog('📊 Current quality after set:', currentQuality, '(', this.youtubeCurrentQuality?.label, ')');
-                    if (currentQuality === qualityLevel) {
-                        this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || 'requested quality'}`);
-                        this.debugLog('✅ Quality successfully changed to:', qualityLevel);
-                    }
-                    else {
-                        this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || currentQuality}`);
-                        this.debugLog('⚠️ Requested quality:', qualityLevel, '| Actual quality:', currentQuality, '(YouTube may have optimized)');
-                    }
-                    this.updateQualityBadge();
-                    this.updateSettingsMenu();
-                }
-                catch (verifyError) {
-                    this.debugWarn('Could not verify YouTube quality:', verifyError);
-                }
-            }, 1000);
-        }
-        catch (error) {
-            this.debugWarn('❌ Could not set YouTube quality:', error);
-            this.showNotification('Quality control limited on YouTube');
-        }
-    }
-    updateQualityBadge() {
-        const qualityBadge = document.getElementById('uvf-quality-badge');
-        if (!qualityBadge)
-            return;
-        if (this.youtubePlayer && this.youtubePlayerReady && this.youtubeCurrentQuality) {
-            qualityBadge.textContent = this.youtubeCurrentQuality.label || 'AUTO';
-            this.debugLog('Updated quality badge for YouTube:', this.youtubeCurrentQuality.label);
-        }
-        else if (this.currentQualityIndex >= 0 && this.qualities[this.currentQualityIndex]) {
-            const quality = this.qualities[this.currentQualityIndex];
-            qualityBadge.textContent = quality.label || 'HD';
-            this.debugLog('Updated quality badge for standard video:', quality.label);
-        }
-        else {
-            qualityBadge.textContent = 'AUTO';
-        }
-    }
     startYouTubeTimeTracking() {
         if (this.youtubeTimeTrackingInterval) {
             clearInterval(this.youtubeTimeTrackingInterval);
         }
-        let qualityCheckCounter = 0;
         this.youtubeTimeTrackingInterval = setInterval(() => {
             if (this.youtubePlayer && this.youtubePlayerReady) {
                 try {
@@ -1269,12 +1216,6 @@ export class WebPlayer extends BasePlayer {
                     this.state.currentTime = currentTime || 0;
                     this.state.duration = duration || 0;
                     this.state.bufferedPercentage = buffered || 0;
-                    qualityCheckCounter++;
-                    if (qualityCheckCounter >= 40 && this.youtubeAvailableQualities.length <= 1) {
-                        this.debugLog('Periodic YouTube quality check triggered');
-                        this.extractYouTubeAvailableQualities();
-                        qualityCheckCounter = 0;
-                    }
                     this.updateYouTubeProgressBar(currentTime, duration, buffered);
                     this.emit('onTimeUpdate', this.state.currentTime);
                     this.emit('onProgress', this.state.bufferedPercentage);
@@ -8136,18 +8077,13 @@ export class WebPlayer extends BasePlayer {
     }
     setQualityByLabel(quality) {
         if (this.youtubePlayer && this.youtubePlayerReady) {
-            this.setYouTubeQuality(quality);
+            this.showShortcutIndicator('Quality control not available for YouTube');
             document.querySelectorAll('.quality-option').forEach(option => {
                 option.classList.remove('active');
-                if (option.dataset.quality === quality) {
+                if (option.dataset.quality === 'auto') {
                     option.classList.add('active');
                 }
             });
-            const qualityBadge = document.getElementById('uvf-quality-badge');
-            if (qualityBadge) {
-                const qualityOption = this.youtubeAvailableQualities.find(q => q.value === quality);
-                qualityBadge.textContent = qualityOption ? qualityOption.label : 'AUTO';
-            }
             return;
         }
         const qualityBadge = document.getElementById('uvf-quality-badge');
@@ -8448,13 +8384,8 @@ export class WebPlayer extends BasePlayer {
         </div>`;
         }
         if (this.settingsConfig.quality && this.availableQualities.length > 0) {
-            this.debugLog('🎛️ Building quality menu with', this.availableQualities.length, 'qualities:', this.availableQualities.map(q => q.label));
-            const qualityForDisplay = this.youtubePlayer && this.youtubePlayerReady && this.youtubeCurrentQuality
-                ? this.youtubeCurrentQuality.value
-                : this.currentQuality;
-            const currentQuality = this.availableQualities.find(q => q.value === qualityForDisplay);
+            const currentQuality = this.availableQualities.find(q => q.value === this.currentQuality);
             const currentQualityLabel = currentQuality ? currentQuality.label : 'Auto';
-            this.debugLog('🎛️ Current quality for display:', qualityForDisplay, '(', currentQualityLabel, ')');
             menuHTML += `
         <div class="uvf-accordion-item">
           <div class="uvf-accordion-header" data-section="quality">
@@ -8471,10 +8402,7 @@ export class WebPlayer extends BasePlayer {
           </div>
           <div class="uvf-accordion-content" data-section="quality">`;
             this.availableQualities.forEach(quality => {
-                const qualityValue = this.youtubePlayer && this.youtubePlayerReady && this.youtubeCurrentQuality
-                    ? this.youtubeCurrentQuality.value
-                    : this.currentQuality;
-                const isActive = quality.value === qualityValue ? 'active' : '';
+                const isActive = quality.value === this.currentQuality ? 'active' : '';
                 const isPremium = this.isQualityPremium(quality);
                 const isLocked = isPremium && !this.isPremiumUser();
                 const qualityHeight = quality.height || 0;
@@ -8524,20 +8452,9 @@ export class WebPlayer extends BasePlayer {
         this.debugLog('Settings event listeners setup complete');
     }
     detectAvailableQualities() {
-        const isYouTube = this.youtubePlayer && this.youtubePlayerReady && this.youtubeAvailableQualities.length > 0;
-        this.availableQualities = [];
+        this.availableQualities = [{ value: 'auto', label: 'Auto' }];
         let detectedQualities = [];
-        if (isYouTube) {
-            detectedQualities = this.youtubeAvailableQualities.map(q => ({
-                value: q.value,
-                label: q.label,
-                height: q.height
-            }));
-            this.debugLog('Using YouTube qualities:', detectedQualities);
-            this.availableQualities = detectedQualities;
-            return;
-        }
-        else if (this.hls && this.hls.levels) {
+        if (this.hls && this.hls.levels) {
             this.hls.levels.forEach((level, index) => {
                 if (level.height) {
                     detectedQualities.push({
@@ -8782,11 +8699,6 @@ export class WebPlayer extends BasePlayer {
     }
     setQualityFromSettings(quality) {
         this.currentQuality = quality;
-        if (this.youtubePlayer && this.youtubePlayerReady) {
-            this.setYouTubeQuality(quality);
-            this.debugLog(`YouTube quality set to ${quality}`);
-            return;
-        }
         if (quality === 'auto') {
             if (this.hls) {
                 if (this.qualityFilter) {