vidply 1.0.31 → 1.0.33

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

@@ -11,12 +11,12 @@
       "format": "esm"
     },
     "src/i18n/languages/en.js": {
-      "bytes": 7390,
+      "bytes": 7637,
       "imports": [],
       "format": "esm"
     },
     "src/i18n/languages/de.js": {
-      "bytes": 9108,
+      "bytes": 9427,
       "imports": [],
       "format": "esm"
     },
@@ -109,7 +109,7 @@
       "format": "esm"
     },
     "src/controls/ControlBar.js": {
-      "bytes": 144875,
+      "bytes": 147152,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -186,7 +186,7 @@
       "format": "esm"
     },
     "src/renderers/HTML5Renderer.js": {
-      "bytes": 9645,
+      "bytes": 10921,
       "imports": [],
       "format": "esm"
     },
@@ -346,7 +346,7 @@
       "format": "esm"
     },
     "src/renderers/HLSRenderer.js": {
-      "bytes": 9900,
+      "bytes": 12151,
       "imports": [
         {
           "path": "src/renderers/HTML5Renderer.js",
@@ -362,7 +362,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 209146,
+      "bytes": 224782,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -473,7 +473,7 @@
       "format": "esm"
     },
     "src/features/PlaylistManager.js": {
-      "bytes": 48411,
+      "bytes": 57201,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -529,10 +529,10 @@
       },
       "bytes": 4730
     },
-    "dist/prod/vidply.HLSRenderer-3CG7BZKA.min.js": {
+    "dist/prod/vidply.HLSRenderer-ESR6NAMI.min.js": {
       "imports": [
         {
-          "path": "dist/prod/vidply.HTML5Renderer-KKW3OLHM.min.js",
+          "path": "dist/prod/vidply.HTML5Renderer-6ROXQSQY.min.js",
           "kind": "dynamic-import"
         }
       ],
@@ -542,10 +542,10 @@
       "entryPoint": "src/renderers/HLSRenderer.js",
       "inputs": {
         "src/renderers/HLSRenderer.js": {
-          "bytesInOutput": 5781
+          "bytesInOutput": 6514
         }
       },
-      "bytes": 5925
+      "bytes": 6658
     },
     "dist/prod/vidply.SoundCloudRenderer-MOR2CUFH.min.js": {
       "imports": [],
@@ -564,15 +564,15 @@
     "dist/prod/vidply.esm.min.js": {
       "imports": [
         {
-          "path": "dist/prod/vidply.chunk-34RH2THY.min.js",
+          "path": "dist/prod/vidply.chunk-7HVHEUHH.min.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/prod/vidply.chunk-LGTJRPUL.min.js",
+          "path": "dist/prod/vidply.chunk-IQKD4GUB.min.js",
           "kind": "import-statement"
         },
         {
-          "path": "dist/prod/vidply.TranscriptManager-WFZSW6NR.min.js",
+          "path": "dist/prod/vidply.TranscriptManager-B65LKXGG.min.js",
           "kind": "dynamic-import"
         },
         {
@@ -584,7 +584,7 @@
           "kind": "dynamic-import"
         },
         {
-          "path": "dist/prod/vidply.HLSRenderer-3CG7BZKA.min.js",
+          "path": "dist/prod/vidply.HLSRenderer-ESR6NAMI.min.js",
           "kind": "dynamic-import"
         },
         {
@@ -609,7 +609,7 @@
           "bytesInOutput": 1009
         },
         "src/controls/ControlBar.js": {
-          "bytesInOutput": 61881
+          "bytesInOutput": 63355
         },
         "src/controls/CaptionManager.js": {
           "bytesInOutput": 7279
@@ -624,18 +624,18 @@
           "bytesInOutput": 19117
         },
         "src/core/Player.js": {
-          "bytesInOutput": 76504
+          "bytesInOutput": 80485
         },
         "src/features/PlaylistManager.js": {
-          "bytesInOutput": 21345
+          "bytesInOutput": 24268
         },
         "src/index.js": {
           "bytesInOutput": 1869
         }
       },
-      "bytes": 203700
+      "bytes": 212078
     },
-    "dist/prod/vidply.de-FR3XX54P.min.js": {
+    "dist/prod/vidply.de-IHKC573T.min.js": {
       "imports": [],
       "exports": [
         "de"
@@ -643,10 +643,10 @@
       "entryPoint": "src/i18n/languages/de.js",
       "inputs": {
         "src/i18n/languages/de.js": {
-          "bytesInOutput": 7226
+          "bytesInOutput": 7512
         }
       },
-      "bytes": 7361
+      "bytes": 7647
     },
     "dist/prod/vidply.es-3IJCQLJ7.min.js": {
       "imports": [],
@@ -687,10 +687,10 @@
       },
       "bytes": 8204
     },
-    "dist/prod/vidply.HTML5Renderer-KKW3OLHM.min.js": {
+    "dist/prod/vidply.HTML5Renderer-6ROXQSQY.min.js": {
       "imports": [
         {
-          "path": "dist/prod/vidply.chunk-34RH2THY.min.js",
+          "path": "dist/prod/vidply.chunk-7HVHEUHH.min.js",
           "kind": "import-statement"
         }
       ],
@@ -701,22 +701,22 @@
       "inputs": {},
       "bytes": 192
     },
-    "dist/prod/vidply.chunk-34RH2THY.min.js": {
+    "dist/prod/vidply.chunk-7HVHEUHH.min.js": {
       "imports": [],
       "exports": [
         "a"
       ],
       "inputs": {
         "src/renderers/HTML5Renderer.js": {
-          "bytesInOutput": 4974
+          "bytesInOutput": 5387
         }
       },
-      "bytes": 5108
+      "bytes": 5521
     },
-    "dist/prod/vidply.TranscriptManager-WFZSW6NR.min.js": {
+    "dist/prod/vidply.TranscriptManager-B65LKXGG.min.js": {
       "imports": [
         {
-          "path": "dist/prod/vidply.chunk-LGTJRPUL.min.js",
+          "path": "dist/prod/vidply.chunk-IQKD4GUB.min.js",
           "kind": "import-statement"
         }
       ],
@@ -731,10 +731,10 @@
       },
       "bytes": 43042
     },
-    "dist/prod/vidply.chunk-LGTJRPUL.min.js": {
+    "dist/prod/vidply.chunk-IQKD4GUB.min.js": {
       "imports": [
         {
-          "path": "dist/prod/vidply.de-FR3XX54P.min.js",
+          "path": "dist/prod/vidply.de-IHKC573T.min.js",
           "kind": "dynamic-import"
         },
         {
@@ -771,7 +771,7 @@
           "bytesInOutput": 2348
         },
         "src/i18n/languages/en.js": {
-          "bytesInOutput": 6159
+          "bytesInOutput": 6385
         },
         "src/i18n/translations.js": {
           "bytesInOutput": 340
@@ -801,7 +801,7 @@
           "bytesInOutput": 776
         }
       },
-      "bytes": 40251
+      "bytes": 40477
     },
     "dist/prod/vidply.YouTubeRenderer-MFC2GMAC.min.js": {
       "imports": [],

package/package.json

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

package/src/controls/ControlBar.js

@@ -27,6 +27,10 @@ export class ControlBar {
     init() {
         this.createElement();
         this.createControls();
+        // Ensure time UI reflects any prefilled state (e.g. initialDuration)
+        // even when media metadata is deferred and 'loadedmetadata' won't fire yet.
+        this.updateDuration();
+        this.updateProgress();
         this.attachEvents();
         this.setupAutoHide();
         this.setupOverflowDetection();
@@ -715,7 +719,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';
@@ -831,22 +850,44 @@ export class ControlBar {
 
     // Helper methods to check for available features
     hasChapterTracks() {
+        // 1) Prefer already-loaded TextTracks (fast + accurate)
         const textTracks = this.player.element.textTracks;
         for (let i = 0; i < textTracks.length; i++) {
-            if (textTracks[i].kind === 'chapters') {
-                return true;
+            if (textTracks[i].kind === 'chapters') return true;
             }
+
+        // 2) Fallback to DOM <track> elements (works before tracks are fully loaded)
+        const trackEls = Array.from(this.player.element.querySelectorAll('track[kind="chapters"]'));
+        if (trackEls.length > 0) return true;
+
+        // 3) Playlist metadata fallback (works even when we intentionally defer loading)
+        const current = this.player.playlistManager?.getCurrentTrack?.();
+        if (current?.tracks && Array.isArray(current.tracks)) {
+            return current.tracks.some(t => t?.kind === 'chapters');
         }
+
         return false;
     }
 
     hasCaptionTracks() {
+        // 1) Prefer already-loaded TextTracks
         const textTracks = this.player.element.textTracks;
         for (let i = 0; i < textTracks.length; i++) {
-            if (textTracks[i].kind === 'captions' || textTracks[i].kind === 'subtitles') {
+            if (textTracks[i].kind === 'captions' || textTracks[i].kind === 'subtitles') return true;
+        }
+
+        // 2) Fallback to DOM <track> elements
+        const trackEls = Array.from(this.player.element.querySelectorAll('track'));
+        if (trackEls.some(el => (el.getAttribute('kind') === 'captions' || el.getAttribute('kind') === 'subtitles'))) {
                 return true;
             }
+
+        // 3) Playlist metadata fallback
+        const current = this.player.playlistManager?.getCurrentTrack?.();
+        if (current?.tracks && Array.isArray(current.tracks)) {
+            return current.tracks.some(t => t?.kind === 'captions' || t?.kind === 'subtitles');
         }
+
         return false;
     }
 
@@ -948,6 +989,8 @@ export class ControlBar {
         this.currentPreviewTime = null;
         this.previewThumbnailTimeout = null;
         this.previewSupported = false;
+        this.previewVideoReady = false;
+        this.previewVideoInitialized = false;
 
         // Check if preview is supported (HTML5 video only)
         // Check if element is a video
@@ -957,80 +1000,75 @@ export class ControlBar {
             return;
         }
 
-        // 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
+        // IMPORTANT: do NOT create/load the preview video until the user has started playback at least once.
+        // Otherwise we'd trigger heavy MP4 network traffic just by hovering the progress bar.
+    }
+
+    /**
+     * Lazily create the hidden preview video (only after playback started once)
+     */
+    ensurePreviewVideoInitialized() {
+        if (this.previewVideoInitialized) return;
+        if (!this.player?.state?.hasStartedPlayback) return;
+
         const renderer = this.player.renderer;
         const hasVideoMedia = renderer && renderer.media && renderer.media.tagName === 'VIDEO';
-        
-        // 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 && 
+        const isHTML5Renderer = hasVideoMedia &&
             renderer.media === this.player.element &&
             !renderer.hls &&
             typeof renderer.seek === 'function';
-        
+
         this.previewSupported = isHTML5Renderer && hasVideoMedia;
+        if (!this.previewSupported) return;
 
-        if (this.previewSupported) {
-            // Create a hidden video element for capturing frames
-            this.previewVideo = document.createElement('video');
-            this.previewVideo.muted = true;
-            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 and attributes from main video
-            const mainVideo = renderer.media || this.player.element;
-            let videoSrc = null;
-            
-            if (mainVideo.src) {
-                videoSrc = mainVideo.src;
-            } else {
-                const source = mainVideo.querySelector('source');
-                if (source) {
-                    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', (e) => {
-                this.player.log('Preview video failed to load:', e, 'warn');
-                this.previewSupported = false;
-            });
-            
-            // 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);
+        const mainVideo = renderer.media || this.player.element;
+        let videoSrc = null;
+        if (mainVideo.src) {
+            videoSrc = mainVideo.src;
+        } else {
+            const source = mainVideo.querySelector('source');
+            if (source) {
+                videoSrc = source.src;
             }
-            
-            // Set source after appending to DOM
-            this.previewVideo.src = videoSrc;
-            this.previewVideoReady = false;
         }
+
+        if (!videoSrc) {
+            this.player.log('No video source found for preview', 'warn');
+            this.previewSupported = false;
+            return;
+        }
+
+        // Create a hidden video element for capturing frames
+        this.previewVideo = document.createElement('video');
+        this.previewVideo.muted = true;
+        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';
+
+        if (mainVideo.crossOrigin) {
+            this.previewVideo.crossOrigin = mainVideo.crossOrigin;
+        }
+
+        this.previewVideo.addEventListener('error', (e) => {
+            this.player.log('Preview video failed to load:', e, 'warn');
+            this.previewSupported = false;
+        });
+
+        this.previewVideo.addEventListener('loadedmetadata', () => {
+            this.previewVideoReady = true;
+        }, { once: true });
+
+        if (this.player.container) {
+            this.player.container.appendChild(this.previewVideo);
+        }
+
+        this.previewVideo.src = videoSrc;
+        this.previewVideoReady = false;
+        this.previewVideoInitialized = true;
     }
 
     /**
@@ -1203,10 +1241,21 @@ export class ControlBar {
                 // Update tooltip position
                 this.controls.progressTooltip.style.left = `${left}px`;
                 this.controls.progressTooltip.style.display = 'block';
-                
-                // Update preview thumbnail (only if supported)
+
+                // Only show preview thumbnails after the user has started playback at least once.
+                // Before that, show just the timestamp (no empty preview box).
+                if (!this.player?.state?.hasStartedPlayback) {
+                    if (this.controls.progressPreview) {
+                        this.controls.progressPreview.style.display = 'none';
+                    }
+                    return;
+                }
+
+                this.ensurePreviewVideoInitialized();
                 if (this.previewSupported) {
                     this.updatePreviewThumbnail(time);
+                } else if (this.controls.progressPreview) {
+                    this.controls.progressPreview.style.display = 'none';
                 }
             }
         });