unified-video-framework 1.4.455 → 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
@@ -1898,7 +1904,12 @@ export class WebPlayer extends BasePlayer {
       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');
@@ -8863,6 +8874,48 @@ export class WebPlayer extends BasePlayer {
         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 */
       .controls-disabled .uvf-controls-bar,
       .controls-disabled .uvf-top-bar,
@@ -10755,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');
@@ -10765,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;