@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/adapters/videojs-adapter.js

@@ -0,0 +1,350 @@
+"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.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    loadingText?: string;
+    gifSrc?: string;
+    showFallback?: boolean;
+}
+export declare function AnimateLoading({ loadingText, gifSrc, showFallback, className, ...props }: AnimateLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimateLoading.d.ts.map

package/src/components/AnimateLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateLoading.d.ts","sourceRoot":"","sources":["AnimateLoading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAiBlD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAA0B,EAC1B,MAAM,EACN,YAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAmFrB"}

package/src/components/AnimateLoading.js

@@ -0,0 +1,41 @@
+"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/AnimateLoading.tsx

@@ -11,7 +11,7 @@ let monaLoadingGif: string | undefined
 import monaGifSrc from "../assets/mona-loading.gif"
 
 try {
-  monaLoadingGif = monaGifSrc
+  monaLoadingGif = (monaGifSrc as unknown) as string
 } catch {
   // GIF import failed, will use fallback
   monaLoadingGif = undefined

package/src/components/LoadingState.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots";
+export type LoadingContext = "initial" | "seeking" | "buffering";
+export type LoadingSize = "sm" | "md" | "lg" | "xl";
+export interface LoadingStateProps {
+    variant?: LoadingVariant;
+    context?: LoadingContext;
+    size?: LoadingSize;
+    color?: string;
+    message?: string;
+    showMessage?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const AnimateLoadingWrapper: ({ context, message, className, textSize }: {
+    context?: LoadingContext;
+    message?: string;
+    className?: string;
+    textSize?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingState: ({ variant, context, size, color, message, showMessage, className, style }: LoadingStateProps) => import("react/jsx-runtime").JSX.Element;
+export interface CustomLoadingProps {
+    children: React.ReactNode;
+    context?: LoadingContext;
+    className?: string;
+}
+export declare const CustomLoading: ({ children, context, className }: CustomLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingPresets: {
+    Initial: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
+    Seeking: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
+    Buffering: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=LoadingState.d.ts.map

package/src/components/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["LoadingState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAA;AACxE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AAChE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnD,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAyCD,eAAO,MAAM,qBAAqB,GAAkC,2CAKjE;IACD,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,4CA0BA,CAAA;AAED,eAAO,MAAM,YAAY,GAAyB,2EAS/C,iBAAiB,4CA0GnB,CAAA;AAGD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,GAA0B,kCAIjD,kBAAkB,4CAQpB,CAAA;AAGD,eAAO,MAAM,cAAc;qBACR,OAAO,CAAC,iBAAiB,CAAC;qBAG1B,OAAO,CAAC,iBAAiB,CAAC;uBAGxB,OAAO,CAAC,iBAAiB,CAAC;CAG9C,CAAA"}

package/src/components/LoadingState.js

@@ -0,0 +1,111 @@
+"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.d.ts

@@ -0,0 +1,17 @@
+interface KeyboardHelpOverlayProps {
+    isOpen: boolean;
+    onClose: () => void;
+    shortcuts: Array<{
+        key: string;
+        description: string;
+        modifiers?: {
+            ctrl?: boolean;
+            alt?: boolean;
+            shift?: boolean;
+        };
+    }>;
+    className?: string;
+}
+export declare function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }: KeyboardHelpOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=keyboard-help-overlay.d.ts.map

package/src/components/accessibility/keyboard-help-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-help-overlay.d.ts","sourceRoot":"","sources":["keyboard-help-overlay.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAA;QACX,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE;YACV,IAAI,CAAC,EAAE,OAAO,CAAA;YACd,GAAG,CAAC,EAAE,OAAO,CAAA;YACb,KAAK,CAAC,EAAE,OAAO,CAAA;SAChB,CAAA;KACF,CAAC,CAAA;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,EACV,EAAE,wBAAwB,kDA4L1B"}