unified-video-framework 1.4.446 → 1.4.447

package/packages/web/src/WebPlayer.ts

@@ -33,6 +33,11 @@ import type {
   ItemCyclingConfig,
   SeparatorType
 } from './react/types/FlashNewsTickerTypes';
+import type {
+  ThumbnailPreviewConfig,
+  ThumbnailEntry,
+  ThumbnailGenerationImage
+} from './react/types/ThumbnailPreviewTypes';
 import YouTubeExtractor from './utils/YouTubeExtractor';
 import { DRMManager, DRMErrorHandler } from './drm';
 import type { DRMInitResult, DRMError } from './drm';
@@ -204,6 +209,13 @@ export class WebPlayer extends BasePlayer {
   private lastDuration: number = 0; // Track duration changes to detect live streams
   private isDetectedAsLive: boolean = false; // Once detected as live, stays live
 
+  // Thumbnail preview
+  private thumbnailPreviewConfig: ThumbnailPreviewConfig | null = null;
+  private thumbnailEntries: ThumbnailEntry[] = [];
+  private preloadedThumbnails: Map<string, HTMLImageElement> = new Map();
+  private currentThumbnailUrl: string | null = null;
+  private thumbnailPreviewEnabled: boolean = false;
+
   // Debug logging helper
   private debugLog(message: string, ...args: any[]): void {
     if (this.config.debug) {
@@ -223,6 +235,242 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
+  // ============================================
+  // Thumbnail Preview Methods
+  // ============================================
+
+  /**
+   * Initialize thumbnail preview with config
+   */
+  public initializeThumbnailPreview(config: ThumbnailPreviewConfig): void {
+    if (!config || !config.generationImage) {
+      this.thumbnailPreviewEnabled = false;
+      return;
+    }
+
+    this.thumbnailPreviewConfig = config;
+    this.thumbnailPreviewEnabled = config.enabled !== false;
+
+    // Transform generation image data to sorted array for efficient lookup
+    this.thumbnailEntries = this.transformThumbnailData(config.generationImage);
+
+    this.debugLog('Thumbnail preview initialized:', {
+      enabled: this.thumbnailPreviewEnabled,
+      entries: this.thumbnailEntries.length
+    });
+
+    // Apply custom styles if provided
+    if (config.style) {
+      this.applyThumbnailStyles(config.style);
+    }
+
+    // Preload images if enabled (default: true)
+    if (config.preloadImages !== false && this.thumbnailEntries.length > 0) {
+      this.preloadThumbnailImages();
+    }
+  }
+
+  /**
+   * Transform generation image JSON to sorted array of ThumbnailEntry
+   */
+  private transformThumbnailData(generationImage: ThumbnailGenerationImage): ThumbnailEntry[] {
+    const entries: ThumbnailEntry[] = [];
+
+    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 });
+        }
+      }
+    }
+
+    // Sort by startTime for efficient binary search
+    entries.sort((a, b) => a.startTime - b.startTime);
+
+    return entries;
+  }
+
+  /**
+   * Find thumbnail for a given time using binary search (O(log n))
+   */
+  private findThumbnailForTime(time: number): ThumbnailEntry | null {
+    if (this.thumbnailEntries.length === 0) return null;
+
+    let left = 0;
+    let right = this.thumbnailEntries.length - 1;
+    let result: ThumbnailEntry | null = 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 no exact match, find the closest entry
+    if (left > 0 && left <= this.thumbnailEntries.length) {
+      const prevEntry = this.thumbnailEntries[left - 1];
+      if (time >= prevEntry.startTime && time < prevEntry.endTime) {
+        return prevEntry;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Preload all thumbnail images for instant switching
+   */
+  private preloadThumbnailImages(): void {
+    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;
+    }
+  }
+
+  /**
+   * Apply custom thumbnail styles
+   */
+  private applyThumbnailStyles(style: ThumbnailPreviewConfig['style']): void {
+    if (!style) return;
+
+    const wrapper = document.getElementById('uvf-thumbnail-preview');
+    const imageWrapper = wrapper?.querySelector('.uvf-thumbnail-preview-image-wrapper') as HTMLElement;
+
+    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`;
+      }
+    }
+  }
+
+  /**
+   * Update thumbnail preview based on mouse position
+   */
+  private updateThumbnailPreview(e: MouseEvent): void {
+    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') as HTMLImageElement;
+    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;
+
+    // Find thumbnail for this time
+    const entry = this.findThumbnailForTime(time);
+
+    if (entry) {
+      // Show thumbnail preview
+      thumbnailPreview.classList.add('visible');
+
+      // Calculate position (clamp to prevent overflow)
+      const thumbnailWidth = 160; // Default width
+      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`;
+
+      // Update image only if URL changed
+      if (this.currentThumbnailUrl !== entry.url) {
+        this.currentThumbnailUrl = entry.url;
+        thumbnailImage.classList.remove('loaded');
+
+        // Check if image is preloaded
+        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;
+        }
+      }
+
+      // Update time display
+      if (thumbnailTime && this.thumbnailPreviewConfig?.showTimeInThumbnail !== false) {
+        thumbnailTime.textContent = this.formatTime(time);
+        thumbnailTime.style.display = 'block';
+      } else if (thumbnailTime) {
+        thumbnailTime.style.display = 'none';
+      }
+    } else {
+      // No thumbnail for this time - hide preview and let regular tooltip show
+      this.hideThumbnailPreview();
+    }
+  }
+
+  /**
+   * Hide thumbnail preview
+   */
+  private hideThumbnailPreview(): void {
+    const thumbnailPreview = document.getElementById('uvf-thumbnail-preview');
+    if (thumbnailPreview) {
+      thumbnailPreview.classList.remove('visible');
+    }
+    this.currentThumbnailUrl = null;
+  }
+
+  /**
+   * Set thumbnail preview config at runtime
+   */
+  public setThumbnailPreview(config: ThumbnailPreviewConfig | null): void {
+    if (!config) {
+      this.thumbnailPreviewEnabled = false;
+      this.thumbnailPreviewConfig = null;
+      this.thumbnailEntries = [];
+      this.preloadedThumbnails.clear();
+      this.hideThumbnailPreview();
+      return;
+    }
+
+    this.initializeThumbnailPreview(config);
+  }
+
+  // Note: Uses existing formatTime method defined elsewhere in this class
+
+  // ============================================
+  // End Thumbnail Preview Methods
+  // ============================================
 
   async initialize(container: HTMLElement | string, config?: any): Promise<void> {
     // Debug log the config being passed
@@ -300,6 +548,12 @@ export class WebPlayer extends BasePlayer {
       this.youtubeNativeControls = config.youtubeNativeControls;
     }
 
+    // Configure thumbnail preview if provided
+    if (config && config.thumbnailPreview) {
+      console.log('Thumbnail preview config found:', config.thumbnailPreview);
+      this.initializeThumbnailPreview(config.thumbnailPreview);
+    }
+
     // Call parent initialize
     await super.initialize(container, config);
   }
