unified-video-framework 1.4.204 → 1.4.206

package/packages/web/src/WebPlayer.ts

@@ -384,9 +384,6 @@ export class WebPlayer extends BasePlayer {
       this.state.isPlaying = true;
       this.state.isPaused = false;
       this.emit('onPlay');
-
-      // Hide play overlay when playback starts
-      this.hidePlayOverlay();
     });
 
     this.video.addEventListener('playing', () => {
@@ -396,9 +393,6 @@ export class WebPlayer extends BasePlayer {
         try { this.video?.pause(); } catch (_) {}
       }
 
-      // Also hide overlay on playing event (more reliable)
-      this.hidePlayOverlay();
-
       // Stop buffering state
       this.setBuffering(false);
     });
@@ -436,6 +430,7 @@ export class WebPlayer extends BasePlayer {
     });
 
     this.video.addEventListener('canplay', () => {
+      this.debugLog('📡 canplay event fired');
       this.setBuffering(false);
       this.emit('onReady');
       
@@ -449,21 +444,23 @@ export class WebPlayer extends BasePlayer {
       }
 
       // Attempt autoplay once when video is ready to play
+      this.debugLog(`🎬 Autoplay check: config.autoPlay=${this.config.autoPlay}, autoplayAttempted=${this.autoplayAttempted}`);
       if (this.config.autoPlay && !this.autoplayAttempted) {
+        this.debugLog('🎬 Starting intelligent autoplay attempt');
         this.autoplayAttempted = true;
         this.attemptIntelligentAutoplay().then(success => {
           if (!success) {
-            this.debugWarn('❌ Intelligent autoplay failed, showing play overlay');
-            this.showPlayOverlay();
+            this.debugWarn('❌ Intelligent autoplay failed - will retry on user interaction');
             this.setupAutoplayRetry();
           } else {
             this.debugLog('✅ Intelligent autoplay succeeded');
           }
         }).catch(error => {
           this.debugError('Autoplay failed:', error);
-          this.showPlayOverlay();
           this.setupAutoplayRetry();
         });
+      } else {
+        this.debugLog(`⛔ Skipping autoplay: autoPlay=${this.config.autoPlay}, attempted=${this.autoplayAttempted}`);
       }
     });
 
