unified-video-framework 1.4.447 → 1.4.449

package/packages/web/src/WebPlayer.ts

@@ -1725,8 +1725,44 @@ export class WebPlayer extends BasePlayer {
       existingPlayer.remove();
     }
 
+    // Remove existing overlay if any
+    const existingOverlay = container.querySelector('.uvf-youtube-overlay');
+    if (existingOverlay) {
+      existingOverlay.remove();
+    }
+
     container.appendChild(iframeContainer);
 
+    // Create transparent overlay to block YouTube's native controls (when custom controls are enabled)
+    if (!this.youtubeNativeControls) {
+      const overlay = document.createElement('div');
+      overlay.className = 'uvf-youtube-overlay';
+      // Styles are handled in CSS, just set essentials here
+      overlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 2;
+      `;
+
+      // Handle click to toggle play/pause
+      overlay.addEventListener('click', () => {
+        this.togglePlayPause();
+      });
+
+      // Handle double-click for fullscreen
+      overlay.addEventListener('dblclick', () => {
+        if (this.isFullscreen()) {
+          this.exitFullscreen();
+        } else {
+          this.enterFullscreen();
+        }
+      });
+
+      container.appendChild(overlay);
+    }
+
     // Load YouTube IFrame API if not loaded
     if (!window.YT) {
       await this.loadYouTubeAPI();
@@ -1802,6 +1838,10 @@ export class WebPlayer extends BasePlayer {
     this.youtubePlayerReady = true;
     this.debugLog('YouTube player ready');
 
+    // Hide loading spinner when YouTube player is ready
+    const loading = document.getElementById('uvf-loading');
+    if (loading) loading.classList.remove('active');
+
     // If YouTube native controls are enabled, hide custom controls
     if (this.youtubeNativeControls && this.playerWrapper) {
       this.debugLog('[YouTube] Native controls enabled - hiding custom controls');
@@ -1851,6 +1891,10 @@ export class WebPlayer extends BasePlayer {
     const state = event.data;
 
     switch (state) {
+      case window.YT.PlayerState.UNSTARTED: // -1: Video is loaded but not started
+        this.updateYouTubeUI('unstarted');
+        break;
+
       case window.YT.PlayerState.PLAYING:
         this.state.isPlaying = true;
         this.state.isPaused = false;
@@ -1903,12 +1947,20 @@ export class WebPlayer extends BasePlayer {
     const playIcon = document.getElementById('uvf-play-icon');
     const pauseIcon = document.getElementById('uvf-pause-icon');
     const centerPlay = document.getElementById('uvf-center-play');
+    const loading = document.getElementById('uvf-loading');
+
+    // Handle loading spinner for YouTube
+    if (state === 'buffering') {
+      if (loading) loading.classList.add('active');
+    } else if (state === 'playing' || state === 'paused' || state === 'cued' || state === 'ended' || state === 'unstarted') {
+      if (loading) loading.classList.remove('active');
+    }
 
     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') {
+    } else if (state === 'paused' || state === 'cued' || state === 'ended' || state === 'unstarted') {
       if (playIcon) playIcon.style.display = 'block';
       if (pauseIcon) pauseIcon.style.display = 'none';
       if (centerPlay) centerPlay.classList.remove('hidden');
@@ -5705,7 +5757,37 @@ export class WebPlayer extends BasePlayer {
         top: 2px; /* Center on the 4px hover progress bar (2px from top) */
         transform: translate(-50%, -50%) scale(1);
       }
-      
+
+      /* Prevent text selection during seekbar drag */
+      .uvf-player-wrapper.seeking {
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+      }
+
+      /* Maintain expanded seekbar state during drag (same as hover) */
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-bar {
+        height: 4px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 6px;
+        transform: scaleY(1.1);
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-handle {
+        opacity: 1;
+        top: 2px;
+        transform: translate(-50%, -50%) scale(1);
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-buffered {
+        border-radius: 6px;
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-filled {
+        border-radius: 6px;
+      }
+
       .uvf-progress-handle:hover {
         transform: translate(-50%, -50%) scale(1.2);
         box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
@@ -5774,7 +5856,8 @@ export class WebPlayer extends BasePlayer {
         z-index: 25;
         opacity: 0;
         transform: translateX(-50%) translateY(8px);
-        transition: opacity 0.15s ease, transform 0.15s ease;
+        transition: opacity 0.15s ease, transform 0.15s ease, left 0.05s ease-out;
+        will-change: left, transform, opacity;
       }
 
       .uvf-thumbnail-preview.visible {
@@ -5790,6 +5873,8 @@ export class WebPlayer extends BasePlayer {
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
+        /* Prevent container size changes */
+        flex-shrink: 0;
       }
 
       .uvf-thumbnail-preview-image-wrapper {
@@ -5799,6 +5884,8 @@ export class WebPlayer extends BasePlayer {
         border-radius: 6px;
         overflow: hidden;
         background: rgba(30, 30, 30, 0.95);
+        /* Prevent layout shifts during image loading */
+        flex-shrink: 0;
       }
 
       .uvf-thumbnail-preview-image {
@@ -5808,6 +5895,10 @@ export class WebPlayer extends BasePlayer {
         display: block;
         opacity: 0;
         transition: opacity 0.2s ease;
+        /* Prevent reflow/repaint jitter during load */
+        will-change: opacity;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
       }
 
       .uvf-thumbnail-preview-image.loaded {
@@ -8558,7 +8649,25 @@ export class WebPlayer extends BasePlayer {
         opacity: 0 !important;
         pointer-events: none !important;
       }
-      
+
+      /* YouTube overlay to block native controls */
+      .uvf-youtube-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 60px); /* Leave bottom area for our controls */
+        z-index: 2;
+        cursor: pointer;
+        background: transparent;
+        pointer-events: auto;
+      }
+
+      /* When controls are hidden, cover entire video */
+      .uvf-player-wrapper:not(:hover) .uvf-youtube-overlay {
+        height: 100%;
+      }
+
       /* Ultra-wide screens */
       @media screen and (min-width: 1440px) {
         .uvf-video-title {
@@ -9376,6 +9485,9 @@ export class WebPlayer extends BasePlayer {
     progressBar?.addEventListener('mousedown', (e) => {
       this.isDragging = true;
       this.showTimeTooltip = true;
+      // Maintain seekbar expanded state and prevent text selection during drag
+      progressBar.classList.add('dragging');
+      this.playerWrapper?.classList.add('seeking');
       this.seekToPosition(e as MouseEvent);
       this.updateTimeTooltip(e as MouseEvent);
     });
@@ -9405,6 +9517,9 @@ export class WebPlayer extends BasePlayer {
     progressBar?.addEventListener('touchstart', (e) => {
       e.preventDefault(); // Prevent scrolling
       this.isDragging = true;
+      // Maintain seekbar expanded state and prevent text selection during drag
+      progressBar.classList.add('dragging');
+      this.playerWrapper?.classList.add('seeking');
       const touch = e.touches[0];
       const mouseEvent = new MouseEvent('mousedown', {
         clientX: touch.clientX,
@@ -9451,6 +9566,9 @@ export class WebPlayer extends BasePlayer {
 
       if (this.isDragging) {
         this.isDragging = false;
+        // Remove dragging classes
+        progressBar?.classList.remove('dragging');
+        this.playerWrapper?.classList.remove('seeking');
         // Remove dragging class from handle
         const handle = document.getElementById('uvf-progress-handle');
         handle?.classList.remove('dragging');
@@ -9466,6 +9584,9 @@ export class WebPlayer extends BasePlayer {
     document.addEventListener('touchend', () => {
       if (this.isDragging) {
         this.isDragging = false;
+        // Remove dragging classes
+        progressBar?.classList.remove('dragging');
+        this.playerWrapper?.classList.remove('seeking');
         // Remove dragging class from handle
         const handle = document.getElementById('uvf-progress-handle');
         handle?.classList.remove('dragging');