@therealtinhtute/baroiplayer 1.0.5 → 1.0.7

package/src/components/unified/base-media-player.js

@@ -1,104 +0,0 @@
-/**
- * Base Media Player - Core unified functionality for video and audio
- * This consolidates the logic from MediaPlayer, VideoPlayer, and AudioPlayer
- */
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useTransition } from "react";
-import { useKeyboardControls } from "../../hooks/use-keyboard-controls";
-import { useEnhancedMediaPlayer } from "../../hooks/use-enhanced-media-player";
-import { useMemoryOptimization } from "../../hooks/use-memory-optimization";
-import { EnhancedMediaWrapper } from "../media-suspense";
-import { cn } from "../../lib/utils";
-export const BaseMediaPlayer = forwardRef(({ src, mediaType = 'auto', className, children, keyboardControls = true, showControls = true, customControls = false, crossOrigin, enablePerformanceMonitoring = true, bufferingStrategy = "adaptive", preloadStrategy = "progressive", enableOptimizations = true, 
-// Video-specific props
-poster, aspectRatio = "16/9", width = "100%", height = "auto", ...options }, ref) => {
-    // React 19 concurrent features
-    const [isPending] = useTransition();
-    // Auto-detect media type if not specified
-    const detectedMediaType = useMemo(() => {
-        if (mediaType !== 'auto')
-            return mediaType;
-        // Simple detection based on file extension
-        if (typeof src === 'string') {
-            const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];
-            const audioExtensions = ['.mp3', '.wav', '.ogg', '.aac', '.flac', '.m4a'];
-            const extension = src.toLowerCase().split('.').pop();
-            if (extension && videoExtensions.some(ext => extension.endsWith(ext))) {
-                return 'video';
-            }
-            if (extension && audioExtensions.some(ext => extension.endsWith(ext))) {
-                return 'audio';
-            }
-        }
-        // Default to video for unknown types
-        return 'video';
-    }, [src, mediaType]);
-    // Enhanced media player with optimizations
-    const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } = useEnhancedMediaPlayer({
-        src,
-        crossOrigin,
-        enablePerformanceMonitoring,
-        bufferingStrategy,
-        preloadStrategy,
-        enableTimeUpdateThrottling: true,
-        timeUpdateThrottleMs: 100,
-        enableSeekPreview: true,
-        ...options
-    });
-    // Memory optimization
-    const { memoryStats, addEventListener } = useMemoryOptimization({
-        maxMemoryUsage: 50, // 50MB for media player
-        cleanupInterval: 15000, // 15 seconds
-        enableGC: true,
-        monitorMemory: enableOptimizations
-    });
-    // Keyboard controls
-    useKeyboardControls({
-        enabled: keyboardControls,
-        state,
-        controls
-    });
-    // Determine the media element based on type
-    const MediaElement = useMemo(() => {
-        const commonProps = {
-            ref: mediaRef,
-            src,
-            className: cn("w-full h-full", state.isLoading && "opacity-0", !customControls && showControls && "cursor-pointer"),
-            onPlay: controls.play,
-            onPause: controls.pause,
-            onVolumeChange: (e) => controls.setVolume(e.target.volume),
-            onTimeUpdate: (e) => controls.setCurrentTime(e.target.currentTime),
-            onSeeked: (e) => controls.setCurrentTime(e.target.currentTime),
-            crossOrigin
-        };
-        if (detectedMediaType === 'audio') {
-            return (_jsxs("audio", { ...commonProps, controls: !customControls && showControls, children: [src && _jsx("source", { src: typeof src === 'string' ? src : src.src }), "Your browser does not support the audio element."] }));
-        }
-        // Video (default)
-        return (_jsxs("video", { ...commonProps, poster: poster, muted: state.isMuted, playsInline: true, controls: !customControls && showControls, children: [Array.isArray(src) ? (src.map((source, index) => (_jsx("source", { src: source.src, type: source.type }, index)))) : src ? (_jsx("source", { src: typeof src === 'string' ? src : src.src })) : null, "Your browser does not support the video element."] }));
-    }, [detectedMediaType, src, mediaRef, state, controls, customControls, showControls, poster]);
-    // Container styles based on media type
-    const containerStyles = useMemo(() => {
-        if (detectedMediaType === 'audio') {
-            return cn("relative bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden", "flex items-center justify-center p-8", className);
-        }
-        // Video styles
-        return cn("relative bg-black rounded-lg overflow-hidden", className);
-    }, [detectedMediaType, className]);
-    // Video-specific aspect ratio
-    const aspectRatioStyles = useMemo(() => {
-        if (detectedMediaType === 'video' && aspectRatio) {
-            return {
-                aspectRatio,
-                width: typeof width === 'number' ? `${width}px` : width,
-                height: typeof height === 'number' ? `${height}px` : height
-            };
-        }
-        return {};
-    }, [detectedMediaType, aspectRatio, width, height]);
-    return (_jsx(EnhancedMediaWrapper, { children: _jsxs("div", { ref: containerRef, className: containerStyles, style: aspectRatioStyles, "data-media-type": detectedMediaType, "data-enhanced": isEnhanced, children: [MediaElement, state.isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white" }), _jsx("p", { className: "font-medium text-sm text-white", children: state.isBuffering ? "Buffering..." : "Loading..." })] }) })), state.error && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "p-4 text-center text-white", children: [_jsx("div", { className: "mb-2 text-lg text-red-400", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm", children: "Failed to load media" }), _jsx("p", { className: "mt-1 text-xs opacity-75", children: state.error.message })] }) })), children && (_jsx("div", { className: "pointer-events-none absolute inset-0", children: typeof children === "function"
-                        ? children({ state, controls, mediaType: detectedMediaType })
-                        : children })), process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (_jsxs("div", { className: "absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs", children: [_jsxs("div", { children: ["FPS: ", performanceMetrics.frameRate || 0] }), _jsxs("div", { children: ["Memory: ", memoryStats.usage.toFixed(1), "MB"] }), _jsxs("div", { children: ["Type: ", detectedMediaType] }), isEnhanced && _jsx("div", { children: "Enhanced \u2713" })] }))] }) }));
-});
-BaseMediaPlayer.displayName = "BaseMediaPlayer";