@@ -912,13 +909,20 @@ export class WebPlayer extends BasePlayer {
    * Attempt intelligent autoplay based on detected capabilities
    */
   private async attemptIntelligentAutoplay(): Promise<boolean> {
-    if (!this.config.autoPlay || !this.video) return false;
+    this.debugLog('🎬 attemptIntelligentAutoplay called');
+    if (!this.config.autoPlay || !this.video) {
+      this.debugLog(`⛔ Early return: autoPlay=${this.config.autoPlay}, video=${!!this.video}`);
+      return false;
+    }
 
     // Detect capabilities first
+    this.debugLog('🔍 Detecting autoplay capabilities...');
     await this.detectAutoplayCapabilities();
+    this.debugLog(`📦 Capabilities detected: canAutoplayMuted=${this.autoplayCapabilities.canAutoplayMuted}, canAutoplayUnmuted=${this.autoplayCapabilities.canAutoplayUnmuted}`);
 
     // Check if user has activated the page (navigation counts as activation)
     const hasActivation = this.hasUserActivation();
+    this.debugLog(`👤 User activation: ${hasActivation}`);
 
     // Try unmuted autoplay if:
     // 1. Browser supports unmuted autoplay OR user has activated the page
@@ -932,8 +936,10 @@ export class WebPlayer extends BasePlayer {
       this.debugLog(`🔊 Attempting unmuted autoplay (activation: ${hasActivation})`);
 
       try {
+        this.debugLog('▶️ Calling play() for unmuted autoplay...');
         await this.play();
         // Verify video is actually playing
+        this.debugLog(`📊 Play returned, video.paused=${this.video.paused}`);
         if (!this.video.paused) {
           this.debugLog('✅ Unmuted autoplay successful');
           return true;
@@ -941,7 +947,7 @@ export class WebPlayer extends BasePlayer {
           this.debugLog('⚠️ Unmuted play() succeeded but video is paused, trying muted');
         }
       } catch (error) {
-        this.debugLog('⚠️ Unmuted autoplay failed, trying muted');
+        this.debugLog('⚠️ Unmuted autoplay failed:', error);
       }
     }
 
@@ -951,8 +957,10 @@ export class WebPlayer extends BasePlayer {
       this.debugLog('🔇 Attempting muted autoplay');
 
       try {
+        this.debugLog('▶️ Calling play() for muted autoplay...');
         await this.play();
         // Verify video is actually playing
+        this.debugLog(`📊 Play returned, video.paused=${this.video.paused}`);
         if (!this.video.paused) {
           this.debugLog('✅ Muted autoplay successful');
           // Show YouTube-style unmute button instead of blocking overlay
@@ -962,7 +970,7 @@ export class WebPlayer extends BasePlayer {
           this.debugLog('❌ Muted play() succeeded but video is paused');
         }
       } catch (error) {
-        this.debugLog('❌ Muted autoplay failed');
+        this.debugLog('❌ Muted autoplay failed:', error);
       }
     }
 
@@ -1013,160 +1021,6 @@ export class WebPlayer extends BasePlayer {
     this.debugLog('🎯 Autoplay retry armed - waiting for user interaction');
   }
 
-  private showPlayOverlay(): void {
-    // Don't show overlay if unmute button is already visible (video is autoplaying muted)
-    const unmuteBtn = document.getElementById('uvf-unmute-btn');
-    if (unmuteBtn) {
-      this.debugLog('Skipping play overlay - video is autoplaying muted with unmute button');
-      return;
-    }
-    
-    // Don't show overlay if video is already playing
-    if (this.video && !this.video.paused) {
-      this.debugLog('Skipping play overlay - video is already playing');
-      return;
-    }
-    
-    // Remove existing overlay
-    this.hidePlayOverlay();
-
-    this.debugLog('📺 Showing play overlay due to autoplay restriction');
-
-    const overlay = document.createElement('div');
-    overlay.id = 'uvf-play-overlay';
-    overlay.className = 'uvf-play-overlay';
-
-    const playButton = document.createElement('button');
-    playButton.className = 'uvf-play-button';
-    playButton.setAttribute('aria-label', 'Play video');
-    playButton.innerHTML = `
-      <svg viewBox="0 0 24 24" fill="currentColor">
-        <path d="M8 5v14l11-7z"/>
-      </svg>
-    `;
-
-    const message = document.createElement('div');
-    message.className = 'uvf-play-message';
-    message.textContent = 'Click to play';
-
-    overlay.appendChild(playButton);
-    overlay.appendChild(message);
-
-    // Enhanced click handler with better error handling
-    const handlePlayClick = async (e: Event) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.lastUserInteraction = Date.now();
-      this.debugLog('▶️ User clicked play overlay');
-
-      try {
-        // Ensure video is ready
-        if (!this.video) {
-          this.debugError('Video element not available');
-          return;
-        }
-
-        // Try to play
-        await this.play();
-        this.debugLog('✅ Play successful after user click');
-      } catch (error) {
-        this.debugError('❌ Failed to play after user interaction:', error);
-        // Show error message on overlay
-        message.textContent = 'Unable to play. Please try again.';
-        message.style.color = '#ff6b6b';
-      }
-    };
-
-    // Add click handler to button
-    playButton.addEventListener('click', handlePlayClick);
-
-    // Also allow clicking anywhere on overlay
-    overlay.addEventListener('click', async (e) => {
-      if (e.target === overlay) {
-        await handlePlayClick(e);
-      }
-    });
-
-    // Add enhanced styles with better visibility
-    const style = document.createElement('style');
-    style.textContent = `
-      .uvf-play-overlay {
-        position: absolute !important;
-        top: 0 !important;
-        left: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-        background: rgba(0, 0, 0, 0.85) !important;
-        display: flex !important;
-        flex-direction: column !important;
-        justify-content: center !important;
-        align-items: center !important;
-        z-index: 999999 !important;
-        cursor: pointer !important;
-        backdrop-filter: blur(4px);
-        -webkit-backdrop-filter: blur(4px);
-      }
-
-      .uvf-play-button {
-        width: 96px !important;
-        height: 96px !important;
-        border-radius: 50% !important;
-        background: rgba(255, 255, 255, 0.95) !important;
-        border: 3px solid rgba(255, 255, 255, 0.3) !important;
-        color: #000 !important;
-        cursor: pointer !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        transition: all 0.3s ease !important;
-        margin-bottom: 20px !important;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
-      }
-
-      .uvf-play-button:hover {
-        background: #fff !important;
-        transform: scale(1.15) !important;
-        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
-      }
-
-      .uvf-play-button svg {
-        width: 40px !important;
-        height: 40px !important;
-        margin-left: 4px !important;
-      }
-
-      .uvf-play-message {
-        color: white !important;
-        font-size: 18px !important;
-        font-weight: 600 !important;
-        text-align: center !important;
-        opacity: 0.95 !important;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
-      }
-    `;
-
-    // Add to page if not already added
-    if (!document.getElementById('uvf-play-overlay-styles')) {
-      style.id = 'uvf-play-overlay-styles';
-      document.head.appendChild(style);
-    }
-
-    // Add to player
-    if (this.playerWrapper) {
-      this.playerWrapper.appendChild(overlay);
-      this.debugLog('✅ Play overlay added to player wrapper');
-    } else {
-      this.debugError('❌ Cannot show play overlay - playerWrapper not found');
-    }
-  }
-
-  private hidePlayOverlay(): void {
-    this.debugLog('🔇 Hiding play overlay');
-    const overlay = document.getElementById('uvf-play-overlay');
-    if (overlay) {
-      overlay.remove();
-    }
-  }
   
   /**
    * Show YouTube-style unmute button when video autoplays muted
@@ -1365,8 +1219,6 @@ export class WebPlayer extends BasePlayer {
         this.video.pause();
       }
 
-      // Hide the play overlay if it exists
-      this.hidePlayOverlay();
       // Hide unmute button when video starts playing with sound
       if (!this.video.muted) {
         this.hideUnmuteButton();