@therealtinhtute/baroiplayer 1.0.6 → 1.0.8

package/src/hooks/accessibility/use-keyboard-shortcuts.js

@@ -1,101 +0,0 @@
-import { useEffect, useCallback, useRef } from 'react';
-export function useKeyboardShortcuts({ shortcuts, enabled = true, target }) {
-    const shortcutsRef = useRef(shortcuts);
-    shortcutsRef.current = shortcuts;
-    const handleKeyDown = useCallback((event) => {
-        if (!enabled)
-            return;
-        // Don't trigger shortcuts when user is typing in inputs
-        if (event.target instanceof HTMLInputElement ||
-            event.target instanceof HTMLTextAreaElement ||
-            event.target?.contentEditable === 'true') {
-            return;
-        }
-        const shortcut = shortcutsRef.current.find(s => s.key.toLowerCase() === event.key.toLowerCase() &&
-            !!s.ctrlKey === event.ctrlKey &&
-            !!s.altKey === event.altKey &&
-            !!s.shiftKey === event.shiftKey);
-        if (shortcut) {
-            if (shortcut.preventDefault !== false) {
-                event.preventDefault();
-            }
-            shortcut.action();
-        }
-    }, [enabled]);
-    useEffect(() => {
-        const element = target || document;
-        element.addEventListener('keydown', handleKeyDown);
-        return () => {
-            element.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, target]);
-    return {
-        shortcuts: shortcuts.map(s => ({
-            key: s.key,
-            description: s.description,
-            modifiers: {
-                ctrl: s.ctrlKey,
-                alt: s.altKey,
-                shift: s.shiftKey
-            }
-        }))
-    };
-}
-// Pre-defined media player shortcuts
-export const createMediaKeyboardShortcuts = (controls) => [
-    {
-        key: ' ',
-        action: controls.togglePlayPause,
-        description: 'Play/Pause'
-    },
-    {
-        key: 'k',
-        action: controls.togglePlayPause,
-        description: 'Play/Pause (K)'
-    },
-    {
-        key: 'ArrowLeft',
-        action: () => controls.seekBackward(10),
-        description: 'Seek backward 10 seconds'
-    },
-    {
-        key: 'ArrowRight',
-        action: () => controls.seekForward(10),
-        description: 'Seek forward 10 seconds'
-    },
-    {
-        key: 'j',
-        action: () => controls.seekBackward(10),
-        description: 'Seek backward 10 seconds (J)'
-    },
-    {
-        key: 'l',
-        action: () => controls.seekForward(10),
-        description: 'Seek forward 10 seconds (L)'
-    },
-    {
-        key: 'ArrowUp',
-        action: controls.volumeUp,
-        description: 'Volume up'
-    },
-    {
-        key: 'ArrowDown',
-        action: controls.volumeDown,
-        description: 'Volume down'
-    },
-    {
-        key: 'm',
-        action: controls.toggleMute,
-        description: 'Toggle mute'
-    },
-    {
-        key: 'f',
-        action: controls.toggleFullscreen,
-        description: 'Toggle fullscreen'
-    },
-    ...(controls.showHelp ? [{
-            key: '?',
-            action: controls.showHelp,
-            description: 'Show keyboard shortcuts help'
-        }] : [])
-];

package/src/hooks/accessibility/use-screen-reader.js

@@ -1,148 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react';
-export function useScreenReader({ defaultPriority = 'polite', debounceMs = 100 } = {}) {
-    const liveRegionRef = useRef(null);
-    const timeoutRef = useRef();
-    // Create or get the live region for announcements
-    const getLiveRegion = useCallback((priority) => {
-        if (!liveRegionRef.current) {
-            const liveRegion = document.createElement('div');
-            liveRegion.setAttribute('aria-live', priority);
-            liveRegion.setAttribute('aria-atomic', 'true');
-            liveRegion.setAttribute('class', 'sr-only');
-            liveRegion.style.cssText = `
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        padding: 0 !important;
-        margin: -1px !important;
-        overflow: hidden !important;
-        clip: rect(0, 0, 0, 0) !important;
-        white-space: nowrap !important;
-        border: 0 !important;
-      `;
-            document.body.appendChild(liveRegion);
-            liveRegionRef.current = liveRegion;
-        }
-        // Update priority if needed
-        if (liveRegionRef.current.getAttribute('aria-live') !== priority) {
-            liveRegionRef.current.setAttribute('aria-live', priority);
-        }
-        return liveRegionRef.current;
-    }, []);
-    // Announce a message to screen readers
-    const announce = useCallback((message, priority = defaultPriority) => {
-        if (!message.trim() || priority === 'off')
-            return;
-        // Clear existing timeout
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        // Debounce announcements
-        timeoutRef.current = setTimeout(() => {
-            const liveRegion = getLiveRegion(priority);
-            // Clear and then set the message to ensure it's announced
-            liveRegion.textContent = '';
-            // Use requestAnimationFrame to ensure the clear happens first
-            requestAnimationFrame(() => {
-                liveRegion.textContent = message;
-            });
-        }, debounceMs);
-    }, [defaultPriority, debounceMs, getLiveRegion]);
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            if (liveRegionRef.current) {
-                document.body.removeChild(liveRegionRef.current);
-                liveRegionRef.current = null;
-            }
-        };
-    }, []);
-    return { announce };
-}
-// Hook specifically for media player screen reader announcements
-export function useMediaScreenReader() {
-    const { announce } = useScreenReader({ defaultPriority: 'polite' });
-    // Announce playback state changes
-    const announcePlaybackState = useCallback((isPlaying) => {
-        announce(isPlaying ? 'Playing' : 'Paused', 'assertive');
-    }, [announce]);
-    // Announce volume changes
-    const announceVolume = useCallback((volume, isMuted) => {
-        if (isMuted) {
-            announce('Muted', 'assertive');
-        }
-        else {
-            const volumePercent = Math.round(volume * 100);
-            announce(`Volume ${volumePercent}%`, 'polite');
-        }
-    }, [announce]);
-    // Announce time position changes
-    const announceTime = useCallback((currentTime, duration) => {
-        const formatTime = (seconds) => {
-            const hours = Math.floor(seconds / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            const secs = Math.floor(seconds % 60);
-            if (hours > 0) {
-                return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-            }
-            return `${minutes}:${secs.toString().padStart(2, '0')}`;
-        };
-        const current = formatTime(currentTime);
-        const total = formatTime(duration);
-        announce(`${current} of ${total}`, 'polite');
-    }, [announce]);
-    // Announce fullscreen state changes
-    const announceFullscreen = useCallback((isFullscreen) => {
-        announce(isFullscreen ? 'Entered fullscreen' : 'Exited fullscreen', 'assertive');
-    }, [announce]);
-    // Announce subtitle state changes
-    const announceSubtitles = useCallback((enabled, language) => {
-        if (enabled) {
-            announce(language ? `Subtitles enabled in ${language}` : 'Subtitles enabled', 'assertive');
-        }
-        else {
-            announce('Subtitles disabled', 'assertive');
-        }
-    }, [announce]);
-    // Announce playback speed changes
-    const announcePlaybackSpeed = useCallback((speed) => {
-        if (speed === 1) {
-            announce('Normal playback speed', 'assertive');
-        }
-        else {
-            announce(`Playback speed ${speed}x`, 'assertive');
-        }
-    }, [announce]);
-    // Announce quality changes
-    const announceQuality = useCallback((quality) => {
-        announce(`Quality changed to ${quality}`, 'polite');
-    }, [announce]);
-    // Announce loading state
-    const announceLoading = useCallback((isLoading) => {
-        announce(isLoading ? 'Loading...' : 'Loading complete', 'polite');
-    }, [announce]);
-    // Announce errors
-    const announceError = useCallback((error) => {
-        announce(`Error: ${error}`, 'assertive');
-    }, [announce]);
-    // Announce buffering state
-    const announceBuffering = useCallback((isBuffering) => {
-        announce(isBuffering ? 'Buffering...' : 'Buffering complete', 'polite');
-    }, [announce]);
-    return {
-        announce,
-        announcePlaybackState,
-        announceVolume,
-        announceTime,
-        announceFullscreen,
-        announceSubtitles,
-        announcePlaybackSpeed,
-        announceQuality,
-        announceLoading,
-        announceError,
-        announceBuffering
-    };
-}

package/src/hooks/core/index.js

@@ -1,19 +0,0 @@
-// Core Media Player Hooks
-export { useKeyboardControls } from "../use-keyboard-controls";
-export { useMediaPlayer } from "../use-media-player";
-// Media State Hooks
-export { useAdaptiveMediaState, useEnhancedMediaState, useMediaState } from "../use-media-state";
-// React 19 Advanced Hooks
-export { useMediaActions, useMediaActionState } from "../use-media-actions";
-export { useMediaOptimistic, useMediaStateComparison, useOptimisticUpdates } from "../use-media-optimistic";
-// Mobile-First Touch Gestures
-export { useMediaGestures, useTouchGestures } from "../use-touch-gestures";
-// Refactored Hooks (React 19 optimized)
-export { useVideoPlayer } from "../useVideoPlayer";
-export { useSubtitles } from "../useSubtitles";
-export { useEnhancedSubtitles } from "../useEnhancedSubtitles";
-export { useMediaControls } from "../useMediaControls";
-export { useScreenshot } from "../useScreenshot";
-// Specialized hooks
-export { useMediaMetadata } from "../use-media-metadata";
-export { useOptimisticControls } from "../use-optimistic-controls";

package/src/hooks/legacy.js

@@ -1,17 +0,0 @@
-/**
- * Legacy Hooks (Deprecated)
- * These hooks are wrapped with deprecation warnings
- */
-import { showDeprecationWarning } from "../lib/deprecation";
-// Import current hooks
-import { useMediaPlayer } from "./use-media-player";
-import { useSubtitles } from "./useSubtitles";
-// Legacy hook wrappers with deprecation warnings
-export function useVideoPlayer(props) {
-    showDeprecationWarning("useVideoPlayer", "useMediaPlayer (the primary media player hook)");
-    return useMediaPlayer(props);
-}
-export function useEnhancedSubtitles(props) {
-    showDeprecationWarning("useEnhancedSubtitles", "useSubtitles (the current subtitle hook)");
-    return useSubtitles(props);
-}

package/src/hooks/use-enhanced-media-player.js

@@ -1,395 +0,0 @@
-"use client";
-import React, { useCallback, useEffect, useRef, useMemo, useTransition, useOptimistic } from "react";
-import { useMediaStore, useMediaSelector } from "../context/media-context";
-import { useMediaOptimistic } from "./use-media-optimistic";
-import { useMediaActions } from "./use-media-actions";
-// Performance-optimized media player hook with React 19 features
-export function useEnhancedMediaPlayer(options) {
-    const mediaRef = useRef(null);
-    const containerRef = useRef(null);
-    // React 19 concurrent features
-    const [isPending, startTransition] = useTransition();
-    const [isSeeking, startSeekTransition] = useTransition();
-    // Performance monitoring
-    const renderStartTime = React.useRef(0);
-    const frameCount = React.useRef(0);
-    const lastFrameTime = React.useRef(0);
-    // Throttled time update
-    const timeUpdateTimeoutRef = useRef();
-    const lastTimeUpdate = useRef(0);
-    // Store integration
-    const store = useMediaStore();
-    const isEnhanced = 'getOptimisticState' in store;
-    // Select only the state we need to minimize re-renders
-    const isPlaying = useMediaSelector(state => state.isPlaying);
-    const currentTime = useMediaSelector(state => state.currentTime);
-    const duration = useMediaSelector(state => state.duration);
-    const volume = useMediaSelector(state => state.volume);
-    const isMuted = useMediaSelector(state => state.isMuted);
-    const isLoading = useMediaSelector(state => state.isLoading);
-    const isBuffering = useMediaSelector(state => state.isBuffering);
-    const error = useMediaSelector(state => state.error);
-    const buffered = useMediaSelector(state => state.buffered);
-    const isFullscreen = useMediaSelector(state => state.isFullscreen);
-    // Enhanced features if available
-    const enhancedStore = store;
-    const optimisticState = isEnhanced ? useMediaOptimistic(enhancedStore) : null;
-    const actions = isEnhanced ? useMediaActions(enhancedStore) : null;
-    // Performance state
-    const [performanceMetrics, setPerformanceMetrics] = React.useState({
-        frameRate: 0,
-        averageRenderTime: 0,
-        droppedFrames: 0,
-        bufferHealth: 0
-    });
-    // Optimistic state updates for immediate UI feedback
-    const [optimisticVolume, setOptimisticVolume] = useOptimistic(volume, (state, newVolume) => {
-        return Math.max(0, Math.min(1, newVolume));
-    });
-    const [optimisticTime, setOptimisticTime] = useOptimistic(currentTime, (state, newTime) => {
-        return Math.max(0, Math.min(duration || 0, newTime));
-    });
-    // Initialize media element with performance optimizations
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        // Set initial properties
-        const initProps = {
-            volume: options.volume,
-            muted: options.muted,
-            autoplay: options.autoPlay,
-            loop: options.loop,
-            preload: options.preload,
-            crossOrigin: options.crossOrigin
-        };
-        Object.entries(initProps).forEach(([key, value]) => {
-            if (value !== undefined) {
-                media[key] = value;
-            }
-        });
-        // Performance optimizations
-        media.setAttribute('preload', options.preloadStrategy === 'eager' ? 'auto' : 'metadata');
-        if (options.bufferingStrategy === 'aggressive') {
-            media.setAttribute('buffered', 'auto');
-        }
-        // Hardware acceleration
-        if (media instanceof HTMLVideoElement) {
-            media.style.willChange = 'transform';
-            media.style.transform = 'translateZ(0)';
-        }
-    }, [
-        options.volume,
-        options.muted,
-        options.autoPlay,
-        options.loop,
-        options.preload,
-        options.crossOrigin,
-        options.preloadStrategy,
-        options.bufferingStrategy
-    ]);
-    // Optimized event handlers with React 19 patterns
-    const handleTimeUpdate = useCallback(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        const now = performance.now();
-        // Throttle time updates for performance
-        if (options.enableTimeUpdateThrottling !== false) {
-            if (now - lastTimeUpdate.current < (options.timeUpdateThrottleMs || 100)) {
-                return;
-            }
-            lastTimeUpdate.current = now;
-        }
-        startTransition(() => {
-            if (isEnhanced && actions) {
-                actions.setCurrentTime(media.currentTime);
-            }
-        });
-    }, [options.enableTimeUpdateThrottling, options.timeUpdateThrottleMs, isEnhanced, actions]);
-    const handlePlay = useCallback(() => {
-        startTransition(() => {
-            if (isEnhanced && actions) {
-                actions.play(true); // Optimistic update
-            }
-        });
-        options.onPlay?.();
-    }, [isEnhanced, actions, options.onPlay]);
-    const handlePause = useCallback(() => {
-        startTransition(() => {
-            if (isEnhanced && actions) {
-                actions.pause(true); // Optimistic update
-            }
-        });
-        options.onPause?.();
-    }, [isEnhanced, actions, options.onPause]);
-    const handleVolumeChange = useCallback(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        startTransition(() => {
-            if (isEnhanced && actions) {
-                actions.setVolume(media.volume, true); // Optimistic update
-                media.muted ? actions.mute(true) : actions.unmute(true);
-            }
-        });
-    }, [isEnhanced, actions]);
-    const handleSeeking = useCallback(() => {
-        startSeekTransition(() => {
-            // Seek operations get their own transition
-        });
-    }, []);
-    const handleSeeked = useCallback(() => {
-        // Seek completed
-    }, []);
-    const handleProgress = useCallback(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        startTransition(() => {
-            if (isEnhanced && actions) {
-                actions.setBuffered(media.buffered);
-            }
-        });
-    }, [isEnhanced, actions]);
-    // Performance monitoring
-    const measureRenderTime = useCallback(() => {
-        const now = performance.now();
-        const deltaTime = now - lastFrameTime.current;
-        if (deltaTime > 0) {
-            frameCount.current++;
-            // Calculate frame rate every second
-            if (frameCount.current >= 60) {
-                const fps = Math.round((frameCount.current * 1000) / (now - lastFrameTime.current));
-                setPerformanceMetrics(prev => ({
-                    ...prev,
-                    frameRate: fps,
-                    droppedFrames: Math.max(0, 60 - fps)
-                }));
-                frameCount.current = 0;
-                lastFrameTime.current = now;
-            }
-        }
-    }, []);
-    // Attach event listeners with performance optimization
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        // Use passive listeners where possible for better performance
-        const eventListeners = [
-            { event: "timeupdate", handler: handleTimeUpdate, passive: true },
-            { event: "play", handler: handlePlay },
-            { event: "pause", handler: handlePause },
-            { event: "volumechange", handler: handleVolumeChange },
-            { event: "seeking", handler: handleSeeking },
-            { event: "seeked", handler: handleSeeked },
-            { event: "progress", handler: handleProgress, passive: true },
-            { event: "loadedmetadata", handler: () => measureRenderTime() },
-            { event: "loadeddata", handler: () => measureRenderTime() }
-        ];
-        eventListeners.forEach(({ event, handler, passive }) => {
-            const options = passive ? { passive: true } : {};
-            media.addEventListener(event, handler, options);
-        });
-        // Performance monitoring frame loop
-        let rafId;
-        const performanceLoop = () => {
-            measureRenderTime();
-            rafId = requestAnimationFrame(performanceLoop);
-        };
-        if (options.enablePerformanceMonitoring) {
-            performanceLoop();
-        }
-        return () => {
-            eventListeners.forEach(({ event, handler }) => {
-                media.removeEventListener(event, handler);
-            });
-            if (rafId) {
-                cancelAnimationFrame(rafId);
-            }
-        };
-    }, [
-        handleTimeUpdate,
-        handlePlay,
-        handlePause,
-        handleVolumeChange,
-        handleSeeking,
-        handleSeeked,
-        handleProgress,
-        measureRenderTime,
-        options.enablePerformanceMonitoring
-    ]);
-    // Optimized control functions with React 19 features
-    const controls = useMemo(() => {
-        const play = async () => {
-            const media = mediaRef.current;
-            if (!media)
-                return;
-            if (isEnhanced && actions) {
-                await actions.play(true); // Optimistic
-            }
-            else {
-                try {
-                    await media.play();
-                }
-                catch (error) {
-                    console.error("Failed to play media:", error);
-                }
-            }
-        };
-        const pause = () => {
-            const media = mediaRef.current;
-            if (!media)
-                return;
-            if (isEnhanced && actions) {
-                actions.pause(true); // Optimistic
-            }
-            else {
-                media.pause();
-            }
-        };
-        const toggle = () => {
-            if (isPlaying) {
-                pause();
-            }
-            else {
-                play();
-            }
-        };
-        const seek = (time) => {
-            const media = mediaRef.current;
-            if (!media)
-                return;
-            const clampedTime = Math.max(0, Math.min(time, duration || 0));
-            if (isEnhanced && actions) {
-                startSeekTransition(() => {
-                    actions.seek(clampedTime, true); // Optimistic
-                });
-            }
-            else {
-                media.currentTime = clampedTime;
-            }
-        };
-        const setVolume = (volume) => {
-            const media = mediaRef.current;
-            if (!media)
-                return;
-            const clampedVolume = Math.max(0, Math.min(1, volume));
-            if (isEnhanced && actions) {
-                setOptimisticVolume(clampedVolume);
-                startTransition(() => {
-                    actions.setVolume(clampedVolume, true);
-                });
-            }
-            else {
-                media.volume = clampedVolume;
-            }
-        };
-        const toggleMute = () => {
-            const media = mediaRef.current;
-            if (!media)
-                return;
-            if (isEnhanced && actions) {
-                actions.toggleMute(true); // Optimistic
-            }
-            else {
-                media.muted = !media.muted;
-            }
-        };
-        const enterFullscreen = async () => {
-            const container = containerRef.current;
-            if (!container || !document.fullscreenEnabled)
-                return;
-            try {
-                await container.requestFullscreen();
-                if (isEnhanced && actions) {
-                    actions.enterFullscreen(true);
-                }
-            }
-            catch (error) {
-                console.error("Failed to enter fullscreen:", error);
-            }
-        };
-        const exitFullscreen = async () => {
-            if (!document.fullscreenElement)
-                return;
-            try {
-                await document.exitFullscreen();
-                if (isEnhanced && actions) {
-                    actions.exitFullscreen(true);
-                }
-            }
-            catch (error) {
-                console.error("Failed to exit fullscreen:", error);
-            }
-        };
-        return {
-            play,
-            pause,
-            toggle,
-            seek,
-            setVolume,
-            toggleMute,
-            enterFullscreen,
-            exitFullscreen
-        };
-    }, [
-        isPlaying,
-        duration,
-        isEnhanced,
-        actions,
-        startTransition,
-        startSeekTransition,
-        setOptimisticVolume
-    ]);
-    // Computed state
-    const computedState = useMemo(() => ({
-        isPlaying: optimisticState?.isPlaying ?? isPlaying,
-        currentTime: optimisticState?.currentTime ?? currentTime,
-        duration: optimisticState?.duration ?? duration,
-        volume: optimisticState?.volume ?? optimisticVolume,
-        isMuted: optimisticState?.isMuted ?? isMuted,
-        isLoading: optimisticState?.isBuffering ?? isLoading,
-        isBuffering: optimisticState?.isBuffering ?? isBuffering,
-        error: optimisticState?.error ?? error,
-        buffered: optimisticState?.buffered ?? buffered,
-        isFullscreen: optimisticState?.isFullscreen ?? isFullscreen,
-        progress: duration > 0 ? currentTime / duration : 0,
-        isTransitioning: isPending || isSeeking,
-        canPlay: !isLoading && !isBuffering && !error
-    }), [
-        optimisticState,
-        isPlaying,
-        currentTime,
-        duration,
-        optimisticVolume,
-        isMuted,
-        isLoading,
-        isBuffering,
-        error,
-        buffered,
-        isFullscreen,
-        isPending,
-        isSeeking
-    ]);
-    return {
-        // Refs
-        mediaRef,
-        containerRef,
-        // State
-        state: computedState,
-        actualState: optimisticState?.actualState,
-        // Controls
-        controls,
-        // Performance metrics
-        performanceMetrics,
-        isTransitioning: isPending || isSeeking,
-        // Enhanced features
-        actions: optimisticState?.actions,
-        actionState: optimisticState?.actionState,
-        // Optimistic features
-        optimisticState,
-        isEnhanced
-    };
-}