@@ -5506,7 +5760,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;
@@ -8602,6 +8971,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);
@@ -9010,12 +9389,15 @@ 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 as MouseEvent);
+        // Update thumbnail preview on hover
+        this.updateThumbnailPreview(e as MouseEvent);
       }
     });
 
@@ -9040,6 +9422,8 @@ export class WebPlayer extends BasePlayer {
         this.seekToPosition(e);
         // Update tooltip position during dragging
         this.updateTimeTooltip(e);
+        // Update thumbnail preview during dragging
+        this.updateThumbnailPreview(e);
       }
     });
 
@@ -9070,10 +9454,11 @@ export class WebPlayer extends BasePlayer {
         // Remove dragging class from handle
         const handle = document.getElementById('uvf-progress-handle');
         handle?.classList.remove('dragging');
-        // Hide tooltip if mouse is not over progress bar
+        // Hide tooltip and thumbnail preview if mouse is not over progress bar
         if (progressBar && !progressBar.matches(':hover')) {
           this.showTimeTooltip = false;
           this.hideTimeTooltip();
+          this.hideThumbnailPreview();
         }
       }
     });
@@ -9084,9 +9469,10 @@ export class WebPlayer extends BasePlayer {
         // Remove dragging class from handle
         const handle = document.getElementById('uvf-progress-handle');
         handle?.classList.remove('dragging');
-        // Hide tooltip on touch end
+        // Hide tooltip and thumbnail preview on touch end
         this.showTimeTooltip = false;
         this.hideTimeTooltip();
+        this.hideThumbnailPreview();
       }
     });
 

package/packages/web/src/react/WebPlayerView.tsx

