@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,280 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState, useTransition, useOptimistic, useDeferredValue, Suspense, } 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 { PerformanceIndicator } from "../../enhanced/enhanced-controls";
+import { DebugPanel } from "../../enhanced/debug-panel";
+import { useIntelligentPreloading } from "../../../hooks/use-intelligent-preloading";
+import { cn } from "../../../lib/utils";
+import { defaultMinimalIcons } from "../../icons";
+export function EnhancedMinimalMediaPlayer({ 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, 
+// Enhanced features
+enableIntelligentPreloading = true, enablePerformanceMonitoring = process.env.NODE_ENV === 'development', showDebugPanel = false, preloadingStrategy = 'balanced', enableReact19Optimizations = true, }) {
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    // Optimistic state for instant UI updates
+    const optimisticState = useOptimistic({ isPlaying: false, isLoading: false, controlsVisible: true }, (state, update) => ({ ...state, ...update }));
+    // Deferred values for non-critical updates
+    const deferredCurrentTime = useDeferredValue(0);
+    const deferredVolume = useDeferredValue(1);
+    // State management
+    const [mediaState, setMediaState] = useState({
+        isPlaying: false,
+        isLoading: false,
+        error: null,
+        controlsVisible: true,
+        isHovered: false,
+        userInteracting: false,
+    });
+    // Performance metrics
+    const [performanceMetrics, setPerformanceMetrics] = useState({
+        fps: 0,
+        bufferHealth: 0,
+        quality: 0,
+        bandwidth: 0,
+    });
+    // Refs
+    const hideTimeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    const videoRef = useRef(null);
+    const frameCountRef = useRef(0);
+    const lastTimeRef = useRef(performance.now());
+    // Merge default icons with custom icons
+    const icons = { ...defaultMinimalIcons, ...customIcons };
+    // Prepare media sources for preloading
+    const mediaSources = React.useMemo(() => {
+        if (qualities && qualities.length > 0) {
+            return qualities.map(q => ({ src: q.src, type: 'video/mp4' }));
+        }
+        const sources = Array.isArray(src) ? src : [src];
+        return sources.map(s => ({ src: s, type: 'video/mp4' }));
+    }, [src, qualities]);
+    // Intelligent preloading
+    const preloadingControls = useIntelligentPreloading(mediaSources, {
+        trackUserBehavior: enableIntelligentPreloading,
+        adaptToNetwork: true,
+        strategy: preloadingStrategy,
+        maxPreloadItems: 2,
+    });
+    // Auto-hide controls logic
+    const resetHideTimer = useCallback(() => {
+        if (!autoHideControls)
+            return;
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, controlsVisible: true }));
+        });
+        if (!mediaState.userInteracting && mediaState.isPlaying) {
+            hideTimeoutRef.current = setTimeout(() => {
+                startTransition(() => {
+                    setMediaState(prev => ({ ...prev, controlsVisible: false }));
+                });
+            }, hideDelay);
+        }
+    }, [autoHideControls, hideDelay, mediaState.userInteracting, mediaState.isPlaying, startTransition]);
+    // Handle mouse movement
+    const handleMouseMove = useCallback(() => {
+        resetHideTimer();
+    }, [resetHideTimer]);
+    // Handle mouse enter/leave
+    const handleMouseEnter = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isHovered: true, controlsVisible: true }));
+        });
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+    }, [startTransition]);
+    const handleMouseLeave = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isHovered: false }));
+        });
+        if (mediaState.isPlaying && autoHideControls && !mediaState.userInteracting) {
+            hideTimeoutRef.current = setTimeout(() => {
+                startTransition(() => {
+                    setMediaState(prev => ({ ...prev, controlsVisible: false }));
+                });
+            }, 500);
+        }
+    }, [mediaState.isPlaying, autoHideControls, mediaState.userInteracting, startTransition]);
+    // Handle user interaction
+    const handleUserInteractionStart = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, userInteracting: true, controlsVisible: true }));
+        });
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+    }, [startTransition]);
+    const handleUserInteractionEnd = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, userInteracting: false }));
+        });
+        resetHideTimer();
+    }, [resetHideTimer, startTransition]);
+    // Handle play state changes
+    const handlePlayStateChange = useCallback((playing) => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isPlaying: playing }));
+        });
+        if (playing) {
+            onPlay?.();
+            resetHideTimer();
+        }
+        else {
+            onPause?.();
+            startTransition(() => {
+                setMediaState(prev => ({ ...prev, controlsVisible: true }));
+            });
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+        }
+    }, [onPlay, onPause, resetHideTimer, startTransition]);
+    // Handle loading state
+    const handleLoadStart = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isLoading: true, error: null }));
+        });
+    }, [startTransition]);
+    const handleLoadedData = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isLoading: false }));
+        });
+    }, [startTransition]);
+    // Handle errors
+    const handleError = useCallback((e) => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isLoading: false, error: e.message || "An error occurred" }));
+        });
+        onError?.(e);
+    }, [onError, startTransition]);
+    // Performance monitoring
+    useEffect(() => {
+        if (!enablePerformanceMonitoring)
+            return;
+        const measureFPS = () => {
+            frameCountRef.current++;
+            const currentTime = performance.now();
+            if (currentTime - lastTimeRef.current >= 1000) {
+                const fps = Math.round((frameCountRef.current * 1000) / (currentTime - lastTimeRef.current));
+                startTransition(() => {
+                    setPerformanceMetrics(prev => ({ ...prev, fps }));
+                });
+                frameCountRef.current = 0;
+                lastTimeRef.current = currentTime;
+            }
+            if (videoRef.current && !videoRef.current.paused) {
+                requestAnimationFrame(measureFPS);
+            }
+        };
+        if (videoRef.current) {
+            videoRef.current.addEventListener('play', measureFPS);
+        }
+        return () => {
+            if (videoRef.current) {
+                videoRef.current.removeEventListener('play', measureFPS);
+            }
+        };
+    }, [enablePerformanceMonitoring, startTransition]);
+    // Buffer health monitoring
+    useEffect(() => {
+        if (!enablePerformanceMonitoring || !videoRef.current)
+            return;
+        const updateBufferHealth = () => {
+            if (videoRef.current) {
+                const buffered = videoRef.current.buffered;
+                const currentTime = videoRef.current.currentTime;
+                let bufferHealth = 0;
+                for (let i = 0; i < buffered.length; i++) {
+                    const start = buffered.start(i);
+                    const end = buffered.end(i);
+                    if (start <= currentTime && end > currentTime) {
+                        bufferHealth = end - currentTime;
+                        break;
+                    }
+                }
+                startTransition(() => {
+                    setPerformanceMetrics(prev => ({ ...prev, bufferHealth }));
+                });
+            }
+        };
+        const interval = setInterval(updateBufferHealth, 500);
+        return () => clearInterval(interval);
+    }, [enablePerformanceMonitoring, startTransition]);
+    // 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]);
+    // Determine current quality for performance display
+    const currentQuality = React.useMemo(() => {
+        if (!qualities || !videoRef.current)
+            return 0;
+        const currentSrc = videoRef.current.currentSrc;
+        const currentQuality = qualities.find(q => q.src === currentSrc || q.src.includes(currentSrc));
+        return parseInt(currentQuality?.quality.replace('p', '')) || 0;
+    }, [qualities, videoRef.current?.currentSrc]);
+    return (_jsxs("div", { ref: containerRef, className: cn("enhanced-minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black", `theme-minimal-${theme}`, className), "data-theme": theme, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(MediaPlayerRoot, { className: "relative h-full w-full", autoHide: false, enableGestures: true, enableMobileOptimizations: true, children: [enableIntelligentPreloading && (_jsx(Suspense, { fallback: null, children: _jsx("div", { className: "pointer-events-none absolute inset-0 z-10" }) })), _jsx(MediaPlayerVideo, { ref: videoRef, src: videoSrc, poster: poster, autoPlay: autoPlay, muted: muted, loop: loop, playsInline: true, crossOrigin: "anonymous", onPlay: () => handlePlayStateChange(true), onPause: () => handlePlayStateChange(false), onEnded: onEnded, onTimeUpdate: (e) => {
+                            const video = e.currentTarget;
+                            onTimeUpdate?.(deferredCurrentTime || video.currentTime);
+                        }, onVolumeChange: (e) => {
+                            const video = e.currentTarget;
+                            onVolumeChange?.(deferredVolume || video.volume);
+                        }, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, onError: (e) => handleError(new Error("Failed to load video")) }), showLoadingSpinner && (mediaState.isLoading || isPending) && (_jsx(MinimalLoading, { icon: icons.spinner })), mediaState.error && (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/80", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mb-4 text-red-500", children: _jsx("svg", { className: "mx-auto h-12 w-12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "mb-2 text-lg text-white", children: "Playback Error" }), _jsx("p", { className: "text-gray-400 text-sm", children: mediaState.error })] }) })), watermark && (_jsx("div", { className: cn("pointer-events-none absolute z-20", {
+                            "top-4 left-4": watermark.position === "top-left",
+                            "top-4 right-4": watermark.position === "top-right",
+                            "bottom-16 left-4": watermark.position === "bottom-left",
+                            "right-4 bottom-16": watermark.position === "bottom-right",
+                        }), style: { opacity: watermark.opacity || 0.7 }, children: _jsx("img", { src: watermark.src, alt: "", className: cn("object-contain", {
+                                "h-8": watermark.size === "small",
+                                "h-12": watermark.size === "medium" || !watermark.size,
+                                "h-16": watermark.size === "large",
+                            }) }) })), showCenterPlayButton && !mediaState.isPlaying && !mediaState.isLoading && (_jsx(MinimalOverlay, { visible: true, showCenterButton: true, isPlaying: mediaState.isPlaying, icons: icons, onPlayPause: () => {
+                            const video = containerRef.current?.querySelector("video");
+                            if (video) {
+                                if (mediaState.isPlaying) {
+                                    video.pause();
+                                }
+                                else {
+                                    video.play();
+                                }
+                            }
+                        } })), _jsx(MinimalControls, { visible: mediaState.controlsVisible || !mediaState.isPlaying || mediaState.isHovered, icons: icons, isPlaying: mediaState.isPlaying, showQualitySelector: showQualitySelector, showSpeedControl: showSpeedControl, qualities: qualities, thumbnails: thumbnails, onUserInteractionStart: handleUserInteractionStart, onUserInteractionEnd: handleUserInteractionEnd, onSeek: onSeek }), enablePerformanceMonitoring && (_jsx("div", { className: "absolute top-2 left-2 z-30", children: _jsx(PerformanceIndicator, { metrics: {
+                                fps: performanceMetrics.fps,
+                                bufferHealth: performanceMetrics.bufferHealth,
+                                quality: currentQuality,
+                                bandwidth: performanceMetrics.bandwidth,
+                            }, className: "text-white/60 text-xs" }) }))] }), showDebugPanel && (_jsx(DebugPanel, { performanceMetrics: {
+                    fps: performanceMetrics.fps,
+                    bufferHealth: performanceMetrics.bufferHealth,
+                    networkBandwidth: performanceMetrics.bandwidth,
+                }, playbackState: {
+                    currentTime: deferredCurrentTime,
+                    duration: videoRef.current?.duration || 0,
+                    volume: deferredVolume,
+                    isPlaying: mediaState.isPlaying,
+                    quality: currentQuality,
+                    isBuffering: mediaState.isLoading || isPending,
+                }, preloadingStats: {
+                    preloadedItems: preloadingControls.getStats().preloadedItems,
+                    engagementScore: preloadingControls.getStats().engagementScore,
+                    queueLength: preloadingControls.getStats().queueLength,
+                    hitRate: preloadingControls.getStats().hitRate,
+                    totalSaved: preloadingControls.getStats().totalSaved,
+                }, position: "top-right", title: "Enhanced Minimal Player Debug" }))] }));
+}
+export default EnhancedMinimalMediaPlayer;

