@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/features/thumbnails/thumbnail-generator.js

@@ -0,0 +1,388 @@
+export class ThumbnailGenerator {
+    config;
+    cache = new Map();
+    videoElement = null;
+    canvas;
+    context;
+    constructor(config) {
+        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) {
+        this.videoElement = video;
+    }
+    /**
+     * Generate thumbnail at specific time
+     */
+    async generateThumbnail(time, options = {}) {
+        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 = {
+            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, options = {}) {
+        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 = [];
+        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, options = {}) {
+        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 = [];
+        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((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 = {
+            image: spriteImage,
+            thumbnails,
+            spriteWidth,
+            spriteHeight,
+            thumbnailWidth,
+            thumbnailHeight
+        };
+        return sprite;
+    }
+    /**
+     * Extract thumbnail from sprite at specific time
+     */
+    getThumbnailFromSprite(sprite, time) {
+        // 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() {
+        // Revoke object URLs to prevent memory leaks
+        this.cache.forEach(thumbnail => {
+            URL.revokeObjectURL(thumbnail.objectUrl);
+        });
+        this.cache.clear();
+    }
+    /**
+     * Get cache size
+     */
+    getCacheSize() {
+        return this.cache.size;
+    }
+    /**
+     * Get cache info
+     */
+    getCacheInfo() {
+        return Array.from(this.cache.entries()).map(([key, thumbnail]) => ({
+            key,
+            timestamp: thumbnail.timestamp,
+            size: thumbnail.blob.size
+        }));
+    }
+    /**
+     * Set configuration
+     */
+    updateConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    /**
+     * Seek video to specific time
+     */
+    async seekToTime(time) {
+        if (!this.videoElement)
+            return;
+        return new Promise((resolve, reject) => {
+            let timeoutId;
+            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
+     */
+    canvasToBlob(format, quality) {
+        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
+     */
+    getCacheKey(time, options) {
+        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
+     */
+    addToCache(key, thumbnail) {
+        // 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() {
+        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, sourceHeight, targetWidth, targetHeight) {
+        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) {
+        return URL.createObjectURL(blob);
+    },
+    /**
+     * Revoke thumbnail URL
+     */
+    revokeThumbnailUrl(url) {
+        URL.revokeObjectURL(url);
+    },
+    /**
+     * Convert time to thumbnail index
+     */
+    timeToIndex(time, duration, count) {
+        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, duration, count) {
+        return (index / count) * duration;
+    }
+};