unified-video-framework 1.4.100 → 1.4.102

package/packages/web/src/WebPlayer.ts

@@ -1890,8 +1890,8 @@ export class WebPlayer extends BasePlayer {
       
       /* Center Play Button */
       .uvf-center-play-btn {
-        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%;
@@ -1981,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: 4px;
+        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: 6px;
       }
       
       .uvf-progress-buffered {
@@ -2004,39 +2006,134 @@ 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.35);
+        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: 12px;
+        height: 12px;
+        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%;
+        margin-left: -6px;
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        cursor: grab;
+        z-index: 3;
       }
       
       .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
-        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+      }
+      
+      .uvf-progress-handle:hover {
+        transform: translateY(-50%) scale(1.15);
+        box-shadow: 0 3px 12px rgba(255, 87, 34, 0.4);
+      }
+      
+      .uvf-progress-handle:active,
+      .uvf-progress-handle.dragging {
+        cursor: grabbing;
+        transform: translateY(-50%) scale(1.3);
+        box-shadow: 0 4px 16px rgba(255, 87, 34, 0.6);
+      }
+      
+      .uvf-time-tooltip {
+        position: absolute;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.95);
+        color: #ffffff;
+        padding: 8px 14px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        white-space: nowrap;
+        opacity: 0;
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        pointer-events: none;
+        z-index: 4;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      .uvf-time-tooltip::after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid rgba(0, 0, 0, 0.95);
       }
       
+      .uvf-time-tooltip::before {
+        content: '';
+        position: absolute;
+        bottom: -9px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 9px solid transparent;
+        border-right: 9px solid transparent;
+        border-top: 9px solid rgba(255, 255, 255, 0.1);
+        z-index: -1;
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-time-tooltip {
+        opacity: 1;
+        transform: translateX(-50%) translateY(-2px);
+      }
+      
+      /* Mobile responsive handle sizing */
+      @media (max-width: 768px) {
+        .uvf-progress-handle {
+          width: 16px;
+          height: 16px;
+          margin-left: -8px;
+          opacity: 0.7; /* Slightly visible always on mobile */
+        }
+        
+        .uvf-progress-bar-wrapper:hover .uvf-progress-handle,
+        .uvf-progress-handle:active {
+          opacity: 1;
+        }
+        
+        .uvf-progress-handle:hover {
+          transform: translateY(-50%) scale(1.1);
+        }
+        
+        .uvf-progress-handle:active,
+        .uvf-progress-handle.dragging {
+          transform: translateY(-50%) scale(1.25);
+        }
+      }
       /* Controls Row */
       .uvf-controls-row {
         display: flex;
@@ -2352,7 +2449,8 @@ export class WebPlayer extends BasePlayer {
         right: 20px;
         z-index: 10;
         display: flex;
-        gap: 10px;
+        align-items: center;
+        gap: 12px;
         opacity: 0;
         transform: translateY(-10px);
         transition: all 0.3s ease;
@@ -2451,6 +2549,11 @@ export class WebPlayer extends BasePlayer {
         padding: 4px 8px;
         border-radius: 4px;
         text-transform: uppercase;
+        display: none; /* Hidden by default, only shown when quality info is available */
+      }
+      
+      .uvf-quality-badge.active {
+        display: inline-block;
       }
       
       /* Time Tooltip */
@@ -3583,8 +3686,8 @@ 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);
@@ -3932,8 +4035,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);
@@ -4204,12 +4314,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);
       }
     });
     
@@ -4222,23 +4392,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
@@ -4369,9 +4542,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');
@@ -4992,6 +5162,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 {