package/src/components/variants/minimal/MinimalControls.d.ts

@@ -0,0 +1,19 @@
+import type { IconSet } from "../../icons";
+export interface MinimalControlsProps {
+    visible: boolean;
+    icons: IconSet;
+    isPlaying: boolean;
+    showQualitySelector?: boolean;
+    showSpeedControl?: boolean;
+    qualities?: Array<{
+        src: string;
+        quality: string;
+        default?: boolean;
+    }>;
+    thumbnails?: string;
+    onUserInteractionStart?: () => void;
+    onUserInteractionEnd?: () => void;
+    onSeek?: (time: number) => void;
+}
+export declare function MinimalControls({ visible, icons, isPlaying, showQualitySelector, showSpeedControl, qualities, thumbnails, onUserInteractionStart, onUserInteractionEnd, onSeek, }: MinimalControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimalControls.d.ts.map

package/src/components/variants/minimal/MinimalControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalControls.d.ts","sourceRoot":"","sources":["MinimalControls.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB,CAAC,CAAA;IACF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,sBAAsB,EACtB,oBAAoB,EACpB,MAAM,GACP,EAAE,oBAAoB,2CAmGtB"}

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerTime } from "../../media-player-time";
+import { MinimalPlayButton } from "./MinimalPlayButton";
+import { MinimalSeekBar } from "./MinimalSeekBar";
+import { MinimalVolumeControl } from "./MinimalVolumeControl";
+import { cn } from "../../../lib/utils";
+export function MinimalControls({ visible, icons, isPlaying, showQualitySelector, showSpeedControl, qualities, thumbnails, onUserInteractionStart, onUserInteractionEnd, onSeek, }) {
+    return (_jsxs("div", { className: cn("minimal-control-bar", "absolute right-0 bottom-0 left-0 z-40", "px-6 py-3 transition-all duration-200", visible ? "minimal-controls-visible" : "minimal-controls-hidden"), "data-hidden": !visible, onMouseDown: onUserInteractionStart, onMouseUp: onUserInteractionEnd, onTouchStart: onUserInteractionStart, onTouchEnd: onUserInteractionEnd, children: [_jsx("div", { className: "mb-2", children: _jsx(MinimalSeekBar, { thumbnails: thumbnails, onSeek: onSeek }) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(MinimalPlayButton, { isPlaying: isPlaying, icons: icons }), _jsx(MinimalVolumeControl, { icons: icons }), _jsxs("div", { className: "minimal-time select-none font-mono text-sm text-white/90", children: [_jsx(MediaPlayerTime, { variant: "current" }), _jsx("span", { className: "mx-1 text-white/60", children: "/" }), _jsx(MediaPlayerTime, { variant: "duration" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [showQualitySelector && qualities && qualities.length > 1 && (_jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Quality", children: qualities.find(q => q.default)?.quality || qualities[0]?.quality || 'Auto' })), showSpeedControl && (_jsx("button", { className: "minimal-btn w-auto px-3 font-medium text-xs", title: "Playback Speed", children: "1x" })), icons.settings && (showQualitySelector || showSpeedControl) && (_jsx("button", { className: "minimal-btn", title: "Settings", children: _jsx(icons.settings, { size: 18 }) })), _jsx("button", { className: "minimal-btn", title: "Toggle Fullscreen", onClick: () => {
+                                    // This would need to be connected to fullscreen logic
+                                    const elem = document.documentElement;
+                                    if (!document.fullscreenElement) {
+                                        elem.requestFullscreen?.();
+                                    }
+                                    else {
+                                        document.exitFullscreen?.();
+                                    }
+                                }, children: document.fullscreenElement ? (icons.exitFullscreen && _jsx(icons.exitFullscreen, { size: 18 })) : (icons.fullscreen && _jsx(icons.fullscreen, { size: 18 })) })] })] })] }));
+}

