@therealtinhtute/baroiplayer 1.0.5 → 1.0.7

package/src/adapters/videojs-adapter.js

@@ -1,350 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import "../styles/videojs.css";
-import { MediaActionTypes, useMediaContext, useMediaDispatch } from "../context/media-context";
-import { cn } from "../lib/utils";
-// Lazy load Video.js and HLS.js for better performance
-let videojs = null;
-let Hls = null;
-async function loadVideoJS() {
-    if (!videojs) {
-        const [videojsModule, hlsModule] = await Promise.all([
-            import("video.js"),
-            import("hls.js")
-        ]);
-        videojs = videojsModule.default;
-        Hls = hlsModule.default;
-        // Import plugins after Video.js is loaded
-        await Promise.all([
-            // @ts-ignore
-            import("@videojs/http-streaming"),
-            // @ts-ignore
-            import("videojs-contrib-quality-levels"),
-            // @ts-ignore
-            import("videojs-hls-quality-selector")
-        ]);
-    }
-    return { videojs, Hls };
-}
-export function VideoJSAdapter({ sources, poster, textTracks = [], autoplay = false, muted = false, controls = false, preload = "metadata", fluid = true, responsive = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, onReady, onError, hlsConfig = {}, enableQualitySelector = true, enableSubtitles = true }) {
-    const videoRef = useRef(null);
-    const playerRef = useRef(null);
-    const hlsRef = useRef(null); // HLS.js instance
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const context = useMediaContext();
-    const dispatch = useMediaDispatch();
-    // Initialize Video.js player
-    const initializePlayer = async () => {
-        if (!videoRef.current || playerRef.current)
-            return;
-        try {
-            setIsLoading(true);
-            const { videojs, Hls: HlsLib } = await loadVideoJS();
-            // Check if we need HLS.js (for non-Safari browsers)
-            const needsHlsJs = sources.some(s => s.type === "application/x-mpegURL") &&
-                !videoRef.current.canPlayType("application/vnd.apple.mpegurl");
-            // Video.js options
-            const options = {
-                autoplay,
-                muted,
-                controls,
-                preload,
-                fluid,
-                responsive,
-                playbackRates,
-                sources: needsHlsJs ? [] : sources, // Don't set sources if using HLS.js
-                poster,
-                html5: {
-                    vhs: {
-                        // Video.js HTTP Streaming options
-                        overrideNative: !videoRef.current.canPlayType("application/vnd.apple.mpegurl"),
-                        enableLowInitialPlaylist: true,
-                        fastQualityChange: true,
-                        handleManifestRedirects: true
-                    }
-                }
-            };
-            // Create Video.js player
-            const player = videojs(videoRef.current, options, function () {
-                console.log("Video.js player ready");
-            });
-            playerRef.current = player;
-            // Add text tracks
-            textTracks.forEach(track => {
-                player.addRemoteTextTrack({
-                    kind: track.kind,
-                    src: track.src,
-                    srclang: track.srclang,
-                    label: track.label,
-                    default: track.default
-                }, false);
-            });
-            // Setup HLS.js for non-Safari browsers if needed
-            if (needsHlsJs) {
-                const hlsSource = sources.find(s => s.type === "application/x-mpegURL");
-                if (hlsSource) {
-                    const hls = new HlsLib({
-                        debug: false,
-                        enableWorker: true,
-                        lowLatencyMode: false,
-                        backBufferLength: 30,
-                        maxBufferLength: 30,
-                        maxMaxBufferLength: 600,
-                        maxBufferSize: 60 * 1000 * 1000,
-                        maxBufferHole: 0.1,
-                        highBufferWatchdogPeriod: 2,
-                        // ABR settings
-                        abrEwmaFastLive: 3.0,
-                        abrEwmaSlowLive: 9.0,
-                        abrEwmaFastVoD: 3.0,
-                        abrEwmaSlowVoD: 9.0,
-                        abrEwmaDefaultEstimate: 500000,
-                        abrBandWidthFactor: 0.95,
-                        abrBandWidthUpFactor: 0.7,
-                        abrMaxWithRealBitrate: false,
-                        maxStarvationDelay: 4,
-                        maxLoadingDelay: 4,
-                        capLevelToPlayerSize: true,
-                        capLevelOnFPSDrop: true,
-                        // Subtitle settings
-                        renderTextTracksNatively: false,
-                        subtitlePreference: {
-                            lang: navigator.language.split("-")[0],
-                            forced: false
-                        },
-                        ...hlsConfig
-                    });
-                    hlsRef.current = hls;
-                    // Attach HLS to video element
-                    hls.loadSource(hlsSource.src);
-                    hls.attachMedia(videoRef.current);
-                    // HLS.js event handlers
-                    hls.on(HlsLib.Events.MANIFEST_PARSED, () => {
-                        console.log("HLS manifest parsed", {
-                            levels: hls.levels.map((l) => ({
-                                height: l.height,
-                                bitrate: l.bitrate,
-                                codec: l.codecSet
-                            }))
-                        });
-                        // Add quality levels to Video.js
-                        if (enableQualitySelector && player.qualityLevels) {
-                            const qualityLevels = player.qualityLevels();
-                            hls.levels.forEach((level, index) => {
-                                qualityLevels.addQualityLevel({
-                                    id: index.toString(),
-                                    label: `${level.height}p`,
-                                    width: level.width,
-                                    height: level.height,
-                                    bitrate: level.bitrate,
-                                    enabled: true
-                                });
-                            });
-                        }
-                    });
-                    hls.on(HlsLib.Events.LEVEL_SWITCHED, (_event, data) => {
-                        console.log(`HLS quality switched to level ${data.level}`);
-                        dispatch({
-                            type: MediaActionTypes.SET_QUALITY_LEVEL,
-                            detail: data.level
-                        });
-                    });
-                    hls.on(HlsLib.Events.ERROR, (_event, data) => {
-                        if (data.fatal) {
-                            switch (data.type) {
-                                case HlsLib.ErrorTypes.NETWORK_ERROR:
-                                    console.error("Fatal network error encountered, try to recover");
-                                    hls.startLoad();
-                                    break;
-                                case HlsLib.ErrorTypes.MEDIA_ERROR:
-                                    console.error("Fatal media error encountered, try to recover");
-                                    hls.recoverMediaError();
-                                    break;
-                                default:
-                                    console.error("Fatal error, cannot recover");
-                                    setError("Streaming error occurred");
-                                    onError?.(data);
-                                    hls.destroy();
-                                    break;
-                            }
-                        }
-                    });
-                    // Update bandwidth estimate in context
-                    hls.on(HlsLib.Events.FRAG_LOADED, () => {
-                        const estimate = hls.bandwidthEstimate;
-                        if (estimate) {
-                            dispatch({
-                                type: MediaActionTypes.SET_BANDWIDTH_ESTIMATE,
-                                detail: estimate
-                            });
-                        }
-                    });
-                }
-            }
-            // Enable quality selector plugin
-            if (enableQualitySelector && player.qualityLevels) {
-                ;
-                player.hlsQualitySelector({
-                    displayCurrentQuality: true
-                });
-            }
-            // Video.js event handlers to sync with MediaContext
-            player.on("play", () => {
-                dispatch({ type: MediaActionTypes.PLAY });
-            });
-            player.on("pause", () => {
-                dispatch({ type: MediaActionTypes.PAUSE });
-            });
-            player.on("timeupdate", () => {
-                dispatch({
-                    type: MediaActionTypes.SET_CURRENT_TIME,
-                    detail: player.currentTime() || 0
-                });
-            });
-            player.on("durationchange", () => {
-                dispatch({
-                    type: MediaActionTypes.SET_DURATION,
-                    detail: player.duration() || 0
-                });
-            });
-            player.on("volumechange", () => {
-                dispatch({
-                    type: MediaActionTypes.SET_VOLUME,
-                    detail: player.volume() || 0
-                });
-                dispatch({
-                    type: player.muted() ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE
-                });
-            });
-            player.on("ended", () => {
-                dispatch({ type: MediaActionTypes.PAUSE });
-            });
-            player.on("error", (e) => {
-                const error = player.error();
-                setError(error?.message || "An error occurred");
-                dispatch({
-                    type: MediaActionTypes.SET_ERROR,
-                    detail: error?.message || "Playback error"
-                });
-                onError?.(error);
-            });
-            player.on("loadstart", () => {
-                dispatch({ type: MediaActionTypes.SET_LOADING, detail: true });
-            });
-            player.on("loadeddata", () => {
-                setIsLoading(false);
-                dispatch({ type: MediaActionTypes.SET_LOADING, detail: false });
-            });
-            player.on("waiting", () => {
-                dispatch({ type: MediaActionTypes.SET_BUFFERING, detail: true });
-            });
-            player.on("playing", () => {
-                dispatch({ type: MediaActionTypes.SET_BUFFERING, detail: false });
-            });
-            // Text track changes
-            player.on("texttrackchange", () => {
-                const tracks = player.textTracks();
-                const activeTracks = [];
-                if (tracks && tracks.length) {
-                    for (let i = 0; i < tracks.length; i++) {
-                        const track = tracks[i];
-                        if (track.mode === "showing") {
-                            activeTracks.push({
-                                id: track.id,
-                                label: track.label,
-                                language: track.language,
-                                kind: track.kind
-                            });
-                        }
-                    }
-                }
-                dispatch({
-                    type: MediaActionTypes.SET_ACTIVE_TEXT_TRACKS,
-                    detail: activeTracks
-                });
-            });
-            // Update media ref in context for gesture/keyboard controls
-            if (context.mediaRef) {
-                context.mediaRef.current = videoRef.current;
-            }
-            onReady?.(player);
-            setIsLoading(false);
-        }
-        catch (err) {
-            console.error("Failed to initialize Video.js player:", err);
-            setError("Failed to initialize player");
-            setIsLoading(false);
-            onError?.(err);
-        }
-    };
-    // Cleanup on unmount
-    useEffect(() => {
-        initializePlayer();
-        return () => {
-            if (hlsRef.current) {
-                hlsRef.current.destroy();
-                hlsRef.current = null;
-            }
-            if (playerRef.current) {
-                playerRef.current.dispose();
-                playerRef.current = null;
-            }
-        };
-    }, [initializePlayer]);
-    // Expose player methods to MediaContext
-    useEffect(() => {
-        if (!playerRef.current || !context.mediaRef)
-            return;
-        // Create a proxy object that bridges Video.js methods to native HTMLVideoElement methods
-        const proxyMethods = {
-            play: () => playerRef.current?.play(),
-            pause: () => playerRef.current?.pause(),
-            seekTo: (time) => {
-                if (playerRef.current) {
-                    playerRef.current.currentTime(time);
-                }
-            },
-            setVolume: (volume) => {
-                if (playerRef.current) {
-                    playerRef.current.volume(volume);
-                }
-            },
-            setMuted: (muted) => {
-                if (playerRef.current) {
-                    playerRef.current.muted(muted);
-                }
-            },
-            setQualityLevel: (level) => {
-                if (hlsRef.current) {
-                    hlsRef.current.currentLevel = level;
-                }
-            },
-            getQualityLevels: () => {
-                if (hlsRef.current) {
-                    return hlsRef.current.levels;
-                }
-                return [];
-            },
-            getCurrentQualityLevel: () => {
-                if (hlsRef.current) {
-                    return hlsRef.current.currentLevel;
-                }
-                return -1;
-            },
-            getBandwidthEstimate: () => {
-                if (hlsRef.current) {
-                    return hlsRef.current.bandwidthEstimate;
-                }
-                return 0;
-            }
-        };
-        // Attach proxy methods to video element for external access
-        if (videoRef.current) {
-            Object.assign(videoRef.current, proxyMethods);
-        }
-    }, [context.mediaRef]);
-    return (_jsxs("div", { className: cn("relative h-full w-full", className), children: [_jsx("video", { ref: videoRef, className: "video-js vjs-default-skin vjs-big-play-centered h-full w-full", playsInline: true }), isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: _jsx("div", { className: "text-white", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-white border-b-2" }) }) })), error && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80", children: _jsxs("div", { className: "text-center text-white", children: [_jsx("p", { className: "font-semibold text-lg", children: "Error" }), _jsx("p", { className: "text-sm opacity-80", children: error })] }) }))] }));
-}
-VideoJSAdapter.displayName = "VideoJSAdapter";

