unified-video-framework 1.4.254 → 1.4.256

package/packages/web/src/WebPlayer.ts

@@ -1550,40 +1550,162 @@ export class WebPlayer extends BasePlayer {
       
       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(() => {
+      // 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 {
-          const currentQuality = this.youtubePlayer.getPlaybackQuality();
-          this.youtubeCurrentQuality = qualityMap[currentQuality] || qualityMap['auto'];
+          // 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 with seekTo trick (most aggressive)
+        try {
+          const currentTime = this.youtubePlayer.getCurrentTime();
+          const wasPlaying = this.youtubePlayer.getPlayerState() === window.YT.PlayerState.PLAYING;
           
-          this.debugLog('📊 Current quality after set:', currentQuality, '(', this.youtubeCurrentQuality?.label, ')');
+          // Seek to current time + 0.1 seconds to force reload with new quality
+          this.youtubePlayer.seekTo(currentTime + 0.1, true);
           
-          // Show notification with result
-          if (currentQuality === qualityLevel) {
-            this.showNotification(`Quality changed to ${qualityMap[currentQuality]?.label || 'requested quality'}`);
-            this.debugLog('✅ Quality successfully changed to:', qualityLevel);
+          // Set quality immediately after seek
+          setTimeout(() => {
+            this.youtubePlayer.setPlaybackQuality(qualityLevel);
+            
+            // Seek back to original time
+            setTimeout(() => {
+              this.youtubePlayer.seekTo(currentTime, true);
+              if (!wasPlaying) {
+                this.youtubePlayer.pauseVideo();
+              }
+            }, 100);
+          }, 50);
+          
+          this.debugLog('🔄 Applied seekTo trick for quality change');
+        } catch (e) {
+          this.debugWarn('Force quality change with seekTo trick failed:', e);
+        }
+      }
+      
+      // Verify quality was changed after multiple delays with retry logic
+      this.verifyYouTubeQualityChange(qualityLevel, qualityMap, 0);
+    } catch (error) {
+      this.debugWarn('❌ Could not set YouTube quality:', error);
+      this.showNotification('Quality control limited on YouTube');
+    }
+  }
+  
+  /**
+   * Verify YouTube quality change with retry logic
+   */
+  private verifyYouTubeQualityChange(requestedQuality: string, qualityMap: Record<string, any>, attempt: number): void {
+    const maxAttempts = 3;
+    const delays = [500, 1500, 3000]; // Progressive delays
+    
+    setTimeout(() => {
+      try {
+        const currentQuality = this.youtubePlayer.getPlaybackQuality();
+        this.youtubeCurrentQuality = qualityMap[currentQuality] || qualityMap['auto'];
+        
+        this.debugLog('🔍 Quality verification attempt', attempt + 1, '- Requested:', requestedQuality, '| Current:', currentQuality);
+        
+        if (currentQuality === requestedQuality || attempt >= maxAttempts - 1) {
+          // Success or final attempt
+          if (currentQuality === requestedQuality) {
+            this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || 'requested quality'}`);
+            this.debugLog('✅ Quality successfully changed to:', requestedQuality);
           } else {
-            this.showNotification(`Quality set to ${qualityMap[currentQuality]?.label || currentQuality} (YouTube optimized)`);
-            this.debugLog('⚠️ Requested quality:', qualityLevel, '| Actual quality:', currentQuality, '(YouTube may have optimized)');
+            // Try one more aggressive method on final attempt
+            if (attempt === maxAttempts - 1) {
+              this.debugLog('🔥 Final attempt: Trying loadVideoById method');
+              try {
+                const videoData = this.youtubePlayer.getVideoData();
+                const currentTime = this.youtubePlayer.getCurrentTime();
+                
+                // Reload video at current time with suggested quality
+                this.youtubePlayer.loadVideoById({
+                  videoId: videoData.video_id,
+                  startSeconds: currentTime,
+                  suggestedQuality: requestedQuality
+                });
+                
+                this.debugLog('🔄 Video reloaded with suggested quality:', requestedQuality);
+              } catch (e) {
+                this.debugWarn('loadVideoById method failed:', e);
+              }
+            }
+            
+            this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || currentQuality}`);
+            this.debugLog('⚠️ Quality change may not have worked. Requested:', requestedQuality, '| Current:', currentQuality);
           }
           
-          // Update quality badge
+          // Update UI regardless
           this.updateQualityBadge();
+          this.updateSettingsMenu();
+        } else {
+          // Retry with more aggressive method
+          this.debugLog('🔁 Quality not changed, retrying with method', attempt + 2);
+          this.retryYouTubeQualityChange(requestedQuality, qualityMap, attempt + 1);
           
-          // Update settings menu UI
+          // Still verify after delay
+          this.verifyYouTubeQualityChange(requestedQuality, qualityMap, attempt + 1);
+        }
+      } catch (verifyError) {
+        this.debugWarn('Could not verify YouTube quality:', verifyError);
+        if (attempt === maxAttempts - 1) {
+          this.showNotification('Quality change attempted');
+          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');
+      }
+    }, delays[attempt] || 1000);
+  }
+  
+  /**
+   * Retry YouTube quality change with alternative methods
+   */
+  private retryYouTubeQualityChange(qualityLevel: string, qualityMap: Record<string, any>, attempt: number): void {
+    try {
+      if (attempt === 1) {
+        // Second attempt: Try with video restart
+        this.debugLog('🔄 Retry attempt 1: Using cueVideoById');
+        const videoData = this.youtubePlayer.getVideoData();
+        const currentTime = this.youtubePlayer.getCurrentTime();
+        
+        this.youtubePlayer.cueVideoById({
+          videoId: videoData.video_id,
+          startSeconds: currentTime,
+          suggestedQuality: qualityLevel
+        });
+        
+        setTimeout(() => this.youtubePlayer.playVideo(), 100);
+        
+      } else if (attempt === 2) {
+        // Third attempt: Multiple sequential calls
+        this.debugLog('🔄 Retry attempt 2: Multiple sequential calls');
+        
+        for (let i = 0; i < 3; i++) {
+          setTimeout(() => {
+            this.youtubePlayer.setPlaybackQuality(qualityLevel);
+          }, i * 100);
+        }
+      }
+    } catch (e) {
+      this.debugWarn('Retry attempt', attempt, 'failed:', e);
     }
   }
   
@@ -4798,7 +4920,29 @@ export class WebPlayer extends BasePlayer {
       }
       
       .uvf-accordion-item.expanded .uvf-accordion-content {
-        max-height: 250px;
+        max-height: 350px;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+      
+      /* Special handling for quality accordion with many options */
+      .uvf-accordion-item.expanded .uvf-accordion-content[data-section="quality"] {
+        max-height: 400px;
+      }
+      
+      /* Scrollbar styling for accordion content */
+      .uvf-accordion-content::-webkit-scrollbar {
+        width: 4px;
+      }
+      .uvf-accordion-content::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .uvf-accordion-content::-webkit-scrollbar-thumb {
+        background: rgba(255,255,255,0.3);
+        border-radius: 2px;
+      }
+      .uvf-accordion-content::-webkit-scrollbar-thumb:hover {
+        background: rgba(255,255,255,0.5);
       }
       
       /* Settings options within accordion */