unified-video-framework 1.4.102 → 1.4.104

package/packages/web/src/WebPlayer.ts

@@ -1989,16 +1989,20 @@ export class WebPlayer extends BasePlayer {
         width: 100%;
         height: 4px;
         position: relative;
-        background: rgba(255,255,255,0.15);
-        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 6px;
         cursor: pointer;
-        padding: 12px 0;
+        padding: 14px 0;
         overflow: visible;
-        transition: height 0.2s ease;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        backdrop-filter: blur(4px);
       }
       
       .uvf-progress-bar-wrapper:hover {
         height: 6px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        transform: scaleY(1.1);
       }
       
       .uvf-progress-buffered {
@@ -2006,132 +2010,289 @@ export class WebPlayer extends BasePlayer {
         top: 0;
         left: 0;
         height: 100%;
-        background: rgba(255,255,255,0.35);
-        border-radius: 2px;
+        background: linear-gradient(90deg, 
+          rgba(255, 255, 255, 0.25) 0%,
+          rgba(255, 255, 255, 0.35) 30%,
+          rgba(255, 255, 255, 0.4) 50%,
+          rgba(255, 255, 255, 0.35) 70%,
+          rgba(255, 255, 255, 0.3) 100%
+        );
+        border-radius: 6px;
         pointer-events: none;
-        transition: width 0.2s ease;
+        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
         z-index: 1;
+        position: relative;
+        overflow: hidden;
+      }
+      
+      /* Buffered progress loading shimmer effect */
+      .uvf-progress-buffered::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, 
+          transparent 0%,
+          rgba(255, 255, 255, 0.15) 50%,
+          transparent 100%
+        );
+        animation: bufferShimmer 2s infinite;
+        border-radius: 6px;
+      }
+      
+      @keyframes bufferShimmer {
+        0% { left: -100%; }
+        100% { left: 100%; }
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-progress-buffered {
+        border-radius: 8px;
+        background: linear-gradient(90deg, 
+          rgba(255, 255, 255, 0.3) 0%,
+          rgba(255, 255, 255, 0.4) 30%,
+          rgba(255, 255, 255, 0.5) 50%,
+          rgba(255, 255, 255, 0.4) 70%,
+          rgba(255, 255, 255, 0.35) 100%
+        );
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-progress-buffered::before {
+        border-radius: 8px;
       }
       
       .uvf-progress-filled {
-        position: relative;
+        position: absolute;
+        top: 0;
+        left: 0;
         height: 100%;
-        background: linear-gradient(90deg, #ff5722, #ff7043);
-        border-radius: 2px;
+        background: linear-gradient(90deg, 
+          #ff4500 0%,
+          #ff5722 25%,
+          #ff6b35 50%,
+          #ff7043 75%,
+          #ff8c69 100%
+        );
+        border-radius: 6px;
         pointer-events: none;
-        transition: width 0.2s ease;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         z-index: 2;
+        box-shadow: 0 0 12px rgba(255, 87, 34, 0.3);
+      }
+      
+      .uvf-progress-bar-wrapper:hover .uvf-progress-filled {
+        border-radius: 8px;
+        background: linear-gradient(90deg, 
+          #ff4500 0%,
+          #ff5722 20%,
+          #ff6b35 40%,
+          #ff7043 60%,
+          #ff8c69 80%,
+          #ffa500 100%
+        );
+        box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
       }
       
       .uvf-progress-handle {
         position: absolute;
-        width: 12px;
-        height: 12px;
-        background: #ffffff;
-        border: 2px solid #ff5722;
+        width: 14px;
+        height: 14px;
+        background: radial-gradient(circle, 
+          rgba(255, 255, 255, 0.95) 0%,
+          rgba(255, 255, 255, 0.9) 70%,
+          rgba(255, 255, 255, 0.85) 100%
+        );
+        border: 2px solid rgba(255, 87, 34, 0.8);
         border-radius: 50%;
         top: 50%;
-        left: 100%;
-        margin-left: -6px;
-        transform: translateY(-50%);
+        transform: translate(-50%, -50%) scale(0);
         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);
+        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        box-shadow: 
+          0 0 0 0 rgba(255, 87, 34, 0.4),
+          0 4px 12px rgba(0, 0, 0, 0.25),
+          inset 0 1px 0 rgba(255, 255, 255, 0.4);
         cursor: grab;
         z-index: 3;
+        pointer-events: all;
+        backdrop-filter: blur(8px);
       }
       
       .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
         opacity: 1;
-        transform: translateY(-50%) scale(1);
+        transform: translate(-50%, -50%) scale(1);
+        box-shadow: 
+          0 0 0 4px rgba(255, 87, 34, 0.2),
+          0 6px 20px rgba(0, 0, 0, 0.3),
+          inset 0 1px 0 rgba(255, 255, 255, 0.6);
       }
       
       .uvf-progress-handle:hover {
-        transform: translateY(-50%) scale(1.15);
-        box-shadow: 0 3px 12px rgba(255, 87, 34, 0.4);
+        transform: translate(-50%, -50%) scale(1.25);
+        background: radial-gradient(circle, 
+          rgba(255, 255, 255, 1) 0%,
+          rgba(255, 255, 255, 0.95) 70%,
+          rgba(255, 255, 255, 0.9) 100%
+        );
+        border-color: rgba(255, 87, 34, 1);
+        box-shadow: 
+          0 0 0 6px rgba(255, 87, 34, 0.3),
+          0 8px 25px rgba(255, 87, 34, 0.4),
+          inset 0 1px 0 rgba(255, 255, 255, 0.8);
       }
       
       .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);
