unified-video-framework 1.4.99 → 1.4.101

package/packages/web/src/WebPlayer.ts

@@ -1874,14 +1874,24 @@ export class WebPlayer extends BasePlayer {
         to { transform: rotate(360deg); }
       }
       
+      /* Center Play Button Container */
+      .uvf-center-play-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 8;
+      }
+      
       /* Center Play Button */
       .uvf-center-play-btn {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: clamp(64px, 14vw, 96px);
-        height: clamp(64px, 14vw, 96px);
+        width: clamp(50px, 14vw, 96px);
+        height: clamp(50px, 14vw, 96px);
         background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
         border: 0;
         border-radius: 50%;
@@ -1889,15 +1899,15 @@ export class WebPlayer extends BasePlayer {
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        pointer-events: auto;
         transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 8;
         opacity: 1;
         visibility: visible;
         box-shadow: 0 8px 28px var(--uvf-accent-1-20);
       }
       
       .uvf-center-play-btn:hover {
-        transform: translate(-50%, -50%) scale(1.06);
+        transform: scale(1.06);
         filter: saturate(1.08) brightness(1.05);
         box-shadow: 0 12px 36px var(--uvf-accent-1-20);
       }
@@ -1905,7 +1915,7 @@ export class WebPlayer extends BasePlayer {
       .uvf-center-play-btn.hidden {
         opacity: 0 !important;
         visibility: hidden !important;
-        transform: translate(-50%, -50%) scale(0.8) !important;
+        transform: scale(0.8) !important;
         pointer-events: none !important;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       }
@@ -1971,22 +1981,24 @@ export class WebPlayer extends BasePlayer {
       
       /* Progress Bar */
       .uvf-progress-section {
+        width: 100%;
         margin-bottom: 15px;
       }
       
       .uvf-progress-bar-wrapper {
-        position: relative;
         width: 100%;
-        height: 6px;
-        background: rgba(255,255,255,0.1);
-        border-radius: 3px;
+        height: 5px;
+        position: relative;
+        background: rgba(255,255,255,0.15);
+        border-radius: 2px;
         cursor: pointer;
+        padding: 12px 0;
         overflow: visible;
-        transition: transform 0.2s ease;
+        transition: height 0.2s ease;
       }
       
       .uvf-progress-bar-wrapper:hover {
-        transform: scaleY(1.5);
+        height: 7px;
       }
       
       .uvf-progress-buffered {
@@ -1994,39 +2006,106 @@ export class WebPlayer extends BasePlayer {
         top: 0;
         left: 0;
         height: 100%;
-        background: rgba(255,255,255,0.2);
-        border-radius: 3px;
+        background: rgba(255,255,255,0.3);
+        border-radius: 2px;
         pointer-events: none;
+        transition: width 0.2s ease;
+        z-index: 1;
       }
       
       .uvf-progress-filled {
-        position: absolute;
-        top: 0;
-        left: 0;
+        position: relative;
         height: 100%;
-        background: linear-gradient(90deg, var(--uvf-accent-1), var(--uvf-accent-2));
-        border-radius: 3px;
+        background: linear-gradient(90deg, #ff5722, #ff7043);
+        border-radius: 2px;
         pointer-events: none;
-        box-shadow: 0 0 10px var(--uvf-accent-1-20);
+        transition: width 0.2s ease;
+        z-index: 2;
       }
       
       .uvf-progress-handle {
         position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%) scale(0);
-        width: 16px;
-        height: 16px;
-        background: #fff;
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border: 2px solid #ff5722;
         border-radius: 50%;
-        box-shadow: 0 0 15px rgba(255,255,255,0.5);
-        transition: transform 0.2s ease;
-        pointer-events: none;
+        top: 50%;
+        left: 100%;
+        transform: translate(-50%, -50%) scale(0.8);
+        opacity: 0;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+        cursor: grab;
+        z-index: 3;
       }
       
       .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
+        opacity: 1;
         transform: translate(-50%, -50%) scale(1);
       }
       
+      .uvf-progress-handle:hover {
+        transform: translate(-50%, -50%) scale(1.2);
+      }
+      
+      .uvf-progress-handle:active,
+      .uvf-progress-handle.dragging {
+        cursor: grabbing;
+        transform: translate(-50%, -50%) scale(1.4);
+        box-shadow: 0 4px 16px rgba(255, 87, 34, 0.6);
+      }
+      
+      .uvf-time-tooltip {
+        position: absolute;
+        bottom: 22px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.92);
+        color: #ffffff;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        pointer-events: none;
+        z-index: 4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+      }
+      
+      .uvf-time-tooltip::after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid rgba(0, 0, 0, 0.92);
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-time-tooltip {
+        opacity: 1;
+      }
+      
+      /* Mobile responsive handle sizing */
+      @media (max-width: 768px) {
+        .uvf-progress-handle {
+          width: 18px;
+          height: 18px;
+          opacity: 0.8; /* Slightly visible always on mobile */
+        }
+        
+        .uvf-progress-bar-wrapper:hover .uvf-progress-handle,
+        .uvf-progress-handle:active {
+          opacity: 1;
+        }
+      }
       /* Controls Row */
       .uvf-controls-row {
         display: flex;
@@ -3006,7 +3085,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-center-play-btn:hover {
-          transform: translate(-50%, -50%) scale(1.06);
+          transform: scale(1.06);
           filter: saturate(1.08) brightness(1.05);
           box-shadow: 0 14px 36px var(--uvf-accent-1-20);
         }
@@ -3305,7 +3384,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-center-play-btn:hover {
-          transform: translate(-50%, -50%) scale(1.06);
+          transform: scale(1.06);
           filter: saturate(1.08) brightness(1.05);
           box-shadow: 0 12px 32px var(--uvf-accent-1-20);
         }
@@ -3477,7 +3556,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-center-play-btn:hover {
-          transform: translate(-50%, -50%) scale(1.06);
+          transform: scale(1.06);
           filter: saturate(1.08) brightness(1.05);
           box-shadow: 0 12px 36px var(--uvf-accent-1-20);
         }
@@ -3573,15 +3652,15 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-center-play-btn {
-          width: clamp(90px, 14vw, 110px);
-          height: clamp(90px, 14vw, 110px);
+          width: clamp(90px, 14vw, 60px);
+          height: clamp(90px, 14vw, 60px);
           background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
           border: 0;
           box-shadow: 0 10px 32px var(--uvf-accent-1-20);
         }
         
         .uvf-center-play-btn:hover {
-          transform: translate(-50%, -50%) scale(1.06);
+          transform: scale(1.06);
           filter: saturate(1.08) brightness(1.05);
           box-shadow: 0 16px 40px var(--uvf-accent-1-20);
         }
@@ -3890,12 +3969,17 @@ export class WebPlayer extends BasePlayer {
     loadingContainer.innerHTML = '<div class="uvf-loading-spinner"></div>';
     container.appendChild(loadingContainer);
 
-    // Add center play button with pulse animation
+    // Add center play button container for proper responsive centering
+    const centerPlayContainer = document.createElement('div');
+    centerPlayContainer.className = 'uvf-center-play-container';
+    
     const centerPlayBtn = document.createElement('div');
     centerPlayBtn.className = 'uvf-center-play-btn uvf-pulse';
     centerPlayBtn.id = 'uvf-center-play';
     centerPlayBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
-    container.appendChild(centerPlayBtn);
+    
+    centerPlayContainer.appendChild(centerPlayBtn);
+    container.appendChild(centerPlayContainer);
     
     // Add shortcut indicator
     const shortcutIndicator = document.createElement('div');
@@ -3917,8 +4001,15 @@ export class WebPlayer extends BasePlayer {
     progressBar.id = 'uvf-progress-bar';
     progressBar.innerHTML = `
       <div class="uvf-progress-buffered" id="uvf-progress-buffered"></div>
-      <div class="uvf-progress-filled" id="uvf-progress-filled"></div>
-      <div class="uvf-progress-handle" id="uvf-progress-handle"></div>
+      <div class="uvf-progress-filled" id="uvf-progress-filled">
+        <div class="uvf-progress-handle" id="uvf-progress-handle" 
+             role="slider" 
+             tabindex="0" 
+             aria-label="Seek" 
+             aria-valuemin="0" 
+             aria-valuemax="100" 
+             aria-valuenow="0"></div>
+      </div>
       <div class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
     `;
     progressSection.appendChild(progressBar);
@@ -4189,12 +4280,72 @@ export class WebPlayer extends BasePlayer {
       this.handleVolumeChange(e as MouseEvent);
     });
     
+    
+    // Enhanced progress bar interactions
+    const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
+    const timeTooltip = document.getElementById('uvf-time-tooltip') as HTMLElement;
+    
+    // Progress bar click
+    progressBar?.addEventListener('click', (e) => {
+      if (!this.isDragging) {
+        this.handleProgressChange(e as MouseEvent);
+      }
+    });
+    
+    // Handle dragging
+    progressHandle?.addEventListener('mousedown', (e) => {
+      e.stopPropagation();
+      this.isDragging = true;
+      progressHandle.classList.add('dragging');
+    });
+    
+    // Keyboard support for handle
+    progressHandle?.addEventListener('keydown', (e) => {
+      if (!this.video) return;
+      
+      const step = 5; // 5 seconds
+      let handled = false;
+      
+      switch(e.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          this.seek(Math.max(0, this.video.currentTime - step));
+          handled = true;
+          break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          this.seek(Math.min(this.video.duration, this.video.currentTime + step));
+          handled = true;
+          break;
+      }
+      
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+    
+    progressBar?.addEventListener('mousedown', (e) => {
+      if (e.target === progressHandle) return;
+      this.isDragging = true;
+      this.handleProgressChange(e as MouseEvent);
+    });
+    
+    // Mouse move handler for progress bar tooltip and dragging
+    progressBar?.addEventListener('mousemove', (e) => {
+      if (!this.isDragging) {
+        this.updateTimeTooltip(e as MouseEvent);
+      }
+    });
+    
+    // Global mouse events for enhanced dragging
     document.addEventListener('mousemove', (e) => {
       if (this.isVolumeSliding) {
         this.handleVolumeChange(e);
       }
       if (this.isDragging && progressBar) {
         this.handleProgressChange(e);
+        this.updateProgressTooltip(e);
       }
     });
     
@@ -4207,23 +4358,26 @@ export class WebPlayer extends BasePlayer {
           }
         }, 2000);
       }
-      this.isDragging = false;
+      
+      if (this.isDragging) {
+        this.isDragging = false;
+        progressHandle?.classList.remove('dragging');
+      }
     });
     
-    // Progress bar
-    progressBar?.addEventListener('click', (e) => this.handleProgressChange(e as MouseEvent));
-    progressBar?.addEventListener('mousedown', () => this.isDragging = true);
-    
     // Update progress bar
     this.video.addEventListener('timeupdate', () => {
       const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
       const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
-      const timeDisplay = document.getElementById('uvf-time-display');
       
-      if (this.video && progressFilled && progressHandle) {
+      if (this.video && progressFilled) {
         const percent = (this.video.currentTime / this.video.duration) * 100;
         progressFilled.style.width = percent + '%';
-        progressHandle.style.left = percent + '%';
+        
+        // Update handle aria-valuenow for accessibility
+        if (progressHandle) {
+          progressHandle.setAttribute('aria-valuenow', percent.toString());
+        }
       }
       
       // Update time display using the dedicated method
@@ -4354,9 +4508,6 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
-    // Progress bar hover tooltip
-    progressBar?.addEventListener('mousemove', (e) => this.updateTimeTooltip(e as MouseEvent));
-    progressBar?.addEventListener('mouseleave', () => this.hideTimeTooltip());
     
     // Settings menu - dynamically populated
     const settingsMenu = document.getElementById('uvf-settings-menu');
@@ -4977,6 +5128,21 @@ export class WebPlayer extends BasePlayer {
       timeTooltip.style.opacity = '0';
     }
   }
+  
+  private updateProgressTooltip(e: MouseEvent): void {
+    const progressBar = document.getElementById('uvf-progress-bar');
+    const timeTooltip = document.getElementById('uvf-time-tooltip');
+    if (!progressBar || !timeTooltip || !this.video) return;
+    
+    const rect = progressBar.getBoundingClientRect();
+    const position = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percent = (position / rect.width) * 100;
+    const time = (percent / 100) * this.video.duration;
+    
+    timeTooltip.textContent = this.formatTime(time);
+    timeTooltip.style.left = percent + '%';
+    timeTooltip.style.opacity = '1';
+  }
 
   
   private showShortcutIndicator(text: string): void {