unified-video-framework 1.4.255 → 1.4.257

package/packages/web/src/WebPlayer.ts

@@ -1184,7 +1184,7 @@ export class WebPlayer extends BasePlayer {
       width: '100%',
       height: '100%',
       playerVars: {
-        controls: 0,        // Hide YouTube controls
+        controls: this.config.youtubeNativeControls !== false ? 1 : 0, // Native controls enabled by default
         disablekb: 0,      // Allow keyboard controls
         fs: 0,             // Hide fullscreen button
         iv_load_policy: 3, // Hide annotations
@@ -1252,16 +1252,16 @@ export class WebPlayer extends BasePlayer {
         this.youtubePlayer.mute();
       }
       
-      // Extract available YouTube qualities
-      this.extractYouTubeAvailableQualities();
+      // Detect if YouTube video is Live and handle controls
+      this.detectYouTubeLiveStatus();
       
       // Try to get video title from YouTube API
       this.getYouTubeVideoTitle();
       
-      // Update metadata UI and settings after player is ready
+      // Update metadata UI and controls visibility after player is ready
       setTimeout(() => {
         this.updateMetadataUI();
-        this.updateSettingsMenu();
+        this.updateControlsVisibility();
       }, 500);
     }
 
@@ -1277,16 +1277,10 @@ export class WebPlayer extends BasePlayer {
     switch (state) {
       case window.YT.PlayerState.PLAYING:
         this.state.isPlaying = true;
-        this.state.isPaused = false;
-        this.state.isBuffering = false;
-        this.updateYouTubeUI('playing');
-        
-        // Extract qualities when video starts playing
-        setTimeout(() => {
-          this.extractYouTubeAvailableQualities();
-        }, 1000);
-        
-        this.emit('onPlay');
+         this.state.isPaused = false;
+         this.state.isBuffering = false;
+         this.updateYouTubeUI('playing');
+         this.emit('onPlay');
         break;
         
       case window.YT.PlayerState.PAUSED:
@@ -1297,16 +1291,10 @@ export class WebPlayer extends BasePlayer {
         this.emit('onPause');
         break;
         
-      case window.YT.PlayerState.BUFFERING:
-        this.state.isBuffering = true;
-        this.updateYouTubeUI('buffering');
-        
-        // Try to extract qualities during buffering as well
-        setTimeout(() => {
-          this.extractYouTubeAvailableQualities();
-        }, 500);
-        
-        this.emit('onBuffering', true);
+       case window.YT.PlayerState.BUFFERING:
+         this.state.isBuffering = true;
+         this.updateYouTubeUI('buffering');
+         this.emit('onBuffering', true);
         break;
         
       case window.YT.PlayerState.ENDED:
@@ -1317,15 +1305,16 @@ export class WebPlayer extends BasePlayer {
         this.emit('onEnded');
         break;
         
-      case window.YT.PlayerState.CUED:
-        this.state.duration = this.youtubePlayer.getDuration();
-        this.updateYouTubeUI('cued');
-        
-        // Try to get video title when video is cued
-        setTimeout(() => {
-          this.getYouTubeVideoTitle();
-        }, 100);
-        break;
+       case window.YT.PlayerState.CUED:
+         this.state.duration = this.youtubePlayer.getDuration();
+         this.updateYouTubeUI('cued');
+         
+         // Re-check Live status when video is cued
+         setTimeout(() => {
+           this.detectYouTubeLiveStatus();
+           this.updateControlsVisibility();
+         }, 500);
+         break;
     }
   }
 
@@ -1402,6 +1391,159 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * Detect if YouTube video is Live
+   */
+  private detectYouTubeLiveStatus(): void {
+    if (!this.youtubePlayer || !this.youtubePlayerReady) return;
+    
+    try {
+      const videoData = this.youtubePlayer.getVideoData();
+      this.isYouTubeLive = videoData?.isLive || false;
+      
+      // Auto-enable native controls for all YouTube content by default, unless explicitly disabled
+      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);
+      // Fallback: check duration - Live videos typically have duration = 0
+      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);
+      }
+    }
+  }
+  
+  /**
+   * Update controls visibility based on YouTube Live status and config
+   */
+  private updateControlsVisibility(): void {
+    const controlsContainer = document.getElementById('uvf-controls-container');
+    if (!controlsContainer) return;
+    
+    if (this.youtubePlayer && this.useYouTubeNativeControls) {
+      // Hide custom controls and show YouTube native controls
+      controlsContainer.style.display = 'none';
+      
+      // Re-create YouTube player with native controls if needed
+      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 {
+      // Show custom controls
+      controlsContainer.style.display = 'flex';
+      this.debugLog('✅ Custom controls enabled for YouTube video');
+    }
+  }
+  
+  /**
+   * Recreate YouTube player with native controls enabled
+   */
+  private recreateYouTubePlayerWithNativeControls(): void {
+    if (!this.source?.metadata?.videoId) return;
+    
+    const videoId = this.source.metadata.videoId;
+    const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
+    
+    // Find the container
+    const container = this.playerWrapper || this.video?.parentElement;
+    if (!container) return;
+    
+    // Destroy current player
+    if (this.youtubePlayer) {
+      this.youtubePlayer.destroy();
+    }
+    
+    // Remove existing iframe container
+    const existingContainer = container.querySelector(`#youtube-player-${videoId}`);
+    if (existingContainer) {
+      existingContainer.remove();
+    }
+    
+    // Create new iframe container
+    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);
+    
+    // Create new player with native controls
+    this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
+      videoId: videoId,
+      width: '100%',
+      height: '100%',
+      playerVars: {
+        autoplay: this.config.autoPlay ? 1 : 0,
+        controls: 1, // Enable native controls
+        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: any) => this.onYouTubePlayerStateChange(event),
+        onError: (event: any) => this.onYouTubePlayerError(event)
+      }
+    });
+  }
+  
+  /**
+   * Toggle between native and custom YouTube controls
+   */
+  public toggleYouTubeControls(useNative: boolean = !this.useYouTubeNativeControls): void {
+    if (!this.youtubePlayer) {
+      this.debugWarn('Cannot toggle YouTube controls - no YouTube player active');
+      return;
+    }
+    
+    this.useYouTubeNativeControls = useNative;
+    this.config.youtubeNativeControls = useNative; // Update config
+    this.updateControlsVisibility();
+    
+    this.debugLog('YouTube controls toggled:', {
+      useNative: this.useYouTubeNativeControls,
+      isLive: this.isYouTubeLive
+    });
+    
+    // Show notification
+    this.showNotification(
+      `YouTube Controls: ${this.useYouTubeNativeControls ? 'Native' : 'Custom'}`
+    );
+  }
+  
   /**
    * Fallback method to get title from YouTube oembed API
    */
