unified-video-framework 1.4.241 → 1.4.243

package/packages/web/dist/utils/YouTubeExtractor.d.ts

@@ -0,0 +1,38 @@
+export interface YouTubeVideoInfo {
+    videoId: string;
+    title: string;
+    duration: number;
+    thumbnail: string;
+    streamUrl: string;
+    format: 'mp4' | 'webm';
+}
+export declare class YouTubeExtractor {
+    private static readonly YOUTUBE_REGEX;
+    private static readonly YOUTUBE_NOEMBED_API;
+    private static readonly YOUTUBE_API_ENDPOINT;
+    static isYouTubeUrl(url: string): boolean;
+    static extractVideoId(url: string): string | null;
+    static getVideoMetadata(url: string): Promise<{
+        title: string;
+        thumbnail: string;
+        duration?: number;
+    }>;
+    static getEmbedUrl(videoId: string): string;
+    static getDirectStreamUrl(videoId: string, backendEndpoint?: string): Promise<string | null>;
+    private static getFallbackStreamUrl;
+    static prepareYouTubeSource(url: string, backendEndpoint?: string): Promise<{
+        url: string;
+        type: string;
+        title: string;
+        thumbnail: string;
+        duration: number | undefined;
+        videoId: string;
+        isYouTube: boolean;
+        metadata: {
+            source: string;
+            videoId: string;
+        };
+    }>;
+}
+export default YouTubeExtractor;
+//# sourceMappingURL=YouTubeExtractor.d.ts.map

package/packages/web/dist/utils/YouTubeExtractor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeExtractor.d.ts","sourceRoot":"","sources":["../../src/utils/YouTubeExtractor.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;CACxB;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAyG;IAC9I,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAoC;IAC/E,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAyC;IAKrF,MAAM,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAOzC,MAAM,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;WASpC,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QAClD,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IAiCF,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;WAa9B,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IA+BlG,OAAO,CAAC,MAAM,CAAC,oBAAoB;WAUtB,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM;;;;;;;;;;;;;CA2BxE;AAED,eAAe,gBAAgB,CAAC"}

package/packages/web/dist/utils/YouTubeExtractor.js

@@ -0,0 +1,89 @@
+export class YouTubeExtractor {
+    static isYouTubeUrl(url) {
+        return this.YOUTUBE_REGEX.test(url);
+    }
+    static extractVideoId(url) {
+        const match = url.match(this.YOUTUBE_REGEX);
+        return match ? match[1] : null;
+    }
+    static async getVideoMetadata(url) {
+        try {
+            const apiUrl = `${this.YOUTUBE_NOEMBED_API}${encodeURIComponent(url)}`;
+            const response = await fetch(apiUrl);
+            if (!response.ok) {
+                throw new Error('Failed to fetch YouTube metadata');
+            }
+            const data = await response.json();
+            return {
+                title: data.title || 'YouTube Video',
+                thumbnail: data.thumbnail_url || `https://img.youtube.com/vi/${this.extractVideoId(url)}/maxresdefault.jpg`,
+                duration: data.duration || undefined
+            };
+        }
+        catch (error) {
+            console.warn('Failed to fetch YouTube metadata:', error);
+            const videoId = this.extractVideoId(url);
+            return {
+                title: 'YouTube Video',
+                thumbnail: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
+                duration: undefined
+            };
+        }
+    }
+    static getEmbedUrl(videoId) {
+        return `https://www.youtube.com/embed/${videoId}?modestbranding=1&rel=0&controls=0`;
+    }
+    static async getDirectStreamUrl(videoId, backendEndpoint) {
+        if (!backendEndpoint) {
+            console.warn('No backend endpoint provided for YouTube video extraction. Using fallback method.');
+            return this.getFallbackStreamUrl(videoId);
+        }
+        try {
+            const response = await fetch(backendEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ videoId })
+            });
+            if (!response.ok) {
+                throw new Error('Backend failed to extract stream');
+            }
+            const data = await response.json();
+            return data.streamUrl || null;
+        }
+        catch (error) {
+            console.error('Failed to get direct stream URL:', error);
+            return this.getFallbackStreamUrl(videoId);
+        }
+    }
+    static getFallbackStreamUrl(videoId) {
+        return `https://www.youtube.com/watch?v=${videoId}`;
+    }
+    static async prepareYouTubeSource(url, backendEndpoint) {
+        const videoId = this.extractVideoId(url);
+        if (!videoId) {
+            throw new Error('Invalid YouTube URL');
+        }
+        const metadata = await this.getVideoMetadata(url);
+        const streamUrl = await this.getDirectStreamUrl(videoId, backendEndpoint);
+        return {
+            url: streamUrl || url,
+            type: 'youtube',
+            title: metadata.title,
+            thumbnail: metadata.thumbnail,
+            duration: metadata.duration,
+            videoId: videoId,
+            isYouTube: true,
+            metadata: {
+                source: 'youtube',
+                videoId: videoId
+            }
+        };
+    }
+}
+YouTubeExtractor.YOUTUBE_REGEX = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9_-]{11})/;
+YouTubeExtractor.YOUTUBE_NOEMBED_API = 'https://noembed.com/embed?url=';
+YouTubeExtractor.YOUTUBE_API_ENDPOINT = 'https://www.youtube.com/oembed?url=';
+export default YouTubeExtractor;
+//# sourceMappingURL=YouTubeExtractor.js.map

