unified-video-framework 1.4.250 → 1.4.252

package/packages/web/src/WebPlayer.ts

@@ -1122,6 +1122,11 @@ export class WebPlayer extends BasePlayer {
       // Create YouTube iframe player with custom controls integration
       await this.createYouTubePlayer(videoId);
       
+      // Force another metadata update after player creation
+      setTimeout(() => {
+        this.updateMetadataUI();
+      }, 1000);
+      
       this.debugLog('✅ YouTube video loaded successfully');
       this.debugLog('YouTube video title:', metadata.title);
     } catch (error) {
@@ -1249,6 +1254,15 @@ 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();
+        this.updateSettingsMenu();
+      }, 500);
     }
 
     // Start time tracking
@@ -1294,6 +1308,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;
     }
   }
@@ -1343,6 +1362,64 @@ 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;
@@ -1392,6 +1469,9 @@ export class WebPlayer extends BasePlayer {
         this.youtubeCurrentQuality = qualityMap['auto'];
       }
       
+      // Update quality badge with current YouTube quality
+      this.updateQualityBadge();
+      
       // Update settings menu to show YouTube qualities
       this.updateSettingsMenu();
       
@@ -1440,6 +1520,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) {
@@ -1452,6 +1535,28 @@ 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) {
@@ -1486,16 +1591,18 @@ export class WebPlayer extends BasePlayer {
     
     const percent = (currentTime / duration) * 100;
     
-    // Update progress filled
+    // Update progress filled (only if not dragging)
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     if (progressFilled && !this.isDragging) {
       progressFilled.style.width = percent + '%';
     }
     
-    // Update progress handle
+    // Update progress handle (only if not dragging)
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     if (progressHandle && !this.isDragging) {
       progressHandle.style.left = percent + '%';
+      // Remove dragging class if it was set
+      progressHandle.classList.remove('dragging');
     }
     
     // Update buffered progress
@@ -1504,8 +1611,13 @@ export class WebPlayer extends BasePlayer {
       progressBuffered.style.width = buffered + '%';
     }
     
-    // Update time display
-    this.updateTimeDisplay();
+    // Update time display with YouTube-specific times
+    const timeDisplay = document.getElementById('uvf-time-display');
+    if (timeDisplay) {
+      const currentTimeStr = this.formatTime(currentTime);
+      const durationStr = this.formatTime(duration);
+      timeDisplay.textContent = `${currentTimeStr} / ${durationStr}`;
+    }
   }
 
 
@@ -1950,12 +2062,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);
@@ -6771,7 +6898,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)
@@ -8128,12 +8255,27 @@ export class WebPlayer extends BasePlayer {
     const progressBar = document.querySelector('.uvf-progress-bar') as HTMLElement;
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
-    if (!progressBar || !this.video) return;
+    if (!progressBar) 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 seeking:', error);
+        return;
+      }
+    } else if (this.video) {
+      duration = this.video.duration;
+    } else {
+      this.debugWarn('No video source available for seeking');
+      return;
+    }
     
-    const duration = this.video.duration;
     // Validate duration before calculating seek time
     if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
-      this.debugWarn('Invalid video duration, cannot seek via progress bar');
+      this.debugWarn('Invalid video duration, cannot seek via progress bar:', duration);
       return;
     }
     
@@ -8148,21 +8290,24 @@ export class WebPlayer extends BasePlayer {
       return;
     }
     
+    this.debugLog('Seeking to position:', time, 'seconds (', Math.round(percent), '%)');
+    
     // Update UI immediately for responsive feedback
-    if (progressFilled) {
+    if (progressFilled && !this.isDragging) {
       progressFilled.style.width = percent + '%';
     }
-    if (progressHandle) {
+    if (progressHandle && !this.isDragging) {
       progressHandle.style.left = percent + '%';
-      // Add dragging class for visual feedback
-      if (this.isDragging) {
-        progressHandle.classList.add('dragging');
-      } else {
-        progressHandle.classList.remove('dragging');
-      }
+      progressHandle.classList.add('dragging');
     }
     
+    // Perform the actual seek
     this.seek(time);
+    
+    // For YouTube, provide immediate visual feedback since API might be delayed
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.emit('onSeeking');
+    }
   }
 
   private formatTime(seconds: number): string {
@@ -9196,6 +9341,13 @@ export class WebPlayer extends BasePlayer {
           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;
     }
     
@@ -9592,9 +9744,9 @@ export class WebPlayer extends BasePlayer {
    * Detect available video qualities from different sources
    */
   private detectAvailableQualities(): void {
-    // Don't add default 'Auto' for YouTube - it's already included in youtubeAvailableQualities
+    // Check if we're using YouTube and have detected qualities
     const isYouTube = this.youtubePlayer && this.youtubePlayerReady && this.youtubeAvailableQualities.length > 0;
-    this.availableQualities = isYouTube ? [] : [{ value: 'auto', label: 'Auto' }];
+    this.availableQualities = [];
     let detectedQualities: Array<{ value: string; label: string; height?: number }> = [];
 
     // YouTube qualities
@@ -9605,6 +9757,8 @@ export class WebPlayer extends BasePlayer {
         height: q.height
       }));
       this.debugLog('Using YouTube qualities:', detectedQualities);
+      this.availableQualities = detectedQualities;
+      return; // Early return for YouTube
     } else if (this.hls && this.hls.levels) {
       // HLS qualities
       this.hls.levels.forEach((level: any, index: number) => {