@@ -1433,243 +1575,24 @@ export class WebPlayer extends BasePlayer {
   }
 
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
-  private youtubeAvailableQualities: any[] = [];
-  private youtubeCurrentQuality: any = null;
-
-  /**
-   * Extract available YouTube video qualities with retry logic
-   */
-  private extractYouTubeAvailableQualities(retryCount: number = 0): void {
-    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 no qualities detected and we haven't retried too much, retry after a delay
-      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;
-      }
-      
-      // Map YouTube quality levels to standard labels
-      const qualityMap: Record<string, any> = {
-        '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 = [];
-      
-      // Always add auto quality option first
-      this.youtubeAvailableQualities.push({ label: 'Auto', value: 'auto', height: 0 });
-      
-      // Add detected qualities, filtering out 'auto' since we already added it
-      if (availableQualityLevels && availableQualityLevels.length > 0) {
-        availableQualityLevels.forEach((qualityLevel: string) => {
-          if (qualityLevel !== 'auto' && qualityMap[qualityLevel]) {
-            this.youtubeAvailableQualities.push(qualityMap[qualityLevel]);
-          }
-        });
-        
-        // Sort qualities by height (descending, excluding auto)
-        const autoQuality = this.youtubeAvailableQualities.shift(); // Remove auto temporarily
-        this.youtubeAvailableQualities.sort((a, b) => (b.height || 0) - (a.height || 0));
-        if (autoQuality) this.youtubeAvailableQualities.unshift(autoQuality); // Add auto back at beginning
-      }
-      
-      this.debugLog('✅ Successfully mapped YouTube qualities:', this.youtubeAvailableQualities);
-      
-      // Get current quality
-      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'];
-      }
-      
-      // Update detected qualities to include YouTube qualities
-      this.detectAvailableQualities();
-      
-      this.debugLog('🚀 YouTube qualities successfully detected! Available qualities now:', this.availableQualities.length);
-      
-      // Update quality badge with current YouTube quality
-      this.updateQualityBadge();
-      
-      // Force settings menu refresh with new qualities
-      setTimeout(() => {
-        this.debugLog('🔄 Force refreshing settings menu with YouTube qualities');
-        this.updateSettingsMenu();
-      }, 100);
-      
-    } catch (error) {
-      this.debugWarn('Could not extract YouTube qualities:', error);
-      // Retry if we haven't tried too many times
-      if (retryCount < 3) {
-        setTimeout(() => {
-          this.extractYouTubeAvailableQualities(retryCount + 1);
-        }, 2000);
-      }
-    }
-  }
-  
-  /**
-   * Set YouTube video quality
-   */
-  private setYouTubeQuality(qualityLevel: string): void {
-    if (!this.youtubePlayer) return;
-    
-    try {
-      const qualityMap: Record<string, any> = {
-        '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);
-      
-      // Multiple approaches to force YouTube quality change
-      if (qualityLevel === 'auto') {
-        // For auto, just use setPlaybackQuality
-        this.youtubePlayer.setPlaybackQuality(qualityLevel);
-      } else {
-        // For specific qualities, try multiple methods
-        try {
-          // Method 1: Set quality range (most effective for forcing specific quality)
-          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 {
-          // Method 2: Standard quality setting
-          this.youtubePlayer.setPlaybackQuality(qualityLevel);
-          this.debugLog('✅ setPlaybackQuality called for:', qualityLevel);
-        } catch (e) {
-          this.debugWarn('setPlaybackQuality failed:', e);
-        }
-        
-        // Method 3: Force quality by pausing and resuming (more aggressive)
-        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);
-        }
-      }
-      
-      // Verify quality was changed after a delay
-      setTimeout(() => {
-        try {
-          const currentQuality = this.youtubePlayer.getPlaybackQuality();
-          this.youtubeCurrentQuality = qualityMap[currentQuality] || qualityMap['auto'];
-          
-          this.debugLog('📊 Current quality after set:', currentQuality, '(', this.youtubeCurrentQuality?.label, ')');
-          
-          // Show notification with result - be more user-friendly
-          if (currentQuality === qualityLevel) {
-            this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || 'requested quality'}`);
-            this.debugLog('✅ Quality successfully changed to:', qualityLevel);
-          } else {
-            // Don't show "YouTube optimized" message to users - it's confusing
-            this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || currentQuality}`);
-            this.debugLog('⚠️ Requested quality:', qualityLevel, '| Actual quality:', currentQuality, '(YouTube may have optimized)');
-          }
-          
-          // Update quality badge
-          this.updateQualityBadge();
-          
-          // Update settings menu UI
-          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');
-    }
-  }
-  
-  /**
-   * Update quality badge with current quality
-   */
-  private updateQualityBadge(): void {
-    const qualityBadge = document.getElementById('uvf-quality-badge');
-    if (!qualityBadge) return;
-    
-    // For YouTube, use YouTube current quality
-    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]) {
-      // For other sources, use current quality
-      const quality = this.qualities[this.currentQualityIndex];
-      qualityBadge.textContent = quality.label || 'HD';
-      this.debugLog('Updated quality badge for standard video:', quality.label);
-    } else {
-      // Default
-      qualityBadge.textContent = 'AUTO';
-    }
-  }
+  private isYouTubeLive: boolean = false;
+  private useYouTubeNativeControls: boolean = false;
 
   private startYouTubeTimeTracking(): void {
     if (this.youtubeTimeTrackingInterval) {
       clearInterval(this.youtubeTimeTrackingInterval);
     }
     
-    let qualityCheckCounter = 0;
-    
-    this.youtubeTimeTrackingInterval = setInterval(() => {
-      if (this.youtubePlayer && this.youtubePlayerReady) {
-        try {
-          const currentTime = this.youtubePlayer.getCurrentTime();
-          const duration = this.youtubePlayer.getDuration();
-          const buffered = this.youtubePlayer.getVideoLoadedFraction() * 100;
-          
-          this.state.currentTime = currentTime || 0;
-          this.state.duration = duration || 0;
-          this.state.bufferedPercentage = buffered || 0;
-          
-          // Check for qualities periodically (every 10 seconds) if we don't have them yet
-          qualityCheckCounter++;
-          if (qualityCheckCounter >= 40 && this.youtubeAvailableQualities.length <= 1) { // 40 * 250ms = 10s
-            this.debugLog('Periodic YouTube quality check triggered');
-            this.extractYouTubeAvailableQualities();
-            qualityCheckCounter = 0; // Reset counter
-          }
+     this.youtubeTimeTrackingInterval = setInterval(() => {
+       if (this.youtubePlayer && this.youtubePlayerReady) {
+         try {
+           const currentTime = this.youtubePlayer.getCurrentTime();
+           const duration = this.youtubePlayer.getDuration();
+           const buffered = this.youtubePlayer.getVideoLoadedFraction() * 100;
+           
+           this.state.currentTime = currentTime || 0;
+           this.state.duration = duration || 0;
+           this.state.bufferedPercentage = buffered || 0;
           
           // Update UI progress bar
           this.updateYouTubeProgressBar(currentTime, duration, buffered);
@@ -9450,23 +9373,15 @@ export class WebPlayer extends BasePlayer {
   private setQualityByLabel(quality: string): void {
     // Handle YouTube player
     if (this.youtubePlayer && this.youtubePlayerReady) {
-      // Set YouTube quality directly
-      this.setYouTubeQuality(quality);
-      
-      // Update UI to reflect selection
+      // YouTube quality is limited - show notification
+      this.showShortcutIndicator('Quality control not available for YouTube');
+      // Update UI to reflect current quality
       document.querySelectorAll('.quality-option').forEach(option => {
         option.classList.remove('active');
-        if ((option as HTMLElement).dataset.quality === quality) {
+        if ((option as HTMLElement).dataset.quality === 'auto') {
           option.classList.add('active');
         }
       });
-      
-      // Update quality badge
-      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;
     }
     
@@ -9767,17 +9682,9 @@ export class WebPlayer extends BasePlayer {
 
     // Quality Accordion Section (only if enabled in config and qualities detected)
     if (this.settingsConfig.quality && this.availableQualities.length > 0) {
-      this.debugLog('🎛️ Building quality menu with', this.availableQualities.length, 'qualities:', this.availableQualities.map(q => q.label));
-      
-      // For YouTube, use youtubeCurrentQuality; otherwise use currentQuality
-      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">
@@ -9795,11 +9702,7 @@ export class WebPlayer extends BasePlayer {
           <div class="uvf-accordion-content" data-section="quality">`;
       
       this.availableQualities.forEach(quality => {
-        // For YouTube, compare against youtubeCurrentQuality
-        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 as any).height || 0;
@@ -9867,22 +9770,10 @@ export class WebPlayer extends BasePlayer {
    * Detect available video qualities from different sources
    */
   private detectAvailableQualities(): void {
-    // Check if we're using YouTube and have detected qualities
-    const isYouTube = this.youtubePlayer && this.youtubePlayerReady && this.youtubeAvailableQualities.length > 0;
-    this.availableQualities = [];
+    this.availableQualities = [{ value: 'auto', label: 'Auto' }];
     let detectedQualities: Array<{ value: string; label: string; height?: number }> = [];
 
-    // YouTube qualities
-    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; // Early return for YouTube
-    } else if (this.hls && this.hls.levels) {
+    if (this.hls && this.hls.levels) {
       // HLS qualities
       this.hls.levels.forEach((level: any, index: number) => {
         if (level.height) {
@@ -10254,13 +10145,6 @@ export class WebPlayer extends BasePlayer {
   private setQualityFromSettings(quality: string): void {
     this.currentQuality = quality;
     
-    // Handle YouTube quality
-    if (this.youtubePlayer && this.youtubePlayerReady) {
-      this.setYouTubeQuality(quality);
-      this.debugLog(`YouTube quality set to ${quality}`);
-      return;
-    }
-    
     if (quality === 'auto') {
       // Enable auto quality with filter consideration
       if (this.hls) {