unified-video-framework 1.4.253 → 1.4.255

package/packages/web/src/WebPlayer.ts

@@ -1462,6 +1462,8 @@ export class WebPlayer extends BasePlayer {
       
       // Map YouTube quality levels to standard labels
       const qualityMap: Record<string, any> = {
+        'hd2160': { label: '4K', value: 'hd2160', height: 2160 },
+        'hd1440': { label: '1440p', value: 'hd1440', height: 1440 },
         'hd1080': { label: '1080p', value: 'hd1080', height: 1080 },
         'hd720': { label: '720p', value: 'hd720', height: 720 },
         'large': { label: '480p', value: 'large', height: 480 },
@@ -1535,6 +1537,8 @@ export class WebPlayer extends BasePlayer {
     
     try {
       const qualityMap: Record<string, any> = {
+        'hd2160': { label: '4K', value: 'hd2160', height: 2160 },
+        'hd1440': { label: '1440p', value: 'hd1440', height: 1440 },
         'hd1080': { label: '1080p', value: 'hd1080', height: 1080 },
         'hd720': { label: '720p', value: 'hd720', height: 720 },
         'large': { label: '480p', value: 'large', height: 480 },
@@ -1546,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(() => {
@@ -1558,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)');
           }
           
@@ -4794,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 */