package/packages/web/dist/utils/YouTubeExtractor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeExtractor.js","sourceRoot":"","sources":["../../src/utils/YouTubeExtractor.ts"],"names":[],"mappings":"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"}

package/packages/web/src/WebPlayer.ts

@@ -20,6 +20,7 @@ import {
   VideoSegment,
   ChapterEvents 
 } from './chapters/types/ChapterTypes';
+import YouTubeExtractor from './utils/YouTubeExtractor';
 
 // Dynamic imports for streaming libraries
 declare global {
@@ -28,6 +29,7 @@ declare global {
     dashjs: any;
     cast?: any;
     chrome?: any;
+    YT?: any;
     __onGCastApiAvailable?: (isAvailable: boolean) => void;
   }
 }
@@ -680,6 +682,9 @@ export class WebPlayer extends BasePlayer {
       case 'dash':
         await this.loadDASH(url);
         break;
+      case 'youtube':
+        await this.loadYouTube(url, source);
+        break;
       default:
         await this.loadNative(url);
     }
@@ -869,7 +874,7 @@ export class WebPlayer extends BasePlayer {
         <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
           <rect x="10" y="16" width="20" height="16" rx="2" />
           <polygon points="34,20 42,16 42,32 34,28" />
-          <line x1="10" y1="16" x2="38" y2="40" stroke="currentColor" stroke-width="2"/>
+          <line x1="5" y1="8" x2="38" y2="40" stroke="currentColor" stroke-width="2"/>
         </svg>
         <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">Video Unavailable</div>
         <div style="font-size: 14px; opacity: 0.9;">This video cannot be played at the moment.</div>
@@ -899,6 +904,12 @@ export class WebPlayer extends BasePlayer {
     }
 
     const url = source.url.toLowerCase();
+    
+    // Check for YouTube URLs
+    if (YouTubeExtractor.isYouTubeUrl(url)) {
+      return 'youtube';
+    }
+    
     if (url.includes('.m3u8')) return 'hls';
     if (url.includes('.mpd')) return 'dash';
     if (url.includes('.mp4')) return 'mp4';
@@ -1072,6 +1083,265 @@ export class WebPlayer extends BasePlayer {
     this.video.load();
   }
 
+  private async loadYouTube(url: string, source: any): Promise<void> {
+    try {
+      this.debugLog('Loading YouTube video:', url);
+      
+      // Extract video ID and fetch metadata
+      const videoId = YouTubeExtractor.extractVideoId(url);
+      if (!videoId) {
+        throw new Error('Invalid YouTube URL');
+      }
+
+      // Fetch YouTube metadata (title, thumbnail)
+      const metadata = await YouTubeExtractor.getVideoMetadata(url);
+      
+      // Store metadata for later use
+      this.source = {
+        url: source.url || url,
+        ...this.source,
+        metadata: {
+          ...source.metadata,
+          title: metadata.title,
+          thumbnail: metadata.thumbnail,
+          duration: metadata.duration,
+          source: 'youtube',
+          videoId: videoId,
+          posterUrl: metadata.thumbnail
+        }
+      };
+
+      // Update player poster with thumbnail
+      if (this.video && metadata.thumbnail) {
+        this.video.poster = metadata.thumbnail;
+      }
+
+      // Create YouTube iframe player with custom controls integration
+      await this.createYouTubePlayer(videoId);
+      
+      this.debugLog('✅ YouTube video loaded successfully');
+    } catch (error) {
+      this.debugError('Failed to load YouTube video:', error);
+      throw new Error(`YouTube video loading failed: ${error}`);
+    }
+  }
+
+  private youtubePlayer: any = null;
+  private youtubePlayerReady: boolean = false;
+  private youtubeIframe: HTMLIFrameElement | null = null;
+
+  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');
+    }
+
+    // Hide the regular video element
+    if (this.video) {
+      this.video.style.display = 'none';
+    }
+
+    // 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%;
+      z-index: 1;
+    `;
+
+    // Remove existing YouTube player if any
+    const existingPlayer = container.querySelector(`#youtube-player-${videoId}`);
+    if (existingPlayer) {
+      existingPlayer.remove();
+    }
+
+    container.appendChild(iframeContainer);
+
+    // Load YouTube IFrame API if not loaded
+    if (!window.YT) {
+      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.emit('onPlay');
+        break;
+        
+      case window.YT.PlayerState.PAUSED:
+        this.state.isPlaying = false;
+        this.state.isPaused = true;
+        this.state.isBuffering = false;
+        this.emit('onPause');
+        break;
+        
+      case window.YT.PlayerState.BUFFERING:
+        this.state.isBuffering = true;
+        this.emit('onBuffering', true);
+        break;
+        
+      case window.YT.PlayerState.ENDED:
+        this.state.isPlaying = false;
+        this.state.isPaused = true;
+        this.state.isEnded = true;
+        this.emit('onEnded');
+        break;
+        
+      case window.YT.PlayerState.CUED:
+        this.state.duration = this.youtubePlayer.getDuration();
+        break;
+    }
+  }
+
+  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;
+          
+          this.emit('onTimeUpdate', this.state.currentTime);
+          this.emit('onProgress', this.state.bufferedPercentage);
+        } catch (error) {
+          // Ignore errors during tracking
+        }
+      }
+    }, 250); // Update every 250ms
+  }
+
+
   protected loadScript(src: string): Promise<void> {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
@@ -1556,6 +1826,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)
@@ -1621,6 +1897,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();
@@ -1688,6 +1970,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
@@ -1714,18 +2004,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();
@@ -1733,6 +2039,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;
     }