+        transform: translate(-50%, -50%) scale(1.4);
+        background: radial-gradient(circle, 
+          rgba(255, 255, 255, 1) 0%,
+          rgba(255, 255, 255, 0.98) 50%,
+          rgba(255, 255, 255, 0.95) 100%
+        );
+        border-color: #ff4500;
+        box-shadow: 
+          0 0 0 8px rgba(255, 87, 34, 0.4),
+          0 12px 35px rgba(255, 69, 0, 0.5),
+          inset 0 2px 0 rgba(255, 255, 255, 0.9);
+        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
       }
       
       .uvf-time-tooltip {
         position: absolute;
-        bottom: 24px;
+        bottom: 32px;
         left: 50%;
-        transform: translateX(-50%);
-        background: rgba(0, 0, 0, 0.95);
+        transform: translateX(-50%) translateY(8px) scale(0.9);
+        background: linear-gradient(135deg, 
+          rgba(0, 0, 0, 0.95) 0%,
+          rgba(20, 20, 20, 0.92) 50%,
+          rgba(0, 0, 0, 0.98) 100%
+        );
         color: #ffffff;
-        padding: 8px 14px;
-        border-radius: 8px;
+        padding: 10px 16px;
+        border-radius: 12px;
         font-size: 13px;
         font-weight: 600;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        letter-spacing: 0.5px;
         white-space: nowrap;
         opacity: 0;
-        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 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);
+        box-shadow: 
+          0 0 0 1px rgba(255, 255, 255, 0.05),
+          0 8px 32px rgba(0, 0, 0, 0.6),
+          0 2px 8px rgba(0, 0, 0, 0.3),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(20px) saturate(1.5);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        min-width: 52px;
+        text-align: center;
       }
       
+      /* Glass morphism tooltip arrow with multiple layers */
       .uvf-time-tooltip::after {
         content: '';
         position: absolute;
-        bottom: -8px;
+        bottom: -10px;
         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);
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid rgba(0, 0, 0, 0.95);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
       }
       
       .uvf-time-tooltip::before {
         content: '';
         position: absolute;
-        bottom: -9px;
+        bottom: -11px;
         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);
+        border-left: 11px solid transparent;
+        border-right: 11px solid transparent;
+        border-top: 11px solid rgba(255, 255, 255, 0.08);
         z-index: -1;
       }
       
+      /* Enhanced tooltip animations */
       .uvf-progress-bar-wrapper:hover .uvf-time-tooltip {
         opacity: 1;
-        transform: translateX(-50%) translateY(-2px);
+        transform: translateX(-50%) translateY(-2px) scale(1);
+      }
+      
+      /* Tooltip pulse animation on first hover */
+      @keyframes tooltipPulse {
+        0% { transform: translateX(-50%) translateY(-2px) scale(1); }
+        50% { transform: translateX(-50%) translateY(-4px) scale(1.05); }
+        100% { transform: translateX(-50%) translateY(-2px) scale(1); }
+      }
+      
+      .uvf-time-tooltip.pulse {
+        animation: tooltipPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) once;
       }
       
