unified-video-framework 1.4.409 → 1.4.410

package/packages/web/src/WebPlayer.ts

@@ -169,6 +169,7 @@ export class WebPlayer extends BasePlayer {
 
   // Live stream detection
   private lastDuration: number = 0; // Track duration changes to detect live streams
+  private isDetectedAsLive: boolean = false; // Once detected as live, stays live
 
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
@@ -539,6 +540,21 @@ export class WebPlayer extends BasePlayer {
       }
 
       this.setBuffering(false);
+
+      // Apply startTime if configured and not yet applied
+      // Done here (at canplay) instead of loadedmetadata for faster loading
+      // because video has buffered enough data to play from this position
+      if (this.config.startTime !== undefined &&
+        this.config.startTime > 0 &&
+        !this.hasAppliedStartTime &&
+        this.video &&
+        this.video.duration > 0) {
+        const startTime = Math.min(this.config.startTime, this.video.duration);
+        this.debugLog(`⏩ Applying startTime at canplay: ${startTime}s (continue watching)`);
+        this.video.currentTime = startTime;
+        this.hasAppliedStartTime = true;
+      }
+
       this.emit('onReady');
 
       // Update time display when video is ready to play
@@ -579,16 +595,8 @@ export class WebPlayer extends BasePlayer {
       // Update time display immediately when metadata loads
       this.updateTimeDisplay();
 
-      // Apply startTime if configured and not yet applied
-      if (this.config.startTime !== undefined &&
-        this.config.startTime > 0 &&
-        !this.hasAppliedStartTime &&
-        this.video.duration > 0) {
-        const startTime = Math.min(this.config.startTime, this.video.duration);
-        this.debugLog(`⏩ Seeking to startTime: ${startTime}s`);
-        this.seek(startTime);
-        this.hasAppliedStartTime = true;
-      }
+      // Note: startTime is now applied at 'canplay' event for faster loading
+      // (moved from here to avoid premature seeking before buffering)
 
       this.emit('onLoadedMetadata', {
         duration: this.video.duration || 0,
@@ -992,12 +1000,22 @@ export class WebPlayer extends BasePlayer {
     }
 
     if (window.Hls.isSupported()) {
-      this.hls = new window.Hls({
+      // Prepare HLS config with startPosition for faster continue watching
+      const hlsConfig: any = {
         debug: this.config.debug,
         enableWorker: true,
         lowLatencyMode: false,
         backBufferLength: 90
-      });
+      };
+
+      // Set startPosition for HLS to begin loading from the correct fragment
+      // This avoids downloading from beginning and seeking later
+      if (this.config.startTime !== undefined && this.config.startTime > 0) {
+        hlsConfig.startPosition = this.config.startTime;
+        this.debugLog(`⏩ HLS startPosition set to: ${this.config.startTime}s (continue watching)`);
+      }
+
+      this.hls = new window.Hls(hlsConfig);
 
       this.hls.loadSource(url);
       this.hls.attachMedia(this.video);
@@ -1077,6 +1095,15 @@ export class WebPlayer extends BasePlayer {
     }
 
     this.dash = window.dashjs.MediaPlayer().create();
+
+    // Set initial seek time for DASH if startTime is configured (continue watching)
+    // This allows DASH to start downloading from the correct segment
+    if (this.config.startTime !== undefined && this.config.startTime > 0) {
+      this.debugLog(`⏩ DASH will seek to: ${this.config.startTime}s on ready (continue watching)`);
+      // Note: DASH doesn't support startPosition in config like HLS
+      // The seek will be applied at canplay event when stream is ready
+    }
+
     this.dash.initialize(this.video, url, this.config.autoPlay);
 
     // Configure DASH settings
@@ -4598,31 +4625,35 @@ export class WebPlayer extends BasePlayer {
       }
 
       .uvf-live-dot {
-        width: 8px;
-        height: 8px;
+        width: 10px;
+        height: 10px;
         background: #ff0000;
         border-radius: 50%;
         display: inline-block;
-        animation: uvf-live-pulse 2s ease-in-out infinite;
-        box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
+        animation: uvf-live-pulse 1.5s ease-in-out infinite;
+        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
       }
 
       .uvf-live-text {
-        color: #ffffff;
+        color: #ff0000;
         font-size: 14px;
         font-weight: 700;
-        letter-spacing: 0.5px;
-        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+        letter-spacing: 1px;
+        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
       }
 
       @keyframes uvf-live-pulse {
-        0%, 100% {
-          opacity: 1;
+        0% {
+          box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
           transform: scale(1);
         }
         50% {
-          opacity: 0.7;
-          transform: scale(1.1);
+          box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
+          transform: scale(1.2);
+        }
+        100% {
+          box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
+          transform: scale(1);
         }
       }
 
@@ -8554,23 +8585,29 @@ export class WebPlayer extends BasePlayer {
 
     // Detect if duration is increasing (live stream with DVR)
     const isDurationIncreasing = duration > this.lastDuration && this.lastDuration > 0 && duration > 60;
+
+    // Once we detect duration is increasing, remember it's a live stream
+    if (isDurationIncreasing) {
+      this.isDetectedAsLive = true;
+    }
+
     this.lastDuration = duration;
 
     // Check if this is a live stream
     // 1. Manual override via isLive config
     // 2. Duration = Infinity (pure live)
-    // 3. Duration is actively increasing (live with DVR)
+    // 3. Previously detected as live (duration increased at some point)
     // 4. Near live edge: duration - currentTime < 15 seconds (live with DVR)
     const isLiveStream = this.config.isLive === true ||
                          !isFinite(duration) ||
-                         isDurationIncreasing ||
+                         this.isDetectedAsLive ||
                          (duration > 0 && (duration - current) < 15);
 
     if (isLiveStream) {
       // Show LIVE indicator for live streams
       timeDisplay.innerHTML = '<span class="uvf-live-dot"></span><span class="uvf-live-text">LIVE</span>';
       timeDisplay.classList.add('uvf-is-live');
-      this.debugLog('Time display: LIVE stream detected (isLive=' + this.config.isLive + ', increasing=' + isDurationIncreasing + ', duration=' + duration + ', current=' + current + ')');
+      this.debugLog('Time display: LIVE stream detected (isLive=' + this.config.isLive + ', wasDetected=' + this.isDetectedAsLive + ', duration=' + duration + ')');
     } else {
       // Show normal time display for VOD
       const currentFormatted = this.formatTime(current);