unified-video-framework 1.4.448 → 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');
@@ -5804,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 {
@@ -5820,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 {
@@ -5829,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 {
@@ -5838,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 {
@@ -8588,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 {