unified-video-framework 1.4.243 → 1.4.245

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(),
@@ -1257,6 +1258,7 @@ export class WebPlayer extends BasePlayer {
         this.state.isPlaying = true;
         this.state.isPaused = false;
         this.state.isBuffering = false;
+        this.updateYouTubeUI('playing');
         this.emit('onPlay');
         break;
         
@@ -1264,11 +1266,13 @@ export class WebPlayer extends BasePlayer {
         this.state.isPlaying = false;
         this.state.isPaused = true;
         this.state.isBuffering = false;
+        this.updateYouTubeUI('paused');
         this.emit('onPause');
         break;
         
       case window.YT.PlayerState.BUFFERING:
         this.state.isBuffering = true;
+        this.updateYouTubeUI('buffering');
         this.emit('onBuffering', true);
         break;
         
@@ -1276,15 +1280,33 @@ export class WebPlayer extends BasePlayer {
         this.state.isPlaying = false;
         this.state.isPaused = true;
         this.state.isEnded = true;
+        this.updateYouTubeUI('ended');
         this.emit('onEnded');
         break;
         
       case window.YT.PlayerState.CUED:
         this.state.duration = this.youtubePlayer.getDuration();
+        this.updateYouTubeUI('cued');
         break;
     }
   }
 
+  private updateYouTubeUI(state: string): void {
+    const playIcon = document.getElementById('uvf-play-icon');
+    const pauseIcon = document.getElementById('uvf-pause-icon');
+    const centerPlay = document.getElementById('uvf-center-play');
+    
+    if (state === 'playing' || state === 'buffering') {
+      if (playIcon) playIcon.style.display = 'none';
+      if (pauseIcon) pauseIcon.style.display = 'block';
+      if (centerPlay) centerPlay.classList.add('hidden');
+    } else if (state === 'paused' || state === 'cued' || state === 'ended') {
+      if (playIcon) playIcon.style.display = 'block';
+      if (pauseIcon) pauseIcon.style.display = 'none';
+      if (centerPlay) centerPlay.classList.remove('hidden');
+    }
+  }
+
   private onYouTubePlayerError(event: any): void {
     const errorCode = event.data;
     let errorMessage = 'YouTube player error';
@@ -1332,6 +1354,9 @@ export class WebPlayer extends BasePlayer {
           this.state.duration = duration || 0;
           this.state.bufferedPercentage = buffered || 0;
           
+          // Update UI progress bar
+          this.updateYouTubeProgressBar(currentTime, duration, buffered);
+          
           this.emit('onTimeUpdate', this.state.currentTime);
           this.emit('onProgress', this.state.bufferedPercentage);
         } catch (error) {
@@ -1341,6 +1366,33 @@ export class WebPlayer extends BasePlayer {
     }, 250); // Update every 250ms
   }
 
+  private updateYouTubeProgressBar(currentTime: number, duration: number, buffered: number): void {
+    if (!duration || duration === 0) return;
+    
+    const percent = (currentTime / duration) * 100;
+    
+    // Update progress filled
+    const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
+    if (progressFilled && !this.isDragging) {
+      progressFilled.style.width = percent + '%';
+    }
+    
+    // Update progress handle
+    const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
+    if (progressHandle && !this.isDragging) {
+      progressHandle.style.left = percent + '%';
+    }
+    
+    // Update buffered progress
+    const progressBuffered = document.getElementById('uvf-progress-buffered') as HTMLElement;
+    if (progressBuffered) {
+      progressBuffered.style.width = buffered + '%';
+    }
+    
+    // Update time display
+    this.updateTimeDisplay();
+  }
+
 
   protected loadScript(src: string): Promise<void> {
     return new Promise((resolve, reject) => {
@@ -6171,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 {
@@ -6750,6 +6824,9 @@ export class WebPlayer extends BasePlayer {
     const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
     const settingsBtn = document.getElementById('uvf-settings-btn');
     
+    // Get the event target (video element or YouTube player)
+    const getEventTarget = () => this.youtubePlayer && this.youtubePlayerReady ? this.youtubePlayer : this.video;
+    
     // Disable right-click context menu
     this.video.addEventListener('contextmenu', (e) => {
       e.preventDefault();
@@ -7291,45 +7368,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();
@@ -7368,9 +7461,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;