unified-video-framework 1.4.103 → 1.4.105

package/packages/web/src/WebPlayer.ts

@@ -1987,18 +1987,22 @@ export class WebPlayer extends BasePlayer {
       
       .uvf-progress-bar-wrapper {
         width: 100%;
-        height: 4px;
+        height: 2px;
         position: relative;
-        background: rgba(255,255,255,0.2);
-        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
         cursor: pointer;
-        padding: 12px 0;
+        padding: 6px 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: 5px;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 6px;
+        transform: scaleY(1.1);
       }
       
       .uvf-progress-buffered {
@@ -2006,11 +2010,56 @@ export class WebPlayer extends BasePlayer {
         top: 0;
         left: 0;
         height: 100%;
-        background: rgba(255,255,255,0.4);
-        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: 4px;
         pointer-events: none;
-        transition: width 0.2s ease;
+        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
         z-index: 1;
+        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: 6px;
+        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: 6px;
       }
       
       .uvf-progress-filled {
@@ -2018,121 +2067,232 @@ export class WebPlayer extends BasePlayer {
         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: 4px;
         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: 6px;
+        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;
+        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%;
-        transform: translate(-50%, -50%);
+        left: 0%;
+        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: 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: translate(-50%, -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: translate(-50%, -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); }
       }
       
-      /* Mobile responsive handle sizing */
+      .uvf-time-tooltip.pulse {
+        animation: tooltipPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) once;
+      }
+      
+      /* Mobile responsive design with enhanced touch targets */
       @media (max-width: 768px) {
+        .uvf-progress-bar-wrapper {
+          padding: 20px 0; /* Larger touch area */
+          height: 3px; /* Slightly thicker on mobile */
+        }
+        
+        .uvf-progress-bar-wrapper:hover {
+          height: 5px;
+        }
+        
         .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 */
@@ -3133,7 +3293,7 @@ export class WebPlayer extends BasePlayer {
         
         /* Enhanced progress bar for touch */
         .uvf-progress-bar-wrapper {
-          height: 8px;
+          height: 3px;
           margin-bottom: 12px;
           border-radius: 4px;
           background: rgba(255,255,255,0.15);
@@ -3320,7 +3480,7 @@ export class WebPlayer extends BasePlayer {
         
         /* Compact progress bar for landscape */
         .uvf-progress-bar-wrapper {
-          height: 6px;
+          height: 3px;
           margin-bottom: 8px;
         }
         
@@ -3446,7 +3606,7 @@ export class WebPlayer extends BasePlayer {
         
         /* Tablet progress bar */
         .uvf-progress-bar-wrapper {
-          height: 7px;
+          height: 3px;
         }
         
         .uvf-progress-handle {
@@ -3785,7 +3945,7 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-progress-bar-wrapper {
-          height: 8px;
+          height: 3px;
           cursor: pointer;
         }
         
@@ -5167,6 +5327,14 @@ export class WebPlayer extends BasePlayer {
     timeTooltip.textContent = this.formatTime(time);
     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 {
@@ -5179,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();
@@ -5189,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');
+    }
   }