unified-video-framework 1.4.211 → 1.4.213

package/packages/web/src/WebPlayer.ts

@@ -1328,9 +1328,57 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
+  /**
+   * Safely set video currentTime with validation to prevent non-finite value errors
+   */
+  private safeSetCurrentTime(time: number): boolean {
+    if (!this.video) {
+      this.debugWarn('Cannot set currentTime: video element not available');
+      return false;
+    }
+    
+    // Validate the time value is finite
+    if (!isFinite(time) || isNaN(time)) {
+      this.debugWarn('Attempted to set invalid currentTime value:', time);
+      return false;
+    }
+    
+    // Ensure time is non-negative
+    const safeTime = Math.max(0, time);
+    
+    // Additional validation: check if video duration is available and valid
+    const duration = this.video.duration;
+    if (isFinite(duration) && duration > 0) {
+      // Clamp time to valid range [0, duration]
+      const clampedTime = Math.min(safeTime, duration);
+      try {
+        this.video.currentTime = clampedTime;
+        return true;
+      } catch (error) {
+        this.debugError('Error setting currentTime:', error);
+        return false;
+      }
+    } else {
+      // Duration not available yet, but still set time if it's valid
+      try {
+        this.video.currentTime = safeTime;
+        return true;
+      } catch (error) {
+        this.debugError('Error setting currentTime:', error);
+        return false;
+      }
+    }
+  }
+
   seek(time: number): void {
     if (!this.video) return;
     
+    // Validate input time
+    if (!isFinite(time) || isNaN(time)) {
+      this.debugWarn('Invalid seek time:', time);
+      return;
+    }
+    
     // Security check: Prevent seeking beyond free preview limit
     const freeDuration = Number(this.config.freeDuration || 0);
     if (freeDuration > 0 && !this.paymentSuccessful) {
@@ -1339,17 +1387,13 @@ export class WebPlayer extends BasePlayer {
         this.debugWarn('Seek blocked - beyond free preview limit');
         this.enforcePaywallSecurity();
         // Reset to safe position
-        this.video.currentTime = Math.max(0, freeDuration - 1);
+        this.safeSetCurrentTime(freeDuration - 1);
         return;
       }
     }
     
-    const d = this.video.duration;
-    if (typeof d === 'number' && isFinite(d) && d > 0) {
-      this.video.currentTime = Math.max(0, Math.min(time, d));
-    } else {
-      this.video.currentTime = Math.max(0, time);
-    }
+    // Use safe setter with validated time
+    this.safeSetCurrentTime(time);
   }
 
   setVolume(level: number): void {
@@ -3386,6 +3430,99 @@ export class WebPlayer extends BasePlayer {
         filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
       }
       
+      /* Cast Button Specific Styling */
+      #uvf-cast-btn {
+        background: var(--uvf-button-bg);
+        border: 1px solid var(--uvf-button-border);
+        position: relative;
+        z-index: 10;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      #uvf-cast-btn:hover {
+        transform: scale(1.08);
+        box-shadow: 0 4px 12px var(--uvf-button-shadow);
+      }
+      
+      #uvf-cast-btn:active {
+        transform: scale(0.95);
+        transition: all 0.1s ease;
+      }
+      
+      #uvf-cast-btn svg {
+        opacity: 0.9;
+        transition: all 0.3s ease;
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+      
+      #uvf-cast-btn:hover svg {
+        opacity: 1;
+        transform: scale(1.05);
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+      }
+      
+      /* Share Button Specific Styling */
+      #uvf-share-btn {
+        background: var(--uvf-button-bg);
+        border: 1px solid var(--uvf-button-border);
+        position: relative;
+        z-index: 10;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      #uvf-share-btn:hover {
+        transform: scale(1.08);
+        box-shadow: 0 4px 12px var(--uvf-button-shadow);
+      }
+      
+      #uvf-share-btn:active {
+        transform: scale(0.95);
+        transition: all 0.1s ease;
+      }
+      
+      #uvf-share-btn svg {
+        opacity: 0.9;
+        transition: all 0.3s ease;
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+      
+      #uvf-share-btn:hover svg {
+        opacity: 1;
+        transform: scale(1.05);
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+      }
+      
+      /* EPG Button Specific Styling */
+      #uvf-epg-btn {
+        background: var(--uvf-button-bg);
+        border: 1px solid var(--uvf-button-border);
+        position: relative;
+        z-index: 10;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      #uvf-epg-btn:hover {
+        transform: scale(1.08);
+        box-shadow: 0 4px 12px var(--uvf-button-shadow);
+      }
+      
+      #uvf-epg-btn:active {
+        transform: scale(0.95);
+        transition: all 0.1s ease;
+      }
+      
+      #uvf-epg-btn svg {
+        opacity: 0.9;
+        transition: all 0.3s ease;
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+      
+      #uvf-epg-btn:hover svg {
+        opacity: 1;
+        transform: scale(1.05);
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+      }
+      
       .uvf-control-btn.play-pause {
         width: 50px;
         height: 50px;
@@ -3784,68 +3921,50 @@ export class WebPlayer extends BasePlayer {
         flex-shrink: 0;
       }
       
-      /* Navigation button styles */
+      /* Navigation button styles - Follow theme like skip/volume buttons */
       .uvf-nav-btn {
         width: 40px;
         height: 40px;
         min-width: 40px;
         min-height: 40px;
         border-radius: 50%;
-        background: rgba(0, 0, 0, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: var(--uvf-button-bg);
+        border: 1px solid var(--uvf-button-border);
         color: white;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        backdrop-filter: blur(8px);
+        backdrop-filter: blur(10px);
         position: relative;
         overflow: hidden;
+        z-index: 10;
       }
       
       .uvf-nav-btn:hover {
-        background: rgba(255, 255, 255, 0.15);
-        border-color: rgba(255, 255, 255, 0.4);
-        transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        transform: scale(1.08);
+        box-shadow: 0 4px 12px var(--uvf-button-shadow);
       }
       
       .uvf-nav-btn:active {
         transform: scale(0.95);
+        transition: all 0.1s ease;
       }
       
       .uvf-nav-btn svg {
         width: 20px;
         height: 20px;
         fill: currentColor;
-        transition: all 0.2s ease;
+        opacity: 0.9;
+        transition: all 0.3s ease;
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
       }
       
       .uvf-nav-btn:hover svg {
-        transform: scale(1.1);
-      }
-      
-      /* Back button specific styles */
-      #uvf-back-btn {
-        background: rgba(0, 0, 0, 0.7);
-      }
-      
-      #uvf-back-btn:hover {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: var(--uvf-accent-1, #ff0000);
-      }
-      
-      /* Close button specific styles */
-      #uvf-close-btn {
-        background: rgba(220, 53, 69, 0.8);
-        border-color: rgba(220, 53, 69, 0.6);
-      }
-      
-      #uvf-close-btn:hover {
-        background: rgba(220, 53, 69, 1);
-        border-color: rgba(220, 53, 69, 1);
-        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
+        opacity: 1;
+        transform: scale(1.05);
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
       }
       
       .uvf-player-wrapper:hover .uvf-top-bar,
