unified-video-framework 1.4.454 → 1.4.456

package/packages/web/src/WebPlayer.ts

@@ -216,6 +216,9 @@ export class WebPlayer extends BasePlayer {
   private currentThumbnailUrl: string | null = null;
   private thumbnailPreviewEnabled: boolean = false;
 
+  // YouTube custom controls mode tracking
+  private isYouTubeCustomControlsMode: boolean = false;
+
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
     if (this.config.debug) {
@@ -1646,6 +1649,9 @@ export class WebPlayer extends BasePlayer {
 
   private async loadYouTube(url: string, source: any): Promise<void> {
     try {
+      // Reset YouTube custom controls mode flag when loading new video
+      this.isYouTubeCustomControlsMode = false;
+
       this.debugLog('Loading YouTube video:', url);
 
       // Extract video ID and fetch metadata
@@ -1897,7 +1903,13 @@ 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');
+
+      // Prevent auto-hide from interfering
+      this.isYouTubeCustomControlsMode = true;
+
       this.showCustomControls();
+      this.debugLog('[YouTube] Auto-hide disabled for custom controls');
     } else if (!this.youtubeNativeControls && !this.useCustomControls && this.playerWrapper) {
       // No controls mode - both YouTube native and custom controls are hidden
       this.debugLog('[YouTube] No controls mode - all controls hidden');
@@ -5668,8 +5680,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 {
@@ -7124,8 +7136,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 */
@@ -8842,18 +8854,66 @@ 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;
+      }
+
+      /* Force YouTube custom controls visible even with no-cursor class */
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-controls-bar,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-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.no-cursor .uvf-top-bar,
       .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.no-cursor .uvf-top-gradient,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-top-gradient {
+        opacity: 1 !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-controls-gradient,
+      .uvf-player-wrapper.youtube-custom-controls-mode .uvf-controls-gradient {
+        opacity: 1 !important;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor .uvf-center-play-container,
       .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;
+      }
+
+      .uvf-player-wrapper.youtube-custom-controls-mode.no-cursor {
+        cursor: default !important;
       }
 
       /* Override any inline styles */
@@ -10748,6 +10808,11 @@ export class WebPlayer extends BasePlayer {
   private hideControls(): void {
     if (!this.state.isPlaying) return;
 
+    // Don't hide controls in YouTube custom mode
+    if (this.isYouTubeCustomControlsMode) {
+      return;
+    }
+
     const wrapper = this.container?.querySelector('.uvf-player-wrapper');
     if (wrapper) {
       wrapper.classList.remove('controls-visible');
@@ -10758,6 +10823,11 @@ export class WebPlayer extends BasePlayer {
   private scheduleHideControls(): void {
     if (!this.state.isPlaying) return;
 
+    // Don't auto-hide in YouTube custom controls mode
+    if (this.isYouTubeCustomControlsMode) {
+      return;
+    }
+
     if (this.hideControlsTimeout) clearTimeout(this.hideControlsTimeout);
     // Use longer timeout in fullscreen for better UX
     const timeout = this.isFullscreen() ? 4000 : 3000;