unified-video-framework 1.4.247 → 1.4.249

package/packages/web/src/WebPlayer.ts

@@ -1129,10 +1129,6 @@ export class WebPlayer extends BasePlayer {
   private youtubePlayer: any = null;
   private youtubePlayerReady: boolean = false;
   private youtubeIframe: HTMLIFrameElement | null = null;
-  private isYoutubePiPActive: boolean = false;
-  private youtubePiPContainer: HTMLDivElement | null = null;
-  private youtubePiPOriginalParent: HTMLElement | null = null;
-  private youtubePiPOriginalPosition: string = '';
 
   private async createYouTubePlayer(videoId: string): Promise<void> {
     const container = this.playerWrapper || this.video?.parentElement;
@@ -1246,6 +1242,9 @@ export class WebPlayer extends BasePlayer {
       if (this.config.muted) {
         this.youtubePlayer.mute();
       }
+      
+      // Extract available YouTube qualities
+      this.extractYouTubeAvailableQualities();
     }
 
     // Start time tracking
@@ -1341,6 +1340,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) => {
+        if (qualityMap[qualityLevel]) {
+          this.youtubeAvailableQualities.push(qualityMap[qualityLevel]);
+        }
+      });
+      
+      // Add auto quality option if not present
+      if (!this.youtubeAvailableQualities.find(q => q.value === 'auto')) {
+        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) {
@@ -9075,12 +9182,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');
         }
       });
@@ -9120,17 +9228,6 @@ export class WebPlayer extends BasePlayer {
   
   private async togglePiP(): Promise<void> {
     try {
-      // Handle YouTube player with custom PiP
-      if (this.youtubePlayer && this.youtubePlayerReady) {
-        if (this.isYoutubePiPActive) {
-          await this.exitYoutubePiP();
-        } else {
-          await this.enterYoutubePiP();
-        }
-        return;
-      }
-      
-      // Native PiP for regular video
       if ((document as any).pictureInPictureElement) {
         await this.exitPictureInPicture();
       } else {
@@ -9141,137 +9238,6 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
-  private async enterYoutubePiP(): Promise<void> {
-    try {
-      const playerWrapper = this.playerWrapper || this.container?.querySelector('.uvf-player-wrapper');
-      if (!playerWrapper) {
-        this.showNotification('Player container not found');
-        return;
-      }
-      
-      // Store original position
-      this.youtubePiPOriginalParent = playerWrapper.parentElement;
-      this.youtubePiPOriginalPosition = playerWrapper.getAttribute('style') || '';
-      
-      // Create PiP container
-      this.youtubePiPContainer = document.createElement('div');
-      this.youtubePiPContainer.id = 'youtube-pip-container';
-      this.youtubePiPContainer.style.cssText = `
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        width: 400px;
-        height: 225px;
-        z-index: 9999;
-        background: #000;
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        cursor: grab;
-        overflow: hidden;
-      `;
-      
-      // Add drag functionality
-      let isDragging = false;
-      let offset = { x: 0, y: 0 };
-      
-      this.youtubePiPContainer.addEventListener('mousedown', (e) => {
-        if ((e.target as HTMLElement).closest('.youtube-pip-controls')) return;
-        isDragging = true;
-        offset.x = e.clientX - this.youtubePiPContainer!.getBoundingClientRect().left;
-        offset.y = e.clientY - this.youtubePiPContainer!.getBoundingClientRect().top;
-        this.youtubePiPContainer!.style.cursor = 'grabbing';
-      });
-      
-      document.addEventListener('mousemove', (e) => {
-        if (!isDragging || !this.youtubePiPContainer) return;
-        this.youtubePiPContainer.style.left = (e.clientX - offset.x) + 'px';
-        this.youtubePiPContainer.style.top = (e.clientY - offset.y) + 'px';
-      });
-      
-      document.addEventListener('mouseup', () => {
-        isDragging = false;
-        if (this.youtubePiPContainer) this.youtubePiPContainer.style.cursor = 'grab';
-      });
-      
-      // Add close button
-      const closeBtn = document.createElement('button');
-      closeBtn.className = 'youtube-pip-controls';
-      closeBtn.innerHTML = '✕';
-      closeBtn.style.cssText = `
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        width: 32px;
-        height: 32px;
-        background: rgba(255, 255, 255, 0.2);
-        border: none;
-        color: white;
-        font-size: 18px;
-        border-radius: 4px;
-        cursor: pointer;
-        z-index: 10000;
-        transition: background 0.2s;
-      `;
-      
-      closeBtn.addEventListener('hover', () => {
-        closeBtn.style.background = 'rgba(255, 255, 255, 0.4)';
-      });
-      
-      closeBtn.addEventListener('click', async () => {
-        await this.exitYoutubePiP();
-      });
-      
-      // Move player to PiP container
-      this.youtubePiPContainer.appendChild(playerWrapper as HTMLElement);
-      this.youtubePiPContainer.appendChild(closeBtn);
-      document.body.appendChild(this.youtubePiPContainer);
-      
-      // Style player for PiP
-      (playerWrapper as HTMLElement).style.width = '100%';
-      (playerWrapper as HTMLElement).style.height = '100%';
-      
-      this.isYoutubePiPActive = true;
-      this.showNotification('PiP mode active (drag to move)');
-      this.debugLog('YouTube PiP mode enabled');
-    } catch (error) {
-      this.debugError('Failed to enter YouTube PiP:', error);
-      this.showNotification('PiP mode failed');
-    }
-  }
-  
-  private async exitYoutubePiP(): Promise<void> {
-    try {
-      if (!this.youtubePiPContainer || !this.youtubePiPOriginalParent) {
-        return;
-      }
-      
-      const playerWrapper = this.playerWrapper || this.container?.querySelector('.uvf-player-wrapper');
-      if (playerWrapper) {
-        // Restore original styling
-        if (this.youtubePiPOriginalPosition) {
-          playerWrapper.setAttribute('style', this.youtubePiPOriginalPosition);
-        } else {
-          playerWrapper.removeAttribute('style');
-        }
-        
-        // Move back to original parent
-        this.youtubePiPOriginalParent.appendChild(playerWrapper);
-      }
-      
-      // Remove PiP container
-      this.youtubePiPContainer.remove();
-      this.youtubePiPContainer = null;
-      this.youtubePiPOriginalParent = null;
-      
-      this.isYoutubePiPActive = false;
-      this.showNotification('PiP mode closed');
-      this.debugLog('YouTube PiP mode disabled');
-    } catch (error) {
-      this.debugError('Failed to exit YouTube PiP:', error);
-    }
-  }
-  
   private setupCastContextSafe(): void {
     try {
       const castNs = (window as any).cast;
@@ -9526,7 +9492,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 += `
@@ -9546,7 +9516,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;
@@ -9617,7 +9591,15 @@ export class WebPlayer extends BasePlayer {
     this.availableQualities = [{ value: 'auto', label: 'Auto' }];
     let detectedQualities: Array<{ value: string; label: string; height?: number }> = [];
 
-    if (this.hls && this.hls.levels) {
+    // YouTube qualities
+    if (this.youtubePlayer && this.youtubePlayerReady && this.youtubeAvailableQualities.length > 0) {
+      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) {
@@ -9989,6 +9971,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) {