vidply 1.0.29 → 1.0.31

package/src/controls/ControlBar.js

@@ -8,6 +8,7 @@ import {createIconElement} from '../icons/Icons.js';
 import {i18n} from '../i18n/i18n.js';
 import {focusElement, focusFirstElement} from '../utils/FocusUtils.js';
 import {isMobile} from '../utils/PerformanceUtils.js';
+import {captureVideoFrame} from '../utils/VideoFrameCapture.js';
 
 export class ControlBar {
     constructor(player) {
@@ -909,6 +910,21 @@ export class ControlBar {
             className: `${this.player.options.classPrefix}-progress-tooltip`
         });
 
+        // Preview thumbnail (for video only)
+        this.controls.progressPreview = DOMUtils.createElement('div', {
+            className: `${this.player.options.classPrefix}-progress-preview`,
+            attributes: {
+                'aria-hidden': 'true'
+            }
+        });
+        this.controls.progressTooltip.appendChild(this.controls.progressPreview);
+
+        // Time text
+        this.controls.progressTooltipTime = DOMUtils.createElement('div', {
+            className: `${this.player.options.classPrefix}-progress-tooltip-time`
+        });
+        this.controls.progressTooltip.appendChild(this.controls.progressTooltipTime);
+
         progressContainer.appendChild(this.controls.buffered);
         progressContainer.appendChild(this.controls.played);
         this.controls.played.appendChild(this.controls.progressHandle);
@@ -916,10 +932,234 @@ export class ControlBar {
 
         this.controls.progress = progressContainer;
 
+        // Initialize preview functionality
+        this.initPreviewThumbnail();
+
         // Progress bar events
         this.setupProgressBarEvents();
     }
 
+    /**
+     * Initialize preview thumbnail functionality for HTML5 video
+     */
+    initPreviewThumbnail() {
+        this.previewThumbnailCache = new Map();
+        this.previewVideo = null;
+        this.currentPreviewTime = null;
+        this.previewThumbnailTimeout = null;
+        this.previewSupported = false;
+
+        // Check if preview is supported (HTML5 video only)
+        // Check if element is a video
+        const isVideo = this.player.element && this.player.element.tagName === 'VIDEO';
+        
+        if (!isVideo) {
+            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
+        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 && 
+            renderer.media === this.player.element &&
+            !renderer.hls &&
+            typeof renderer.seek === 'function';
+        
+        this.previewSupported = isHTML5Renderer && hasVideoMedia;
+
+        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);
+            }
+            
+            // Set source after appending to DOM
+            this.previewVideo.src = videoSrc;
+            this.previewVideoReady = false;
+        }
+    }
+
+    /**
+     * Generate preview thumbnail for a specific time
+     * @param {number} time - Time in seconds
+     * @returns {Promise<string>} Data URL of the thumbnail
+     */
+    async generatePreviewThumbnail(time) {
+        if (!this.previewSupported || !this.previewVideo) {
+            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)) {
+            return this.previewThumbnailCache.get(cacheKey);
+        }
+
+        // Use shared frame capture utility
+        // Don't restore state since preview video is always muted and hidden
+        const dataURL = await captureVideoFrame(this.previewVideo, time, {
+            restoreState: false,
+            quality: 0.8,
+            maxWidth: 160,
+            maxHeight: 90
+        });
+
+        if (dataURL) {
+            // 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);
+            }
+            this.previewThumbnailCache.set(cacheKey, dataURL);
+        }
+
+        return dataURL;
+    }
+
+    /**
+     * Update preview thumbnail display
+     * @param {number} time - Time in seconds
+     */
+    async updatePreviewThumbnail(time) {
+        if (!this.previewSupported || !this.controls.progressPreview) {
+            return;
+        }
+
+        // Clear any pending updates
+        if (this.previewThumbnailTimeout) {
+            clearTimeout(this.previewThumbnailTimeout);
+        }
+
+        // Debounce thumbnail generation to avoid excessive seeking
+        this.previewThumbnailTimeout = setTimeout(async () => {
+            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';
+                }
+            }
+        }, 100);
+    }
+
     setupProgressBarEvents() {
         const progress = this.controls.progress;
 
@@ -954,15 +1194,28 @@ export class ControlBar {
         progress.addEventListener('mousemove', (e) => {
             if (!this.isDraggingProgress) {
                 const {time} = updateProgress(e.clientX);
-                // Update tooltip text content instead of aria-label (divs shouldn't have aria-label)
-                this.controls.progressTooltip.textContent = TimeUtils.formatTime(time);
-                this.controls.progressTooltip.style.left = `${e.clientX - progress.getBoundingClientRect().left}px`;
+                const rect = progress.getBoundingClientRect();
+                const left = e.clientX - rect.left;
+                
+                // Update tooltip time text
+                this.controls.progressTooltipTime.textContent = TimeUtils.formatTime(time);
+                
+                // Update tooltip position
+                this.controls.progressTooltip.style.left = `${left}px`;
                 this.controls.progressTooltip.style.display = 'block';
+                
+                // Update preview thumbnail (only if supported)
+                if (this.previewSupported) {
+                    this.updatePreviewThumbnail(time);
+                }
             }
         });
 
         progress.addEventListener('mouseleave', () => {
             this.controls.progressTooltip.style.display = 'none';
+            if (this.previewThumbnailTimeout) {
+                clearTimeout(this.previewThumbnailTimeout);
+            }
         });
 
         // Keyboard navigation
@@ -2659,6 +2912,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());
@@ -3320,6 +3579,66 @@ 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
+     */
+    cleanupPreviewThumbnail() {
+        if (this.previewThumbnailTimeout) {
+            clearTimeout(this.previewThumbnailTimeout);
+            this.previewThumbnailTimeout = null;
+        }
+        
+        if (this.previewVideo && this.previewVideo.parentNode) {
+            this.previewVideo.parentNode.removeChild(this.previewVideo);
+            this.previewVideo = null;
+        }
+        
+        this.previewThumbnailCache.clear();
+    }
+
     destroy() {
         if (this.hideTimeout) {
             clearTimeout(this.hideTimeout);
@@ -3329,6 +3648,9 @@ export class ControlBar {
             this.overflowResizeObserver.disconnect();
         }
 
+        // Cleanup preview thumbnail resources
+        this.cleanupPreviewThumbnail();
+
         if (this.element && this.element.parentNode) {
             this.element.parentNode.removeChild(this.element);
         }