unified-video-framework 1.4.446 → 1.4.448

package/packages/web/dist/WebPlayer.js

@@ -1,8 +1,8 @@
-import { BasePlayer } from "../../core/dist/BasePlayer.js";
-import { ChapterManager as CoreChapterManager } from "../../core/dist/index.js";
-import { ChapterManager } from "./chapters/ChapterManager.js";
-import YouTubeExtractor from "./utils/YouTubeExtractor.js";
-import { DRMManager, DRMErrorHandler } from "./drm/index.js";
+import { BasePlayer } from '../../core/dist/BasePlayer.js';
+import { ChapterManager as CoreChapterManager } from '../../core/dist/index.js';
+import { ChapterManager } from './chapters/ChapterManager.js';
+import YouTubeExtractor from './utils/YouTubeExtractor.js';
+import { DRMManager, DRMErrorHandler } from './drm/index.js';
 export class WebPlayer extends BasePlayer {
     constructor() {
         super(...arguments);
@@ -112,6 +112,11 @@ export class WebPlayer extends BasePlayer {
         this.MAX_HLS_ERROR_RETRIES = 3;
         this.lastDuration = 0;
         this.isDetectedAsLive = false;
+        this.thumbnailPreviewConfig = null;
+        this.thumbnailEntries = [];
+        this.preloadedThumbnails = new Map();
+        this.currentThumbnailUrl = null;
+        this.thumbnailPreviewEnabled = false;
         this.autoplayAttempted = false;
         this.youtubePlayer = null;
         this.youtubePlayerReady = false;
@@ -134,6 +139,169 @@ export class WebPlayer extends BasePlayer {
             console.warn(`[WebPlayer] ${message}`, ...args);
         }
     }
+    initializeThumbnailPreview(config) {
+        if (!config || !config.generationImage) {
+            this.thumbnailPreviewEnabled = false;
+            return;
+        }
+        this.thumbnailPreviewConfig = config;
+        this.thumbnailPreviewEnabled = config.enabled !== false;
+        this.thumbnailEntries = this.transformThumbnailData(config.generationImage);
+        this.debugLog('Thumbnail preview initialized:', {
+            enabled: this.thumbnailPreviewEnabled,
+            entries: this.thumbnailEntries.length
+        });
+        if (config.style) {
+            this.applyThumbnailStyles(config.style);
+        }
+        if (config.preloadImages !== false && this.thumbnailEntries.length > 0) {
+            this.preloadThumbnailImages();
+        }
+    }
+    transformThumbnailData(generationImage) {
+        const entries = [];
+        for (const [url, timeRange] of Object.entries(generationImage)) {
+            const parts = timeRange.split('-');
+            if (parts.length === 2) {
+                const startTime = parseFloat(parts[0]);
+                const endTime = parseFloat(parts[1]);
+                if (!isNaN(startTime) && !isNaN(endTime)) {
+                    entries.push({ url, startTime, endTime });
+                }
+            }
+        }
+        entries.sort((a, b) => a.startTime - b.startTime);
+        return entries;
+    }
+    findThumbnailForTime(time) {
+        if (this.thumbnailEntries.length === 0)
+            return null;
+        let left = 0;
+        let right = this.thumbnailEntries.length - 1;
+        let result = null;
+        while (left <= right) {
+            const mid = Math.floor((left + right) / 2);
+            const entry = this.thumbnailEntries[mid];
+            if (time >= entry.startTime && time < entry.endTime) {
+                return entry;
+            }
+            else if (time < entry.startTime) {
+                right = mid - 1;
+            }
+            else {
+                left = mid + 1;
+            }
+        }
+        if (left > 0 && left <= this.thumbnailEntries.length) {
+            const prevEntry = this.thumbnailEntries[left - 1];
+            if (time >= prevEntry.startTime && time < prevEntry.endTime) {
+                return prevEntry;
+            }
+        }
+        return result;
+    }
+    preloadThumbnailImages() {
+        this.debugLog('Preloading', this.thumbnailEntries.length, 'thumbnail images');
+        for (const entry of this.thumbnailEntries) {
+            if (this.preloadedThumbnails.has(entry.url))
+                continue;
+            const img = new Image();
+            img.onload = () => {
+                this.preloadedThumbnails.set(entry.url, img);
+                this.debugLog('Preloaded thumbnail:', entry.url);
+            };
+            img.onerror = () => {
+                this.debugWarn('Failed to preload thumbnail:', entry.url);
+            };
+            img.src = entry.url;
+        }
+    }
+    applyThumbnailStyles(style) {
+        if (!style)
+            return;
+        const wrapper = document.getElementById('uvf-thumbnail-preview');
+        const imageWrapper = wrapper?.querySelector('.uvf-thumbnail-preview-image-wrapper');
+        if (imageWrapper) {
+            if (style.width) {
+                imageWrapper.style.width = `${style.width}px`;
+            }
+            if (style.height) {
+                imageWrapper.style.height = `${style.height}px`;
+            }
+            if (style.borderRadius !== undefined) {
+                imageWrapper.style.borderRadius = `${style.borderRadius}px`;
+            }
+        }
+    }
+    updateThumbnailPreview(e) {
+        if (!this.thumbnailPreviewEnabled || this.thumbnailEntries.length === 0) {
+            return;
+        }
+        const progressBar = document.getElementById('uvf-progress-bar');
+        const thumbnailPreview = document.getElementById('uvf-thumbnail-preview');
+        const thumbnailImage = document.getElementById('uvf-thumbnail-image');
+        const thumbnailTime = document.getElementById('uvf-thumbnail-time');
+        if (!progressBar || !thumbnailPreview || !thumbnailImage || !this.video) {
+            return;
+        }
+        const rect = progressBar.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const percent = Math.max(0, Math.min(1, x / rect.width));
+        const time = percent * this.video.duration;
+        const entry = this.findThumbnailForTime(time);
+        if (entry) {
+            thumbnailPreview.classList.add('visible');
+            const thumbnailWidth = 160;
+            const halfWidth = thumbnailWidth / 2;
+            const minX = halfWidth;
+            const maxX = rect.width - halfWidth;
+            const clampedX = Math.max(minX, Math.min(maxX, x));
+            thumbnailPreview.style.left = `${clampedX}px`;
+            if (this.currentThumbnailUrl !== entry.url) {
+                this.currentThumbnailUrl = entry.url;
+                thumbnailImage.classList.remove('loaded');
+                const preloaded = this.preloadedThumbnails.get(entry.url);
+                if (preloaded) {
+                    thumbnailImage.src = preloaded.src;
+                    thumbnailImage.classList.add('loaded');
+                }
+                else {
+                    thumbnailImage.onload = () => {
+                        thumbnailImage.classList.add('loaded');
+                    };
+                    thumbnailImage.src = entry.url;
+                }
+            }
+            if (thumbnailTime && this.thumbnailPreviewConfig?.showTimeInThumbnail !== false) {
+                thumbnailTime.textContent = this.formatTime(time);
+                thumbnailTime.style.display = 'block';
+            }
+            else if (thumbnailTime) {
+                thumbnailTime.style.display = 'none';
+            }
+        }
+        else {
+            this.hideThumbnailPreview();
+        }
+    }
+    hideThumbnailPreview() {
+        const thumbnailPreview = document.getElementById('uvf-thumbnail-preview');
+        if (thumbnailPreview) {
+            thumbnailPreview.classList.remove('visible');
+        }
+        this.currentThumbnailUrl = null;
+    }
+    setThumbnailPreview(config) {
+        if (!config) {
+            this.thumbnailPreviewEnabled = false;
+            this.thumbnailPreviewConfig = null;
+            this.thumbnailEntries = [];
+            this.preloadedThumbnails.clear();
+            this.hideThumbnailPreview();
+            return;
+        }
+        this.initializeThumbnailPreview(config);
+    }
     async initialize(container, config) {
         console.log('WebPlayer.initialize called with config:', config);
         if (config) {
@@ -196,6 +364,10 @@ export class WebPlayer extends BasePlayer {
             console.log('YouTube native controls config found:', config.youtubeNativeControls);
             this.youtubeNativeControls = config.youtubeNativeControls;
         }
+        if (config && config.thumbnailPreview) {
+            console.log('Thumbnail preview config found:', config.thumbnailPreview);
+            this.initializeThumbnailPreview(config.thumbnailPreview);
+        }
         await super.initialize(container, config);
     }
     async setupPlayer() {
@@ -4321,7 +4493,37 @@ export class WebPlayer extends BasePlayer {
         top: 2px; /* Center on the 4px hover progress bar (2px from top) */
         transform: translate(-50%, -50%) scale(1);
       }
-      
+
+      /* Prevent text selection during seekbar drag */
+      .uvf-player-wrapper.seeking {
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+      }
+
+      /* Maintain expanded seekbar state during drag (same as hover) */
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-bar {
+        height: 4px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 6px;
+        transform: scaleY(1.1);
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-handle {
+        opacity: 1;
+        top: 2px;
+        transform: translate(-50%, -50%) scale(1);
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-buffered {
+        border-radius: 6px;
+      }
+
+      .uvf-progress-bar-wrapper.dragging .uvf-progress-filled {
+        border-radius: 6px;
+      }
+
       .uvf-progress-handle:hover {
         transform: translate(-50%, -50%) scale(1.2);
         box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
@@ -4376,7 +4578,122 @@ export class WebPlayer extends BasePlayer {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
       }
-      
+
+      /* Thumbnail Preview */
+      .uvf-thumbnail-preview {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        margin-bottom: 12px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        pointer-events: none;
+        z-index: 25;
+        opacity: 0;
+        transform: translateX(-50%) translateY(8px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+      }
+
+      .uvf-thumbnail-preview.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      .uvf-thumbnail-preview-container {
+        position: relative;
+        background: rgba(0, 0, 0, 0.9);
+        border-radius: 8px;
+        padding: 4px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+      }
+
+      .uvf-thumbnail-preview-image-wrapper {
+        position: relative;
+        width: 160px;
+        height: 90px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: rgba(30, 30, 30, 0.95);
+      }
+
+      .uvf-thumbnail-preview-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      .uvf-thumbnail-preview-image.loaded {
+        opacity: 1;
+      }
+
+      .uvf-thumbnail-preview-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 24px;
+        height: 24px;
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        border-top-color: var(--uvf-accent-1, #ff5722);
+        border-radius: 50%;
+        animation: uvf-spin 0.8s linear infinite;
+      }
+
+      .uvf-thumbnail-preview-image.loaded + .uvf-thumbnail-preview-loading {
+        display: none;
+      }
+
+      .uvf-thumbnail-preview-time {
+        position: absolute;
+        bottom: 6px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.85);
+        color: #fff;
+        font-size: 12px;
+        font-weight: 600;
+        padding: 3px 8px;
+        border-radius: 4px;
+        white-space: nowrap;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+      }
+
+      .uvf-thumbnail-preview-arrow {
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid rgba(0, 0, 0, 0.9);
+        margin-top: -1px;
+      }
+
+      /* Hide regular time tooltip when thumbnail preview is visible */
+      .uvf-thumbnail-preview.visible ~ .uvf-time-tooltip {
+        opacity: 0 !important;
+        pointer-events: none;
+      }
+
+      /* Responsive thumbnail sizes */
+      @media (max-width: 768px) {
+        .uvf-thumbnail-preview-image-wrapper {
+          width: 120px;
+          height: 68px;
+        }
+
+        .uvf-thumbnail-preview-time {
+          font-size: 11px;
+          padding: 2px 6px;
+        }
+      }
+
       /* Chapter Markers */
       .uvf-chapter-marker {
         position: absolute;
@@ -7390,6 +7707,16 @@ export class WebPlayer extends BasePlayer {
         <div class="uvf-progress-filled" id="uvf-progress-filled"></div>
         <div class="uvf-progress-handle" id="uvf-progress-handle"></div>
       </div>
+      <div class="uvf-thumbnail-preview" id="uvf-thumbnail-preview">
+        <div class="uvf-thumbnail-preview-container">
+          <div class="uvf-thumbnail-preview-image-wrapper">
+            <img class="uvf-thumbnail-preview-image" id="uvf-thumbnail-image" alt="Preview" />
+            <div class="uvf-thumbnail-preview-loading"></div>
+          </div>
+          <div class="uvf-thumbnail-preview-time" id="uvf-thumbnail-time">00:00</div>
+        </div>
+        <div class="uvf-thumbnail-preview-arrow"></div>
+      </div>
       <div class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
     `;
         progressSection.appendChild(progressBar);
@@ -7708,6 +8035,8 @@ export class WebPlayer extends BasePlayer {
         progressBar?.addEventListener('mousedown', (e) => {
             this.isDragging = true;
             this.showTimeTooltip = true;
+            progressBar.classList.add('dragging');
+            this.playerWrapper?.classList.add('seeking');
             this.seekToPosition(e);
             this.updateTimeTooltip(e);
         });
@@ -7718,16 +8047,20 @@ export class WebPlayer extends BasePlayer {
             if (!this.isDragging) {
                 this.showTimeTooltip = false;
                 this.hideTimeTooltip();
+                this.hideThumbnailPreview();
             }
         });
         progressBar?.addEventListener('mousemove', (e) => {
             if (this.showTimeTooltip) {
                 this.updateTimeTooltip(e);
+                this.updateThumbnailPreview(e);
             }
         });
         progressBar?.addEventListener('touchstart', (e) => {
             e.preventDefault();
             this.isDragging = true;
+            progressBar.classList.add('dragging');
+            this.playerWrapper?.classList.add('seeking');
             const touch = e.touches[0];
             const mouseEvent = new MouseEvent('mousedown', {
                 clientX: touch.clientX,
@@ -7742,6 +8075,7 @@ export class WebPlayer extends BasePlayer {
             if (this.isDragging && progressBar) {
                 this.seekToPosition(e);
                 this.updateTimeTooltip(e);
+                this.updateThumbnailPreview(e);
             }
         });
         document.addEventListener('touchmove', (e) => {
@@ -7766,21 +8100,27 @@ export class WebPlayer extends BasePlayer {
             }
             if (this.isDragging) {
                 this.isDragging = false;
+                progressBar?.classList.remove('dragging');
+                this.playerWrapper?.classList.remove('seeking');
                 const handle = document.getElementById('uvf-progress-handle');
                 handle?.classList.remove('dragging');
                 if (progressBar && !progressBar.matches(':hover')) {
                     this.showTimeTooltip = false;
                     this.hideTimeTooltip();
+                    this.hideThumbnailPreview();
                 }
             }
         });
         document.addEventListener('touchend', () => {
             if (this.isDragging) {
                 this.isDragging = false;
+                progressBar?.classList.remove('dragging');
+                this.playerWrapper?.classList.remove('seeking');
                 const handle = document.getElementById('uvf-progress-handle');
                 handle?.classList.remove('dragging');
                 this.showTimeTooltip = false;
                 this.hideTimeTooltip();
+                this.hideThumbnailPreview();
             }
         });
         this.video.addEventListener('timeupdate', () => {