@@ -8,6 +8,7 @@ import { GoogleAdsManager } from '../ads/GoogleAdsManager';
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow } from './types/EPGTypes';
 import type { VCManifest, VCProduct, VCEvent } from './types/VideoCommerceTypes';
 import type { FlashNewsTickerConfig } from './types/FlashNewsTickerTypes';
+import type { ThumbnailPreviewConfig } from './types/ThumbnailPreviewTypes';
 import { useCommerceSync } from './hooks/useCommerceSync';
 import ProductBadge from './components/commerce/ProductBadge';
 import ProductPanel from './components/commerce/ProductPanel';
@@ -441,6 +442,9 @@ export type WebPlayerViewProps = {
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
+
+  // Thumbnail Preview on Seekbar Hover
+  thumbnailPreview?: ThumbnailPreviewConfig;                                       // Thumbnail preview configuration
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
@@ -996,8 +1000,10 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             rememberChoices: chaptersConfig.userPreferences?.rememberChoices ?? true,
             resumePlaybackAfterSkip: chaptersConfig.userPreferences?.resumePlaybackAfterSkip ?? true,
           }
-        } : { enabled: false }
-      };
+        } : { enabled: false },
+        // Thumbnail preview configuration
+        thumbnailPreview: props.thumbnailPreview
+      } as any;
 
       try {
         await player.initialize(containerRef.current, config);
@@ -1524,6 +1530,7 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     props.fallbackShowErrorMessage,
     props.fallbackRetryDelay,
     props.fallbackRetryAttempts,
+    JSON.stringify(props.thumbnailPreview),
   ]);
   
   // Helper function to filter quality levels based on qualityFilter prop
@@ -1765,6 +1772,18 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     }
   }, [JSON.stringify(props.flashNewsTicker)]);
 
+  // Update thumbnail preview when config changes
+  useEffect(() => {
+    const p = playerRef.current as any;
+    if (p && typeof p.setThumbnailPreview === 'function') {
+      try {
+        p.setThumbnailPreview(props.thumbnailPreview || null);
+      } catch (err) {
+        console.warn('[WebPlayerView] Failed to update thumbnail preview:', err);
+      }
+    }
+  }, [JSON.stringify(props.thumbnailPreview)]);
+
   const responsiveStyle = getResponsiveDimensions();
   
   // Prepare EPG config with action handlers

package/packages/web/src/react/types/ThumbnailPreviewTypes.ts

@@ -0,0 +1,62 @@
+/**
+ * Thumbnail Preview Types
+ * Types for seekbar thumbnail preview functionality
+ */
+
+/**
+ * Generation image mapping format
+ * Key: Image URL, Value: "startTime-endTime" in seconds
+ * Example: { "https://cdn.example.com/thumb1.jpg": "0-30" }
+ */
+export interface ThumbnailGenerationImage {
+  [imageUrl: string]: string; // "startTime-endTime"
+}
+
+/**
+ * Thumbnail preview configuration
+ */
+export interface ThumbnailPreviewConfig {
+  /** Enable/disable thumbnail preview (default: true if generationImage provided) */
+  enabled?: boolean;
+  /** Image URL to time range mapping */
+  generationImage?: ThumbnailGenerationImage;
+  /** Custom styling options */
+  style?: {
+    /** Width of thumbnail in pixels (default: 160) */
+    width?: number;
+    /** Height of thumbnail in pixels (default: 90) */
+    height?: number;
+    /** Border radius in pixels (default: 8) */
+    borderRadius?: number;
+  };
+  /** Preload all thumbnail images on initialization (default: true) */
+  preloadImages?: boolean;
+  /** Show time display inside thumbnail (default: true) */
+  showTimeInThumbnail?: boolean;
+}
+
+/**
+ * Internal thumbnail entry after transformation
+ */
+export interface ThumbnailEntry {
+  /** Image URL */
+  url: string;
+  /** Start time in seconds */
+  startTime: number;
+  /** End time in seconds */
+  endTime: number;
+}
+
+/**
+ * Thumbnail preview state
+ */
+export interface ThumbnailPreviewState {
+  /** Whether thumbnail preview is currently visible */
+  isVisible: boolean;
+  /** Current thumbnail URL being displayed */
+  currentUrl: string | null;
+  /** Current time position being previewed */
+  currentTime: number;
+  /** X position of thumbnail on screen */
+  xPosition: number;
+}