unified-video-framework 1.4.460 → 1.4.461

package/packages/web/src/WebPlayer.ts

@@ -2693,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);
@@ -4601,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 {
@@ -7817,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) {