unified-video-framework 1.4.453 → 1.4.455

package/packages/web/src/WebPlayer.ts

@@ -616,6 +616,9 @@ export class WebPlayer extends BasePlayer {
     // Apply controls-disabled class if controls={false}
     if (!this.useCustomControls) {
       wrapper.classList.add('controls-disabled');
+    } else {
+      // Make controls visible by default when controls={true}
+      wrapper.classList.add('controls-visible');
     }
 
     // Assemble the player
@@ -1773,13 +1776,16 @@ export class WebPlayer extends BasePlayer {
         `;
       }
 
-      // Always add mousemove listener for hover detection
+      // Add mouse event listeners for control visibility
       overlay.addEventListener('mouseenter', () => {
         this.playerWrapper?.classList.add('controls-visible');
       });
 
       overlay.addEventListener('mouseleave', () => {
-        this.playerWrapper?.classList.remove('controls-visible');
+        // Only hide controls if video is playing, otherwise keep them visible
+        if (this.state.isPlaying) {
+          this.scheduleHideControls();
+        }
       });
 
       container.appendChild(overlay);
@@ -1787,10 +1793,14 @@ export class WebPlayer extends BasePlayer {
       // Also add listeners to the container for fallback hover detection
       container.addEventListener('mouseenter', () => {
         this.playerWrapper?.classList.add('controls-visible');
+        if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
       });
 
       container.addEventListener('mouseleave', () => {
-        this.playerWrapper?.classList.remove('controls-visible');
+        // Only hide controls if video is playing, otherwise keep them visible
+        if (this.state.isPlaying) {
+          this.scheduleHideControls();
+        }
       });
     }
 
@@ -1887,6 +1897,7 @@ export class WebPlayer extends BasePlayer {
       this.debugLog('[YouTube] Custom controls only mode - showing custom controls, hiding YouTube native controls');
       this.playerWrapper.classList.remove('youtube-native-controls-mode');
       this.playerWrapper.classList.add('youtube-custom-controls-mode');
+      this.playerWrapper.classList.add('controls-visible');
       this.showCustomControls();
     } else if (!this.youtubeNativeControls && !this.useCustomControls && this.playerWrapper) {
       // No controls mode - both YouTube native and custom controls are hidden
@@ -5658,8 +5669,8 @@ export class WebPlayer extends BasePlayer {
       
       .uvf-player-wrapper:hover .uvf-controls-bar,
       .uvf-player-wrapper.controls-visible .uvf-controls-bar {
-        opacity: 1;
-        transform: translateY(0);
+        opacity: 1 !important;
+        transform: translateY(0) !important;
       }
       
       .uvf-player-wrapper.no-cursor {
@@ -7114,8 +7125,8 @@ export class WebPlayer extends BasePlayer {
       
       .uvf-player-wrapper:hover .uvf-top-bar,
       .uvf-player-wrapper.controls-visible .uvf-top-bar {
-        opacity: 1;
-        transform: translateY(0);
+        opacity: 1 !important;
+        transform: translateY(0) !important;
       }
       
       /* Title Bar - After navigation buttons */
@@ -8832,18 +8843,24 @@ export class WebPlayer extends BasePlayer {
         display: flex !important;
         visibility: visible !important;
         pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
       }
 
       .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-bar {
         display: flex !important;
         visibility: visible !important;
         pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: translateY(0) !important;
       }
 
       .uvf-player-wrapper.youtube-custom-controls-mode .uvf-center-play-container {
         display: flex !important;
         visibility: visible !important;
         pointer-events: auto !important;
+        opacity: 1 !important;
+        transform: scale(1) !important;
       }
 
       /* Override any inline styles */