package/packages/web/src/utils/YouTubeExtractor.ts

@@ -0,0 +1,159 @@
+/**
+ * YouTube Video Extractor and Stream Fetcher
+ * Handles YouTube URL detection, video ID extraction, and fetches direct video streams
+ */
+
+export interface YouTubeVideoInfo {
+  videoId: string;
+  title: string;
+  duration: number;
+  thumbnail: string;
+  streamUrl: string;
+  format: 'mp4' | 'webm';
+}
+
+export class YouTubeExtractor {
+  private static readonly YOUTUBE_REGEX = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9_-]{11})/;
+  private static readonly YOUTUBE_NOEMBED_API = 'https://noembed.com/embed?url=';
+  private static readonly YOUTUBE_API_ENDPOINT = 'https://www.youtube.com/oembed?url=';
+
+  /**
+   * Detect if URL is a valid YouTube URL
+   */
+  static isYouTubeUrl(url: string): boolean {
+    return this.YOUTUBE_REGEX.test(url);
+  }
+
+  /**
+   * Extract video ID from YouTube URL
+   */
+  static extractVideoId(url: string): string | null {
+    const match = url.match(this.YOUTUBE_REGEX);
+    return match ? match[1] : null;
+  }
+
+  /**
+   * Get YouTube video metadata using oembed API
+   * This works without CORS issues
+   */
+  static async getVideoMetadata(url: string): Promise<{
+    title: string;
+    thumbnail: string;
+    duration?: number;
+  }> {
+    try {
+      // Use noembed API which has better CORS support
+      const apiUrl = `${this.YOUTUBE_NOEMBED_API}${encodeURIComponent(url)}`;
+      const response = await fetch(apiUrl);
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch YouTube metadata');
+      }
+
+      const data = await response.json();
+      
+      return {
+        title: data.title || 'YouTube Video',
+        thumbnail: data.thumbnail_url || `https://img.youtube.com/vi/${this.extractVideoId(url)}/maxresdefault.jpg`,
+        duration: data.duration || undefined
+      };
+    } catch (error) {
+      console.warn('Failed to fetch YouTube metadata:', error);
+      // Return fallback metadata
+      const videoId = this.extractVideoId(url);
+      return {
+        title: 'YouTube Video',
+        thumbnail: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
+        duration: undefined
+      };
+    }
+  }
+
+  /**
+   * Convert YouTube URL to embeddable iframe URL
+   * This is used for getting the video stream through various methods
+   */
+  static getEmbedUrl(videoId: string): string {
+    return `https://www.youtube.com/embed/${videoId}?modestbranding=1&rel=0&controls=0`;
+  }
+
+  /**
+   * Get direct video stream using py-youtube or similar service
+   * Note: This requires a backend service as direct YouTube downloads violate ToS
+   * 
+   * For client-side, we recommend using:
+   * 1. YouTube IFrame API with custom controls
+   * 2. Backend service that extracts video streams
+   * 3. HLS variant of YouTube if available
+   */
+  static async getDirectStreamUrl(videoId: string, backendEndpoint?: string): Promise<string | null> {
+    if (!backendEndpoint) {
+      console.warn('No backend endpoint provided for YouTube video extraction. Using fallback method.');
+      return this.getFallbackStreamUrl(videoId);
+    }
+
+    try {
+      const response = await fetch(backendEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ videoId })
+      });
+
+      if (!response.ok) {
+        throw new Error('Backend failed to extract stream');
+      }
+
+      const data = await response.json();
+      return data.streamUrl || null;
+    } catch (error) {
+      console.error('Failed to get direct stream URL:', error);
+      return this.getFallbackStreamUrl(videoId);
+    }
+  }
+
+  /**
+   * Fallback method: Return YouTube watch URL with adaptive streaming
+   * This uses YouTube's own HLS/DASH streams if available
+   */
+  private static getFallbackStreamUrl(videoId: string): string {
+    // This returns the standard YouTube URL which has built-in HLS support
+    // For actual stream extraction, you need a backend service or use YouTube IFrame API
+    return `https://www.youtube.com/watch?v=${videoId}`;
+  }
+
+  /**
+   * Create a YouTube-compatible player configuration
+   * This prepares the source object for our custom player
+   */
+  static async prepareYouTubeSource(url: string, backendEndpoint?: string) {
+    const videoId = this.extractVideoId(url);
+    
+    if (!videoId) {
+      throw new Error('Invalid YouTube URL');
+    }
+
+    const metadata = await this.getVideoMetadata(url);
+    
+    // For direct streaming, we need a backend service
+    // This could be implemented using yt-dlp, pytube, or similar
+    const streamUrl = await this.getDirectStreamUrl(videoId, backendEndpoint);
+
+    return {
+      url: streamUrl || url, // Fallback to original URL
+      type: 'youtube',
+      title: metadata.title,
+      thumbnail: metadata.thumbnail,
+      duration: metadata.duration,
+      videoId: videoId,
+      isYouTube: true,
+      metadata: {
+        source: 'youtube',
+        videoId: videoId
+      }
+    };
+  }
+}
+
+export default YouTubeExtractor;