package/src/components/AnimateLoading.js

@@ -1,41 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "../lib/utils";
-// Try to import the GIF using direct import for better compatibility
-let monaLoadingGif;
-// Import the GIF statically for bundling - this will be handled by Vite
-// @ts-ignore - Vite handles this import
-import monaGifSrc from "../assets/mona-loading.gif";
-try {
-    monaLoadingGif = monaGifSrc;
-}
-catch {
-    // GIF import failed, will use fallback
-    monaLoadingGif = undefined;
-}
-export function AnimateLoading({ loadingText = "Loading...", gifSrc, showFallback = true, className, ...props }) {
-    const [imageError, setImageError] = useState(false);
-    const [imageLoaded, setImageLoaded] = useState(false);
-    // Try multiple paths for the GIF
-    const gifPaths = [
-        gifSrc,
-        monaLoadingGif,
-        "/mona-loading.gif",
-        "./mona-loading.gif",
-        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // 1x1 transparent gif as last resort
-    ].filter(Boolean);
-    const [currentGifIndex, setCurrentGifIndex] = useState(0);
-    const currentGif = gifPaths[currentGifIndex];
-    const handleImageError = () => {
-        if (currentGifIndex < gifPaths.length - 1) {
-            setCurrentGifIndex(currentGifIndex + 1);
-        }
-        else {
-            setImageError(true);
-        }
-    };
-    // Enhanced fallback CSS animation
-    const FallbackAnimation = () => (_jsxs("div", { className: "relative h-12 w-12", children: [_jsx("div", { className: "absolute inset-0 animate-spin rounded-full bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 opacity-75" }), _jsx("div", { className: "absolute inset-1 rounded-full bg-black/90" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "h-8 w-8 rounded-full border-2 border-white/20" }), _jsx("div", { className: "absolute inset-0 h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-cyan-400" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-cyan-400" }) })] }) })] }));
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center space-y-2 rounded py-2 text-white", className), ...props, children: [(!imageLoaded || imageError) && showFallback && (_jsx(FallbackAnimation, {})), !imageError && currentGif && (_jsx("img", { alt: "loading", height: 50, width: 50, src: currentGif, onError: handleImageError, onLoad: () => setImageLoaded(true), className: cn("object-contain", !imageLoaded && "hidden"), style: { display: imageLoaded ? 'block' : 'none' } })), _jsx("span", { className: "mt-2 text-sm tracking-wider", children: loadingText })] }));
-}

package/src/components/LoadingState.js

@@ -1,111 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils";
-import { AnimateLoading } from "./AnimateLoading";
-const sizeMap = {
-    sm: {
-        container: "h-8 w-8",
-        spinner: "h-6 w-6 border-2",
-        dots: "h-1.5 w-1.5"
-    },
-    md: {
-        container: "h-12 w-12",
-        spinner: "h-10 w-10 border-3",
-        dots: "h-2 w-2"
-    },
-    lg: {
-        container: "h-16 w-16",
-        spinner: "h-14 w-14 border-4",
-        dots: "h-2.5 w-2.5"
-    },
-    xl: {
-        container: "h-20 w-20",
-        spinner: "h-18 w-18 border-4",
-        dots: "h-3 w-3"
-    }
-};
-const contextStyles = {
-    initial: {
-        wrapper: "absolute inset-0 z-50 flex items-center justify-center",
-        background: "bg-black/80"
-    },
-    seeking: {
-        wrapper: "absolute inset-0 z-40 flex items-center justify-center",
-        background: "bg-black/40"
-    },
-    buffering: {
-        wrapper: "absolute inset-0 z-45 flex items-center justify-center",
-        background: "bg-black/60"
-    }
-};
-// Default AnimateLoading wrapper component
-export const AnimateLoadingWrapper = function AnimateLoadingWrapper({ context = "initial", message, className, textSize = "text-sm" }) {
-    const contextStyle = contextStyles[context];
-    const getLoadingText = () => {
-        if (message)
-            return message;
-        switch (context) {
-            case "initial":
-                return "Loading video...";
-            case "seeking":
-                return "Seeking...";
-            case "buffering":
-                return "Buffering...";
-            default:
-                return "Loading...";
-        }
-    };
-    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background, className), children: _jsx(AnimateLoading, { loadingText: getLoadingText(), className: cn("text-white", textSize) }) }));
-};
-export const LoadingState = function LoadingState({ variant = "animate", context = "initial", size = "md", color, message, showMessage = true, className, style }) {
-    const sizes = sizeMap[size];
-    const contextStyle = contextStyles[context];
-    // Use AnimateLoading as default
-    if (variant === "animate") {
-        return (_jsx(AnimateLoadingWrapper, { context: context, message: message, className: className, textSize: size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm" }));
-    }
-    const renderLoadingIndicator = () => {
-        switch (variant) {
-            case "spinner":
-                return (_jsx("div", { className: cn("minimal-loading-spinner animate-spin rounded-full", "border-white/20 border-t-cyan-500", sizes.spinner, className), style: {
-                        borderTopColor: color || undefined,
-                        ...style
-                    } }));
-            case "dots":
-                return (_jsx("div", { className: "flex items-center gap-1", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn("minimal-loading-dot rounded-full bg-cyan-500", sizes.dots, className), style: {
-                            backgroundColor: color || undefined,
-                            animationDelay: `${i * 150}ms`,
-                            ...style
-                        } }, i))) }));
-            case "skeleton":
-                return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("div", { className: "minimal-loading-skeleton h-4 w-32 rounded bg-white/10" }), _jsx("div", { className: "minimal-loading-skeleton h-3 w-24 rounded bg-white/10" }), _jsx("div", { className: "minimal-loading-skeleton h-3 w-28 rounded bg-white/10" })] }));
-            default:
-                return null;
-        }
-    };
-    const getMessage = () => {
-        if (message)
-            return message;
-        switch (context) {
-            case "initial":
-                return "Loading video...";
-            case "seeking":
-                return "Seeking...";
-            case "buffering":
-                return "Buffering...";
-            default:
-                return "Loading...";
-        }
-    };
-    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background), children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: cn(sizes.container, "flex items-center justify-center"), children: renderLoadingIndicator() }), showMessage && (_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium text-sm text-white/90", children: getMessage() }), context === "buffering" && (_jsx("p", { className: "mt-1 text-white/60 text-xs", children: "Please wait..." }))] }))] }) }));
-};
-export const CustomLoading = function CustomLoading({ children, context = "initial", className }) {
-    const contextStyle = contextStyles[context];
-    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background, className), children: children }));
-};
-// Export default presets
-export const LoadingPresets = {
-    Initial: (props) => (_jsx(LoadingState, { variant: "animate", context: "initial", size: "md", ...props })),
-    Seeking: (props) => (_jsx(LoadingState, { variant: "animate", context: "seeking", size: "sm", ...props })),
-    Buffering: (props) => (_jsx(LoadingState, { variant: "animate", context: "buffering", size: "sm", ...props }))
-};

