unified-video-framework 1.4.246 → 1.4.247

package/packages/web/src/WebPlayer.ts

@@ -1129,6 +1129,10 @@ 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;
@@ -6239,10 +6243,18 @@ export class WebPlayer extends BasePlayer {
       .ytp-endscreen-element,
       .ytp-ce-element,
       .ytp-suggested-action,
-      .ytp-pause-overlay {
+      .ytp-pause-overlay,
+      .ytp-endscreen,
+      .ytp-videowall-still,
+      .ytp-ce-covering-overlay,
+      .ytp-ce-element-show,
+      .ytp-cards-button,
+      .ytp-cards-button-icon,
+      .ytp-impression-link {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
+        pointer-events: none !important;
       }
       
       /* Ultra-wide screens */
@@ -9040,8 +9052,16 @@ export class WebPlayer extends BasePlayer {
   }
   
   private setSpeed(speed: number): void {
-    if (!this.video) return;
-    this.video.playbackRate = speed;
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      try {
+        this.youtubePlayer.setPlaybackRate(speed);
+      } catch (error) {
+        this.debugWarn('YouTube playback rate not supported:', error);
+      }
+    } else if (this.video) {
+      this.video.playbackRate = speed;
+    }
     
     // Update UI
     document.querySelectorAll('.speed-option').forEach(option => {
@@ -9053,6 +9073,20 @@ 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
+      document.querySelectorAll('.quality-option').forEach(option => {
+        option.classList.remove('active');
+        if ((option as HTMLElement).dataset.quality === 'auto') {
+          option.classList.add('active');
+        }
+      });
+      return;
+    }
+    
     const qualityBadge = document.getElementById('uvf-quality-badge');
     
     // Update UI
@@ -9086,6 +9120,17 @@ 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 {
@@ -9096,6 +9141,137 @@ 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;
@@ -9621,6 +9797,17 @@ export class WebPlayer extends BasePlayer {
   private detectAvailableSubtitles(): void {
     this.availableSubtitles = [{ value: 'off', label: 'Off' }];
 
+    // YouTube player - subtitles available but not fully controllable
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      // YouTube supports captions but control is limited
+      // We can only toggle on/off, not select language
+      this.availableSubtitles.push({
+        value: 'youtube-cc',
+        label: 'YouTube Captions'
+      });
+      return;
+    }
+
     if (this.video?.textTracks) {
       // HTML5 text tracks
       Array.from(this.video.textTracks).forEach((track, index) => {
@@ -9978,6 +10165,25 @@ export class WebPlayer extends BasePlayer {
   private setSubtitle(subtitle: string): void {
     this.currentSubtitle = subtitle;
     
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      // YouTube subtitles - limited control
+      if (subtitle === 'off') {
+        try {
+          this.youtubePlayer.setOption('captions', 'fontSize', -1); // Hide captions
+        } catch (e) {
+          this.debugWarn('YouTube caption control limited:', e);
+        }
+      } else if (subtitle === 'youtube-cc') {
+        try {
+          this.youtubePlayer.setOption('captions', 'fontSize', 0); // Show captions
+        } catch (e) {
+          this.debugWarn('YouTube caption control limited:', e);
+        }
+      }
+      this.showShortcutIndicator('Subtitle language selection not available for YouTube');
+      return;
+    }
+    
     if (subtitle === 'off') {
       // Disable all subtitles
       if (this.video?.textTracks) {