unified-video-framework 1.4.242 → 1.4.244

package/packages/web/src/WebPlayer.ts

@@ -1116,13 +1116,8 @@ export class WebPlayer extends BasePlayer {
         this.video.poster = metadata.thumbnail;
       }
 
-      // For YouTube, we create a custom stream by using the youtube-nocookie embed
-      // and falling back to native HLS if available, or creating a blob stream
-      const embedUrl = YouTubeExtractor.getEmbedUrl(videoId);
-      
-      // Use iframe approach - this is the most reliable method
-      // We'll load the video through a special method that extracts the stream
-      await this.loadYouTubeIframe(videoId, embedUrl);
+      // Create YouTube iframe player with custom controls integration
+      await this.createYouTubePlayer(videoId);
       
       this.debugLog('✅ YouTube video loaded successfully');
     } catch (error) {
@@ -1131,99 +1126,273 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
-  private async loadYouTubeIframe(videoId: string, embedUrl: string): Promise<void> {
-    if (!this.video) throw new Error('Video element not initialized');
-    
-    try {
-      // First, try to load using YouTube's nocookie embed with special handling
-      // This approach uses a proxy service to get direct MP4 URLs
-      const proxyUrl = `https://www.youtube.com/watch?v=${videoId}`;
-      
-      // Attempt 1: Try using a CORS proxy to fetch the page and extract HLS URL
-      try {
-        const response = await fetch(`https://cors-anywhere.herokuapp.com/${proxyUrl}`, {
-          method: 'GET',
-          headers: {
-            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
-          }
-        });
-        
-        if (response.ok) {
-          const html = await response.text();
-          // Try to extract streamingData from the HTML
-          const match = html.match(/"streamingData"\s*:\s*\{([^}]*"url"[^}]*)/);
-          if (match) {
-            this.debugLog('✅ Found HLS stream in YouTube page');
-            // Continue with fallback
-          }
-        }
-      } catch (proxyError) {
-        this.debugWarn('CORS proxy attempt failed, trying fallback:', proxyError);
-      }
+  private youtubePlayer: any = null;
+  private youtubePlayerReady: boolean = false;
+  private youtubeIframe: HTMLIFrameElement | null = null;
 
-      // Fallback: Use YouTube's native player capabilities
-      // Load the video through native support or error
-      this.video.src = '';
-      this.video.innerHTML = `
-        <source 
-          src="https://www.youtube.com/embed/${videoId}?fs=1" 
-          type="text/html"
-        />
-      `;
-      
-      // Alternative: Create iframe overlay and sync with player
-      this.createYouTubeIframeProxy(videoId);
-    } catch (error) {
-      this.debugWarn('YouTube iframe loading fallback:', error);
-      // Final fallback: Use the standard YouTube URL (won't work with custom controls)
-      // but at least something will play
-      if (this.video) {
-        // For the custom player UI to work, we need actual video stream
-        // If neither method works, inform user
-        throw new Error(
-          'YouTube embedding requires either: 1) Backend service to extract streams, or 2) YouTube API key configuration. ' +
-          'See documentation for setup instructions.'
-        );
-      }
+  private async createYouTubePlayer(videoId: string): Promise<void> {
+    const container = this.playerWrapper || this.video?.parentElement;
+    if (!container) {
+      throw new Error('No container found for YouTube player');
     }
-  }
 
-  private createYouTubeIframeProxy(videoId: string): void {
-    // This creates a hidden iframe that plays the YouTube video
-    // while our custom player UI controls it (when possible)
-    const container = this.playerWrapper || this.video?.parentElement;
-    if (!container) return;
+    // Hide the regular video element
+    if (this.video) {
+      this.video.style.display = 'none';
+    }
 
-    // Create iframe
-    const iframe = document.createElement('iframe');
-    iframe.id = `youtube-iframe-${videoId}`;
-    iframe.style.cssText = `
+    // Create iframe container
+    const iframeContainer = document.createElement('div');
+    iframeContainer.id = `youtube-player-${videoId}`;
+    iframeContainer.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      border: none;
       z-index: 1;
-      opacity: 0;
-      pointer-events: none;
     `;
-    
-    iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&modestbranding=1&rel=0&controls=0`;
-    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
 
-    container.appendChild(iframe);
+    // Remove existing YouTube player if any
+    const existingPlayer = container.querySelector(`#youtube-player-${videoId}`);
+    if (existingPlayer) {
+      existingPlayer.remove();
+    }
+
+    container.appendChild(iframeContainer);
 
-    // Load YouTube Iframe API
+    // Load YouTube IFrame API if not loaded
     if (!window.YT) {
-      const tag = document.createElement('script');
-      tag.src = 'https://www.youtube.com/iframe_api';
-      document.body.appendChild(tag);
+      await this.loadYouTubeAPI();
+    }
+
+    // Wait for API to be ready
+    await this.waitForYouTubeAPI();
+
+    // Create YouTube player
+    this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
+      videoId: videoId,
+      width: '100%',
+      height: '100%',
+      playerVars: {
+        controls: 0,        // Hide YouTube controls
+        disablekb: 1,      // Disable keyboard controls
+        fs: 0,             // Hide fullscreen button
+        iv_load_policy: 3, // Hide annotations
+        modestbranding: 1, // Minimal YouTube branding
+        rel: 0,            // Don't show related videos
+        showinfo: 0,       // Hide video info
+        autoplay: this.config.autoPlay ? 1 : 0,
+        mute: this.config.muted ? 1 : 0
+      },
+      events: {
+        onReady: () => this.onYouTubePlayerReady(),
+        onStateChange: (event: any) => this.onYouTubePlayerStateChange(event),
+        onError: (event: any) => this.onYouTubePlayerError(event)
+      }
+    });
+
+    this.debugLog('YouTube player created');
+  }
+
+  private async loadYouTubeAPI(): Promise<void> {
+    return new Promise((resolve) => {
+      if (window.YT) {
+        resolve();
+        return;
+      }
+
+      // Set up the callback for when API loads
+      (window as any).onYouTubeIframeAPIReady = () => {
+        this.debugLog('YouTube IFrame API loaded');
+        resolve();
+      };
+
+      // Load the API script
+      const script = document.createElement('script');
+      script.src = 'https://www.youtube.com/iframe_api';
+      script.async = true;
+      document.body.appendChild(script);
+    });
+  }
+
+  private async waitForYouTubeAPI(): Promise<void> {
+    return new Promise((resolve) => {
+      const checkAPI = () => {
+        if (window.YT && window.YT.Player) {
+          resolve();
+        } else {
+          setTimeout(checkAPI, 100);
+        }
+      };
+      checkAPI();
+    });
+  }
+
+  private onYouTubePlayerReady(): void {
+    this.youtubePlayerReady = true;
+    this.debugLog('YouTube player ready');
+    
+    // Set initial volume
+    if (this.youtubePlayer) {
+      const volume = this.config.volume ? this.config.volume * 100 : 100;
+      this.youtubePlayer.setVolume(volume);
+      
+      if (this.config.muted) {
+        this.youtubePlayer.mute();
+      }
+    }
+
+    // Start time tracking
+    this.startYouTubeTimeTracking();
+    
+    this.emit('onReady');
+  }
+
+  private onYouTubePlayerStateChange(event: any): void {
+    const state = event.data;
+    
+    switch (state) {
+      case window.YT.PlayerState.PLAYING:
+        this.state.isPlaying = true;
+        this.state.isPaused = false;
+        this.state.isBuffering = false;
+        this.updateYouTubeUI('playing');
+        this.emit('onPlay');
+        break;
+        
+      case window.YT.PlayerState.PAUSED:
+        this.state.isPlaying = false;
+        this.state.isPaused = true;
+        this.state.isBuffering = false;
+        this.updateYouTubeUI('paused');
+        this.emit('onPause');
+        break;
+        
+      case window.YT.PlayerState.BUFFERING:
+        this.state.isBuffering = true;
+        this.updateYouTubeUI('buffering');
+        this.emit('onBuffering', true);
+        break;
+        
+      case window.YT.PlayerState.ENDED:
+        this.state.isPlaying = false;
+        this.state.isPaused = true;
+        this.state.isEnded = true;
+        this.updateYouTubeUI('ended');
+        this.emit('onEnded');
+        break;
+        
+      case window.YT.PlayerState.CUED:
+        this.state.duration = this.youtubePlayer.getDuration();
+        this.updateYouTubeUI('cued');
+        break;
     }
+  }
+
+  private updateYouTubeUI(state: string): void {
+    const playIcon = document.getElementById('uvf-play-icon');
+    const pauseIcon = document.getElementById('uvf-pause-icon');
+    const centerPlay = document.getElementById('uvf-center-play');
+    
+    if (state === 'playing' || state === 'buffering') {
+      if (playIcon) playIcon.style.display = 'none';
+      if (pauseIcon) pauseIcon.style.display = 'block';
+      if (centerPlay) centerPlay.classList.add('hidden');
+    } else if (state === 'paused' || state === 'cued' || state === 'ended') {
+      if (playIcon) playIcon.style.display = 'block';
+      if (pauseIcon) pauseIcon.style.display = 'none';
+      if (centerPlay) centerPlay.classList.remove('hidden');
+    }
+  }
+
+  private onYouTubePlayerError(event: any): void {
+    const errorCode = event.data;
+    let errorMessage = 'YouTube player error';
+    
+    switch (errorCode) {
+      case 2:
+        errorMessage = 'Invalid video ID';
+        break;
+      case 5:
+        errorMessage = 'HTML5 player error';
+        break;
+      case 100:
+        errorMessage = 'Video not found or private';
+        break;
+      case 101:
+      case 150:
+        errorMessage = 'Video cannot be embedded';
+        break;
+    }
+    
+    this.handleError({
+      code: 'YOUTUBE_ERROR',
+      message: errorMessage,
+      type: 'media',
+      fatal: true,
+      details: { errorCode }
+    });
+  }
+
+  private youtubeTimeTrackingInterval: NodeJS.Timeout | null = null;
+
+  private startYouTubeTimeTracking(): void {
+    if (this.youtubeTimeTrackingInterval) {
+      clearInterval(this.youtubeTimeTrackingInterval);
+    }
+    
+    this.youtubeTimeTrackingInterval = setInterval(() => {
+      if (this.youtubePlayer && this.youtubePlayerReady) {
+        try {
+          const currentTime = this.youtubePlayer.getCurrentTime();
+          const duration = this.youtubePlayer.getDuration();
+          const buffered = this.youtubePlayer.getVideoLoadedFraction() * 100;
+          
+          this.state.currentTime = currentTime || 0;
+          this.state.duration = duration || 0;
+          this.state.bufferedPercentage = buffered || 0;
+          
+          // Update UI progress bar
+          this.updateYouTubeProgressBar(currentTime, duration, buffered);
+          
+          this.emit('onTimeUpdate', this.state.currentTime);
+          this.emit('onProgress', this.state.bufferedPercentage);
+        } catch (error) {
+          // Ignore errors during tracking
+        }
+      }
+    }, 250); // Update every 250ms
+  }
 