package/src/components/variants/minimal/MinimalLoading.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface MinimalLoadingProps {
+    icon?: React.FC<{
+        size?: number;
+        className?: string;
+    }>;
+    className?: string;
+}
+export declare function MinimalLoading({ icon: LoadingIcon, className, }: MinimalLoadingProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimalLoading.d.ts.map

package/src/components/variants/minimal/MinimalLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalLoading.d.ts","sourceRoot":"","sources":["MinimalLoading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,WAAW,EACjB,SAAS,GACV,EAAE,mBAAmB,2CAkBrB"}

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+export function MinimalLoading({ icon: LoadingIcon, className, }) {
+    return (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "bg-black/60 backdrop-blur-sm", className), children: _jsx("div", { className: "text-white", children: LoadingIcon ? (_jsx(LoadingIcon, { size: 48, className: "animate-spin" })) : (_jsx("div", { className: "minimal-spinner h-12 w-12 animate-spin rounded-full border-3 border-white/20 border-t-white" })) }) }));
+}

package/src/components/variants/minimal/MinimalMediaPlayer.d.ts

@@ -0,0 +1,38 @@
+import type { IconSet } from "../../icons";
+export interface MinimalMediaPlayerProps {
+    src: string | string[];
+    poster?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    autoHideControls?: boolean;
+    hideDelay?: number;
+    theme?: "dark" | "light" | "transparent";
+    customIcons?: IconSet;
+    showCenterPlayButton?: boolean;
+    showLoadingSpinner?: boolean;
+    className?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+    onVolumeChange?: (volume: number) => void;
+    onSeek?: (time: number) => void;
+    onError?: (error: Error) => void;
+    watermark?: {
+        src: string;
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        opacity?: number;
+        size?: "small" | "medium" | "large";
+    };
+    qualities?: Array<{
+        src: string;
+        quality: string;
+        default?: boolean;
+    }>;
+    showQualitySelector?: boolean;
+    showSpeedControl?: boolean;
+    thumbnails?: string;
+}
+export declare function MinimalMediaPlayer({ src, poster, autoPlay, muted, loop, autoHideControls, hideDelay, theme, customIcons, showCenterPlayButton, showLoadingSpinner, className, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onSeek, onError, watermark, qualities, showQualitySelector, showSpeedControl, thumbnails, }: MinimalMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimalMediaPlayer.d.ts.map

package/src/components/variants/minimal/MinimalMediaPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalMediaPlayer.d.ts","sourceRoot":"","sources":["MinimalMediaPlayer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAG1C,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,CAAA;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE;QACV,GAAG,EAAE,MAAM,CAAA;QACX,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;QACpE,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;KACpC,CAAA;IACD,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB,CAAC,CAAA;IACF,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,MAAM,EACN,QAAgB,EAChB,KAAa,EACb,IAAY,EACZ,gBAAuB,EACvB,SAAgB,EAChB,KAAc,EACd,WAAW,EACX,oBAA2B,EAC3B,kBAAyB,EACzB,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,YAAY,EACZ,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,EACT,mBAA2B,EAC3B,gBAAwB,EACxB,UAAU,GACX,EAAE,uBAAuB,2CAiPzB"}

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

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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";
+export function MinimalMediaPlayer({ 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, }) {
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const hideTimeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const [userInteracting, setUserInteracting] = useState(false);
+    // Merge default icons with custom icons
+    const icons = { ...defaultMinimalIcons, ...customIcons };
+    // Auto-hide controls logic
+    const resetHideTimer = () => {
+        if (!autoHideControls)
+            return;
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+        setControlsVisible(true);
+        if (!userInteracting && isPlaying) {
+            hideTimeoutRef.current = setTimeout(() => {
+                setControlsVisible(false);
+            }, hideDelay);
+        }
+    };
+    // Handle mouse movement
+    const handleMouseMove = () => {
+        resetHideTimer();
+    };
+    // Handle mouse enter/leave
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+        setControlsVisible(true);
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+    };
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+        if (isPlaying && autoHideControls && !userInteracting) {
+            hideTimeoutRef.current = setTimeout(() => {
+                setControlsVisible(false);
+            }, 500);
+        }
+    };
+    // Handle user interaction
+    const handleUserInteractionStart = () => {
+        setUserInteracting(true);
+        setControlsVisible(true);
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+    };
+    const handleUserInteractionEnd = () => {
+        setUserInteracting(false);
+        resetHideTimer();
+    };
+    // Handle play state changes
+    const handlePlayStateChange = (playing) => {
+        setIsPlaying(playing);
+        if (playing) {
+            onPlay?.();
+            resetHideTimer();
+        }
+        else {
+            onPause?.();
+            setControlsVisible(true);
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+        }
+    };
+    // Handle loading state
+    const handleLoadStart = () => {
+        setIsLoading(true);
+        setError(null);
+    };
+    const handleLoadedData = () => {
+        setIsLoading(false);
+    };
+    // Handle errors
+    const handleError = (e) => {
+        setIsLoading(false);
+        setError(e.message || "An error occurred");
+        onError?.(e);
+    };
+    // 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 (_jsx("div", { ref: containerRef, className: cn("minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black", `theme-minimal-${theme}`, className), "data-theme": theme, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsxs(MediaPlayerRoot, { className: "relative h-full w-full", autoHide: false, enableGestures: true, enableMobileOptimizations: true, children: [_jsx(MediaPlayerVideo, { src: videoSrc, poster: poster, autoPlay: autoPlay, muted: muted, loop: loop, playsInline: true, crossOrigin: "anonymous", onPlay: () => handlePlayStateChange(true), onPause: () => handlePlayStateChange(false), onEnded: onEnded, onTimeUpdate: (e) => {
+                        const video = e.currentTarget;
+                        onTimeUpdate?.(video.currentTime);
+                    }, onVolumeChange: (e) => {
+                        const video = e.currentTarget;
+                        onVolumeChange?.(video.volume);
+                    }, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, onError: (e) => handleError(new Error("Failed to load video")) }), showLoadingSpinner && isLoading && (_jsx(MinimalLoading, { icon: icons.spinner })), error && (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/80", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mb-4 text-red-500", children: _jsx("svg", { className: "mx-auto h-12 w-12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "mb-2 text-lg text-white", children: "Playback Error" }), _jsx("p", { className: "text-gray-400 text-sm", children: error })] }) })), watermark && (_jsx("div", { className: cn("pointer-events-none absolute z-20", {
+                        "top-4 left-4": watermark.position === "top-left",
+                        "top-4 right-4": watermark.position === "top-right",
+                        "bottom-16 left-4": watermark.position === "bottom-left",
+                        "right-4 bottom-16": watermark.position === "bottom-right",
+                    }), style: { opacity: watermark.opacity || 0.7 }, children: _jsx("img", { src: watermark.src, alt: "", className: cn("object-contain", {
+                            "h-8": watermark.size === "small",
+                            "h-12": watermark.size === "medium" || !watermark.size,
+                            "h-16": watermark.size === "large",
+                        }) }) })), showCenterPlayButton && !isPlaying && !isLoading && (_jsx(MinimalOverlay, { visible: true, showCenterButton: true, isPlaying: isPlaying, icons: icons, onPlayPause: () => {
+                        const video = containerRef.current?.querySelector("video");
+                        if (video) {
+                            if (isPlaying) {
+                                video.pause();
+                            }
+                            else {
+                                video.play();
+                            }
+                        }
+                    } })), _jsx(MinimalControls, { visible: controlsVisible || !isPlaying || isHovered, icons: icons, isPlaying: isPlaying, showQualitySelector: showQualitySelector, showSpeedControl: showSpeedControl, qualities: qualities, thumbnails: thumbnails, onUserInteractionStart: handleUserInteractionStart, onUserInteractionEnd: handleUserInteractionEnd, onSeek: onSeek })] }) }));
+}