package/src/components/unified/media-player.js

@@ -1,41 +0,0 @@
-/**
- * Unified MediaPlayer - The primary media player component
- * Consolidates MediaPlayer, VideoPlayer, and AudioPlayer into one component
- */
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { BaseMediaPlayer } from "./base-media-player";
-/**
- * The primary MediaPlayer component
- *
- * @example
- * // Video player (auto-detected)
- * <MediaPlayer src="/video.mp4" poster="/poster.jpg" />
- *
- * @example
- * // Audio player (auto-detected)
- * <MediaPlayer src="/audio.mp3" />
- *
- * @example
- * // Explicit media type
- * <MediaPlayer src="/media.mp4" mediaType="video" />
- */
-export const MediaPlayer = forwardRef((props, ref) => {
-    return _jsx(BaseMediaPlayer, { ...props, ref: ref });
-});
-MediaPlayer.displayName = "MediaPlayer";
-/**
- * Video-specific component with video defaults
- */
-export const VideoPlayer = forwardRef((props, ref) => {
-    return (_jsx(BaseMediaPlayer, { ...props, ref: ref, mediaType: "video", aspectRatio: props.aspectRatio || "16/9", showControls: props.showControls ?? true }));
-});
-VideoPlayer.displayName = "VideoPlayer";
-/**
- * Audio-specific component with audio defaults
- */
-export const AudioPlayer = forwardRef((props, ref) => {
-    return (_jsx(BaseMediaPlayer, { ...props, ref: ref, mediaType: "audio", showControls: props.showControls ?? true }));
-});
-AudioPlayer.displayName = "AudioPlayer";

package/src/components/variants/minimal/AccessibleMinimalPlayer.js

