unified-video-framework 1.4.111 → 1.4.113

package/packages/web/src/WebPlayer.ts

@@ -1799,10 +1799,13 @@ export class WebPlayer extends BasePlayer {
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        // width: 100%;
+        // height: 100%;
+        object-fit: cover !important; /* Will crop sides/top/bottom to fill */
+        width: 100vw !important;
+        height: 100vh !important;
         background: #000;
-        object-fit: contain;
+        // object-fit: contain;
       }
       
       .uvf-watermark-layer {
@@ -1989,7 +1992,6 @@ export class WebPlayer extends BasePlayer {
         width: 100%;
         position: relative;
         cursor: pointer;
-        padding: 16px 0;
         overflow: visible;
       }
       
@@ -2099,157 +2101,10 @@ export class WebPlayer extends BasePlayer {
         box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
       }
       
-      .uvf-progress-handle {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        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: 0%;
-        transform: translate(-50%, -50%) scale(0);
-        opacity: 0;
-        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.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.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: 32px;
-        left: 0;
-        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: 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.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-        pointer-events: none;
-        z-index: 4;
-        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: -10px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0;
-        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: -11px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0;
-        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 - Only show via JavaScript, not CSS hover */
-      .uvf-time-tooltip.show {
-        opacity: 1 !important;
-        transform: translateX(-50%) translateY(-2px) scale(1) !important;
-      }
-      
-      /* 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 design with enhanced touch targets */
       @media (max-width: 768px) {
-        .uvf-progress-bar-wrapper {
-          padding: 20px 0; /* Larger touch area */
-        }
-        
         .uvf-progress-bar {
           height: 3px; /* Slightly thicker on mobile */
         }
@@ -2258,51 +2113,8 @@ export class WebPlayer extends BasePlayer {
           height: 5px;
         }
         
-        .uvf-progress-handle {
-          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: 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: 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 */
       .uvf-controls-row {
         display: flex;
@@ -4204,15 +4016,7 @@ export class WebPlayer extends BasePlayer {
       <div class="uvf-progress-bar">
         <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" 
-             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);
     
@@ -4483,77 +4287,16 @@ export class WebPlayer extends BasePlayer {
     });
     
     
-    // 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();
-      }
+      this.handleProgressChange(e as MouseEvent);
     });
     
     progressBar?.addEventListener('mousedown', (e) => {
-      if (e.target === progressHandle) return;
       this.isDragging = true;
       this.handleProgressChange(e as MouseEvent);
     });
     
-    // Progress bar hover events for tooltip
-    progressBar?.addEventListener('mouseenter', () => {
-      const timeTooltip = document.getElementById('uvf-time-tooltip');
-      if (timeTooltip) {
-        timeTooltip.classList.add('show');
-      }
-    });
-    
-    progressBar?.addEventListener('mouseleave', () => {
-      if (!this.isDragging) {
-        this.hideTimeTooltip();
-      }
-    });
-    
-    // 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) {
@@ -4561,7 +4304,6 @@ export class WebPlayer extends BasePlayer {
       }
       if (this.isDragging && progressBar) {
         this.handleProgressChange(e);
-        this.updateProgressTooltip(e);
       }
     });
     
@@ -4577,26 +4319,16 @@ export class WebPlayer extends BasePlayer {
       
       if (this.isDragging) {
         this.isDragging = false;
-        progressHandle?.classList.remove('dragging');
-        // Hide tooltip after dragging ends
-        this.hideTimeTooltip();
       }
     });
     
     // 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;
       
-      if (this.video && progressFilled && progressHandle) {
+      if (this.video && progressFilled) {
         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
-        progressHandle.setAttribute('aria-valuenow', percent.toString());
       }
       
       // Update time display using the dedicated method
@@ -5338,75 +5070,6 @@ export class WebPlayer extends BasePlayer {
     }
   }
   
-  private updateTimeTooltip(e: MouseEvent): void {
-    const wrapper = document.getElementById('uvf-progress-bar');
-    const innerBar = wrapper?.querySelector('.uvf-progress-bar') as HTMLElement | null;
-    const timeTooltip = document.getElementById('uvf-time-tooltip');
-    if (!wrapper || !innerBar || !timeTooltip || !this.video) return;
-
-    // Measure against the inner progress bar but position relative to the wrapper
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const innerRect = innerBar.getBoundingClientRect();
-
-    // X within the inner progress bar
-    const localX = Math.max(0, Math.min(e.clientX - innerRect.left, innerRect.width));
-    const percent = (localX / innerRect.width) * 100;
-    const time = (percent / 100) * this.video.duration;
-
-    // Pixel position relative to wrapper's left edge
-    const leftPx = (innerRect.left - wrapperRect.left) + localX;
-
-    // Update tooltip content and position
-    timeTooltip.textContent = this.formatTime(time);
-    timeTooltip.style.left = `${leftPx}px`;
-    timeTooltip.classList.add('show');
-
-    // Add pulse animation on first hover
-    if (!timeTooltip.classList.contains('pulse') && timeTooltip.classList.contains('show')) {
-      timeTooltip.classList.add('pulse');
-      setTimeout(() => {
-        timeTooltip.classList.remove('pulse');
-      }, 600);
-    }
-  }
-  
-  private hideTimeTooltip(): void {
-    const timeTooltip = document.getElementById('uvf-time-tooltip');
-    if (timeTooltip) {
-      timeTooltip.classList.remove('show');
-      // Remove any inline opacity style to let CSS handle it
-      timeTooltip.style.removeProperty('opacity');
-    }
-  }
-  
-  private updateProgressTooltip(e: MouseEvent): void {
-    const wrapper = document.getElementById('uvf-progress-bar');
-    const innerBar = wrapper?.querySelector('.uvf-progress-bar') as HTMLElement | null;
-    const timeTooltip = document.getElementById('uvf-time-tooltip');
-    const progressHandle = document.getElementById('uvf-progress-handle');
-    if (!wrapper || !innerBar || !timeTooltip || !this.video) return;
-
-    // Measure against the inner progress bar but position relative to the wrapper
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const innerRect = innerBar.getBoundingClientRect();
-
-    const localX = Math.max(0, Math.min(e.clientX - innerRect.left, innerRect.width));
-    const percent = (localX / innerRect.width) * 100;
-    const time = (percent / 100) * this.video.duration;
-
-    const leftPx = (innerRect.left - wrapperRect.left) + localX;
-
-    // Update tooltip content and position
-    timeTooltip.textContent = this.formatTime(time);
-    timeTooltip.style.left = `${leftPx}px`;
-    timeTooltip.classList.add('show');
-
-    // Add visual feedback during dragging
-    if (progressHandle && this.isDragging) {
-      progressHandle.style.transform = 'translate(-50%, -50%) scale(1.4)';
-      progressHandle.classList.add('dragging');
-    }
-  }
 
   
   private showShortcutIndicator(text: string): void {