package/src/components/variants/minimal/MinimalOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { IconSet } from "../../icons";
+export interface MinimalOverlayProps {
+    visible: boolean;
+    showCenterButton?: boolean;
+    isPlaying?: boolean;
+    icons: IconSet;
+    onPlayPause?: () => void;
+    className?: string;
+}
+export declare function MinimalOverlay({ visible, showCenterButton, isPlaying, icons, onPlayPause, className, }: MinimalOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MinimalOverlay.d.ts.map

package/src/components/variants/minimal/MinimalOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalOverlay.d.ts","sourceRoot":"","sources":["MinimalOverlay.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,gBAAwB,EACxB,SAAiB,EACjB,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,kDAyCrB"}

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+export function MinimalOverlay({ visible, showCenterButton = false, isPlaying = false, icons, onPlayPause, className, }) {
+    if (!visible || !showCenterButton)
+        return null;
+    const PlayIcon = icons.play;
+    const PauseIcon = icons.pause;
+    if (!PlayIcon || !PauseIcon)
+        return null;
+    return (_jsx("div", { className: cn("absolute inset-0 z-30 flex items-center justify-center", "bg-black/20 transition-opacity duration-200", className), onClick: onPlayPause, children: _jsx("button", { className: cn("minimal-center-play", "h-20 w-20 rounded-full", "flex items-center justify-center", "text-white", "transition-all duration-200", "hover:scale-110", "active:scale-95"), onClick: (e) => {
+                e.stopPropagation();
+                onPlayPause?.();
+            }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? (_jsx(PauseIcon, { size: 48 })) : (_jsx(PlayIcon, { size: 48, className: "ml-1" })) }) }));
+}

package/src/components/variants/minimal/MinimalPlayButton.d.ts

@@ -0,0 +1,9 @@
+import type { IconSet } from "../../icons";
+export interface MinimalPlayButtonProps {
+    isPlaying: boolean;
+    icons: IconSet;
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+}
+export declare function MinimalPlayButton({ isPlaying, icons, size, className, }: MinimalPlayButtonProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MinimalPlayButton.d.ts.map

package/src/components/variants/minimal/MinimalPlayButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalPlayButton.d.ts","sourceRoot":"","sources":["MinimalPlayButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,IAAW,EACX,SAAS,GACV,EAAE,sBAAsB,kDA6CxB"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaDispatch, MediaActionTypes } from "../../../context/media-context";
+import { cn } from "../../../lib/utils";
+export function MinimalPlayButton({ isPlaying, icons, size = "md", className, }) {
+    const dispatch = useMediaDispatch();
+    const handleClick = () => {
+        dispatch({
+            type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+        });
+    };
+    const sizeClasses = {
+        sm: "h-10 w-10",
+        md: "h-12 w-12 minimal-btn",
+        lg: "h-16 w-16 minimal-btn-lg",
+        xl: "h-20 w-20 minimal-btn-lg",
+    };
+    const iconSizes = {
+        sm: 27,
+        md: 30,
+        lg: 36,
+        xl: 42,
+    };
+    const PlayIcon = icons.play;
+    const PauseIcon = icons.pause;
+    if (!PlayIcon || !PauseIcon)
+        return null;
+    return (_jsx("button", { className: cn("minimal-btn", sizeClasses[size], className), onClick: handleClick, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? (_jsx(PauseIcon, { size: iconSizes[size] })) : (_jsx(PlayIcon, { size: iconSizes[size] })) }));
+}

package/src/components/variants/minimal/MinimalSeekBar.d.ts

@@ -0,0 +1,7 @@
+export interface MinimalSeekBarProps {
+    thumbnails?: string;
+    onSeek?: (time: number) => void;
+    className?: string;
+}
+export declare function MinimalSeekBar({ thumbnails, onSeek, className, }: MinimalSeekBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimalSeekBar.d.ts.map

package/src/components/variants/minimal/MinimalSeekBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalSeekBar.d.ts","sourceRoot":"","sources":["MinimalSeekBar.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,mBAAmB,2CAoIrB"}