-      /* Mobile responsive handle sizing */
+      /* Mobile responsive design with enhanced touch targets */
       @media (max-width: 768px) {
+        .uvf-progress-bar-wrapper {
+          padding: 20px 0; /* Larger touch area */
+          height: 6px; /* Slightly thicker on mobile */
+        }
+        
+        .uvf-progress-bar-wrapper:hover {
+          height: 8px;
+        }
+        
         .uvf-progress-handle {
-          width: 16px;
-          height: 16px;
-          margin-left: -8px;
-          opacity: 0.7; /* Slightly visible always on mobile */
+          width: 18px;
+          height: 18px;
+          opacity: 0.8; /* More visible on mobile for discoverability */
+          border-width: 3px;
+          box-shadow: 
+            0 0 0 2px rgba(255, 87, 34, 0.3),
+            0 6px 16px rgba(0, 0, 0, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5);
         }
         
         .uvf-progress-bar-wrapper:hover .uvf-progress-handle,
         .uvf-progress-handle:active {
           opacity: 1;
+          transform: translate(-50%, -50%) scale(1);
         }
         
         .uvf-progress-handle:hover {
-          transform: translateY(-50%) scale(1.1);
+          transform: translate(-50%, -50%) scale(1.15);
+          box-shadow: 
+            0 0 0 4px rgba(255, 87, 34, 0.4),
+            0 8px 20px rgba(255, 87, 34, 0.35),
+            inset 0 2px 0 rgba(255, 255, 255, 0.7);
         }
         
         .uvf-progress-handle:active,
         .uvf-progress-handle.dragging {
-          transform: translateY(-50%) scale(1.25);
+          transform: translate(-50%, -50%) scale(1.3);
+          box-shadow: 
+            0 0 0 6px rgba(255, 87, 34, 0.5),
+            0 10px 25px rgba(255, 69, 0, 0.4),
+            inset 0 2px 0 rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      /* High DPI displays optimization */
+      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+        .uvf-progress-handle {
+          background: radial-gradient(circle, 
+            rgba(255, 255, 255, 0.98) 0%,
+            rgba(255, 255, 255, 0.92) 70%,
+            rgba(255, 255, 255, 0.88) 100%
+          );
         }
       }
       /* Controls Row */
@@ -4035,15 +4196,14 @@ 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 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-progress-filled" id="uvf-progress-filled"></div>
+      <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 class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
     `;
     progressSection.appendChild(progressBar);
@@ -4404,14 +4564,15 @@ export class WebPlayer extends BasePlayer {
       const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
       const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
       
-      if (this.video && progressFilled) {
+      if (this.video && progressFilled && progressHandle) {
         const percent = (this.video.currentTime / this.video.duration) * 100;
         progressFilled.style.width = percent + '%';
         
+        // Position handle at the progress position
+        progressHandle.style.left = percent + '%';
+        
         // Update handle aria-valuenow for accessibility
-        if (progressHandle) {
-          progressHandle.setAttribute('aria-valuenow', percent.toString());
-        }
+        progressHandle.setAttribute('aria-valuenow', percent.toString());
       }
       
       // Update time display using the dedicated method
@@ -4999,11 +5160,22 @@ export class WebPlayer extends BasePlayer {
 
   private handleProgressChange(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
+    const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
+    const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     if (!progressBar || !this.video) return;
     
     const rect = progressBar.getBoundingClientRect();
-    const percent = (e.clientX - rect.left) / rect.width;
-    const time = percent * this.video.duration;
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percent = (x / rect.width) * 100;
+    const time = (percent / 100) * this.video.duration;
+    
+    // Update UI immediately for responsive feedback
+    if (progressFilled) {
+      progressFilled.style.width = percent + '%';
+    }
+    if (progressHandle) {
+      progressHandle.style.left = percent + '%';
+    }
     
     this.seek(time);
   }
@@ -5148,12 +5320,21 @@ export class WebPlayer extends BasePlayer {
     if (!progressBar || !timeTooltip || !this.video) return;
     
     const rect = progressBar.getBoundingClientRect();
-    const percent = (e.clientX - rect.left) / rect.width;
-    const time = percent * this.video.duration;
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percent = (x / rect.width) * 100;
+    const time = (percent / 100) * this.video.duration;
     
     timeTooltip.textContent = this.formatTime(time);
-    timeTooltip.style.left = `${e.clientX - rect.left}px`;
+    timeTooltip.style.left = percent + '%';
     timeTooltip.style.opacity = '1';
+    
+    // Add pulse animation on first hover
+    if (!timeTooltip.classList.contains('pulse') && timeTooltip.style.opacity === '1') {
+      timeTooltip.classList.add('pulse');
+      setTimeout(() => {
+        timeTooltip.classList.remove('pulse');
+      }, 600);
+    }
   }
   
   private hideTimeTooltip(): void {
@@ -5166,6 +5347,7 @@ export class WebPlayer extends BasePlayer {
   private updateProgressTooltip(e: MouseEvent): void {
     const progressBar = document.getElementById('uvf-progress-bar');
     const timeTooltip = document.getElementById('uvf-time-tooltip');
+    const progressHandle = document.getElementById('uvf-progress-handle');
     if (!progressBar || !timeTooltip || !this.video) return;
     
     const rect = progressBar.getBoundingClientRect();
@@ -5176,6 +5358,12 @@ export class WebPlayer extends BasePlayer {
     timeTooltip.textContent = this.formatTime(time);
     timeTooltip.style.left = percent + '%';
     timeTooltip.style.opacity = '1';
+    
+    // Add visual feedback during dragging
+    if (progressHandle && this.isDragging) {
+      progressHandle.style.transform = 'translate(-50%, -50%) scale(1.4)';
+      progressHandle.classList.add('dragging');
+    }
   }