unified-video-framework 1.4.459 → 1.4.461

package/packages/web/src/WebPlayer.ts

@@ -1838,12 +1838,17 @@ export class WebPlayer extends BasePlayer {
         iv_load_policy: 3, // Hide annotations
         modestbranding: 1, // Minimal YouTube branding
         rel: 0,            // Don't show related videos
-        showinfo: 0,       // Hide video info
+        showinfo: 0,       // Hide video info (deprecated but keep for older players)
+        autohide: 1,       // Auto-hide controls after delay
+        cc_load_policy: 0, // Don't show captions by default
+        playsinline: 1,    // Play inline on mobile
         autoplay: this.config.autoPlay ? 1 : 0,
         mute: this.config.muted ? 1 : 0,
         loop: this.config.loop ? 1 : 0,                      // Enable/disable loop
         playlist: this.config.loop ? videoId : undefined,    // Required for loop to work with single video
-        widget_referrer: window.location.href // Hide YouTube recommendations
+        widget_referrer: window.location.href,               // Hide YouTube recommendations
+        origin: window.location.origin,                      // Required for security
+        enablejsapi: 1                                        // Enable JavaScript API
       },
       events: {
         onReady: () => this.onYouTubePlayerReady(),
@@ -2688,12 +2693,27 @@ export class WebPlayer extends BasePlayer {
   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;
+    if (!progressBar || !tooltip) return;
+
+    // Get duration from YouTube player or regular video
+    let duration: number;
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      duration = this.youtubePlayer.getDuration();
+    } else if (this.video) {
+      duration = this.video.duration;
+    } else {
+      return; // No video source available
+    }
+
+    // Validate duration
+    if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
+      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;
+    const time = percent * duration;
 
     // Update tooltip content and position
     tooltip.textContent = this.formatTime(time);
@@ -4596,6 +4616,42 @@ export class WebPlayer extends BasePlayer {
         this.playerWrapper.classList.add('uvf-fullscreen');
         this.emit('onFullscreenChanged', true);
 
+        // Force YouTube custom controls to be visible in fullscreen
+        if (this.isYouTubeCustomControlsMode) {
+          const controlsBar = document.getElementById('uvf-controls') as HTMLElement;
+          const topBar = document.querySelector('.uvf-top-bar') as HTMLElement;
+
+          if (controlsBar) {
+            controlsBar.style.position = 'fixed';
+            controlsBar.style.bottom = '0';
+            controlsBar.style.left = '0';
+            controlsBar.style.right = '0';
+            controlsBar.style.zIndex = '2147483645';
+            controlsBar.style.display = 'flex';
+            controlsBar.style.flexDirection = 'column';
+            controlsBar.style.visibility = 'visible';
+            controlsBar.style.opacity = '1';
+            controlsBar.style.pointerEvents = 'auto';
+            controlsBar.style.transform = 'translateY(0)';
+          }
+
+          if (topBar) {
+            topBar.style.position = 'fixed';
+            topBar.style.top = '0';
+            topBar.style.left = '0';
+            topBar.style.right = '0';
+            topBar.style.zIndex = '2147483645';
+            topBar.style.display = 'flex';
+            topBar.style.visibility = 'visible';
+            topBar.style.opacity = '1';
+            topBar.style.pointerEvents = 'auto';
+            topBar.style.transform = 'translateY(0)';
+          }
+
+          // Keep controls always visible in YouTube fullscreen
+          this.playerWrapper?.classList.add('controls-visible');
+        }
+
         // Lock to landscape orientation on mobile devices
         await this.lockOrientationLandscape();
       } else {
@@ -7812,7 +7868,34 @@ export class WebPlayer extends BasePlayer {
         transform: translateY(-10px) !important;
         pointer-events: none;
       }
-      
+
+      /* YouTube custom controls in fullscreen - CRITICAL FIX for all devices */
+      /* This rule applies regardless of device/orientation */
+      .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-controls-bar,
+      .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-top-bar {
+        position: fixed !important;
+        z-index: 2147483645 !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        pointer-events: auto !important;
+        transform: translateY(0) !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-controls-bar {
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-top-bar {
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        display: flex !important;
+      }
+
       /* Fullscreen specific styles - DESKTOP AND LANDSCAPE ONLY */
       /* Mobile portrait uses Material You layout in fullscreen */
       @media not all and (max-width: 767px) and (orientation: portrait) {
@@ -7923,6 +8006,38 @@ export class WebPlayer extends BasePlayer {
           opacity: 1;
           transform: translateY(0);
         }
+
+        /* Ensure YouTube custom controls are visible in fullscreen */
+        .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-controls-bar {
+          position: fixed !important;
+          bottom: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          z-index: 2147483645 !important;
+          display: flex !important;
+          flex-direction: column !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          pointer-events: auto !important;
+        }
+
+        .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-top-bar {
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          z-index: 2147483645 !important;
+          display: flex !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          pointer-events: auto !important;
+        }
+
+        /* Keep controls always visible in fullscreen for YouTube */
+        .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-controls-bar,
+        .uvf-player-wrapper.youtube-custom-controls-mode.uvf-fullscreen .uvf-top-bar {
+          transform: translateY(0) !important;
+        }
       }
       
       /* Safe Area Variables - Support for modern mobile devices */
@@ -10810,9 +10925,18 @@ export class WebPlayer extends BasePlayer {
     const progressBar = document.querySelector('.uvf-progress-bar') as HTMLElement;
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
-    if (!progressBar || !this.video) return;
+    if (!progressBar) return;
+
+    // Get duration from YouTube player or regular video
+    let duration: number;
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      duration = this.youtubePlayer.getDuration();
+    } else if (this.video) {
+      duration = this.video.duration;
+    } else {
+      return; // No video source available
+    }
 
-    const duration = this.video.duration;
     // Validate duration before calculating seek time
     if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
       this.debugWarn('Invalid video duration, cannot seek via progress bar');