@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/features/thumbnails/thumbnail-generator.ts

@@ -1,519 +1,521 @@
 export interface ThumbnailOptions {
-  width?: number
-  height?: number
-  quality?: number
-  format?: 'jpeg' | 'png' | 'webp'
-  time?: number
+	width?: number
+	height?: number
+	quality?: number
+	format?: "jpeg" | "png" | "webp"
+	time?: number
 }
 
 export interface ThumbnailConfig {
-  defaultWidth: number
-  defaultHeight: number
-  defaultQuality: number
-  defaultFormat: 'jpeg' | 'png' | 'webp'
-  maxCacheSize: number
-  enableCaching: boolean
+	defaultWidth: number
+	defaultHeight: number
+	defaultQuality: number
+	defaultFormat: "jpeg" | "png" | "webp"
+	maxCacheSize: number
+	enableCaching: boolean
 }
 
 export interface GeneratedThumbnail {
-  blob: Blob
-  dataUrl: string
-  objectUrl: string
-  width: number
-  height: number
-  timestamp: number
+	blob: Blob
+	dataUrl: string
+	objectUrl: string
+	width: number
+	height: number
+	timestamp: number
 }
 
 export interface ThumbnailSprite {
-  image: HTMLImageElement
-  thumbnails: Array<{
-    x: number
-    y: number
-    width: number
-    height: number
-    time: number
-  }>
-  spriteWidth: number
-  spriteHeight: number
-  thumbnailWidth: number
-  thumbnailHeight: number
+	image: HTMLImageElement
+	thumbnails: Array<{
+		x: number
+		y: number
+		width: number
+		height: number
+		time: number
+	}>
+	spriteWidth: number
+	spriteHeight: number
+	thumbnailWidth: number
+	thumbnailHeight: number
 }
 
 export class ThumbnailGenerator {
-  private config: ThumbnailConfig
-  private cache: Map<string, GeneratedThumbnail> = new Map()
-  private videoElement: HTMLVideoElement | null = null
-  private canvas: HTMLCanvasElement
-  private context: CanvasRenderingContext2D
-
-  constructor(config?: Partial<ThumbnailConfig>) {
-    this.config = {
-      defaultWidth: 160,
-      defaultHeight: 90,
-      defaultQuality: 0.8,
-      defaultFormat: 'jpeg',
-      maxCacheSize: 50,
-      enableCaching: true,
-      ...config
-    }
-
-    this.canvas = document.createElement('canvas')
-    const ctx = this.canvas.getContext('2d')
-    if (!ctx) {
-      throw new Error('Canvas 2D context not supported')
-    }
-    this.context = ctx
-  }
-
-  /**
-   * Set the video element to generate thumbnails from
-   */
-  setVideoElement(video: HTMLVideoElement): void {
-    this.videoElement = video
-  }
-
-  /**
-   * Generate thumbnail at specific time
-   */
-  async generateThumbnail(time: number, options: ThumbnailOptions = {}): Promise<GeneratedThumbnail> {
-    if (!this.videoElement) {
-      throw new Error('Video element not set')
-    }
-
-    const cacheKey = this.getCacheKey(time, options)
-    
-    // Check cache first
-    if (this.config.enableCaching && this.cache.has(cacheKey)) {
-      const cached = this.cache.get(cacheKey)!
-      return { ...cached }
-    }
-
-    const width = options.width || this.config.defaultWidth
-    const height = options.height || this.config.defaultHeight
-    const quality = options.quality || this.config.defaultQuality
-    const format = options.format || this.config.defaultFormat
-
-    // Setup canvas
-    this.canvas.width = width
-    this.canvas.height = height
-
-    // Set video time and wait for seek
-    const originalTime = this.videoElement.currentTime
-    await this.seekToTime(time)
-
-    // Draw video frame to canvas
-    this.context.clearRect(0, 0, width, height)
-    
-    // Calculate aspect ratio preserving dimensions
-    const videoAspect = this.videoElement.videoWidth / this.videoElement.videoHeight
-    const canvasAspect = width / height
-    
-    let drawWidth = width
-    let drawHeight = height
-    let offsetX = 0
-    let offsetY = 0
-
-    if (videoAspect > canvasAspect) {
-      // Video is wider, fit to height
-      drawHeight = height
-      drawWidth = height * videoAspect
-      offsetX = (width - drawWidth) / 2
-    } else {
-      // Video is taller, fit to width
-      drawWidth = width
-      drawHeight = width / videoAspect
-      offsetY = (height - drawHeight) / 2
-    }
-
-    this.context.drawImage(
-      this.videoElement,
-      offsetX, offsetY,
-      drawWidth, drawHeight
-    )
-
-    // Convert to blob
-    const blob = await this.canvasToBlob(format, quality)
-    const dataUrl = this.canvas.toDataURL(`image/${format}`, quality)
-    const objectUrl = URL.createObjectURL(blob)
-
-    const thumbnail: GeneratedThumbnail = {
-      blob,
-      dataUrl,
-      objectUrl,
-      width,
-      height,
-      timestamp: time
-    }
-
-    // Cache thumbnail
-    if (this.config.enableCaching) {
-      this.addToCache(cacheKey, thumbnail)
-    }
-
-    // Restore original time
-    if (originalTime !== time) {
-      await this.seekToTime(originalTime)
-    }
-
-    return thumbnail
-  }
-
-  /**
-   * Generate multiple thumbnails for scrub bar
-   */
-  async generateScrubThumbnails(
-    count: number, 
-    options: ThumbnailOptions = {}
-  ): Promise<GeneratedThumbnail[]> {
-    if (!this.videoElement) {
-      throw new Error('Video element not set')
-    }
-
-    const duration = this.videoElement.duration
-    if (!duration || duration === 0) {
-      throw new Error('Video duration not available')
-    }
-
-    const thumbnails: GeneratedThumbnail[] = []
-    const interval = duration / count
-
-    for (let i = 0; i < count; i++) {
-      const time = i * interval
-      try {
-        const thumbnail = await this.generateThumbnail(time, options)
-        thumbnails.push(thumbnail)
-      } catch (error) {
-        console.warn(`Failed to generate thumbnail at ${time}s:`, error)
-      }
-    }
-
-    return thumbnails
-  }
-
-  /**
-   * Generate thumbnail sprite sheet
-   */
-  async generateSprite(
-    count: number,
-    options: ThumbnailOptions & {
-      columns?: number
-      rows?: number
-    } = {}
-  ): Promise<ThumbnailSprite> {
-    if (!this.videoElement) {
-      throw new Error('Video element not set')
-    }
-
-    const duration = this.videoElement.duration
-    if (!duration || duration === 0) {
-      throw new Error('Video duration not available')
-    }
-
-    const thumbnailWidth = options.width || this.config.defaultWidth
-    const thumbnailHeight = options.height || this.config.defaultHeight
-    const quality = options.quality || this.config.defaultQuality
-    const format = options.format || this.config.defaultFormat
-
-    // Calculate sprite dimensions
-    const columns = options.columns || Math.ceil(Math.sqrt(count))
-    const rows = Math.ceil(count / columns)
-    
-    const spriteWidth = columns * thumbnailWidth
-    const spriteHeight = rows * thumbnailHeight
-
-    // Create sprite canvas
-    const spriteCanvas = document.createElement('canvas')
-    spriteCanvas.width = spriteWidth
-    spriteCanvas.height = spriteHeight
-    
-    const spriteContext = spriteCanvas.getContext('2d')
-    if (!spriteContext) {
-      throw new Error('Canvas 2D context not supported')
-    }
-
-    const thumbnails: ThumbnailSprite['thumbnails'] = []
-    const interval = duration / count
-
-    // Generate each thumbnail
-    for (let i = 0; i < count; i++) {
-      const time = i * interval
-      const col = i % columns
-      const row = Math.floor(i / columns)
-      const x = col * thumbnailWidth
-      const y = row * thumbnailHeight
-
-      try {
-        // Generate individual thumbnail
-        const thumbnail = await this.generateThumbnail(time, {
-          width: thumbnailWidth,
-          height: thumbnailHeight,
-          quality,
-          format
-        })
-
-        // Draw thumbnail to sprite
-        const img = new Image()
-        img.src = thumbnail.dataUrl
-        
-        await new Promise<void>((resolve, reject) => {
-          img.onload = () => {
-            spriteContext.drawImage(img, x, y, thumbnailWidth, thumbnailHeight)
-            resolve()
-          }
-          img.onerror = reject
-        })
-
-        thumbnails.push({
-          x,
-          y,
-          width: thumbnailWidth,
-          height: thumbnailHeight,
-          time
-        })
-
-        // Clean up individual thumbnail
-        URL.revokeObjectURL(thumbnail.objectUrl)
-
-      } catch (error) {
-        console.warn(`Failed to add thumbnail at ${time}s to sprite:`, error)
-      }
-    }
-
-    // Create final sprite image
-    const spriteImage = new Image()
-    spriteImage.src = spriteCanvas.toDataURL(`image/${format}`, quality)
-
-    const sprite: ThumbnailSprite = {
-      image: spriteImage,
-      thumbnails,
-      spriteWidth,
-      spriteHeight,
-      thumbnailWidth,
-      thumbnailHeight
-    }
-
-    return sprite
-  }
-
-  /**
-   * Extract thumbnail from sprite at specific time
-   */
-  getThumbnailFromSprite(sprite: ThumbnailSprite, time: number): HTMLCanvasElement | null {
-    // Find closest thumbnail
-    const thumbnail = sprite.thumbnails.reduce((closest, current) => {
-      return Math.abs(current.time - time) < Math.abs(closest.time - time) 
-        ? current 
-        : closest
-    })
-
-    if (!thumbnail) return null
-
-    // Create canvas for extracted thumbnail
-    const canvas = document.createElement('canvas')
-    canvas.width = thumbnail.width
-    canvas.height = thumbnail.height
-    
-    const context = canvas.getContext('2d')
-    if (!context) return null
-
-    // Draw portion of sprite to canvas
-    context.drawImage(
-      sprite.image,
-      thumbnail.x, thumbnail.y, thumbnail.width, thumbnail.height,
-      0, 0, thumbnail.width, thumbnail.height
-    )
-
-    return canvas
-  }
-
-  /**
-   * Clear cache
-   */
-  clearCache(): void {
-    // Revoke object URLs to prevent memory leaks
-    this.cache.forEach(thumbnail => {
-      URL.revokeObjectURL(thumbnail.objectUrl)
-    })
-    this.cache.clear()
-  }
-
-  /**
-   * Get cache size
-   */
-  getCacheSize(): number {
-    return this.cache.size
-  }
-
-  /**
-   * Get cache info
-   */
-  getCacheInfo(): Array<{ key: string; timestamp: number; size: number }> {
-    return Array.from(this.cache.entries()).map(([key, thumbnail]) => ({
-      key,
-      timestamp: thumbnail.timestamp,
-      size: thumbnail.blob.size
-    }))
-  }
-
-  /**
-   * Set configuration
-   */
-  updateConfig(config: Partial<ThumbnailConfig>): void {
-    this.config = { ...this.config, ...config }
-  }
-
-  /**
-   * Seek video to specific time
-   */
-  private async seekToTime(time: number): Promise<void> {
-    if (!this.videoElement) return
-
-    return new Promise((resolve, reject) => {
-      let timeoutId: number
-      
-      const onSeeked = () => {
-        this.videoElement!.removeEventListener('seeked', onSeeked)
-        clearTimeout(timeoutId)
-        resolve()
-      }
-
-      const onError = () => {
-        this.videoElement!.removeEventListener('error', onError)
-        this.videoElement!.removeEventListener('seeked', onSeeked)
-        clearTimeout(timeoutId)
-        reject(new Error('Seek failed'))
-      }
-
-      // Set timeout to avoid hanging
-      timeoutId = window.setTimeout(() => {
-        this.videoElement!.removeEventListener('seeked', onSeeked)
-        this.videoElement!.removeEventListener('error', onError)
-        reject(new Error('Seek timeout'))
-      }, 5000)
-
-      this.videoElement.addEventListener('seeked', onSeeked)
-      this.videoElement.addEventListener('error', onError)
-      this.videoElement.currentTime = Math.max(0, Math.min(time, this.videoElement.duration))
-    })
-  }
-
-  /**
-   * Convert canvas to blob
-   */
-  private canvasToBlob(format: string, quality: number): Promise<Blob> {
-    return new Promise((resolve, reject) => {
-      this.canvas.toBlob(
-        (blob) => {
-          if (blob) {
-            resolve(blob)
-          } else {
-            reject(new Error('Failed to create blob from canvas'))
-          }
-        },
-        `image/${format}`,
-        quality
-      )
-    })
-  }
-
-  /**
-   * Generate cache key
-   */
-  private getCacheKey(time: number, options: ThumbnailOptions): string {
-    const width = options.width || this.config.defaultWidth
-    const height = options.height || this.config.defaultHeight
-    const quality = options.quality || this.config.defaultQuality
-    const format = options.format || this.config.defaultFormat
-    
-    return `${time}-${width}x${height}-${quality}-${format}`
-  }
-
-  /**
-   * Add thumbnail to cache
-   */
-  private addToCache(key: string, thumbnail: GeneratedThumbnail): void {
-    // Remove oldest items if cache is full
-    if (this.cache.size >= this.config.maxCacheSize) {
-      const oldestKey = this.cache.keys().next().value
-      const oldThumbnail = this.cache.get(oldestKey)
-      if (oldThumbnail) {
-        URL.revokeObjectURL(oldThumbnail.objectUrl)
-      }
-      this.cache.delete(oldestKey)
-    }
-
-    this.cache.set(key, thumbnail)
-  }
-
-  /**
-   * Cleanup resources
-   */
-  destroy(): void {
-    this.clearCache()
-    this.videoElement = null
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-  }
+	private config: ThumbnailConfig
+	private cache: Map<string, GeneratedThumbnail> = new Map()
+	private videoElement: HTMLVideoElement | null = null
+	private canvas: HTMLCanvasElement
+	private context: CanvasRenderingContext2D
+
+	constructor(config?: Partial<ThumbnailConfig>) {
+		this.config = {
+			defaultWidth: 160,
+			defaultHeight: 90,
+			defaultQuality: 0.8,
+			defaultFormat: "jpeg",
+			maxCacheSize: 50,
+			enableCaching: true,
+			...config
+		}
+
+		this.canvas = document.createElement("canvas")
+		const ctx = this.canvas.getContext("2d")
+		if (!ctx) {
+			throw new Error("Canvas 2D context not supported")
+		}
+		this.context = ctx
+	}
+
+	/**
+	 * Set the video element to generate thumbnails from
+	 */
+	setVideoElement(video: HTMLVideoElement): void {
+		this.videoElement = video
+	}
+
+	/**
+	 * Generate thumbnail at specific time
+	 */
+	async generateThumbnail(
+		time: number,
+		options: ThumbnailOptions = {}
+	): Promise<GeneratedThumbnail> {
+		if (!this.videoElement) {
+			throw new Error("Video element not set")
+		}
+
+		const cacheKey = this.getCacheKey(time, options)
+
+		// Check cache first
+		if (this.config.enableCaching && this.cache.has(cacheKey)) {
+			const cached = this.cache.get(cacheKey)!
+			return { ...cached }
+		}
+
+		const width = options.width || this.config.defaultWidth
+		const height = options.height || this.config.defaultHeight
+		const quality = options.quality || this.config.defaultQuality
+		const format = options.format || this.config.defaultFormat
+
+		// Setup canvas
+		this.canvas.width = width
+		this.canvas.height = height
+
+		// Set video time and wait for seek
+		const originalTime = this.videoElement.currentTime
+		await this.seekToTime(time)
+
+		// Draw video frame to canvas
+		this.context.clearRect(0, 0, width, height)
+
+		// Calculate aspect ratio preserving dimensions
+		const videoAspect = this.videoElement.videoWidth / this.videoElement.videoHeight
+		const canvasAspect = width / height
+
+		let drawWidth = width
+		let drawHeight = height
+		let offsetX = 0
+		let offsetY = 0
+
+		if (videoAspect > canvasAspect) {
+			// Video is wider, fit to height
+			drawHeight = height
+			drawWidth = height * videoAspect
+			offsetX = (width - drawWidth) / 2
+		} else {
+			// Video is taller, fit to width
+			drawWidth = width
+			drawHeight = width / videoAspect
+			offsetY = (height - drawHeight) / 2
+		}
+
+		this.context.drawImage(this.videoElement, offsetX, offsetY, drawWidth, drawHeight)
+
+		// Convert to blob
+		const blob = await this.canvasToBlob(format, quality)
+		const dataUrl = this.canvas.toDataURL(`image/${format}`, quality)
+		const objectUrl = URL.createObjectURL(blob)
+
+		const thumbnail: GeneratedThumbnail = {
+			blob,
+			dataUrl,
+			objectUrl,
+			width,
+			height,
+			timestamp: time
+		}
+
+		// Cache thumbnail
+		if (this.config.enableCaching) {
+			this.addToCache(cacheKey, thumbnail)
+		}
+
+		// Restore original time
+		if (originalTime !== time) {
+			await this.seekToTime(originalTime)
+		}
+
+		return thumbnail
+	}
+
+	/**
+	 * Generate multiple thumbnails for scrub bar
+	 */
+	async generateScrubThumbnails(
+		count: number,
+		options: ThumbnailOptions = {}
+	): Promise<GeneratedThumbnail[]> {
+		if (!this.videoElement) {
+			throw new Error("Video element not set")
+		}
+
+		const duration = this.videoElement.duration
+		if (!duration || duration === 0) {
+			throw new Error("Video duration not available")
+		}
+
+		const thumbnails: GeneratedThumbnail[] = []
+		const interval = duration / count
+
+		for (let i = 0; i < count; i++) {
+			const time = i * interval
+			try {
+				const thumbnail = await this.generateThumbnail(time, options)
+				thumbnails.push(thumbnail)
+			} catch (error) {
+				console.warn(`Failed to generate thumbnail at ${time}s:`, error)
+			}
+		}
+
+		return thumbnails
+	}
+
+	/**
+	 * Generate thumbnail sprite sheet
+	 */
+	async generateSprite(
+		count: number,
+		options: ThumbnailOptions & {
+			columns?: number
+			rows?: number
+		} = {}
+	): Promise<ThumbnailSprite> {
+		if (!this.videoElement) {
+			throw new Error("Video element not set")
+		}
+
+		const duration = this.videoElement.duration
+		if (!duration || duration === 0) {
+			throw new Error("Video duration not available")
+		}
+
+		const thumbnailWidth = options.width || this.config.defaultWidth
+		const thumbnailHeight = options.height || this.config.defaultHeight
+		const quality = options.quality || this.config.defaultQuality
+		const format = options.format || this.config.defaultFormat
+
+		// Calculate sprite dimensions
+		const columns = options.columns || Math.ceil(Math.sqrt(count))
+		const rows = Math.ceil(count / columns)
+
+		const spriteWidth = columns * thumbnailWidth
+		const spriteHeight = rows * thumbnailHeight
+
+		// Create sprite canvas
+		const spriteCanvas = document.createElement("canvas")
+		spriteCanvas.width = spriteWidth
+		spriteCanvas.height = spriteHeight
+
+		const spriteContext = spriteCanvas.getContext("2d")
+		if (!spriteContext) {
+			throw new Error("Canvas 2D context not supported")
+		}
+
+		const thumbnails: ThumbnailSprite["thumbnails"] = []
+		const interval = duration / count
+
+		// Generate each thumbnail
+		for (let i = 0; i < count; i++) {
+			const time = i * interval
+			const col = i % columns
+			const row = Math.floor(i / columns)
+			const x = col * thumbnailWidth
+			const y = row * thumbnailHeight
+
+			try {
+				// Generate individual thumbnail
+				const thumbnail = await this.generateThumbnail(time, {
+					width: thumbnailWidth,
+					height: thumbnailHeight,
+					quality,
+					format
+				})
+
+				// Draw thumbnail to sprite
+				const img = new Image()
+				img.src = thumbnail.dataUrl
+
+				await new Promise<void>((resolve, reject) => {
+					img.onload = () => {
+						spriteContext.drawImage(img, x, y, thumbnailWidth, thumbnailHeight)
+						resolve()
+					}
+					img.onerror = reject
+				})
+
+				thumbnails.push({
+					x,
+					y,
+					width: thumbnailWidth,
+					height: thumbnailHeight,
+					time
+				})
+
+				// Clean up individual thumbnail
+				URL.revokeObjectURL(thumbnail.objectUrl)
+			} catch (error) {
+				console.warn(`Failed to add thumbnail at ${time}s to sprite:`, error)
+			}
+		}
+
+		// Create final sprite image
+		const spriteImage = new Image()
+		spriteImage.src = spriteCanvas.toDataURL(`image/${format}`, quality)
+
+		const sprite: ThumbnailSprite = {
+			image: spriteImage,
+			thumbnails,
+			spriteWidth,
+			spriteHeight,
+			thumbnailWidth,
+			thumbnailHeight
+		}
+
+		return sprite
+	}
+
+	/**
+	 * Extract thumbnail from sprite at specific time
+	 */
+	getThumbnailFromSprite(sprite: ThumbnailSprite, time: number): HTMLCanvasElement | null {
+		// Find closest thumbnail
+		const thumbnail = sprite.thumbnails.reduce((closest, current) => {
+			return Math.abs(current.time - time) < Math.abs(closest.time - time) ? current : closest
+		})
+
+		if (!thumbnail) return null
+
+		// Create canvas for extracted thumbnail
+		const canvas = document.createElement("canvas")
+		canvas.width = thumbnail.width
+		canvas.height = thumbnail.height
+
+		const context = canvas.getContext("2d")
+		if (!context) return null
+
+		// Draw portion of sprite to canvas
+		context.drawImage(
+			sprite.image,
+			thumbnail.x,
+			thumbnail.y,
+			thumbnail.width,
+			thumbnail.height,
+			0,
+			0,
+			thumbnail.width,
+			thumbnail.height
+		)
+
+		return canvas
+	}
+
+	/**
+	 * Clear cache
+	 */
+	clearCache(): void {
+		// Revoke object URLs to prevent memory leaks
+		this.cache.forEach((thumbnail) => {
+			URL.revokeObjectURL(thumbnail.objectUrl)
+		})
+		this.cache.clear()
+	}
+
+	/**
+	 * Get cache size
+	 */
+	getCacheSize(): number {
+		return this.cache.size
+	}
+
+	/**
+	 * Get cache info
+	 */
+	getCacheInfo(): Array<{ key: string; timestamp: number; size: number }> {
+		return Array.from(this.cache.entries()).map(([key, thumbnail]) => ({
+			key,
+			timestamp: thumbnail.timestamp,
+			size: thumbnail.blob.size
+		}))
+	}
+
+	/**
+	 * Set configuration
+	 */
+	updateConfig(config: Partial<ThumbnailConfig>): void {
+		this.config = { ...this.config, ...config }
+	}
+
+	/**
+	 * Seek video to specific time
+	 */
+	private async seekToTime(time: number): Promise<void> {
+		if (!this.videoElement) return
+
+		return new Promise((resolve, reject) => {
+			let timeoutId: number
+
+			const onSeeked = () => {
+				this.videoElement!.removeEventListener("seeked", onSeeked)
+				clearTimeout(timeoutId)
+				resolve()
+			}
+
+			const onError = () => {
+				this.videoElement!.removeEventListener("error", onError)
+				this.videoElement!.removeEventListener("seeked", onSeeked)
+				clearTimeout(timeoutId)
+				reject(new Error("Seek failed"))
+			}
+
+			// Set timeout to avoid hanging
+			timeoutId = window.setTimeout(() => {
+				this.videoElement!.removeEventListener("seeked", onSeeked)
+				this.videoElement!.removeEventListener("error", onError)
+				reject(new Error("Seek timeout"))
+			}, 5000)
+
+			this.videoElement.addEventListener("seeked", onSeeked)
+			this.videoElement.addEventListener("error", onError)
+			this.videoElement.currentTime = Math.max(0, Math.min(time, this.videoElement.duration))
+		})
+	}
+
+	/**
+	 * Convert canvas to blob
+	 */
+	private canvasToBlob(format: string, quality: number): Promise<Blob> {
+		return new Promise((resolve, reject) => {
+			this.canvas.toBlob(
+				(blob) => {
+					if (blob) {
+						resolve(blob)
+					} else {
+						reject(new Error("Failed to create blob from canvas"))
+					}
+				},
+				`image/${format}`,
+				quality
+			)
+		})
+	}
+
+	/**
+	 * Generate cache key
+	 */
+	private getCacheKey(time: number, options: ThumbnailOptions): string {
+		const width = options.width || this.config.defaultWidth
+		const height = options.height || this.config.defaultHeight
+		const quality = options.quality || this.config.defaultQuality
+		const format = options.format || this.config.defaultFormat
+
+		return `${time}-${width}x${height}-${quality}-${format}`
+	}
+
+	/**
+	 * Add thumbnail to cache
+	 */
+	private addToCache(key: string, thumbnail: GeneratedThumbnail): void {
+		// Remove oldest items if cache is full
+		if (this.cache.size >= this.config.maxCacheSize) {
+			const oldestKey = this.cache.keys().next().value
+			const oldThumbnail = this.cache.get(oldestKey)
+			if (oldThumbnail) {
+				URL.revokeObjectURL(oldThumbnail.objectUrl)
+			}
+			this.cache.delete(oldestKey)
+		}
+
+		this.cache.set(key, thumbnail)
+	}
+
+	/**
+	 * Cleanup resources
+	 */
+	destroy(): void {
+		this.clearCache()
+		this.videoElement = null
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+	}
 }
 
 // Utility functions for thumbnail operations
 export const thumbnailUtils = {
-  /**
-   * Calculate optimal thumbnail dimensions maintaining aspect ratio
-   */
-  calculateDimensions(
-    sourceWidth: number,
-    sourceHeight: number,
-    targetWidth: number,
-    targetHeight: number
-  ): { width: number; height: number; offsetX: number; offsetY: number } {
-    const sourceAspect = sourceWidth / sourceHeight
-    const targetAspect = targetWidth / targetHeight
-    
-    let width = targetWidth
-    let height = targetHeight
-    let offsetX = 0
-    let offsetY = 0
-
-    if (sourceAspect > targetAspect) {
-      height = targetHeight
-      width = targetHeight * sourceAspect
-      offsetX = (targetWidth - width) / 2
-    } else {
-      width = targetWidth
-      height = targetWidth / sourceAspect
-      offsetY = (targetHeight - height) / 2
-    }
-
-    return { width, height, offsetX, offsetY }
-  },
-
-  /**
-   * Create thumbnail URL from blob
-   */
-  createThumbnailUrl(blob: Blob): string {
-    return URL.createObjectURL(blob)
-  },
-
-  /**
-   * Revoke thumbnail URL
-   */
-  revokeThumbnailUrl(url: string): void {
-    URL.revokeObjectURL(url)
-  },
-
-  /**
-   * Convert time to thumbnail index
-   */
-  timeToIndex(time: number, duration: number, count: number): number {
-    const normalizedTime = Math.max(0, Math.min(time, duration))
-    const index = Math.floor((normalizedTime / duration) * count)
-    return Math.min(index, count - 1)
-  },
-
-  /**
-   * Convert index to time
-   */
-  indexToTime(index: number, duration: number, count: number): number {
-    return (index / count) * duration
-  }
-}
+	/**
+	 * Calculate optimal thumbnail dimensions maintaining aspect ratio
+	 */
+	calculateDimensions(
+		sourceWidth: number,
+		sourceHeight: number,
+		targetWidth: number,
+		targetHeight: number
+	): { width: number; height: number; offsetX: number; offsetY: number } {
+		const sourceAspect = sourceWidth / sourceHeight
+		const targetAspect = targetWidth / targetHeight
+
+		let width = targetWidth
+		let height = targetHeight
+		let offsetX = 0
+		let offsetY = 0
+
+		if (sourceAspect > targetAspect) {
+			height = targetHeight
+			width = targetHeight * sourceAspect
+			offsetX = (targetWidth - width) / 2
+		} else {
+			width = targetWidth
+			height = targetWidth / sourceAspect
+			offsetY = (targetHeight - height) / 2
+		}
+
+		return { width, height, offsetX, offsetY }
+	},
+
+	/**
+	 * Create thumbnail URL from blob
+	 */
+	createThumbnailUrl(blob: Blob): string {
+		return URL.createObjectURL(blob)
+	},
+
+	/**
+	 * Revoke thumbnail URL
+	 */
+	revokeThumbnailUrl(url: string): void {
+		URL.revokeObjectURL(url)
+	},
+
+	/**
+	 * Convert time to thumbnail index
+	 */
+	timeToIndex(time: number, duration: number, count: number): number {
+		const normalizedTime = Math.max(0, Math.min(time, duration))
+		const index = Math.floor((normalizedTime / duration) * count)
+		return Math.min(index, count - 1)
+	},
+
+	/**
+	 * Convert index to time
+	 */
+	indexToTime(index: number, duration: number, count: number): number {
+		return (index / count) * duration
+	}
+}