@@ -1,322 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { MediaPlayerRoot } from "../../media-player-root";
-import { MediaPlayerVideo } from "../../media-player-video";
-import { MinimalControls } from "./MinimalControls";
-import { MinimalOverlay } from "./MinimalOverlay";
-import { MinimalLoading } from "./MinimalLoading";
-import { cn } from "../../../lib/utils";
-import { defaultMinimalIcons } from "../../icons";
-import { useKeyboardShortcuts, createMediaKeyboardShortcuts, useMediaPlayerFocus, useMediaScreenReader, useAccessibilityStyles, useFocusVisible } from '../../../hooks/accessibility';
-import { KeyboardHelpOverlay } from '../../accessibility/keyboard-help-overlay';
-export function AccessibleMinimalPlayer({ src, poster, autoPlay = false, muted = false, loop = false, autoHideControls = true, hideDelay = 2500, theme = "dark", customIcons, showCenterPlayButton = true, showLoadingSpinner = true, className, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onSeek, onError, watermark, qualities, showQualitySelector = false, showSpeedControl = false, thumbnails, enableKeyboardShortcuts = true, showKeyboardHelpButton = true, ariaLabel = "Media player", ariaDescribedBy, }) {
-    // Existing state
-    const [controlsVisible, setControlsVisible] = useState(true);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [volume, setVolume] = useState(1);
-    const [isMuted, setIsMuted] = useState(muted);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    // Accessibility state
-    const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);
-    // Refs
-    const hideTimeoutRef = useRef(null);
-    const containerRef = useRef(null);
-    const videoRef = useRef(null);
-    const [isHovered, setIsHovered] = useState(false);
-    const [userInteracting, setUserInteracting] = useState(false);
-    // Accessibility hooks
-    const { applyStyles, preferences } = useAccessibilityStyles();
-    const focusManager = useMediaPlayerFocus();
-    const screenReader = useMediaScreenReader();
-    const isFocusVisible = useFocusVisible();
-    // Merge default icons with custom icons
-    const icons = { ...defaultMinimalIcons, ...customIcons };
-    // Media control functions
-    const togglePlayPause = useCallback(() => {
-        if (!videoRef.current)
-            return;
-        if (isPlaying) {
-            videoRef.current.pause();
-        }
-        else {
-            videoRef.current.play();
-        }
-    }, [isPlaying]);
-    const seekForward = useCallback((seconds = 10) => {
-        if (!videoRef.current)
-            return;
-        const newTime = Math.min(videoRef.current.currentTime + seconds, duration);
-        videoRef.current.currentTime = newTime;
-        screenReader.announceTime(newTime, duration);
-    }, [duration, screenReader]);
-    const seekBackward = useCallback((seconds = 10) => {
-        if (!videoRef.current)
-            return;
-        const newTime = Math.max(videoRef.current.currentTime - seconds, 0);
-        videoRef.current.currentTime = newTime;
-        screenReader.announceTime(newTime, duration);
-    }, [duration, screenReader]);
-    const volumeUp = useCallback(() => {
-        if (!videoRef.current)
-            return;
-        const newVolume = Math.min(volume + 0.1, 1);
-        setVolume(newVolume);
-        videoRef.current.volume = newVolume;
-        if (isMuted) {
-            setIsMuted(false);
-            videoRef.current.muted = false;
-        }
-        screenReader.announceVolume(newVolume, false);
-    }, [volume, isMuted, screenReader]);
-    const volumeDown = useCallback(() => {
-        if (!videoRef.current)
-            return;
-        const newVolume = Math.max(volume - 0.1, 0);
-        setVolume(newVolume);
-        videoRef.current.volume = newVolume;
-        if (isMuted) {
-            setIsMuted(false);
-            videoRef.current.muted = false;
-        }
-        screenReader.announceVolume(newVolume, false);
-    }, [volume, isMuted, screenReader]);
-    const toggleMute = useCallback(() => {
-        if (!videoRef.current)
-            return;
-        const newMuted = !isMuted;
-        setIsMuted(newMuted);
-        videoRef.current.muted = newMuted;
-        screenReader.announceVolume(volume, newMuted);
-    }, [isMuted, volume, screenReader]);
-    const toggleFullscreen = useCallback(async () => {
-        if (!containerRef.current)
-            return;
-        try {
-            if (!isFullscreen) {
-                if (containerRef.current.requestFullscreen) {
-                    await containerRef.current.requestFullscreen();
-                }
-            }
-            else {
-                if (document.exitFullscreen) {
-                    await document.exitFullscreen();
-                }
-            }
-        }
-        catch (error) {
-            console.error('Fullscreen toggle failed:', error);
-        }
-    }, [isFullscreen]);
-    const showHelp = useCallback(() => {
-        setShowKeyboardHelp(true);
-    }, []);
-    // Create keyboard shortcuts
-    const keyboardShortcuts = createMediaKeyboardShortcuts({
-        play: () => videoRef.current?.play(),
-        pause: () => videoRef.current?.pause(),
-        togglePlayPause,
-        seekForward,
-        seekBackward,
-        volumeUp,
-        volumeDown,
-        toggleMute,
-        toggleFullscreen,
-        showHelp: showKeyboardHelpButton ? showHelp : undefined
-    });
-    // Enable keyboard shortcuts
-    const { shortcuts } = useKeyboardShortcuts({
-        shortcuts: enableKeyboardShortcuts ? keyboardShortcuts : [],
-        enabled: enableKeyboardShortcuts,
-        target: containerRef.current
-    });
-    // Auto-hide controls logic
-    const resetHideTimer = useCallback(() => {
-        if (!autoHideControls)
-            return;
-        if (hideTimeoutRef.current) {
-            clearTimeout(hideTimeoutRef.current);
-        }
-        setControlsVisible(true);
-        if (!userInteracting && isPlaying && !preferences.prefersReducedMotion) {
-            hideTimeoutRef.current = setTimeout(() => {
-                setControlsVisible(false);
-            }, hideDelay);
-        }
-    }, [autoHideControls, userInteracting, isPlaying, hideDelay, preferences.prefersReducedMotion]);
-    // Handle mouse movement
-    const handleMouseMove = useCallback(() => {
-        resetHideTimer();
-    }, [resetHideTimer]);
-    // Handle mouse enter/leave
-    const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-        setControlsVisible(true);
-        if (hideTimeoutRef.current) {
-            clearTimeout(hideTimeoutRef.current);
-        }
-    }, []);
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-        if (isPlaying && autoHideControls && !userInteracting) {
-            hideTimeoutRef.current = setTimeout(() => {
-                setControlsVisible(false);
-            }, 500);
-        }
-    }, [isPlaying, autoHideControls, userInteracting]);
-    // Handle user interaction
-    const handleUserInteractionStart = useCallback(() => {
-        setUserInteracting(true);
-        setControlsVisible(true);
-        if (hideTimeoutRef.current) {
-            clearTimeout(hideTimeoutRef.current);
-        }
-    }, []);
-    const handleUserInteractionEnd = useCallback(() => {
-        setUserInteracting(false);
-        resetHideTimer();
-    }, [resetHideTimer]);
-    // Video event handlers
-    const handlePlayStateChange = useCallback((playing) => {
-        setIsPlaying(playing);
-        screenReader.announcePlaybackState(playing);
-        if (playing) {
-            onPlay?.();
-            resetHideTimer();
-        }
-        else {
-            onPause?.();
-            setControlsVisible(true);
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-            }
-        }
-    }, [onPlay, onPause, resetHideTimer, screenReader]);
-    const handleTimeUpdate = useCallback((time) => {
-        setCurrentTime(time);
-        onTimeUpdate?.(time);
-    }, [onTimeUpdate]);
-    const handleLoadedMetadata = useCallback((event) => {
-        const video = event.currentTarget;
-        setDuration(video.duration);
-        setIsLoading(false);
-    }, []);
-    const handleLoadStart = useCallback(() => {
-        setIsLoading(true);
-        setError(null);
-        screenReader.announceLoading(true);
-    }, [screenReader]);
-    const handleLoadedData = useCallback(() => {
-        setIsLoading(false);
-        screenReader.announceLoading(false);
-    }, [screenReader]);
-    const handleError = useCallback((e) => {
-        setIsLoading(false);
-        setError(e.message || "An error occurred");
-        screenReader.announceError(e.message || "An error occurred");
-        onError?.(e);
-    }, [onError, screenReader]);
-    const handleVolumeChange = useCallback((event) => {
-        const video = event.currentTarget;
-        const newVolume = video.volume;
-        const newMuted = video.muted;
-        setVolume(newVolume);
-        setIsMuted(newMuted);
-        onVolumeChange?.(newVolume);
-    }, [onVolumeChange]);
-    // Fullscreen change handler
-    useEffect(() => {
-        const handleFullscreenChange = () => {
-            const isCurrentlyFullscreen = !!document.fullscreenElement;
-            setIsFullscreen(isCurrentlyFullscreen);
-            screenReader.announceFullscreen(isCurrentlyFullscreen);
-        };
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        return () => {
-            document.removeEventListener('fullscreenchange', handleFullscreenChange);
-        };
-    }, [screenReader]);
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Determine video source
-    const videoSrc = qualities && qualities.length > 0
-        ? qualities.find(q => q.default)?.src || qualities[0]?.src || (typeof src === 'string' ? src : src[0])
-        : (typeof src === 'string' ? src : src[0]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: containerRef, className: cn("accessible-minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black", `theme-minimal-${theme}`, isFocusVisible && "focus-visible-enabled", className), "data-theme": theme, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "application", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, tabIndex: 0, "data-testid": "media-player", children: _jsxs(MediaPlayerRoot, { className: "relative h-full w-full", ref: focusManager.containerRef, children: [_jsx(MediaPlayerVideo, { ref: videoRef, src: videoSrc, poster: poster, autoPlay: autoPlay, muted: muted, loop: loop, onPlay: () => handlePlayStateChange(true), onPause: () => handlePlayStateChange(false), onEnded: onEnded, onTimeUpdate: (e) => handleTimeUpdate(e.currentTarget.currentTime), onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, onLoadedMetadata: handleLoadedMetadata, onError: (e) => handleError(new Error('Video loading failed')), onVolumeChange: handleVolumeChange, className: "h-full w-full object-contain", "aria-hidden": "true" }), watermark && (_jsx("div", { className: cn("pointer-events-none absolute z-10", {
-                                "top-4 left-4": watermark.position === "top-left",
-                                "top-4 right-4": watermark.position === "top-right",
-                                "bottom-4 left-4": watermark.position === "bottom-left",
-                                "right-4 bottom-4": watermark.position === "bottom-right",
-                            }), style: { opacity: watermark.opacity || 0.7 }, "aria-hidden": "true", children: _jsx("img", { src: watermark.src, alt: "", className: cn("h-auto", {
-                                    "w-12": watermark.size === "small",
-                                    "w-16": watermark.size === "medium",
-                                    "w-24": watermark.size === "large",
-                                }) }) })), _jsx(MinimalOverlay, { isVisible: showCenterPlayButton && (!isPlaying || isLoading), icons: icons, onPlay: togglePlayPause, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner, error: error, theme: theme }), _jsx(MinimalControls, { isVisible: controlsVisible || !autoHideControls || isHovered, isPlaying: isPlaying, volume: volume, isMuted: isMuted, currentTime: currentTime, duration: duration, isFullscreen: isFullscreen, icons: icons, theme: theme, qualities: qualities, showQualitySelector: showQualitySelector, showSpeedControl: showSpeedControl, thumbnails: thumbnails, onPlayPause: togglePlayPause, onVolumeChange: (vol) => {
-                                setVolume(vol);
-                                if (videoRef.current) {
-                                    videoRef.current.volume = vol;
-                                }
-                            }, onMuteToggle: toggleMute, onSeek: (time) => {
-                                if (videoRef.current) {
-                                    videoRef.current.currentTime = time;
-                                    onSeek?.(time);
-                                }
-                            }, onFullscreenToggle: toggleFullscreen, onUserInteractionStart: handleUserInteractionStart, onUserInteractionEnd: handleUserInteractionEnd, showKeyboardHelpButton: showKeyboardHelpButton, onShowKeyboardHelp: showHelp }), showLoadingSpinner && (_jsx(MinimalLoading, { isVisible: isLoading, theme: theme }))] }) }), _jsx(KeyboardHelpOverlay, { isOpen: showKeyboardHelp, onClose: () => setShowKeyboardHelp(false), shortcuts: shortcuts }), _jsxs("div", { id: `${ariaDescribedBy || 'media-player'}-status`, className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: [isLoading && "Loading media", error && `Error: ${error}`, !isLoading && !error && (isPlaying ? "Playing" : "Paused")] }), _jsx("style", { jsx: true, global: true, children: `
-        .accessible-minimal-player {
-          /* Accessibility-specific styles */
-          --media-focus-outline: var(--media-focus-outline-width, 2px) solid #3b82f6;
-          --media-transition: ${preferences.prefersReducedMotion ? 'none' : 'var(--media-transition-duration, 200ms)'};
-        }
-
-        .accessible-minimal-player:focus-visible {
-          outline: var(--media-focus-outline);
-          outline-offset: 2px;
-        }
-
-        .accessible-minimal-player .focus-visible-enabled button:focus-visible,
-        .accessible-minimal-player .focus-visible-enabled [role="slider"]:focus-visible {
-          outline: var(--media-focus-outline);
-          outline-offset: 2px;
-        }
-
-        /* High contrast mode support */
-        @media (prefers-contrast: high) {
-          .accessible-minimal-player {
-            --media-bg-opacity: 1;
-            --media-border-width: 2px;
-          }
-        }
-
-        /* Reduced motion support */
-        @media (prefers-reduced-motion: reduce) {
-          .accessible-minimal-player * {
-            animation-duration: 0.01ms !important;
-            animation-iteration-count: 1 !important;
-            transition-duration: 0.01ms !important;
-          }
-        }
-
-        /* Screen reader only class */
-        .sr-only {
-          position: absolute;
-          width: 1px;
-          height: 1px;
-          padding: 0;
-          margin: -1px;
-          overflow: hidden;
-          clip: rect(0, 0, 0, 0);
-          white-space: nowrap;
-          border: 0;
-        }
-      ` })] }));
-}