package/src/components/accessibility/keyboard-help-overlay.js

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { cn } from '../../lib/utils';
-export function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }) {
-    // Handle escape key to close
-    React.useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, onClose]);
-    // Focus trap within the overlay
-    React.useEffect(() => {
-        if (!isOpen)
-            return;
-        const overlay = document.querySelector('[data-keyboard-help-overlay]');
-        if (!overlay)
-            return;
-        const focusableElements = Array.from(overlay.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
-        if (focusableElements.length === 0)
-            return;
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-        // Focus the close button initially
-        const closeButton = overlay.querySelector('[data-close-button]');
-        closeButton?.focus();
-        const handleTabKey = (e) => {
-            if (e.key !== 'Tab')
-                return;
-            if (e.shiftKey) {
-                if (document.activeElement === firstElement) {
-                    e.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else {
-                if (document.activeElement === lastElement) {
-                    e.preventDefault();
-                    firstElement.focus();
-                }
-            }
-        };
-        document.addEventListener('keydown', handleTabKey);
-        return () => document.removeEventListener('keydown', handleTabKey);
-    }, [isOpen]);
-    if (!isOpen)
-        return null;
-    const formatKey = (key, modifiers) => {
-        const parts = [];
-        if (modifiers?.ctrl)
-            parts.push('Ctrl');
-        if (modifiers?.alt)
-            parts.push('Alt');
-        if (modifiers?.shift)
-            parts.push('Shift');
-        // Format special keys
-        let keyDisplay = key;
-        switch (key) {
-            case ' ':
-                keyDisplay = 'Space';
-                break;
-            case 'ArrowUp':
-                keyDisplay = '↑';
-                break;
-            case 'ArrowDown':
-                keyDisplay = '↓';
-                break;
-            case 'ArrowLeft':
-                keyDisplay = '←';
-                break;
-            case 'ArrowRight':
-                keyDisplay = '→';
-                break;
-            default:
-                keyDisplay = key.toUpperCase();
-        }
-        parts.push(keyDisplay);
-        return parts.join(' + ');
-    };
-    return (_jsx("div", { className: cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50', 'backdrop-blur-sm', className), "data-keyboard-help-overlay": true, onClick: (e) => {
-            if (e.target === e.currentTarget) {
-                onClose();
-            }
-        }, role: "dialog", "aria-modal": "true", "aria-labelledby": "keyboard-help-title", "aria-describedby": "keyboard-help-description", children: _jsxs("div", { className: cn('w-full max-w-md rounded-lg bg-white p-6 shadow-xl', 'dark:bg-gray-900 dark:text-white', 'focus-within:outline-none', "fade-in-0 zoom-in-95 animate-in duration-200"), children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h2", { id: "keyboard-help-title", className: "font-semibold text-lg", children: "Keyboard Shortcuts" }), _jsx("button", { "data-close-button": true, onClick: onClose, className: cn('rounded-md p-2 text-gray-500 transition-colors', 'hover:bg-gray-100 hover:text-gray-700', 'focus:outline-none focus:ring-2 focus:ring-blue-500', 'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'), "aria-label": "Close keyboard shortcuts help", children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("p", { id: "keyboard-help-description", className: "mb-4 text-gray-600 text-sm dark:text-gray-400", children: "Use these keyboard shortcuts to control the media player:" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: _jsx("dl", { className: "space-y-3", children: shortcuts.map(({ key, description, modifiers }, index) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-gray-600 text-sm dark:text-gray-400", children: description }), _jsx("dd", { children: _jsx("kbd", { className: cn("inline-flex items-center rounded px-2 py-1 font-mono text-xs", "border border-gray-300 bg-gray-100 text-gray-800", "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"), children: formatKey(key, modifiers) }) })] }, `${key}-${index}`))) }) }), _jsxs("div", { className: "mt-4 text-gray-500 text-xs dark:text-gray-400", children: ["Press ", _jsx("kbd", { className: "rounded bg-gray-100 px-1 dark:bg-gray-800", children: "Esc" }), " to close this help"] })] }) }));
-}

