@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,528 +0,0 @@
-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)
-
-			if (!this.videoElement) {
-				reject(new Error("Video element not initialized"))
-				return
-			}
-
-			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 as string | undefined
-			if (oldestKey) {
-				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/__tests__/currentTime-fix.test.ts

@@ -1,149 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from "vitest"
-import { renderHook, act } from "@testing-library/react"
-import { useVideoPlayer } from "../useVideoPlayer"
-import React from "react"
-
-describe("currentTime non-finite value fix", () => {
-	let mockVideoElement: Partial<HTMLVideoElement>
-	let containerRef: React.RefObject<HTMLDivElement>
-
-	beforeEach(() => {
-		// Create a mock div element
-		const mockDiv = {
-			requestFullscreen: vi.fn()
-		} as unknown as HTMLDivElement
-
-		mockVideoElement = {
-			currentTime: NaN,
-			duration: NaN,
-			volume: 1,
-			muted: false,
-			play: vi.fn().mockResolvedValue(undefined),
-			pause: vi.fn(),
-			addEventListener: vi.fn(),
-			removeEventListener: vi.fn()
-		}
-
-		containerRef = {
-			current: mockDiv
-		}
-
-		vi.spyOn(global, "document" as any).mockReturnValue({
-			querySelector: vi.fn().mockReturnValue(mockVideoElement)
-		})
-	})
-
-	it("should handle NaN duration when seeking forward", () => {
-		const { result } = renderHook(() => useVideoPlayer(containerRef))
-
-		const videoRef = result.current.videoRef
-		if (videoRef.current) {
-			Object.assign(videoRef.current, mockVideoElement)
-		}
-
-		act(() => {
-			result.current.controls.seekForward(10)
-		})
-
-		// Should not throw error and should not set non-finite value
-		expect(mockVideoElement.currentTime).toBeNaN()
-	})
-
-	it("should handle NaN currentTime when seeking backward", () => {
-		mockVideoElement.currentTime = NaN
-
-		const { result } = renderHook(() => useVideoPlayer(containerRef))
-
-		const videoRef = result.current.videoRef
-		if (videoRef.current) {
-			Object.assign(videoRef.current, mockVideoElement)
-		}
-
-		act(() => {
-			result.current.controls.seekBackward(10)
-		})
-
-		// Should handle NaN gracefully - sets to 0
-		expect(() => result.current.controls.seekBackward(10)).not.toThrow()
-	})
-
-	it("should handle valid values correctly", () => {
-		mockVideoElement.currentTime = 50
-		mockVideoElement.duration = 100
-
-		const { result } = renderHook(() => useVideoPlayer(containerRef))
-
-		const videoRef = result.current.videoRef
-		if (videoRef.current) {
-			Object.assign(videoRef.current, mockVideoElement)
-
-			// Mock the currentTime setter to track calls
-			let setTimeValue: number | undefined
-			Object.defineProperty(videoRef.current, "currentTime", {
-				get: () => mockVideoElement.currentTime,
-				set: (value: number) => {
-					setTimeValue = value
-					mockVideoElement.currentTime = value
-				},
-				configurable: true
-			})
-
-			act(() => {
-				result.current.controls.seekForward(10)
-			})
-
-			// Should set valid time value
-			expect(setTimeValue).toBe(60)
-		}
-	})
-
-	it("should prevent seeking when duration is 0", () => {
-		mockVideoElement.currentTime = 10
-		mockVideoElement.duration = 0
-
-		const { result } = renderHook(() => useVideoPlayer(containerRef))
-
-		const videoRef = result.current.videoRef
-		if (videoRef.current) {
-			Object.assign(videoRef.current, mockVideoElement)
-
-			const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
-
-			act(() => {
-				result.current.controls.seekForward(10)
-			})
-
-			expect(consoleSpy).toHaveBeenCalledWith("Cannot seek forward: duration is not available")
-			consoleSpy.mockRestore()
-		}
-	})
-
-	it("should clamp seek values to valid range", () => {
-		mockVideoElement.currentTime = 95
-		mockVideoElement.duration = 100
-
-		const { result } = renderHook(() => useVideoPlayer(containerRef))
-
-		const videoRef = result.current.videoRef
-		if (videoRef.current) {
-			Object.assign(videoRef.current, mockVideoElement)
-
-			let setTimeValue: number | undefined
-			Object.defineProperty(videoRef.current, "currentTime", {
-				get: () => mockVideoElement.currentTime,
-				set: (value: number) => {
-					setTimeValue = value
-					mockVideoElement.currentTime = value
-				},
-				configurable: true
-			})
-
-			act(() => {
-				result.current.controls.seekForward(10)
-			})
-
-			// Should clamp to duration (100, not 105)
-			expect(setTimeValue).toBe(100)
-		}
-	})
-})