@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,519 @@
+export interface ThumbnailOptions {
+  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
+}
+
+export interface GeneratedThumbnail {
+  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
+}
+
+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)
+  }
+}
+
+// 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
+  }
+}

package/src/hooks/accessibility/index.ts

@@ -0,0 +1,27 @@
+export {
+  useKeyboardShortcuts,
+  createMediaKeyboardShortcuts,
+  type KeyboardShortcut,
+  type UseKeyboardShortcutsOptions
+} from './use-keyboard-shortcuts'
+
+export {
+  useFocusManagement,
+  useMediaPlayerFocus,
+  type FocusOptions,
+  type UseFocusManagementOptions
+} from './use-focus-management'
+
+export {
+  useScreenReader,
+  useMediaScreenReader,
+  type AnnouncementPriority,
+  type UseScreenReaderOptions
+} from './use-screen-reader'
+
+export {
+  useAccessibilityPreferences,
+  useAccessibilityStyles,
+  useFocusVisible,
+  type AccessibilityPreferences
+} from './use-accessibility-preferences'