unified-video-framework 1.4.234 → 1.4.236

package/packages/web/src/WebPlayer.ts

@@ -140,6 +140,15 @@ export class WebPlayer extends BasePlayer {
   
   // Premium qualities configuration
   private premiumQualities: any = null;
+  
+  // Ad playing state (set by Google Ads Manager)
+  private isAdPlaying: boolean = false;
+
+  // Fallback source management
+  private fallbackSourceIndex: number = -1;
+  private fallbackErrors: Array<{ url: string; error: any }> = [];
+  private isLoadingFallback: boolean = false;
+  private currentRetryAttempt: number = 0;
 
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
@@ -560,6 +569,12 @@ export class WebPlayer extends BasePlayer {
     // Reset autoplay flag for new source
     this.autoplayAttempted = false;
 
+    // Reset fallback state for new source
+    this.fallbackSourceIndex = -1;
+    this.fallbackErrors = [];
+    this.isLoadingFallback = false;
+    this.currentRetryAttempt = 0;
+
     // Clean up previous instances
     await this.cleanup();
 
@@ -567,49 +582,254 @@ export class WebPlayer extends BasePlayer {
       throw new Error('Video element not initialized');
     }
 
+    // Setup error handler for automatic fallback
+    this.setupFallbackErrorHandler();
 
     // Detect source type
     const sourceType = this.detectSourceType(source);
 
     try {
-      switch (sourceType) {
-        case 'hls':
-          await this.loadHLS(source.url);
-          break;
-        case 'dash':
-          await this.loadDASH(source.url);
-          break;
-        default:
-          await this.loadNative(source.url);
+      await this.loadVideoSource(source.url, sourceType, source);
+    } catch (error) {
+      // Try fallback sources if available
+      const fallbackLoaded = await this.tryFallbackSource(error);
+      if (!fallbackLoaded) {
+        this.handleError({
+          code: 'LOAD_ERROR',
+          message: `Failed to load video: ${error}`,
+          type: 'network',
+          fatal: true,
+          details: error
+        });
+        throw error;
       }
+    }
+  }
+
+  /**
+   * Load a video source (main or fallback)
+   */
+  private async loadVideoSource(url: string, sourceType: string, source: any): Promise<void> {
+    switch (sourceType) {
+      case 'hls':
+        await this.loadHLS(url);
+        break;
+      case 'dash':
+        await this.loadDASH(url);
+        break;
+      default:
+        await this.loadNative(url);
+    }
 
-      // Load subtitles if provided
-      if (source.subtitles && source.subtitles.length > 0) {
-        this.loadSubtitles(source.subtitles);
+    // Load subtitles if provided
+    if (source.subtitles && source.subtitles.length > 0) {
+      this.loadSubtitles(source.subtitles);
+    }
+
+    // Apply metadata
+    if (source.metadata) {
+      if (source.metadata.posterUrl && this.video) {
+        this.video.poster = source.metadata.posterUrl;
       }
+      // Update player UI with metadata (title, description, thumbnail)
+      this.updateMetadataUI();
+    } else {
+      // Clear to defaults if no metadata
+      this.updateMetadataUI();
+    }
+  }
+
+  /**
+   * Setup error handler for automatic fallback on video errors
+   */
+  private setupFallbackErrorHandler(): void {
+    if (!this.video) return;
+
+    // Remove existing error handlers to avoid duplicates
+    const newVideo = this.video.cloneNode(false) as HTMLVideoElement;
+    this.video.replaceWith(newVideo);
+    this.video = newVideo;
 
-      // Apply metadata
-      if (source.metadata) {
-        if (source.metadata.posterUrl && this.video) {
-          this.video.poster = source.metadata.posterUrl;
+    this.video.addEventListener('error', async (e) => {
+      if (this.isLoadingFallback) return; // Avoid recursive fallback attempts
+
+      const error = this.video?.error;
+      if (error) {
+        this.debugLog(`Video error detected (code: ${error.code}):`, error.message);
+
+        // Try fallback on media errors
+        const fallbackLoaded = await this.tryFallbackSource(error);
+
+        if (!fallbackLoaded) {
+          // No more fallbacks available, handle final error
+          this.handleError({
+            code: `MEDIA_ERR_${error.code}`,
+            message: error.message || this.getMediaErrorMessage(error.code),
+            type: 'media',
+            fatal: true,
+            details: error
+          });
         }
-        // Update player UI with metadata (title, description, thumbnail)
-        this.updateMetadataUI();
-      } else {
-        // Clear to defaults if no metadata
-        this.updateMetadataUI();
       }
+    });
+  }
 
-    } catch (error) {
-      this.handleError({
-        code: 'LOAD_ERROR',
-        message: `Failed to load video: ${error}`,
-        type: 'network',
-        fatal: true,
-        details: error
-      });
-      throw error;
+  /**
+   * Try loading the next fallback source
+   */
+  private async tryFallbackSource(error: any): Promise<boolean> {
+    if (this.isLoadingFallback) return false;
+    if (!this.source?.fallbackSources || this.source.fallbackSources.length === 0) {
+      return this.showFallbackPoster();
     }
+
+    this.isLoadingFallback = true;
+
+    // Record current error
+    const currentUrl = this.fallbackSourceIndex === -1
+      ? this.source.url
+      : this.source.fallbackSources[this.fallbackSourceIndex]?.url;
+
+    this.fallbackErrors.push({ url: currentUrl, error });
+    this.debugLog(`Source failed: ${currentUrl}`, error);
+
+    // Check retry attempts for current source
+    const maxRetries = this.source.fallbackRetryAttempts || 1;
+    if (this.currentRetryAttempt < maxRetries) {
+      this.currentRetryAttempt++;
+      this.debugLog(`Retrying source (attempt ${this.currentRetryAttempt}/${maxRetries}): ${currentUrl}`);
+
+      const retryDelay = this.source.fallbackRetryDelay || 1000;
+      await new Promise(resolve => setTimeout(resolve, retryDelay));
+
+      try {
+        const sourceType = this.detectSourceType({ url: currentUrl, type: this.source.type });
+        await this.loadVideoSource(currentUrl, sourceType, this.source);
+        this.isLoadingFallback = false;
+        this.currentRetryAttempt = 0;
+        this.debugLog(`Retry successful for: ${currentUrl}`);
+        return true;
+      } catch (retryError) {
+        this.debugLog(`Retry failed for: ${currentUrl}`, retryError);
+        // Continue to next fallback
+      }
+    }
+
+    // Move to next fallback source
+    this.currentRetryAttempt = 0;
+    this.fallbackSourceIndex++;
+
+    if (this.fallbackSourceIndex >= this.source.fallbackSources.length) {
+      // All sources exhausted
+      this.isLoadingFallback = false;
+      this.debugLog('All video sources failed. Attempting to show fallback poster.');
+
+      // Trigger callback if provided
+      if (this.source.onAllSourcesFailed) {
+        try {
+          this.source.onAllSourcesFailed(this.fallbackErrors);
+        } catch (callbackError) {
+          console.error('Error in onAllSourcesFailed callback:', callbackError);
+        }
+      }
+
+      return this.showFallbackPoster();
+    }
+
+    // Try next fallback source
+    const fallbackSource = this.source.fallbackSources[this.fallbackSourceIndex];
+    this.debugLog(`Trying fallback source ${this.fallbackSourceIndex + 1}/${this.source.fallbackSources.length}: ${fallbackSource.url}`);
+
+    const retryDelay = this.source.fallbackRetryDelay || 1000;
+    await new Promise(resolve => setTimeout(resolve, retryDelay));
+
+    try {
+      const sourceType = this.detectSourceType(fallbackSource);
+      await this.loadVideoSource(fallbackSource.url, sourceType, this.source);
+      this.isLoadingFallback = false;
+      this.debugLog(`Successfully loaded fallback source: ${fallbackSource.url}`);
+      this.showNotification(`Switched to backup source ${this.fallbackSourceIndex + 1}`);
+      return true;
+    } catch (fallbackError) {
+      this.debugLog(`Fallback source failed: ${fallbackSource.url}`, fallbackError);
+      this.isLoadingFallback = false;
+      // Recursively try next fallback
+      return this.tryFallbackSource(fallbackError);
+    }
+  }
+
+  /**
+   * Show fallback poster image when all video sources fail
+   */
+  private showFallbackPoster(): boolean {
+    if (!this.source?.fallbackPoster) {
+      this.debugLog('No fallback poster available');
+      return false;
+    }
+
+    this.debugLog('Showing fallback poster:', this.source.fallbackPoster);
+
+    if (this.video) {
+      // Hide video element, show poster
+      this.video.style.display = 'none';
+      this.video.poster = this.source.fallbackPoster;
+    }
+
+    // Create poster overlay
+    const posterOverlay = document.createElement('div');
+    posterOverlay.id = 'uvf-fallback-poster';
+    posterOverlay.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url('${this.source.fallbackPoster}');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+
+    // Add error message overlay
+    const errorMessage = document.createElement('div');
+    errorMessage.style.cssText = `
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 20px 30px;
+      border-radius: 8px;
+      text-align: center;
+      max-width: 400px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    `;
+    errorMessage.innerHTML = `
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 10px;">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="8" x2="12" y2="12"></line>
+        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      </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>
+    `;
+
+    posterOverlay.appendChild(errorMessage);
+
+    // Remove existing fallback poster if any
+    const existingPoster = this.playerWrapper?.querySelector('#uvf-fallback-poster');
+    if (existingPoster) {
+      existingPoster.remove();
+    }
+
+    // Add to player
+    if (this.playerWrapper) {
+      this.playerWrapper.appendChild(posterOverlay);
+    }
+
+    this.showNotification('Video unavailable');
+    return true;
   }
 
   private detectSourceType(source: VideoSource): string {
@@ -6653,6 +6873,13 @@ export class WebPlayer extends BasePlayer {
         return;
       }
       
+      // Block all keyboard controls during ads (Google IMA handles ad controls)
+      if (this.isAdPlaying) {
+        this.debugLog('Keyboard blocked: Ad is playing');
+        e.preventDefault();
+        return;
+      }
+      
       // Debug logging
       this.debugLog('Keyboard event:', e.key, 'target:', target.tagName);
       
@@ -8795,6 +9022,21 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
+  /**
+   * Set ad playing state (called by Google Ads Manager)
+   */
+  public setAdPlaying(isPlaying: boolean): void {
+    this.isAdPlaying = isPlaying;
+    this.debugLog('Ad playing state:', isPlaying);
+  }
+  
+  /**
+   * Check if ad is currently playing
+   */
+  public isAdCurrentlyPlaying(): boolean {
+    return this.isAdPlaying;
+  }
+  
   /**
    * Check if a quality level is premium
    */
@@ -9441,18 +9683,45 @@ export class WebPlayer extends BasePlayer {
   }
   
   private async shareVideo(): Promise<void> {
-    const shareData: ShareData = { url: window.location.href };
-    const t = (this.source?.metadata?.title || '').toString().trim();
-    const d = (this.source?.metadata?.description || '').toString().trim();
+    // Get share configuration
+    const shareConfig = this.config.share;
+
+    // Determine share URL
+    let shareUrl: string;
+    if (shareConfig?.url) {
+      // Use custom static URL
+      shareUrl = shareConfig.url;
+    } else if (shareConfig?.generateUrl) {
+      // Use dynamic URL generator
+      try {
+        shareUrl = shareConfig.generateUrl({
+          videoId: this.source?.metadata?.videoId,
+          metadata: this.source?.metadata
+        });
+      } catch (error) {
+        console.warn('Share URL generator failed, falling back to window.location.href:', error);
+        shareUrl = window.location.href;
+      }
+    } else {
+      // Default: Use current page URL
+      shareUrl = window.location.href;
+    }
+
+    // Prepare share data
+    const shareData: ShareData = { url: shareUrl };
+
+    // Get title and text from config or metadata
+    const t = (shareConfig?.title || this.source?.metadata?.title || '').toString().trim();
+    const d = (shareConfig?.text || this.source?.metadata?.description || '').toString().trim();
     if (t) shareData.title = t;
     if (d) shareData.text = d;
-    
+
     try {
       if (navigator.share) {
         await navigator.share(shareData);
       } else {
         // Fallback: Copy to clipboard
-        await navigator.clipboard.writeText(window.location.href);
+        await navigator.clipboard.writeText(shareUrl);
         this.showNotification('Link copied to clipboard');
       }
     } catch (error) {

package/packages/web/src/react/WebPlayerView.tsx

@@ -137,7 +137,16 @@ export type WebPlayerViewProps = {
   
   // Framework branding control
   showFrameworkBranding?: boolean;
-  
+
+  // Share configuration
+  share?: {
+    enabled?: boolean;                    // Enable/disable share button (default: true)
+    url?: string;                         // Custom share URL (default: window.location.href)
+    title?: string;                       // Custom share title (default: video metadata title)
+    text?: string;                        // Custom share description (default: video metadata description)
+    generateUrl?: (videoData: { videoId?: string; metadata?: any }) => string;  // Dynamic URL generator
+  };
+
   // Watermark configuration (can be boolean for simple enable/disable or object for full config)
   watermark?: boolean | {
     enabled?: boolean;
@@ -201,6 +210,13 @@ export type WebPlayerViewProps = {
   subtitles?: SubtitleTrack[];
   metadata?: VideoMetadata;
 
+  // Fallback configuration
+  fallbackSources?: Array<{ url: string; type?: 'mp4' | 'hls' | 'dash' | 'webm' | 'auto'; priority?: number }>;
+  fallbackPoster?: string;                         // Static image to show when all video sources fail
+  fallbackRetryDelay?: number;                     // Delay in ms before trying next fallback (default: 1000)
+  fallbackRetryAttempts?: number;                  // Number of retry attempts per source (default: 1)
+  onAllSourcesFailed?: (errors: Array<{ url: string; error: any }>) => void; // Callback when all sources fail
+
   // Optional Google Cast sender SDK loader
   cast?: boolean;
 
@@ -838,6 +854,7 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
         settings: props.settings,
         showFrameworkBranding: props.showFrameworkBranding,
         watermark: watermarkConfig,
+        share: props.share,  // Add share configuration
         qualityFilter: props.qualityFilter,  // Add quality filter to config
         premiumQualities: props.premiumQualities,  // Add premium qualities config
         // Navigation configuration
@@ -879,6 +896,11 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           type: props.type ?? 'auto',
           subtitles: props.subtitles,
           metadata: props.metadata,
+          fallbackSources: props.fallbackSources,
+          fallbackPoster: props.fallbackPoster,
+          fallbackRetryDelay: props.fallbackRetryDelay,
+          fallbackRetryAttempts: props.fallbackRetryAttempts,
+          onAllSourcesFailed: props.onAllSourcesFailed,
         };
 
         await player.load(source);
@@ -1076,18 +1098,34 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                     companionAdSlots: props.googleAds.companionAdSlots,
                     onAdStart: () => {
                       setIsAdPlaying(true);
+                      // Notify player to block keyboard controls
+                      if (typeof (player as any).setAdPlaying === 'function') {
+                        (player as any).setAdPlaying(true);
+                      }
                       props.googleAds?.onAdStart?.();
                     },
                     onAdEnd: () => {
                       setIsAdPlaying(false);
+                      // Notify player to unblock keyboard controls
+                      if (typeof (player as any).setAdPlaying === 'function') {
+                        (player as any).setAdPlaying(false);
+                      }
                       props.googleAds?.onAdEnd?.();
                     },
                     onAdError: (error) => {
                       setIsAdPlaying(false);
+                      // Notify player to unblock keyboard controls
+                      if (typeof (player as any).setAdPlaying === 'function') {
+                        (player as any).setAdPlaying(false);
+                      }
                       props.googleAds?.onAdError?.(error);
                     },
                     onAllAdsComplete: () => {
                       setIsAdPlaying(false);
+                      // Notify player to unblock keyboard controls
+                      if (typeof (player as any).setAdPlaying === 'function') {
+                        (player as any).setAdPlaying(false);
+                      }
                       props.googleAds?.onAllAdsComplete?.();
                     },
                     onAdCuePoints: (cuePoints: number[]) => {
@@ -1170,10 +1208,15 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     JSON.stringify(props.settings),
     props.showFrameworkBranding,
     JSON.stringify(props.watermark),
+    JSON.stringify(props.share),
     JSON.stringify(props.navigation),
     JSON.stringify(props.googleAds),
     JSON.stringify(props.qualityFilter),
     JSON.stringify(props.premiumQualities),
+    JSON.stringify(props.fallbackSources),
+    props.fallbackPoster,
+    props.fallbackRetryDelay,
+    props.fallbackRetryAttempts,
   ]);
   
   // Helper function to filter quality levels based on qualityFilter prop