-    this.debugLog('✅ YouTube iframe proxy created for video:', videoId);
+  private updateYouTubeProgressBar(currentTime: number, duration: number, buffered: number): void {
+    if (!duration || duration === 0) return;
+    
+    const percent = (currentTime / duration) * 100;
+    
+    // Update progress filled
+    const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
+    if (progressFilled && !this.isDragging) {
+      progressFilled.style.width = percent + '%';
+    }
+    
+    // Update progress handle
+    const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
+    if (progressHandle && !this.isDragging) {
+      progressHandle.style.left = percent + '%';
+    }
+    
+    // Update buffered progress
+    const progressBuffered = document.getElementById('uvf-progress-buffered') as HTMLElement;
+    if (progressBuffered) {
+      progressBuffered.style.width = buffered + '%';
+    }
+    
+    // Update time display
+    this.updateTimeDisplay();
   }
 
+
   protected loadScript(src: string): Promise<void> {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
@@ -1708,6 +1877,12 @@ export class WebPlayer extends BasePlayer {
   }
 
   async play(): Promise<void> {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.youtubePlayer.playVideo();
+      return;
+    }
+
     if (!this.video) throw new Error('Video element not initialized');
 
     // Prevent playback when in fallback poster mode (no valid sources)
@@ -1773,6 +1948,12 @@ export class WebPlayer extends BasePlayer {
   }
 
   pause(): void {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.youtubePlayer.pauseVideo();
+      return;
+    }
+
     if (!this.video) return;
 
     const now = Date.now();
@@ -1840,6 +2021,14 @@ export class WebPlayer extends BasePlayer {
   }
 
   seek(time: number): void {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.youtubePlayer.seekTo(time, true);
+      this.emit('onSeeking');
+      setTimeout(() => this.emit('onSeeked'), 500);
+      return;
+    }
+
     if (!this.video) return;
     
     // Validate input time
@@ -1866,18 +2055,34 @@ export class WebPlayer extends BasePlayer {
   }
 
   setVolume(level: number): void {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      const volumePercent = level * 100;
+      this.youtubePlayer.setVolume(volumePercent);
+    }
+
     if (!this.video) return;
     this.video.volume = Math.max(0, Math.min(1, level));
     super.setVolume(level);
   }
 
   mute(): void {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.youtubePlayer.mute();
+    }
+
     if (!this.video) return;
     this.video.muted = true;
     super.mute();
   }
 
   unmute(): void {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      this.youtubePlayer.unMute();
+    }
+
     if (!this.video) return;
     this.video.muted = false;
     super.unmute();
@@ -1885,6 +2090,11 @@ export class WebPlayer extends BasePlayer {
 
 
   getCurrentTime(): number {
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      return this.youtubePlayer.getCurrentTime();
+    }
+
     if (this.video && typeof this.video.currentTime === 'number') {
       return this.video.currentTime;
     }
@@ -6591,6 +6801,9 @@ export class WebPlayer extends BasePlayer {
     const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
     const settingsBtn = document.getElementById('uvf-settings-btn');
     
+    // Get the event target (video element or YouTube player)
+    const getEventTarget = () => this.youtubePlayer && this.youtubePlayerReady ? this.youtubePlayer : this.video;
+    
     // Disable right-click context menu
     this.video.addEventListener('contextmenu', (e) => {
       e.preventDefault();