@therealtinhtute/baroiplayer 1.0.6 → 1.0.7

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

@@ -1,388 +0,0 @@
-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;
-    }
-};

package/src/hooks/accessibility/index.js

@@ -1,4 +0,0 @@
-export { useKeyboardShortcuts, createMediaKeyboardShortcuts } from './use-keyboard-shortcuts';
-export { useFocusManagement, useMediaPlayerFocus } from './use-focus-management';
-export { useScreenReader, useMediaScreenReader } from './use-screen-reader';
-export { useAccessibilityPreferences, useAccessibilityStyles, useFocusVisible } from './use-accessibility-preferences';

package/src/hooks/accessibility/use-accessibility-preferences.js

@@ -1,156 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-export function useAccessibilityPreferences() {
-    const [preferences, setPreferences] = useState({
-        prefersReducedMotion: false,
-        prefersHighContrast: false,
-        prefersColorScheme: 'no-preference',
-        prefersReducedTransparency: false
-    });
-    const updatePreferences = useCallback(() => {
-        if (typeof window === 'undefined')
-            return;
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        const prefersHighContrast = window.matchMedia('(prefers-contrast: high)').matches;
-        const prefersReducedTransparency = window.matchMedia('(prefers-reduced-transparency: reduce)').matches;
-        let prefersColorScheme = 'no-preference';
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            prefersColorScheme = 'dark';
-        }
-        else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-            prefersColorScheme = 'light';
-        }
-        setPreferences({
-            prefersReducedMotion,
-            prefersHighContrast,
-            prefersColorScheme,
-            prefersReducedTransparency
-        });
-    }, []);
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        // Initial check
-        updatePreferences();
-        // Set up media query listeners
-        const mediaQueries = [
-            window.matchMedia('(prefers-reduced-motion: reduce)'),
-            window.matchMedia('(prefers-contrast: high)'),
-            window.matchMedia('(prefers-color-scheme: dark)'),
-            window.matchMedia('(prefers-color-scheme: light)'),
-            window.matchMedia('(prefers-reduced-transparency: reduce)')
-        ];
-        // Add listeners
-        mediaQueries.forEach(mq => {
-            mq.addEventListener('change', updatePreferences);
-        });
-        // Cleanup
-        return () => {
-            mediaQueries.forEach(mq => {
-                mq.removeEventListener('change', updatePreferences);
-            });
-        };
-    }, [updatePreferences]);
-    return preferences;
-}
-// Hook for applying accessibility styles
-export function useAccessibilityStyles() {
-    const preferences = useAccessibilityPreferences();
-    // Generate CSS custom properties based on preferences
-    const cssVariables = useCallback(() => {
-        const vars = {};
-        if (preferences.prefersHighContrast) {
-            vars['--media-contrast'] = 'high';
-            vars['--media-bg-opacity'] = '1';
-            vars['--media-border-width'] = '2px';
-            vars['--media-focus-outline-width'] = '3px';
-        }
-        else {
-            vars['--media-contrast'] = 'normal';
-            vars['--media-bg-opacity'] = '0.8';
-            vars['--media-border-width'] = '1px';
-            vars['--media-focus-outline-width'] = '2px';
-        }
-        if (preferences.prefersReducedMotion) {
-            vars['--media-transition-duration'] = '0ms';
-            vars['--media-animation-duration'] = '0ms';
-            vars['--media-motion'] = 'none';
-        }
-        else {
-            vars['--media-transition-duration'] = '200ms';
-            vars['--media-animation-duration'] = '300ms';
-            vars['--media-motion'] = 'auto';
-        }
-        if (preferences.prefersReducedTransparency) {
-            vars['--media-backdrop-blur'] = '0px';
-            vars['--media-bg-opacity'] = '1';
-        }
-        else {
-            vars['--media-backdrop-blur'] = '10px';
-        }
-        return vars;
-    }, [preferences]);
-    // Apply styles to document
-    const applyStyles = useCallback(() => {
-        if (typeof document === 'undefined')
-            return;
-        const vars = cssVariables();
-        Object.entries(vars).forEach(([property, value]) => {
-            document.documentElement.style.setProperty(property, value);
-        });
-    }, [cssVariables]);
-    useEffect(() => {
-        applyStyles();
-    }, [applyStyles]);
-    return {
-        preferences,
-        cssVariables: cssVariables(),
-        applyStyles
-    };
-}
-// Hook for managing focus visibility
-export function useFocusVisible() {
-    const [isFocusVisible, setIsFocusVisible] = useState(false);
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        let hadKeyboardEvent = true;
-        let keyboardThrottleTimeoutID;
-        const handleKeyDown = (e) => {
-            if (e.metaKey || e.altKey || e.ctrlKey) {
-                return;
-            }
-            hadKeyboardEvent = true;
-            setIsFocusVisible(true);
-        };
-        const handlePointerDown = () => {
-            hadKeyboardEvent = false;
-            setIsFocusVisible(false);
-        };
-        const handleFocus = (e) => {
-            if (hadKeyboardEvent || e.target?.matches(':focus-visible')) {
-                setIsFocusVisible(true);
-            }
-        };
-        const handleBlur = () => {
-            setIsFocusVisible(false);
-        };
-        document.addEventListener('keydown', handleKeyDown, true);
-        document.addEventListener('mousedown', handlePointerDown, true);
-        document.addEventListener('pointerdown', handlePointerDown, true);
-        document.addEventListener('touchstart', handlePointerDown, true);
-        document.addEventListener('focus', handleFocus, true);
-        document.addEventListener('blur', handleBlur, true);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown, true);
-            document.removeEventListener('mousedown', handlePointerDown, true);
-            document.removeEventListener('pointerdown', handlePointerDown, true);
-            document.removeEventListener('touchstart', handlePointerDown, true);
-            document.removeEventListener('focus', handleFocus, true);
-            document.removeEventListener('blur', handleBlur, true);
-            if (keyboardThrottleTimeoutID) {
-                clearTimeout(keyboardThrottleTimeoutID);
-            }
-        };
-    }, []);
-    return isFocusVisible;
-}