package/src/components/audio-player.js

@@ -1,31 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useKeyboardControls } from "../hooks/use-keyboard-controls";
-import { useMediaPlayer } from "../hooks/use-media-player";
-import { cn } from "../lib/utils";
-export const AudioPlayer = forwardRef(({ src, className, children, keyboardControls = true, showControls = true, customControls = false, ...options }, ref) => {
-    const { state, controls, mediaRef, containerRef } = useMediaPlayer({
-        src,
-        ...options
-    });
-    useKeyboardControls({
-        enabled: keyboardControls,
-        state,
-        controls
-    });
-    const renderSources = () => {
-        if (Array.isArray(src)) {
-            return src.map((source, index) => _jsx("source", { src: source }, index));
-        }
-        return null;
-    };
-    const audioProps = {
-        ref: mediaRef,
-        controls: showControls && !customControls,
-        className: "w-full",
-        ...(Array.isArray(src) ? {} : { src })
-    };
-    return (_jsxs("div", { ref: ref || containerRef, className: cn("relative", "focus-within:outline-none", className), tabIndex: 0, children: [_jsxs("audio", { ...audioProps, children: [Array.isArray(src) && renderSources(), "Your browser does not support the audio element."] }), state.error && (_jsx("div", { className: "mt-2 rounded-md border border-red-300 bg-red-100 p-3", children: _jsxs("div", { className: "text-red-800", children: [_jsx("p", { className: "font-semibold", children: "Error" }), _jsx("p", { className: "text-sm", children: state.error })] }) })), state.isLoading && (_jsx("div", { className: "mt-2 rounded-md border border-gray-300 bg-gray-100 p-3", children: _jsxs("div", { className: "flex items-center space-x-2 text-gray-600", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2" }), _jsx("span", { className: "text-sm", children: "Loading..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "mt-2", children: children({ state, controls }) })), customControls && typeof children !== "function" && _jsx("div", { className: "mt-2", children: children })] }));
-});
-AudioPlayer.displayName = "AudioPlayer";

package/src/components/basic/index.js

@@ -1,29 +0,0 @@
-// Basic Media Player Components
-export { AudioPlayer } from "../audio-player";
-export { MediaPlayer } from "../media-player";
-export { VideoPlayer } from "../video-player";
-export { SimpleVideoPlayer } from "../simple-video-player";
-// Modern React Player
-export { ModernMediaPlayer } from "../react-player-wrapper";
-// Basic UI Components  
-export { FullscreenButton } from "../ui/fullscreen-button";
-export { PlayButton } from "../ui/play-button";
-export { SeekBar } from "../ui/seek-bar";
-export { TimeDisplay } from "../ui/time-display";
-export { VolumeControl } from "../ui/volume-control";
-// DiceUI-style Basic Components
-export { MediaPlayerAudio } from "../media-player-audio";
-export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
-export { MediaPlayerError } from "../media-player-error";
-export { MediaPlayerFullscreen } from "../media-player-fullscreen";
-export { MediaPlayerLoading } from "../media-player-loading";
-export { MediaPlayerPlay } from "../media-player-play";
-export { MediaPlayerRoot } from "../media-player-root";
-export { MediaPlayerSeek } from "../media-player-seek";
-export { MediaPlayerTime } from "../media-player-time";
-export { MediaPlayerTooltip } from "../media-player-tooltip";
-export { MediaPlayerVideo } from "../media-player-video";
-export { MediaPlayerVolume } from "../media-player-volume";
-// Basic Examples
-export { BasicVideoPlayer } from "../examples/basic-video-player";
-export { CustomControlsExample } from "../examples/custom-controls-example";