unified-video-framework 1.4.245 → 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 */
@@ -6900,15 +6912,21 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
-    // Skip buttons with null safety
+    // Skip buttons with null safety - works with both video and YouTube
     skipBackBtn?.addEventListener('click', () => {
-      if (this.video && !isNaN(this.video.duration)) {
-        this.seek(Math.max(0, this.video.currentTime - 10));
+      const currentTime = this.getCurrentTime();
+      const duration = this.getDuration();
+      if (!isNaN(duration) && duration > 0) {
+        this.seek(Math.max(0, currentTime - 10));
+        this.showShortcutIndicator('-10s');
       }
     });
     skipForwardBtn?.addEventListener('click', () => {
-      if (this.video && !isNaN(this.video.duration)) {
-        this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
+      const currentTime = this.getCurrentTime();
+      const duration = this.getDuration();
+      if (!isNaN(duration) && duration > 0) {
+        this.seek(Math.min(duration, currentTime + 10));
+        this.showShortcutIndicator('+10s');
       }
     });
     
@@ -7726,12 +7744,29 @@ export class WebPlayer extends BasePlayer {
   private togglePlayPause(): void {
     this.debugLog('togglePlayPause called, video state:', {
       videoExists: !!this.video,
-      videoPaused: this.video?.paused,
+      youtubePlayerExists: !!this.youtubePlayer,
+      youtubePlayerReady: this.youtubePlayerReady,
       playerState: this.state
     });
     
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      const playerState = this.youtubePlayer.getPlayerState();
+      this.debugLog('YouTube player state:', playerState);
+      
+      if (playerState === window.YT.PlayerState.PLAYING) {
+        this.debugLog('YouTube video is playing, calling pause()');
+        this.pause();
+      } else {
+        this.debugLog('YouTube video is paused, calling play()');
+        this.play();
+      }
+      return;
+    }
+    
+    // Handle regular video element
     if (!this.video) {
-      this.debugError('No video element available for toggle');
+      this.debugError('No video element or YouTube player available for toggle');
       return;
     }
     
@@ -8035,12 +8070,28 @@ export class WebPlayer extends BasePlayer {
 
   private updateTimeDisplay(): void {
     const timeDisplay = document.getElementById('uvf-time-display');
-    if (timeDisplay && this.video) {
-      const current = this.formatTime(this.video.currentTime || 0);
-      const duration = this.formatTime(this.video.duration || 0);
-      timeDisplay.textContent = `${current} / ${duration}`;
-      this.debugLog('Time display updated:', `${current} / ${duration}`);
+    if (!timeDisplay) return;
+    
+    let current = 0;
+    let duration = 0;
+    
+    // Get time from YouTube player if available
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      try {
+        current = this.youtubePlayer.getCurrentTime() || 0;
+        duration = this.youtubePlayer.getDuration() || 0;
+      } catch (error) {
+        this.debugWarn('Error getting YouTube player time:', error);
+      }
+    } else if (this.video) {
+      current = this.video.currentTime || 0;
+      duration = this.video.duration || 0;
     }
+    
+    const currentFormatted = this.formatTime(current);
+    const durationFormatted = this.formatTime(duration);
+    timeDisplay.textContent = `${currentFormatted} / ${durationFormatted}`;
+    this.debugLog('Time display updated:', `${currentFormatted} / ${durationFormatted}`);
   }
 
   private showControls(): void {
@@ -9001,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 => {
@@ -9014,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
@@ -9047,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 {
@@ -9057,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;
@@ -9582,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) => {
@@ -9939,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) {