unified-video-framework 1.4.244 → 1.4.246

package/packages/web/src/WebPlayer.ts

@@ -1176,14 +1176,15 @@ export class WebPlayer extends BasePlayer {
       height: '100%',
       playerVars: {
         controls: 0,        // Hide YouTube controls
-        disablekb: 1,      // Disable keyboard controls
+        disablekb: 0,      // Allow keyboard controls
         fs: 0,             // Hide fullscreen button
         iv_load_policy: 3, // Hide annotations
         modestbranding: 1, // Minimal YouTube branding
         rel: 0,            // Don't show related videos
         showinfo: 0,       // Hide video info
         autoplay: this.config.autoPlay ? 1 : 0,
-        mute: this.config.muted ? 1 : 0
+        mute: this.config.muted ? 1 : 0,
+        widget_referrer: window.location.href // Hide YouTube recommendations
       },
       events: {
         onReady: () => this.onYouTubePlayerReady(),
@@ -6222,6 +6223,28 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
+      /* Hide YouTube UI elements */
+      iframe[src*="youtube.com"] {
+        pointer-events: auto !important;
+      }
+      
+      /* Hide YouTube title, logo, and controls overlay */
+      .ytp-chrome-top, 
+      .ytp-chrome-bottom,
+      .ytp-watermark,
+      .ytp-gradient-top,
+      .ytp-gradient-bottom,
+      .ytp-show-cards-title,
+      .ytp-cards-teaser,
+      .ytp-endscreen-element,
+      .ytp-ce-element,
+      .ytp-suggested-action,
+      .ytp-pause-overlay {
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+      }
+      
       /* Ultra-wide screens */
       @media screen and (min-width: 1440px) {
         .uvf-video-title {
@@ -6877,15 +6900,21 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
-    // Skip buttons with null safety
+    // Skip buttons with null safety - works with both video and YouTube
     skipBackBtn?.addEventListener('click', () => {
-      if (this.video && !isNaN(this.video.duration)) {
-        this.seek(Math.max(0, this.video.currentTime - 10));
+      const currentTime = this.getCurrentTime();
+      const duration = this.getDuration();
+      if (!isNaN(duration) && duration > 0) {
+        this.seek(Math.max(0, currentTime - 10));
+        this.showShortcutIndicator('-10s');
       }
     });
     skipForwardBtn?.addEventListener('click', () => {
-      if (this.video && !isNaN(this.video.duration)) {
-        this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
+      const currentTime = this.getCurrentTime();
+      const duration = this.getDuration();
+      if (!isNaN(duration) && duration > 0) {
+        this.seek(Math.min(duration, currentTime + 10));
+        this.showShortcutIndicator('+10s');
       }
     });
     
@@ -7345,45 +7374,61 @@ export class WebPlayer extends BasePlayer {
         case 'ArrowLeft':
           e.preventDefault();
           e.stopImmediatePropagation(); // Prevent duplicate handler triggers
-          if (this.video && !isNaN(this.video.duration)) {
-            this.seek(Math.max(0, this.video.currentTime - 10));
+          const currentTime = this.getCurrentTime();
+          const duration = this.getDuration();
+          if (!isNaN(duration) && duration > 0) {
+            this.seek(Math.max(0, currentTime - 10));
             shortcutText = '-10s';
           }
           break;
         case 'ArrowRight':
           e.preventDefault();
           e.stopImmediatePropagation(); // Prevent duplicate handler triggers
-          if (this.video && !isNaN(this.video.duration)) {
-            this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
+          const currentTimeRight = this.getCurrentTime();
+          const durationRight = this.getDuration();
+          if (!isNaN(durationRight) && durationRight > 0) {
+            this.seek(Math.min(durationRight, currentTimeRight + 10));
             shortcutText = '+10s';
           }
           break;
         case 'ArrowUp':
           e.preventDefault();
           this.changeVolume(0.1);
-          if (this.isCasting && this.remotePlayer) {
-            shortcutText = `Volume ${Math.round(((this.remotePlayer.volumeLevel || 0) * 100))}%`;
+          let volumeUp = 0;
+          if (this.youtubePlayer && this.youtubePlayerReady) {
+            volumeUp = this.youtubePlayer.getVolume();
+          } else if (this.isCasting && this.remotePlayer) {
+            volumeUp = (this.remotePlayer.volumeLevel || 0) * 100;
           } else {
-            shortcutText = `Volume ${Math.round((this.video?.volume || 0) * 100)}%`;
+            volumeUp = (this.video?.volume || 0) * 100;
           }
+          shortcutText = `Volume ${Math.round(volumeUp)}%`;
           break;
         case 'ArrowDown':
           e.preventDefault();
           this.changeVolume(-0.1);
-          if (this.isCasting && this.remotePlayer) {
-            shortcutText = `Volume ${Math.round(((this.remotePlayer.volumeLevel || 0) * 100))}%`;
+          let volumeDown = 0;
+          if (this.youtubePlayer && this.youtubePlayerReady) {
+            volumeDown = this.youtubePlayer.getVolume();
+          } else if (this.isCasting && this.remotePlayer) {
+            volumeDown = (this.remotePlayer.volumeLevel || 0) * 100;
           } else {
-            shortcutText = `Volume ${Math.round((this.video?.volume || 0) * 100)}%`;
+            volumeDown = (this.video?.volume || 0) * 100;
           }
+          shortcutText = `Volume ${Math.round(volumeDown)}%`;
           break;
         case 'm':
           e.preventDefault();
           this.toggleMuteAction();
-          if (this.isCasting && this.remotePlayer) {
-            shortcutText = this.remotePlayer.isMuted ? 'Muted' : 'Unmuted';
+          let isMuted = false;
+          if (this.youtubePlayer && this.youtubePlayerReady) {
+            isMuted = this.youtubePlayer.isMuted();
+          } else if (this.isCasting && this.remotePlayer) {
+            isMuted = this.remotePlayer.isMuted;
           } else {
-            shortcutText = this.video?.muted ? 'Muted' : 'Unmuted';
+            isMuted = this.video?.muted || false;
           }
+          shortcutText = isMuted ? 'Muted' : 'Unmuted';
           break;
         case 'f':
           e.preventDefault();
@@ -7422,9 +7467,11 @@ export class WebPlayer extends BasePlayer {
         case '9':
           e.preventDefault();
           // Only jump to position if video is loaded and duration is valid
-          if (this.video && !isNaN(this.video.duration) && this.video.duration > 0) {
+          const durationForSeek = this.getDuration();
+          if (!isNaN(durationForSeek) && durationForSeek > 0) {
             const percent = parseInt(e.key) * 10;
-            this.video.currentTime = (this.video.duration * percent) / 100;
+            const seekTime = (durationForSeek * percent) / 100;
+            this.seek(seekTime);
             shortcutText = `${percent}%`;
           }
           break;
@@ -7685,12 +7732,29 @@ export class WebPlayer extends BasePlayer {
   private togglePlayPause(): void {
     this.debugLog('togglePlayPause called, video state:', {
       videoExists: !!this.video,
-      videoPaused: this.video?.paused,
+      youtubePlayerExists: !!this.youtubePlayer,
+      youtubePlayerReady: this.youtubePlayerReady,
       playerState: this.state
     });
     
+    // Handle YouTube player
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      const playerState = this.youtubePlayer.getPlayerState();
+      this.debugLog('YouTube player state:', playerState);
+      
+      if (playerState === window.YT.PlayerState.PLAYING) {
+        this.debugLog('YouTube video is playing, calling pause()');
+        this.pause();
+      } else {
+        this.debugLog('YouTube video is paused, calling play()');
+        this.play();
+      }
+      return;
+    }
+    
+    // Handle regular video element
     if (!this.video) {
-      this.debugError('No video element available for toggle');
+      this.debugError('No video element or YouTube player available for toggle');
       return;
     }
     
@@ -7994,12 +8058,28 @@ export class WebPlayer extends BasePlayer {
 
   private updateTimeDisplay(): void {
     const timeDisplay = document.getElementById('uvf-time-display');
-    if (timeDisplay && this.video) {
-      const current = this.formatTime(this.video.currentTime || 0);
-      const duration = this.formatTime(this.video.duration || 0);
-      timeDisplay.textContent = `${current} / ${duration}`;
-      this.debugLog('Time display updated:', `${current} / ${duration}`);
+    if (!timeDisplay) return;
+    
+    let current = 0;
+    let duration = 0;
+    
+    // Get time from YouTube player if available
+    if (this.youtubePlayer && this.youtubePlayerReady) {
+      try {
+        current = this.youtubePlayer.getCurrentTime() || 0;
+        duration = this.youtubePlayer.getDuration() || 0;
+      } catch (error) {
+        this.debugWarn('Error getting YouTube player time:', error);
+      }
+    } else if (this.video) {
+      current = this.video.currentTime || 0;
+      duration = this.video.duration || 0;
     }
+    
+    const currentFormatted = this.formatTime(current);
+    const durationFormatted = this.formatTime(duration);
+    timeDisplay.textContent = `${currentFormatted} / ${durationFormatted}`;
+    this.debugLog('Time display updated:', `${currentFormatted} / ${durationFormatted}`);
   }
 
   private showControls(): void {