unified-video-framework 1.4.251 → 1.4.253

package/packages/web/src/WebPlayer.ts

@@ -1255,6 +1255,9 @@ export class WebPlayer extends BasePlayer {
       // Extract available YouTube qualities
       this.extractYouTubeAvailableQualities();
       
+      // Try to get video title from YouTube API
+      this.getYouTubeVideoTitle();
+      
       // Update metadata UI and settings after player is ready
       setTimeout(() => {
         this.updateMetadataUI();
@@ -1277,6 +1280,12 @@ export class WebPlayer extends BasePlayer {
         this.state.isPaused = false;
         this.state.isBuffering = false;
         this.updateYouTubeUI('playing');
+        
+        // Extract qualities when video starts playing
+        setTimeout(() => {
+          this.extractYouTubeAvailableQualities();
+        }, 1000);
+        
         this.emit('onPlay');
         break;
         
@@ -1291,6 +1300,12 @@ export class WebPlayer extends BasePlayer {
       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);
         break;
         
@@ -1305,6 +1320,11 @@ export class WebPlayer extends BasePlayer {
       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;
     }
   }
@@ -1354,19 +1374,91 @@ export class WebPlayer extends BasePlayer {
     });
   }
 
+  /**
+   * Get YouTube video title from the player API
+   */
+  private getYouTubeVideoTitle(): void {
+    if (!this.youtubePlayer || !this.youtubePlayerReady) return;
+    
+    try {
+      // Try to get video data from YouTube player
+      const videoData = this.youtubePlayer.getVideoData();
+      if (videoData && videoData.title) {
+        this.debugLog('Got YouTube title from player API:', videoData.title);
+        
+        // Update source metadata with the correct title
+        if (this.source && this.source.metadata) {
+          this.source.metadata.title = videoData.title;
+        }
+        
+        // Update UI immediately
+        this.updateMetadataUI();
+      }
+    } catch (error) {
+      this.debugWarn('Could not get YouTube video title from API:', error);
+      
+      // Fallback: Try to get from oembed API
+      this.getYouTubeVideoTitleFromOEmbed();
+    }
+  }
+  
+  /**
+   * Fallback method to get title from YouTube oembed API
+   */
+  private async getYouTubeVideoTitleFromOEmbed(): Promise<void> {
+    if (!this.source?.metadata?.videoId) return;
+    
+    try {
+      const videoId = this.source.metadata.videoId;
+      const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;
+      
+      const response = await fetch(oembedUrl);
+      if (response.ok) {
+        const data = await response.json();
+        if (data.title) {
+          this.debugLog('Got YouTube title from oembed API:', data.title);
+          
+          // Update source metadata
+          if (this.source && this.source.metadata) {
+            this.source.metadata.title = data.title;
+          }
+          
+          // Update UI
+          this.updateMetadataUI();
+        }
+      }
+    } catch (error) {
+      this.debugWarn('Could not get YouTube title from oembed API:', error);
+    }
+  }
+
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
   private youtubeAvailableQualities: any[] = [];
   private youtubeCurrentQuality: any = null;
 
   /**
-   * Extract available YouTube video qualities
+   * Extract available YouTube video qualities with retry logic
    */
-  private extractYouTubeAvailableQualities(): void {
-    if (!this.youtubePlayer) return;
+  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 available quality levels:', availableQualityLevels);
+      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> = {
@@ -1380,18 +1472,25 @@ export class WebPlayer extends BasePlayer {
       };
       
       this.youtubeAvailableQualities = [];
-      availableQualityLevels.forEach((qualityLevel: string) => {
-        // Skip 'auto' from YouTube API - we'll add it explicitly
-        if (qualityLevel === 'auto') return;
-        if (qualityMap[qualityLevel]) {
-          this.youtubeAvailableQualities.push(qualityMap[qualityLevel]);
-        }
-      });
       
-      // Always add auto quality option as the first item (exactly once)
-      this.youtubeAvailableQualities.unshift({ label: 'Auto', value: 'auto', height: 0 });
+      // Always add auto quality option first
+      this.youtubeAvailableQualities.push({ label: 'Auto', value: 'auto', height: 0 });
       
-      this.debugLog('Mapped YouTube qualities:', this.youtubeAvailableQualities);
+      // 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 {
@@ -1403,11 +1502,28 @@ export class WebPlayer extends BasePlayer {
         this.youtubeCurrentQuality = qualityMap['auto'];
       }
       
-      // Update settings menu to show YouTube qualities
-      this.updateSettingsMenu();
+      // 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);
+      }
     }
   }
   
@@ -1451,6 +1567,9 @@ export class WebPlayer extends BasePlayer {
             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) {
@@ -1463,12 +1582,36 @@ export class WebPlayer extends BasePlayer {
       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 startYouTubeTimeTracking(): void {
     if (this.youtubeTimeTrackingInterval) {
       clearInterval(this.youtubeTimeTrackingInterval);
     }
     
+    let qualityCheckCounter = 0;
+    
     this.youtubeTimeTrackingInterval = setInterval(() => {
       if (this.youtubePlayer && this.youtubePlayerReady) {
         try {
@@ -1480,6 +1623,14 @@ export class WebPlayer extends BasePlayer {
           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
+          }
+          
           // Update UI progress bar
           this.updateYouTubeProgressBar(currentTime, duration, buffered);
           
@@ -1968,12 +2119,27 @@ export class WebPlayer extends BasePlayer {
   private updateTimeTooltip(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const tooltip = document.getElementById('uvf-time-tooltip');
-    if (!progressBar || !tooltip || !this.video) return;
+    if (!progressBar || !tooltip) return;
+    
+    // Get duration from appropriate source
+    let duration = 0;
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      try {
+        duration = this.youtubePlayer.getDuration() || 0;
+      } catch (error) {
+        this.debugWarn('Error getting YouTube duration for tooltip:', error);
+        return;
+      }
+    } else if (this.video) {
+      duration = this.video.duration || 0;
+    }
+    
+    if (!duration || !isFinite(duration)) return;
     
     const rect = progressBar.getBoundingClientRect();
     const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
     const percent = (x / rect.width);
-    const time = percent * this.video.duration;
+    const time = percent * duration;
     
     // Update tooltip content and position
     tooltip.textContent = this.formatTime(time);
@@ -6789,7 +6955,7 @@ export class WebPlayer extends BasePlayer {
     const qualityBadge = document.createElement('div');
     qualityBadge.className = 'uvf-quality-badge';
     qualityBadge.id = 'uvf-quality-badge';
-    qualityBadge.textContent = 'HD';
+    qualityBadge.textContent = 'AUTO'; // Default to AUTO for better UX
     rightControls.appendChild(qualityBadge);
     
     // Settings button with menu (show only if enabled)
@@ -9539,6 +9705,8 @@ 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
@@ -9546,6 +9714,8 @@ export class WebPlayer extends BasePlayer {
       const currentQuality = this.availableQualities.find(q => q.value === qualityForDisplay);
       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">