vidply 1.0.28 → 1.0.30

package/src/controls/ControlBar.js

@@ -7,6 +7,8 @@ import {TimeUtils} from '../utils/TimeUtils.js';
 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) {
@@ -30,11 +32,6 @@ export class ControlBar {
         this.setupOverflowDetection();
     }
 
-    // Helper method to check if we're on a mobile device
-    isMobile() {
-        return window.innerWidth < 768;
-    }
-
     // Helper method to detect touch devices
     isTouchDevice() {
         return (
@@ -46,7 +43,7 @@ export class ControlBar {
 
     // Smart menu positioning to avoid overflow
     positionMenu(menu, button, immediate = false) {
-        const isMobile = this.isMobile();
+        const mobile = isMobile();
         const isOverflowMenu = menu.classList.contains(`${this.player.options.classPrefix}-overflow-menu-list`);
         const isFullscreen = this.player.state.fullscreen;
         
@@ -101,7 +98,7 @@ export class ControlBar {
             return;
         }
         
-        if (isMobile) {
+        if (mobile) {
             // On mobile, ensure menus stay within viewport
             const isVolumeMenu = menu.classList.contains(`${this.player.options.classPrefix}-volume-menu`);
             
@@ -913,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);
@@ -920,10 +932,139 @@ 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
+        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)
+        );
+        
+        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 = 'metadata';
+            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
+            const mainVideo = renderer.media || this.player.element;
+            if (mainVideo.src) {
+                this.previewVideo.src = mainVideo.src;
+            } else {
+                const source = mainVideo.querySelector('source');
+                if (source) {
+                    this.previewVideo.src = source.src;
+                }
+            }
+            
+            // Handle errors gracefully
+            this.previewVideo.addEventListener('error', () => {
+                this.player.log('Preview video failed to load', 'warn');
+                this.previewSupported = false;
+            });
+            
+            // Append to player container (hidden)
+            if (this.player.container) {
+                this.player.container.appendChild(this.previewVideo);
+            }
+        }
+    }
+
+    /**
+     * 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;
+        }
+
+        // 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)
+            if (this.previewThumbnailCache.size > 20) {
+                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) {
+            return;
+        }
+
+        // Clear any pending updates
+        if (this.previewThumbnailTimeout) {
+            clearTimeout(this.previewThumbnailTimeout);
+        }
+
+        // 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';
+            }
+            this.currentPreviewTime = time;
+        }, 100);
+    }
+
     setupProgressBarEvents() {
         const progress = this.controls.progress;
 
@@ -958,15 +1099,26 @@ 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
+                this.updatePreviewThumbnail(time);
             }
         });
 
         progress.addEventListener('mouseleave', () => {
             this.controls.progressTooltip.style.display = 'none';
+            if (this.previewThumbnailTimeout) {
+                clearTimeout(this.previewThumbnailTimeout);
+            }
         });
 
         // Keyboard navigation
@@ -3324,6 +3476,23 @@ export class ControlBar {
         this.element.style.display = 'none';
     }
 
+    /**
+     * 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);
@@ -3333,6 +3502,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);
         }

package/src/controls/TranscriptManager.js

@@ -750,15 +750,13 @@ export class TranscriptManager {
     const metadataTrack = textTracks.find(track => track.kind === 'metadata');
 
     // We need at least one track type available for display
-    // Description tracks are only included if audio description is enabled
-    const hasDescriptionTrack = descriptionTrack && this.player.state.audioDescriptionEnabled;
-    if (!captionTrack && !hasDescriptionTrack && !metadataTrack) {
+    // (captions, descriptions, or metadata - though metadata is not displayed)
+    if (!captionTrack && !descriptionTrack && !metadataTrack) {
       this.showNoTranscriptMessage();
       return;
     }
 
-    // Enable all tracks to load cues (even if we won't display descriptions)
-    // This ensures descriptions are ready when audio description is enabled
+    // Enable all tracks to load cues so they're available for the transcript
     const tracksToLoad = [captionTrack, descriptionTrack, metadataTrack].filter(Boolean);
     tracksToLoad.forEach(track => {
       if (track.mode === 'disabled') {
@@ -806,8 +804,10 @@ export class TranscriptManager {
       });
     }
     
-    // Only include description cues if audio description is enabled
-    if (descriptionTrack && descriptionTrack.cues && this.player.state.audioDescriptionEnabled) {
+    // Always include description cues in transcript for completeness
+    // (Audio description toggle only controls whether they're read aloud,
+    // but the transcript should always show all content for accessibility)
+    if (descriptionTrack && descriptionTrack.cues) {
       Array.from(descriptionTrack.cues).forEach(cue => {
         allCues.push({ cue, type: 'description' });
       });