unified-video-framework 1.4.147 → 1.4.149

package/packages/web/src/WebPlayer.ts

@@ -83,6 +83,9 @@ export class WebPlayer extends BasePlayer {
   // Fullscreen fallback tracking
   private hasTriedButtonFallback: boolean = false;
   private lastUserInteraction: number = 0;
+  
+  // Progress bar tooltip state
+  private showTimeTooltip: boolean = false;
 
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
@@ -153,8 +156,9 @@ export class WebPlayer extends BasePlayer {
     this.video = document.createElement('video');
     this.video.className = 'uvf-video';
     this.video.controls = false; // We'll use custom controls
+    // For autoplay to work, video must be muted in most browsers
     this.video.autoplay = this.config.autoPlay ?? false;
-    this.video.muted = this.config.muted ?? false;
+    this.video.muted = this.config.autoPlay ? true : (this.config.muted ?? false);
     this.video.loop = this.config.loop ?? false;
     this.video.playsInline = this.config.playsInline ?? true;
     this.video.preload = this.config.preload ?? 'metadata';
@@ -193,6 +197,7 @@ export class WebPlayer extends BasePlayer {
     this.setupKeyboardShortcuts();
     this.setupWatermark();
     this.setupFullscreenListeners();
+    this.setupUserInteractionTracking();
 
     // Initialize paywall controller if provided
     try {
@@ -518,7 +523,15 @@ export class WebPlayer extends BasePlayer {
 
         // Start playback if autoPlay is enabled
         if (this.config.autoPlay) {
-          this.play();
+          // Attempt autoplay, but handle gracefully if blocked
+          this.play().catch(error => {
+            if (this.isAutoplayRestrictionError(error)) {
+              this.debugWarn('HLS autoplay blocked, showing play overlay');
+              this.showPlayOverlay();
+            } else {
+              this.debugError('HLS autoplay failed:', error);
+            }
+          });
         }
       });
 
@@ -681,6 +694,190 @@ export class WebPlayer extends BasePlayer {
     );
   }
 
+  private isAutoplayRestrictionError(err: any): boolean {
+    if (!err) return false;
+    
+    const message = (err.message || '').toLowerCase();
+    const name = (err.name || '').toLowerCase();
+    
+    // Common autoplay restriction error patterns
+    return (
+      name === 'notallowederror' ||
+      message.includes('user didn\'t interact') ||
+      message.includes('autoplay') ||
+      message.includes('gesture') ||
+      message.includes('user activation') ||
+      message.includes('play() failed') ||
+      message.includes('user interaction')
+    );
+  }
+
+  private showPlayOverlay(): void {
+    // Remove existing overlay
+    this.hidePlayOverlay();
+    
+    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.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);
+    
+    // Add click handler
+    playButton.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      this.lastUserInteraction = Date.now();
+      
+      try {
+        await this.play();
+      } catch (error) {
+        this.debugError('Failed to play after user interaction:', error);
+      }
+    });
+    
+    // Also allow clicking anywhere on overlay
+    overlay.addEventListener('click', async (e) => {
+      if (e.target === overlay) {
+        e.stopPropagation();
+        this.lastUserInteraction = Date.now();
+        
+        try {
+          await this.play();
+        } catch (error) {
+          this.debugError('Failed to play after user interaction:', error);
+        }
+      }
+    });
+    
+    // Add styles
+    const style = document.createElement('style');
+    style.textContent = `
+      .uvf-play-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        cursor: pointer;
+      }
+      
+      .uvf-play-button {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        color: #000;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        margin-bottom: 16px;
+      }
+      
+      .uvf-play-button:hover {
+        background: #fff;
+        transform: scale(1.1);
+      }
+      
+      .uvf-play-button svg {
+        width: 32px;
+        height: 32px;
+        margin-left: 4px;
+      }
+      
+      .uvf-play-message {
+        color: white;
+        font-size: 16px;
+        font-weight: 500;
+        text-align: center;
+        opacity: 0.9;
+      }
+    `;
+    
+    // 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);
+    }
+  }
+
+  private hidePlayOverlay(): void {
+    const overlay = document.getElementById('uvf-play-overlay');
+    if (overlay) {
+      overlay.remove();
+    }
+  }
+  
+  private updateTimeTooltip(e: MouseEvent): void {
+    const progressBar = document.getElementById('uvf-progress-bar');
+    const tooltip = document.getElementById('uvf-time-tooltip');
+    if (!progressBar || !tooltip || !this.video) return;
+    
+    const rect = progressBar.getBoundingClientRect();
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percent = (x / rect.width);
+    const time = percent * this.video.duration;
+    
+    // Update tooltip content and position
+    tooltip.textContent = this.formatTime(time);
+    tooltip.style.left = `${x}px`;
+    tooltip.classList.add('visible');
+  }
+  
+  private hideTimeTooltip(): void {
+    const tooltip = document.getElementById('uvf-time-tooltip');
+    if (tooltip) {
+      tooltip.classList.remove('visible');
+    }
+  }
+
+  private setupUserInteractionTracking(): void {
+    // Track various user interactions to enable autoplay
+    const interactionEvents = ['click', 'mousedown', 'keydown', 'touchstart'];
+    
+    const updateLastInteraction = () => {
+      this.lastUserInteraction = Date.now();
+      this.debugLog('User interaction detected at:', this.lastUserInteraction);
+    };
+    
+    // Listen on document for global interactions
+    interactionEvents.forEach(eventType => {
+      document.addEventListener(eventType, updateLastInteraction, { passive: true });
+    });
+    
+    // Also listen on player wrapper for more specific interactions
+    if (this.playerWrapper) {
+      interactionEvents.forEach(eventType => {
+        this.playerWrapper!.addEventListener(eventType, updateLastInteraction, { passive: true });
+      });
+    }
+  }
+
   async play(): Promise<void> {
     if (!this.video) throw new Error('Video element not initialized');
 
@@ -710,6 +907,8 @@ export class WebPlayer extends BasePlayer {
         this.video.pause();
       }
 
+      // Hide the play overlay if it exists
+      this.hidePlayOverlay();
       await super.play();
     } catch (err) {
       this._playPromise = null;
@@ -717,6 +916,14 @@ export class WebPlayer extends BasePlayer {
         // Benign: pause() raced play(); ignore the error.
         return;
       }
+      
+      // Check if this is an autoplay restriction error
+      if (this.isAutoplayRestrictionError(err)) {
+        this.debugWarn('Autoplay blocked by browser policy - showing play overlay');
+        this.showPlayOverlay();
+        return; // Don't throw error for autoplay restrictions
+      }
+      
       this.handleError({
         code: 'PLAY_ERROR',
         message: `Failed to start playbook: ${err}`,
@@ -2031,10 +2238,22 @@ export class WebPlayer extends BasePlayer {
         width: 100%;
         position: relative;
         cursor: pointer;
-        padding: 16px 0;
+        padding: 6px 0;
         overflow: visible;
       }
       
+      /* Extended touch area for better mobile UX without affecting visual spacing */
+      .uvf-progress-bar-wrapper::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        bottom: -8px;
+        left: 0;
+        right: 0;
+        cursor: pointer;
+        z-index: 10;
+      }
+      
       .uvf-progress-bar {
         width: 100%;
         height: 2px;
@@ -2115,30 +2334,102 @@ export class WebPlayer extends BasePlayer {
         left: 0;
         height: 100%;
         background: linear-gradient(90deg, 
-          #ff4500 0%,
-          #ff5722 25%,
-          #ff6b35 50%,
-          #ff7043 75%,
-          #ff8c69 100%
+          var(--uvf-accent-1, #ff4500) 0%,
+          var(--uvf-accent-1, #ff5722) 25%,
+          var(--uvf-accent-2, #ff6b35) 50%,
+          var(--uvf-accent-2, #ff7043) 75%,
+          var(--uvf-accent-2, #ff8c69) 100%
         );
         border-radius: 4px;
         pointer-events: none;
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         z-index: 2;
-        box-shadow: 0 0 12px rgba(255, 87, 34, 0.3);
+        box-shadow: 0 0 12px var(--uvf-accent-1-20, rgba(255, 87, 34, 0.3));
       }
       
       .uvf-progress-bar-wrapper:hover .uvf-progress-filled {
         border-radius: 6px;
         background: linear-gradient(90deg, 
-          #ff4500 0%,
-          #ff5722 20%,
-          #ff6b35 40%,
-          #ff7043 60%,
-          #ff8c69 80%,
-          #ffa500 100%
+          var(--uvf-accent-1, #ff4500) 0%,
+          var(--uvf-accent-1, #ff5722) 20%,
+          var(--uvf-accent-2, #ff6b35) 40%,
+          var(--uvf-accent-2, #ff7043) 60%,
+          var(--uvf-accent-2, #ff8c69) 80%,
+          var(--uvf-accent-2, #ffa500) 100%
         );
-        box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
+        box-shadow: 0 0 20px var(--uvf-accent-1-20, rgba(255, 87, 34, 0.5));
+      }
+      
+      /* Progress Bar Handle/Thumb */
+      .uvf-progress-handle {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 14px;
+        height: 14px;
+        background: #fff;
+        border: 2px solid var(--uvf-accent-1, #ff5722);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        cursor: grab;
+        opacity: 0;
+        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+        z-index: 3;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+      
+      .uvf-progress-handle:hover {
+        transform: translate(-50%, -50%) scale(1.2);
+        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
+      }
+      
+      .uvf-progress-handle:active,
+      .uvf-progress-handle.dragging {
+        cursor: grabbing;
+        transform: translate(-50%, -50%) scale(1.3);
+        box-shadow: 0 4px 16px rgba(255, 87, 34, 0.4);
+      }
+      
+      /* Time Tooltip */
+      .uvf-time-tooltip {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        margin-bottom: 8px;
+        padding: 4px 8px;
+        background: rgba(0, 0, 0, 0.8);
+        color: #fff;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: 4px;
+        white-space: nowrap;
+        opacity: 0;
+        transform: translateX(-50%) translateY(4px);
+        transition: all 0.2s ease;
+        pointer-events: none;
+        z-index: 20;
+        backdrop-filter: blur(4px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      .uvf-time-tooltip::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 4px solid transparent;
+        border-top-color: rgba(0, 0, 0, 0.8);
+      }
+      
+      .uvf-time-tooltip.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
       }
       
       
@@ -2146,7 +2437,7 @@ export class WebPlayer extends BasePlayer {
       /* Mobile responsive design with enhanced touch targets */
       @media (max-width: 768px) {
         .uvf-progress-bar-wrapper {
-          padding: 20px 0; /* Larger touch area */
+          padding: 8px 0; /* Optimized touch area */
         }
         
         .uvf-progress-bar {
@@ -4788,7 +5079,9 @@ export class WebPlayer extends BasePlayer {
       <div class="uvf-progress-bar">
         <div class="uvf-progress-buffered" id="uvf-progress-buffered"></div>
         <div class="uvf-progress-filled" id="uvf-progress-filled"></div>
+        <div class="uvf-progress-handle" id="uvf-progress-handle"></div>
       </div>
+      <div class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
     `;
     progressSection.appendChild(progressBar);
     
@@ -5145,7 +5438,7 @@ export class WebPlayer extends BasePlayer {
     });
     
     
-    // Progress bar click
+    // Progress bar interactions
     progressBar?.addEventListener('click', (e) => {
       this.handleProgressChange(e as MouseEvent);
     });
@@ -5155,7 +5448,31 @@ export class WebPlayer extends BasePlayer {
       this.handleProgressChange(e as MouseEvent);
     });
     
-    // Global mouse events for enhanced dragging
+    // Hover tooltip functionality
+    progressBar?.addEventListener('mouseenter', () => {
+      this.showTimeTooltip = true;
+    });
+    
+    progressBar?.addEventListener('mouseleave', () => {
+      this.showTimeTooltip = false;
+      this.hideTimeTooltip();
+    });
+    
+    progressBar?.addEventListener('mousemove', (e) => {
+      if (!this.isDragging && this.showTimeTooltip) {
+        this.updateTimeTooltip(e as MouseEvent);
+      }
+    });
+    
+    // Touch support for mobile devices
+    progressBar?.addEventListener('touchstart', (e) => {
+      e.preventDefault(); // Prevent scrolling
+      this.isDragging = true;
+      const touch = e.touches[0];
+      this.handleProgressChange(touch);
+    }, { passive: false });
+    
+    // Global mouse and touch events for enhanced dragging
     document.addEventListener('mousemove', (e) => {
       if (this.isVolumeSliding) {
         this.handleVolumeChange(e);
@@ -5165,6 +5482,14 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
+    document.addEventListener('touchmove', (e) => {
+      if (this.isDragging && progressBar) {
+        e.preventDefault(); // Prevent scrolling
+        const touch = e.touches[0];
+        this.handleProgressChange(touch);
+      }
+    }, { passive: false });
+    
     document.addEventListener('mouseup', () => {
       if (this.isVolumeSliding) {
         this.isVolumeSliding = false;
@@ -5177,16 +5502,34 @@ export class WebPlayer extends BasePlayer {
       
       if (this.isDragging) {
         this.isDragging = false;
+        // Remove dragging class from handle
+        const handle = document.getElementById('uvf-progress-handle');
+        handle?.classList.remove('dragging');
+      }
+    });
+    
+    document.addEventListener('touchend', () => {
+      if (this.isDragging) {
+        this.isDragging = false;
+        // Remove dragging class from handle
+        const handle = document.getElementById('uvf-progress-handle');
+        handle?.classList.remove('dragging');
       }
     });
     
     // Update progress bar
     this.video.addEventListener('timeupdate', () => {
       const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
+      const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
       
       if (this.video && progressFilled) {
         const percent = (this.video.currentTime / this.video.duration) * 100;
         progressFilled.style.width = percent + '%';
+        
+        // Update handle position (only when not dragging)
+        if (progressHandle && !this.isDragging) {
+          progressHandle.style.left = percent + '%';
+        }
       }
       
       // Update time display using the dedicated method
@@ -5933,7 +6276,7 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
-  private handleProgressChange(e: MouseEvent): void {
+  private handleProgressChange(e: MouseEvent | Touch): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
@@ -5950,6 +6293,12 @@ export class WebPlayer extends BasePlayer {
     }
     if (progressHandle) {
       progressHandle.style.left = percent + '%';
+      // Add dragging class for visual feedback
+      if (this.isDragging) {
+        progressHandle.classList.add('dragging');
+      } else {
+        progressHandle.classList.remove('dragging');
+      }
     }
     
     this.seek(time);