vidply 1.0.30 → 1.0.32

package/dist/vidply.esm.min.meta.json

@@ -104,12 +104,12 @@
       "format": "esm"
     },
     "src/utils/VideoFrameCapture.js": {
-      "bytes": 4092,
+      "bytes": 4640,
       "imports": [],
       "format": "esm"
     },
     "src/controls/ControlBar.js": {
-      "bytes": 138319,
+      "bytes": 145861,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -346,7 +346,7 @@
       "format": "esm"
     },
     "src/renderers/HLSRenderer.js": {
-      "bytes": 9900,
+      "bytes": 10310,
       "imports": [
         {
           "path": "src/renderers/HTML5Renderer.js",
@@ -362,7 +362,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 209146,
+      "bytes": 214379,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -473,7 +473,7 @@
       "format": "esm"
     },
     "src/features/PlaylistManager.js": {
-      "bytes": 48411,
+      "bytes": 49922,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -529,7 +529,7 @@
       },
       "bytes": 4730
     },
-    "dist/prod/vidply.HLSRenderer-3CG7BZKA.min.js": {
+    "dist/prod/vidply.HLSRenderer-VWNJD2CB.min.js": {
       "imports": [
         {
           "path": "dist/prod/vidply.HTML5Renderer-KKW3OLHM.min.js",
@@ -542,10 +542,10 @@
       "entryPoint": "src/renderers/HLSRenderer.js",
       "inputs": {
         "src/renderers/HLSRenderer.js": {
-          "bytesInOutput": 5781
+          "bytesInOutput": 5884
         }
       },
-      "bytes": 5925
+      "bytes": 6028
     },
     "dist/prod/vidply.SoundCloudRenderer-MOR2CUFH.min.js": {
       "imports": [],
@@ -584,7 +584,7 @@
           "kind": "dynamic-import"
         },
         {
-          "path": "dist/prod/vidply.HLSRenderer-3CG7BZKA.min.js",
+          "path": "dist/prod/vidply.HLSRenderer-VWNJD2CB.min.js",
           "kind": "dynamic-import"
         },
         {
@@ -606,10 +606,10 @@
           "bytesInOutput": 256
         },
         "src/utils/VideoFrameCapture.js": {
-          "bytesInOutput": 838
+          "bytesInOutput": 1009
         },
         "src/controls/ControlBar.js": {
-          "bytesInOutput": 59666
+          "bytesInOutput": 62339
         },
         "src/controls/CaptionManager.js": {
           "bytesInOutput": 7279
@@ -624,7 +624,7 @@
           "bytesInOutput": 19117
         },
         "src/core/Player.js": {
-          "bytesInOutput": 76504
+          "bytesInOutput": 76547
         },
         "src/features/PlaylistManager.js": {
           "bytesInOutput": 21345
@@ -633,7 +633,7 @@
           "bytesInOutput": 1869
         }
       },
-      "bytes": 201314
+      "bytes": 204201
     },
     "dist/prod/vidply.de-FR3XX54P.min.js": {
       "imports": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vidply",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Universal, accessible video & audio player with ES6 modules",
   "type": "module",
   "main": "dist/prod/vidply.esm.min.js",

package/src/controls/ControlBar.js

@@ -715,7 +715,22 @@ export class ControlBar {
         }
 
         // 4. Playback speed button
-        if (this.player.options.speedButton) {
+        // IMPORTANT: Don't rely on renderer.constructor.name here.
+        // In production builds, class names are minified (e.g. "class s"), which would break the check.
+        // Instead, detect HLS by the current source URL.
+        const src = this.player.currentSource
+            || this.player.element?.getAttribute?.('src')
+            || this.player.element?.currentSrc
+            || this.player.element?.src
+            || this.player.element?.querySelector?.('source')?.getAttribute?.('src')
+            || this.player.element?.querySelector?.('source')?.src
+            || '';
+        const isHlsSource = typeof src === 'string' && src.includes('.m3u8');
+        const isVideoElement = this.player.element?.tagName?.toLowerCase() === 'video';
+        const hideSpeedForThisPlayer =
+            (!!this.player.options.hideSpeedForHls && isHlsSource)
+            || (!!this.player.options.hideSpeedForHlsVideo && isHlsSource && isVideoElement);
+        if (this.player.options.speedButton && !hideSpeedForThisPlayer) {
             const btn = this.createSpeedButton();
             btn.dataset.overflowPriority = '1';
             btn.dataset.overflowPriorityMobile = '3';
@@ -959,12 +974,19 @@ export class ControlBar {
 
         // Check if renderer supports preview (HTML5Renderer or HLSRenderer with native support)
         // We check if renderer has a media property that is a video element
+        // Note: Don't rely on constructor.name as it's minified in production builds
         const renderer = this.player.renderer;
         const hasVideoMedia = renderer && renderer.media && renderer.media.tagName === 'VIDEO';
-        const isHTML5Renderer = renderer && (
-            renderer.constructor.name === 'HTML5Renderer' ||
-            (renderer.constructor.name === 'HLSRenderer' && hasVideoMedia)
-        );
+        
+        // Check if it's HTML5Renderer by checking:
+        // 1. Has media property that is a video element
+        // 2. Media is the same as player.element (HTML5Renderer sets this.media = player.element)
+        // 3. Doesn't have hls property (HLSRenderer has hls property)
+        // 4. Has seek method (all renderers have this, but combined with above checks it's reliable)
+        const isHTML5Renderer = hasVideoMedia && 
+            renderer.media === this.player.element &&
+            !renderer.hls &&
+            typeof renderer.seek === 'function';
         
         this.previewSupported = isHTML5Renderer && hasVideoMedia;
 
@@ -972,34 +994,57 @@ export class ControlBar {
             // Create a hidden video element for capturing frames
             this.previewVideo = document.createElement('video');
             this.previewVideo.muted = true;
-            this.previewVideo.preload = 'metadata';
+            this.previewVideo.preload = 'auto'; // Need more than metadata to capture frames
+            this.previewVideo.playsInline = true;
             this.previewVideo.style.position = 'absolute';
             this.previewVideo.style.visibility = 'hidden';
             this.previewVideo.style.width = '1px';
             this.previewVideo.style.height = '1px';
             this.previewVideo.style.top = '-9999px';
             
-            // Copy source from main video
+            // Copy source and attributes from main video
             const mainVideo = renderer.media || this.player.element;
+            let videoSrc = null;
+            
             if (mainVideo.src) {
-                this.previewVideo.src = mainVideo.src;
+                videoSrc = mainVideo.src;
             } else {
                 const source = mainVideo.querySelector('source');
                 if (source) {
-                    this.previewVideo.src = source.src;
+                    videoSrc = source.src;
                 }
             }
             
+            if (!videoSrc) {
+                this.player.log('No video source found for preview', 'warn');
+                this.previewSupported = false;
+                return;
+            }
+            
+            // Copy crossOrigin if set (important for CORS)
+            if (mainVideo.crossOrigin) {
+                this.previewVideo.crossOrigin = mainVideo.crossOrigin;
+            }
+            
             // Handle errors gracefully
-            this.previewVideo.addEventListener('error', () => {
-                this.player.log('Preview video failed to load', 'warn');
+            this.previewVideo.addEventListener('error', (e) => {
+                this.player.log('Preview video failed to load:', e, 'warn');
                 this.previewSupported = false;
             });
             
-            // Append to player container (hidden)
+            // Wait for metadata to be loaded before using
+            this.previewVideo.addEventListener('loadedmetadata', () => {
+                this.previewVideoReady = true;
+            }, { once: true });
+            
+            // Append to player container (hidden) BEFORE setting src
             if (this.player.container) {
                 this.player.container.appendChild(this.previewVideo);
             }
+            
+            // Set source after appending to DOM
+            this.previewVideo.src = videoSrc;
+            this.previewVideoReady = false;
         }
     }
 
@@ -1013,6 +1058,55 @@ export class ControlBar {
             return null;
         }
 
+        // Wait for preview video to be ready if not yet loaded
+        if (!this.previewVideoReady) {
+            if (this.previewVideo.readyState < 2) {
+                // Wait for at least HAVE_CURRENT_DATA (2) to ensure we can capture frames
+                await new Promise((resolve, reject) => {
+                    const timeout = setTimeout(() => {
+                        reject(new Error('Preview video data load timeout'));
+                    }, 10000);
+                    
+                    const cleanup = () => {
+                        clearTimeout(timeout);
+                        this.previewVideo.removeEventListener('loadeddata', checkReady);
+                        this.previewVideo.removeEventListener('canplay', checkReady);
+                        this.previewVideo.removeEventListener('error', onError);
+                    };
+                    
+                    const checkReady = () => {
+                        if (this.previewVideo.readyState >= 2) {
+                            cleanup();
+                            this.previewVideoReady = true;
+                            resolve();
+                        }
+                    };
+                    
+                    const onError = () => {
+                        cleanup();
+                        reject(new Error('Preview video failed to load'));
+                    };
+                    
+                    // Try loadeddata first (faster), fallback to canplay
+                    if (this.previewVideo.readyState >= 1) {
+                        this.previewVideo.addEventListener('loadeddata', checkReady);
+                    }
+                    this.previewVideo.addEventListener('canplay', checkReady);
+                    this.previewVideo.addEventListener('error', onError);
+                    
+                    // If already ready, resolve immediately
+                    if (this.previewVideo.readyState >= 2) {
+                        checkReady();
+                    }
+                }).catch(() => {
+                    this.previewSupported = false;
+                    return null;
+                });
+            } else {
+                this.previewVideoReady = true;
+            }
+        }
+
         // Check cache first
         const cacheKey = Math.floor(time);
         if (this.previewThumbnailCache.has(cacheKey)) {
@@ -1029,8 +1123,9 @@ export class ControlBar {
         });
 
         if (dataURL) {
-            // Cache the thumbnail (limit cache size)
-            if (this.previewThumbnailCache.size > 20) {
+            // Cache the thumbnail (limit cache size to 20 entries using LRU-like behavior)
+            if (this.previewThumbnailCache.size >= 20) {
+                // Delete oldest entry (first key in insertion order)
                 const firstKey = this.previewThumbnailCache.keys().next().value;
                 this.previewThumbnailCache.delete(firstKey);
             }
@@ -1045,7 +1140,7 @@ export class ControlBar {
      * @param {number} time - Time in seconds
      */
     async updatePreviewThumbnail(time) {
-        if (!this.previewSupported) {
+        if (!this.previewSupported || !this.controls.progressPreview) {
             return;
         }
 
@@ -1056,12 +1151,27 @@ export class ControlBar {
 
         // Debounce thumbnail generation to avoid excessive seeking
         this.previewThumbnailTimeout = setTimeout(async () => {
-            const thumbnail = await this.generatePreviewThumbnail(time);
-            if (thumbnail && this.controls.progressPreview) {
-                this.controls.progressPreview.style.backgroundImage = `url(${thumbnail})`;
-                this.controls.progressPreview.style.display = 'block';
+            try {
+                const thumbnail = await this.generatePreviewThumbnail(time);
+                if (thumbnail && this.controls.progressPreview) {
+                    // Set background image and make visible
+                    this.controls.progressPreview.style.backgroundImage = `url("${thumbnail}")`;
+                    this.controls.progressPreview.style.display = 'block';
+                    this.controls.progressPreview.style.backgroundRepeat = 'no-repeat';
+                    this.controls.progressPreview.style.backgroundPosition = 'center';
+                } else {
+                    // Hide if thumbnail generation failed
+                    if (this.controls.progressPreview) {
+                        this.controls.progressPreview.style.display = 'none';
+                    }
+                }
+                this.currentPreviewTime = time;
+            } catch (error) {
+                this.player.log('Preview thumbnail update failed:', error, 'warn');
+                if (this.controls.progressPreview) {
+                    this.controls.progressPreview.style.display = 'none';
+                }
             }
-            this.currentPreviewTime = time;
         }, 100);
     }
 
@@ -1109,8 +1219,10 @@ export class ControlBar {
                 this.controls.progressTooltip.style.left = `${left}px`;
                 this.controls.progressTooltip.style.display = 'block';
                 
-                // Update preview thumbnail
-                this.updatePreviewThumbnail(time);
+                // Update preview thumbnail (only if supported)
+                if (this.previewSupported) {
+                    this.updatePreviewThumbnail(time);
+                }
             }
         });
 
@@ -2815,6 +2927,12 @@ export class ControlBar {
             this.updateDuration();
             this.ensureQualityButton();
             this.updateQualityIndicator();
+            // Update preview video source when metadata loads (for playlists)
+            this.updatePreviewVideoSource();
+        });
+        this.player.on('sourcechange', () => {
+            // Update preview video source when source changes (for playlists)
+            this.updatePreviewVideoSource();
         });
         this.player.on('volumechange', () => this.updateVolumeDisplay());
         this.player.on('progress', () => this.updateBuffered());
@@ -3476,6 +3594,49 @@ export class ControlBar {
         this.element.style.display = 'none';
     }
 
+    /**
+     * Update preview video source when player source changes (for playlists)
+     * Also re-initializes if preview wasn't set up initially
+     */
+    updatePreviewVideoSource() {
+        const renderer = this.player.renderer;
+        if (!renderer || !renderer.media || renderer.media.tagName !== 'VIDEO') {
+            return;
+        }
+
+        // If preview wasn't initialized yet, try to initialize it now
+        if (!this.previewSupported && !this.previewVideo) {
+            this.initPreviewThumbnail();
+        }
+
+        if (!this.previewSupported || !this.previewVideo) {
+            return;
+        }
+
+        const mainVideo = renderer.media;
+        const newSrc = mainVideo.src || mainVideo.querySelector('source')?.src;
+        
+        if (newSrc && this.previewVideo.src !== newSrc) {
+            // Clear cache when source changes
+            this.previewThumbnailCache.clear();
+            this.previewVideoReady = false;
+            this.previewVideo.src = newSrc;
+            
+            // Copy crossOrigin if set
+            if (mainVideo.crossOrigin) {
+                this.previewVideo.crossOrigin = mainVideo.crossOrigin;
+            }
+            
+            // Wait for new source to load
+            this.previewVideo.addEventListener('loadedmetadata', () => {
+                this.previewVideoReady = true;
+            }, { once: true });
+        } else if (newSrc && !this.previewVideoReady && this.previewVideo.readyState >= 1) {
+            // If source is the same but video is ready, mark as ready
+            this.previewVideoReady = true;
+        }
+    }
+
     /**
      * Cleanup preview thumbnail resources
      */