package/src/hooks/accessibility/use-focus-management.js

@@ -1,142 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react';
-export function useFocusManagement({ restoreFocus = true, initialFocus } = {}) {
-    const previousFocusRef = useRef(null);
-    const containerRef = useRef(null);
-    // Store the previously focused element
-    const storePreviousFocus = useCallback(() => {
-        previousFocusRef.current = document.activeElement;
-    }, []);
-    // Restore focus to the previously focused element
-    const restorePreviousFocus = useCallback((options = {}) => {
-        if (previousFocusRef.current && restoreFocus) {
-            previousFocusRef.current.focus({
-                preventScroll: options.preventScroll
-            });
-            previousFocusRef.current = null;
-        }
-    }, [restoreFocus]);
-    // Focus an element by selector or element
-    const focusElement = useCallback((target, options = {}) => {
-        let element = null;
-        if (typeof target === 'string') {
-            element = containerRef.current?.querySelector(target) ||
-                document.querySelector(target);
-        }
-        else if (typeof target === 'function') {
-            element = target();
-        }
-        else {
-            element = target;
-        }
-        if (element) {
-            element.focus({
-                preventScroll: options.preventScroll
-            });
-        }
-    }, []);
-    // Get all focusable elements within a container
-    const getFocusableElements = useCallback((container) => {
-        const root = container || containerRef.current || document;
-        const focusableSelectors = [
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'textarea:not([disabled])',
-            'select:not([disabled])',
-            'a[href]',
-            '[tabindex]:not([tabindex="-1"])',
-            'audio[controls]',
-            'video[controls]',
-            '[contenteditable]:not([contenteditable="false"])'
-        ].join(', ');
-        return Array.from(root.querySelectorAll(focusableSelectors));
-    }, []);
-    // Create a focus trap within the container
-    const createFocusTrap = useCallback(() => {
-        const handleKeyDown = (event) => {
-            if (event.key !== 'Tab')
-                return;
-            const focusableElements = getFocusableElements();
-            if (focusableElements.length === 0)
-                return;
-            const firstFocusable = focusableElements[0];
-            const lastFocusable = focusableElements[focusableElements.length - 1];
-            if (event.shiftKey) {
-                // Shift + Tab
-                if (document.activeElement === firstFocusable) {
-                    event.preventDefault();
-                    lastFocusable.focus();
-                }
-            }
-            else {
-                // Tab
-                if (document.activeElement === lastFocusable) {
-                    event.preventDefault();
-                    firstFocusable.focus();
-                }
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [getFocusableElements]);
-    // Navigate to next/previous focusable element
-    const navigateFocus = useCallback((direction) => {
-        const focusableElements = getFocusableElements();
-        const currentIndex = focusableElements.indexOf(document.activeElement);
-        let nextIndex;
-        if (direction === 'next') {
-            nextIndex = currentIndex + 1 >= focusableElements.length ? 0 : currentIndex + 1;
-        }
-        else {
-            nextIndex = currentIndex - 1 < 0 ? focusableElements.length - 1 : currentIndex - 1;
-        }
-        focusableElements[nextIndex]?.focus();
-    }, [getFocusableElements]);
-    // Initialize focus on mount
-    useEffect(() => {
-        if (initialFocus) {
-            const timer = setTimeout(() => {
-                focusElement(initialFocus);
-            }, 0);
-            return () => clearTimeout(timer);
-        }
-    }, [initialFocus, focusElement]);
-    return {
-        containerRef,
-        storePreviousFocus,
-        restorePreviousFocus,
-        focusElement,
-        getFocusableElements,
-        createFocusTrap,
-        navigateFocus
-    };
-}
-// Hook for managing focus within media player controls
-export function useMediaPlayerFocus() {
-    const focusManager = useFocusManagement({
-        restoreFocus: true,
-        initialFocus: '[data-media-control="play-pause"]'
-    });
-    // Focus on play/pause button
-    const focusPlayPause = useCallback(() => {
-        focusManager.focusElement('[data-media-control="play-pause"]');
-    }, [focusManager]);
-    // Focus on seek bar
-    const focusSeekBar = useCallback(() => {
-        focusManager.focusElement('[data-media-control="seek-bar"]');
-    }, [focusManager]);
-    // Focus on volume control
-    const focusVolumeControl = useCallback(() => {
-        focusManager.focusElement('[data-media-control="volume"]');
-    }, [focusManager]);
-    // Focus on settings button
-    const focusSettings = useCallback(() => {
-        focusManager.focusElement('[data-media-control="settings"]');
-    }, [focusManager]);
-    return {
-        ...focusManager,
-        focusPlayPause,
-        focusSeekBar,
-        focusVolumeControl,
-        focusSettings
-    };
-}