unified-video-framework 1.4.265 → 1.4.267

package/packages/web/src/WebPlayer.ts

@@ -290,19 +290,13 @@ export class WebPlayer extends BasePlayer {
     videoContainer.appendChild(this.video);
     videoContainer.appendChild(this.watermarkCanvas);
 
-    // Create custom controls if enabled
-    if (this.useCustomControls) {
-      this.createCustomControls(videoContainer);
-    } else {
-      // Hide controls if disabled
-      this.debugLog('Controls disabled - not creating custom controls UI');
-    }
-
-
+    // Always create custom controls
+    this.createCustomControls(videoContainer);
+    
     // Apply controls-disabled class if controls are disabled
     if (!this.useCustomControls) {
       wrapper.classList.add('controls-disabled');
-      this.debugLog('🚫 controls-disabled class applied to player wrapper');
+      this.debugLog('🚫 controls-disabled class applied to player wrapper - controls will be hidden via CSS');
     }
     
     // Assemble the player
@@ -1282,30 +1276,35 @@ export class WebPlayer extends BasePlayer {
    * Hide custom controls when YouTube is active
    */
   private hideCustomControls(): void {
-    const controlsBar = document.getElementById('uvf-controls');
-    const topBar = document.querySelector('.uvf-top-bar');
-    const topGradient = document.querySelector('.uvf-top-gradient');
-    const controlsGradient = document.querySelector('.uvf-controls-gradient');
-    
-    if (controlsBar) {
-      controlsBar.style.display = 'none !important';
-      controlsBar.style.visibility = 'hidden';
-      controlsBar.style.pointerEvents = 'none';
-    }
-    if (topBar) {
-      (topBar as HTMLElement).style.display = 'none';
-      (topBar as HTMLElement).style.visibility = 'hidden';
-    }
-    if (topGradient) {
-      (topGradient as HTMLElement).style.display = 'none';
-      (topGradient as HTMLElement).style.visibility = 'hidden';
-    }
-    if (controlsGradient) {
-      (controlsGradient as HTMLElement).style.display = 'none';
-      (controlsGradient as HTMLElement).style.visibility = 'hidden';
+    // Apply youtube-mode class to wrapper which hides all custom controls via CSS
+    if (this.playerWrapper) {
+      this.playerWrapper.classList.add('youtube-mode');
+      this.debugLog('🎬 youtube-mode class applied - custom controls hidden');
     }
     
-    this.debugLog('🎬 Custom controls hidden for YouTube player');
+    // Fallback: direct DOM manipulation if class approach doesn't work
+    setTimeout(() => {
+      const controlsBar = document.getElementById('uvf-controls');
+      const topBar = document.querySelector('.uvf-top-bar');
+      const centerPlay = document.getElementById('uvf-center-play');
+      
+      if (controlsBar) {
+        controlsBar.style.display = 'none';
+        controlsBar.style.visibility = 'hidden';
+        controlsBar.style.pointerEvents = 'none';
+      }
+      if (topBar) {
+        (topBar as HTMLElement).style.display = 'none';
+        (topBar as HTMLElement).style.visibility = 'hidden';
+        (topBar as HTMLElement).style.pointerEvents = 'none';
+      }
+      if (centerPlay) {
+        centerPlay.style.display = 'none';
+        centerPlay.style.visibility = 'hidden';
+      }
+      
+      this.debugLog('🎬 Fallback: Direct DOM manipulation applied');
+    }, 100);
   }
 
   private onYouTubePlayerStateChange(event: any): void {
@@ -6349,11 +6348,23 @@ export class WebPlayer extends BasePlayer {
         display: flex !important;
       }
       
+      /* YouTube Mode - Hide all custom controls */
+      .uvf-player-wrapper.youtube-mode .uvf-controls-bar,
+      .uvf-player-wrapper.youtube-mode .uvf-top-bar,
+      .uvf-player-wrapper.youtube-mode .uvf-top-gradient,
+      .uvf-player-wrapper.youtube-mode .uvf-controls-gradient,
+      .uvf-player-wrapper.youtube-mode .uvf-center-play-container {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+      
       /* Hide all controls if controls prop is false */
       .uvf-player-wrapper.controls-disabled .uvf-controls-bar,
       .uvf-player-wrapper.controls-disabled .uvf-top-bar,
       .uvf-player-wrapper.controls-disabled .uvf-top-gradient,
-      .uvf-player-wrapper.controls-disabled .uvf-controls-gradient {
+      .uvf-player-wrapper.controls-disabled .uvf-controls-gradient,
+      .uvf-player-wrapper.controls-disabled .uvf-center-play-container {
         display: none !important;
         visibility: hidden !important;
         pointer-events: none !important;