@@ -4301,6 +4420,83 @@ export class WebPlayer extends BasePlayer {
         100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
       }
       
+      /* Responsive shortcut/volume indicator for mobile and tablet */
+      @media screen and (max-width: 767px) {
+        .uvf-shortcut-indicator {
+          padding: 16px 24px;
+          font-size: 20px;
+          max-width: calc(100vw - 40px);
+          border-radius: 12px;
+          backdrop-filter: blur(10px);
+        }
+        
+        /* Volume indicator - more compact on mobile */
+        .uvf-shortcut-indicator .uvf-ki-volume {
+          flex-direction: column;
+          gap: 12px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-icon svg {
+          width: 32px;
+          height: 32px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-bar {
+          width: clamp(200px, 70vw, 280px);
+          height: 10px;
+          border-radius: 5px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-text {
+          font-size: 22px;
+          font-weight: 700;
+          min-width: auto;
+          text-align: center;
+          width: 100%;
+        }
+        
+        /* Skip indicators - slightly smaller */
+        .uvf-shortcut-indicator .uvf-ki-skip {
+          width: 90px;
+          height: 90px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-skip svg {
+          width: 90px;
+          height: 90px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-skip .uvf-ki-skip-num {
+          font-size: 19px;
+        }
+        
+        /* Icon indicators */
+        .uvf-shortcut-indicator .uvf-ki svg {
+          width: 56px;
+          height: 56px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-text {
+          font-size: 16px;
+        }
+      }
+      
+      @media screen and (min-width: 768px) and (max-width: 1023px) {
+        /* Tablet optimization */
+        .uvf-shortcut-indicator .uvf-ki-vol-bar {
+          width: 160px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-icon svg {
+          width: 34px;
+          height: 34px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-text {
+          font-size: 15px;
+        }
+      }
+      
       /* Hide top bar when no cursor */
       .uvf-player-wrapper.no-cursor .uvf-top-bar {
         opacity: 0 !important;
@@ -5915,9 +6111,17 @@ export class WebPlayer extends BasePlayer {
       }
     });
     
-    // Skip buttons
-    skipBackBtn?.addEventListener('click', () => this.seek(this.video!.currentTime - 10));
-    skipForwardBtn?.addEventListener('click', () => this.seek(this.video!.currentTime + 10));
+    // Skip buttons with null safety
+    skipBackBtn?.addEventListener('click', () => {
+      if (this.video && !isNaN(this.video.duration)) {
+        this.seek(Math.max(0, this.video.currentTime - 10));
+      }
+    });
+    skipForwardBtn?.addEventListener('click', () => {
+      if (this.video && !isNaN(this.video.duration)) {
+        this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
+      }
+    });
     
     // Volume control
     volumeBtn?.addEventListener('click', (e) => {
@@ -5970,13 +6174,13 @@ export class WebPlayer extends BasePlayer {
     
     // Progress bar interactions
     progressBar?.addEventListener('click', (e) => {
-      this.handleProgressChange(e as MouseEvent);
+      this.seekToPosition(e as MouseEvent);
     });
     
     progressBar?.addEventListener('mousedown', (e) => {
       this.isDragging = true;
       this.showTimeTooltip = true;
-      this.handleProgressChange(e as MouseEvent);
+      this.seekToPosition(e as MouseEvent);
       this.updateTimeTooltip(e as MouseEvent);
     });
     
@@ -6003,7 +6207,11 @@ export class WebPlayer extends BasePlayer {
       e.preventDefault(); // Prevent scrolling
       this.isDragging = true;
       const touch = e.touches[0];
-      this.handleProgressChange(touch);
+      const mouseEvent = new MouseEvent('mousedown', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      });
+      this.seekToPosition(mouseEvent);
     }, { passive: false });
     
     // Global mouse and touch events for enhanced dragging
@@ -6012,7 +6220,7 @@ export class WebPlayer extends BasePlayer {
         this.handleVolumeChange(e);
       }
       if (this.isDragging && progressBar) {
-        this.handleProgressChange(e);
+        this.seekToPosition(e);
         // Update tooltip position during dragging
         this.updateTimeTooltip(e);
       }
@@ -6022,7 +6230,11 @@ export class WebPlayer extends BasePlayer {
       if (this.isDragging && progressBar) {
         e.preventDefault(); // Prevent scrolling
         const touch = e.touches[0];
-        this.handleProgressChange(touch);
+        const mouseEvent = new MouseEvent('mousemove', {
+          clientX: touch.clientX,
+          clientY: touch.clientY
+        });
+        this.seekToPosition(mouseEvent);
       }
     }, { passive: false });
     
@@ -6360,14 +6572,18 @@ export class WebPlayer extends BasePlayer {
         case 'ArrowLeft':
           e.preventDefault();
           e.stopImmediatePropagation(); // Prevent duplicate handler triggers
-          this.seek(Math.max(0, this.video!.currentTime - 10));
-          shortcutText = '-10s';
+          if (this.video && !isNaN(this.video.duration)) {
+            this.seek(Math.max(0, this.video.currentTime - 10));
+            shortcutText = '-10s';
+          }
           break;
         case 'ArrowRight':
           e.preventDefault();
           e.stopImmediatePropagation(); // Prevent duplicate handler triggers
-          this.seek(Math.min(this.video!.duration, this.video!.currentTime + 10));
-          shortcutText = '+10s';
+          if (this.video && !isNaN(this.video.duration)) {
+            this.seek(Math.min(this.video.duration, this.video.currentTime + 10));
+            shortcutText = '+10s';
+          }
           break;
         case 'ArrowUp':
           e.preventDefault();
@@ -6432,8 +6648,9 @@ export class WebPlayer extends BasePlayer {
         case '8':
         case '9':
           e.preventDefault();
-          const percent = parseInt(e.key) * 10;
-          if (this.video) {
+          // Only jump to position if video is loaded and duration is valid
+          if (this.video && !isNaN(this.video.duration) && this.video.duration > 0) {
+            const percent = parseInt(e.key) * 10;
             this.video.currentTime = (this.video.duration * percent) / 100;
             shortcutText = `${percent}%`;
           }
@@ -6759,7 +6976,7 @@ export class WebPlayer extends BasePlayer {
             // Use deferred pause to avoid race conditions
             this.requestPause(); 
             if (fromSeek || ((this.video.currentTime || 0) > lim)) {
-              this.video.currentTime = Math.max(0, lim - 0.1);
+              this.safeSetCurrentTime(lim - 0.1);
             }
           } catch (_) {}
         }
@@ -6947,16 +7164,29 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
-  private handleProgressChange(e: MouseEvent | Touch): void {
-    const progressBar = document.getElementById('uvf-progress-bar');
+  private seekToPosition(e: MouseEvent): void {
+    const progressBar = document.querySelector('.uvf-progress-bar') as HTMLElement;
     const progressFilled = document.getElementById('uvf-progress-filled') as HTMLElement;
     const progressHandle = document.getElementById('uvf-progress-handle') as HTMLElement;
     if (!progressBar || !this.video) return;
     
+    const duration = this.video.duration;
+    // Validate duration before calculating seek time
+    if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
+      this.debugWarn('Invalid video duration, cannot seek via progress bar');
+      return;
+    }
+    
     const rect = progressBar.getBoundingClientRect();
     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;
+    const time = (percent / 100) * duration;
+    
+    // Validate calculated time
+    if (!isFinite(time) || isNaN(time)) {
+      this.debugWarn('Calculated seek time is invalid:', time);
+      return;
+    }
     
     // Update UI immediately for responsive feedback
     if (progressFilled) {
@@ -7195,15 +7425,24 @@ export class WebPlayer extends BasePlayer {
       const wrapperWidth = wrapperRect.width;
       const isLeftSide = tapPosition < wrapperWidth / 2;
 
+      const currentTime = this.video.currentTime;
+      const duration = this.video.duration;
+      
+      // Validate current time and duration before calculating new time
+      if (!isFinite(currentTime) || isNaN(currentTime) || !isFinite(duration) || isNaN(duration)) {
+        this.debugWarn('Invalid video time values, skipping double-tap action');
+        return;
+      }
+
       if (isLeftSide) {
         // Skip backward
-        const newTime = Math.max(0, this.video.currentTime - SKIP_SECONDS);
+        const newTime = Math.max(0, currentTime - SKIP_SECONDS);
         this.seek(newTime);
         this.showShortcutIndicator(`-${SKIP_SECONDS}s`);
         this.debugLog('Double tap left - skip backward');
       } else {
         // Skip forward
-        const newTime = Math.min(this.video.duration, this.video.currentTime + SKIP_SECONDS);
+        const newTime = Math.min(duration, currentTime + SKIP_SECONDS);
         this.seek(newTime);
         this.showShortcutIndicator(`+${SKIP_SECONDS}s`);
         this.debugLog('Double tap right - skip forward');
@@ -7269,8 +7508,11 @@ export class WebPlayer extends BasePlayer {
 
     this.fastBackwardInterval = setInterval(() => {
       if (this.video) {
-        const newTime = Math.max(0, this.video.currentTime - 0.1); // Go back 0.1s every frame
-        this.video.currentTime = newTime;
+        const currentTime = this.video.currentTime;
+        if (isFinite(currentTime) && !isNaN(currentTime)) {
+          const newTime = Math.max(0, currentTime - 0.1); // Go back 0.1s every frame
+          this.safeSetCurrentTime(newTime);
+        }
       }
     }, 50); // Update every 50ms for smooth backward motion
   }
@@ -7787,8 +8029,8 @@ export class WebPlayer extends BasePlayer {
     }
 
     const chapter = this.coreChapterManager.seekToChapter(chapterId);
-    if (chapter) {
-      this.video.currentTime = chapter.startTime;
+    if (chapter && isFinite(chapter.startTime) && !isNaN(chapter.startTime)) {
+      this.safeSetCurrentTime(chapter.startTime);
       this.debugLog('Seeked to chapter:', chapter.title);
     }
   }
@@ -8517,18 +8759,10 @@ export class WebPlayer extends BasePlayer {
       });
     }
     
-    // Auto-close settings menu on mobile after a short delay
-    if (this.isMobileDevice()) {
-      setTimeout(() => {
-        this.hideSettingsMenu();
-      }, 300);
-    } else {
-      // Desktop: just refresh the menu to update current values
-      setTimeout(() => {
-        this.generateAccordionMenu();
-        this.setupSettingsEventListeners();
-      }, 100);
-    }
+    // Close settings menu after selection on all devices
+    setTimeout(() => {
+      this.hideSettingsMenu();
+    }, 200);
   }
 
   /**
@@ -9165,12 +9399,12 @@ export class WebPlayer extends BasePlayer {
       
       // Additional check: ensure video is paused if not authenticated
       if (this.video && !this.video.paused && !this.paymentSuccessful) {
-        this.debugWarn('Unauthorized playbook detected, pausing video');
+        this.debugWarn('Unauthorized playback detected, pausing video');
         try {
           this.video.pause();
           const freeDuration = Number(this.config.freeDuration || 0);
-          if (freeDuration > 0) {
-            this.video.currentTime = Math.max(0, freeDuration - 1);
+          if (freeDuration > 0 && isFinite(freeDuration)) {
+            this.safeSetCurrentTime(freeDuration - 1);
           }
         } catch (_) {}
       }
@@ -9186,7 +9420,7 @@ export class WebPlayer extends BasePlayer {
     // Disable video completely
     if (this.video) {
       this.video.pause();
-      this.video.currentTime = 0;
+      this.safeSetCurrentTime(0);
       this.video.src = ''; // Clear video source
       this.video.style.display = 'none';
     }