unified-video-framework 1.4.248 → 1.4.250

package/packages/web/src/WebPlayer.ts

@@ -1115,11 +1115,15 @@ export class WebPlayer extends BasePlayer {
       if (this.video && metadata.thumbnail) {
         this.video.poster = metadata.thumbnail;
       }
+      
+      // Update metadata UI immediately with YouTube title and thumbnail
+      this.updateMetadataUI();
 
       // Create YouTube iframe player with custom controls integration
       await this.createYouTubePlayer(videoId);
       
       this.debugLog('✅ YouTube video loaded successfully');
+      this.debugLog('YouTube video title:', metadata.title);
     } catch (error) {
       this.debugError('Failed to load YouTube video:', error);
       throw new Error(`YouTube video loading failed: ${error}`);
@@ -1242,6 +1246,9 @@ export class WebPlayer extends BasePlayer {
       if (this.config.muted) {
         this.youtubePlayer.mute();
       }
+      
+      // Extract available YouTube qualities
+      this.extractYouTubeAvailableQualities();
     }
 
     // Start time tracking
@@ -1337,6 +1344,114 @@ export class WebPlayer extends BasePlayer {
   }
 
   private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
+  private youtubeAvailableQualities: any[] = [];
+  private youtubeCurrentQuality: any = null;
+
+  /**
+   * Extract available YouTube video qualities
+   */
+  private extractYouTubeAvailableQualities(): void {
+    if (!this.youtubePlayer) return;
+    
+    try {
+      const availableQualityLevels = this.youtubePlayer.getAvailableQualityLevels();
+      this.debugLog('YouTube available quality levels:', availableQualityLevels);
+      
+      // Map YouTube quality levels to standard labels
+      const qualityMap: Record<string, any> = {
+        '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 = [];
+      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 });
+      
+      this.debugLog('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 settings menu to show YouTube qualities
+      this.updateSettingsMenu();
+      
+    } catch (error) {
+      this.debugWarn('Could not extract YouTube qualities:', error);
+    }
+  }
+  
+  /**
+   * Set YouTube video quality
+   */
+  private setYouTubeQuality(qualityLevel: string): void {
+    if (!this.youtubePlayer) return;
+    
+    try {
+      const qualityMap: Record<string, any> = {
+        '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);
+      
+      // Try to set the quality
+      this.youtubePlayer.setPlaybackQuality(qualityLevel);
+      this.debugLog('✅ setPlaybackQuality called for:', qualityLevel);
+      
+      // 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
+          if (currentQuality === qualityLevel) {
+            this.showNotification(`Quality changed to ${qualityMap[currentQuality]?.label || 'requested quality'}`);
+            this.debugLog('✅ Quality successfully changed to:', qualityLevel);
+          } else {
+            this.showNotification(`Quality set to ${qualityMap[currentQuality]?.label || currentQuality} (YouTube optimized)`);
+            this.debugLog('⚠️ Requested quality:', qualityLevel, '| Actual quality:', currentQuality, '(YouTube may have optimized)');
+          }
+          
+          // 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');
+    }
+  }
 
   private startYouTubeTimeTracking(): void {
     if (this.youtubeTimeTrackingInterval) {
@@ -9071,12 +9186,13 @@ export class WebPlayer extends BasePlayer {
   private setQualityByLabel(quality: string): void {
     // Handle YouTube player
     if (this.youtubePlayer && this.youtubePlayerReady) {
-      // YouTube quality is limited - show notification
-      this.showShortcutIndicator('Quality control not available for YouTube');
-      // Update UI to reflect current quality
+      // Set YouTube quality directly
+      this.setYouTubeQuality(quality);
+      
+      // Update UI to reflect selection
       document.querySelectorAll('.quality-option').forEach(option => {
         option.classList.remove('active');
-        if ((option as HTMLElement).dataset.quality === 'auto') {
+        if ((option as HTMLElement).dataset.quality === quality) {
           option.classList.add('active');
         }
       });
@@ -9380,7 +9496,11 @@ export class WebPlayer extends BasePlayer {
 
     // Quality Accordion Section (only if enabled in config and qualities detected)
     if (this.settingsConfig.quality && this.availableQualities.length > 0) {
-      const currentQuality = this.availableQualities.find(q => q.value === this.currentQuality);
+      // 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 currentQualityLabel = currentQuality ? currentQuality.label : 'Auto';
       
       menuHTML += `
@@ -9400,7 +9520,11 @@ export class WebPlayer extends BasePlayer {
           <div class="uvf-accordion-content" data-section="quality">`;
       
       this.availableQualities.forEach(quality => {
-        const isActive = quality.value === this.currentQuality ? 'active' : '';
+        // 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 isPremium = this.isQualityPremium(quality);
         const isLocked = isPremium && !this.isPremiumUser();
         const qualityHeight = (quality as any).height || 0;
@@ -9468,10 +9592,20 @@ export class WebPlayer extends BasePlayer {
    * Detect available video qualities from different sources
    */
   private detectAvailableQualities(): void {
-    this.availableQualities = [{ value: 'auto', label: 'Auto' }];
+    // Don't add default 'Auto' for YouTube - it's already included in youtubeAvailableQualities
+    const isYouTube = this.youtubePlayer && this.youtubePlayerReady && this.youtubeAvailableQualities.length > 0;
+    this.availableQualities = isYouTube ? [] : [{ value: 'auto', label: 'Auto' }];
     let detectedQualities: Array<{ value: string; label: string; height?: number }> = [];
 
-    if (this.hls && this.hls.levels) {
+    // YouTube qualities
+    if (isYouTube) {
+      detectedQualities = this.youtubeAvailableQualities.map(q => ({
+        value: q.value,
+        label: q.label,
+        height: q.height
+      }));
+      this.debugLog('Using YouTube qualities:', detectedQualities);
+    } else if (this.hls && this.hls.levels) {
       // HLS qualities
       this.hls.levels.forEach((level: any, index: number) => {
         if (level.height) {
@@ -9843,6 +9977,13 @@ 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) {