unified-video-framework 1.4.254 → 1.4.255

package/packages/web/src/WebPlayer.ts

@@ -1550,9 +1550,44 @@ 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);
+      // 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(() => {
@@ -1562,12 +1597,13 @@ export class WebPlayer extends BasePlayer {
           
           this.debugLog('📊 Current quality after set:', currentQuality, '(', this.youtubeCurrentQuality?.label, ')');
           
-          // Show notification with result
+          // Show notification with result - be more user-friendly
           if (currentQuality === qualityLevel) {
-            this.showNotification(`Quality changed to ${qualityMap[currentQuality]?.label || 'requested quality'}`);
+            this.showNotification(`Quality: ${qualityMap[currentQuality]?.label || 'requested quality'}`);
             this.debugLog('✅ Quality successfully changed to:', qualityLevel);
           } else {
-            this.showNotification(`Quality set to ${qualityMap[currentQuality]?.label || currentQuality} (YouTube optimized)`);
+            // 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)');
           }
           
@@ -4798,7 +4834,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 */