@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../lib/utils";
+import { SeekBar } from "./SeekBar";
+import { PlaybackControls } from "./PlaybackControls";
+import { VolumeControl } from "./VolumeControl";
+import { TimeDisplay } from "./TimeDisplay";
+import { RightControls } from "./RightControls";
+export const ControlBar = function ControlBar({ controlsVisible, currentTime, duration, isPlaying, volume, isMuted, showVolumeSlider, isFullscreen, showSettings, playbackRate, subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, volumeOrientation = "horizontal", bufferedRanges, isSeeking, onSeek, onTogglePlay, onSeekBackward, onSeekForward, onToggleMute, onVolumeChange, onShowVolumeSlider, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }) {
+    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", controlsVisible ? "minimal-controls-visible" : "minimal-controls-hidden"), children: [_jsx(SeekBar, { currentTime: currentTime, duration: duration, bufferedRanges: bufferedRanges, isSeeking: isSeeking, onSeek: onSeek }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlaybackControls, { isPlaying: isPlaying, onTogglePlay: onTogglePlay, onSeekBackward: onSeekBackward, onSeekForward: onSeekForward }), _jsx(VolumeControl, { volume: volume, isMuted: isMuted, showVolumeSlider: showVolumeSlider, onToggleMute: onToggleMute, onVolumeChange: onVolumeChange, onShowVolumeSlider: onShowVolumeSlider, orientation: volumeOrientation }), _jsx(TimeDisplay, { currentTime: currentTime, duration: duration })] }), _jsx(RightControls, { subtitleSrc: subtitleSrc, subtitlesEnabled: subtitlesEnabled, subtitleTracks: subtitleTracks, currentTrackId: currentTrackId, hasSubtitles: hasSubtitles, subtitleLoadError: subtitleLoadError, isFullscreen: isFullscreen, showSettings: showSettings, playbackRate: playbackRate, onToggleSubtitles: onToggleSubtitles, onSelectSubtitleTrack: onSelectSubtitleTrack, onTakeScreenshot: onTakeScreenshot, onToggleFullscreen: onToggleFullscreen, onToggleSettings: onToggleSettings, onChangePlaybackRate: onChangePlaybackRate })] })] }));
+};

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

@@ -0,0 +1,24 @@
+export interface SubtitleTrack {
+    id: string;
+    label: string;
+    language?: string;
+    src?: string;
+}
+interface EnhancedSettingsMenuProps {
+    showSettings: boolean;
+    playbackRate: number;
+    subtitlesEnabled: boolean;
+    subtitleTracks: SubtitleTrack[];
+    currentSubtitleTrack?: string;
+    subtitleFontSize: "small" | "medium" | "large";
+    hasSubtitles: boolean;
+    subtitleLoadError?: boolean;
+    onToggleSettings: () => void;
+    onChangePlaybackRate: (rate: number) => void;
+    onToggleSubtitles: () => void;
+    onSelectSubtitleTrack?: (trackId: string | null) => void;
+    onChangeSubtitleFontSize: (size: "small" | "medium" | "large") => void;
+}
+export declare const EnhancedSettingsMenu: ({ showSettings, playbackRate, subtitlesEnabled, subtitleTracks, currentSubtitleTrack, subtitleFontSize, hasSubtitles, subtitleLoadError, onToggleSettings, onChangePlaybackRate, onToggleSubtitles, onSelectSubtitleTrack, onChangeSubtitleFontSize }: EnhancedSettingsMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EnhancedSettingsMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedSettingsMenu.d.ts","sourceRoot":"","sources":["EnhancedSettingsMenu.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,UAAU,yBAAyB;IACjC,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxD,wBAAwB,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;CACvE;AAID,eAAO,MAAM,oBAAoB,GAAiC,uPAc/D,yBAAyB,4CA6T3B,CAAA"}

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../../../lib/utils";
+import { defaultMinimalIcons } from "../../../icons";
+export const EnhancedSettingsMenu = function EnhancedSettingsMenu({ showSettings, playbackRate, subtitlesEnabled, subtitleTracks, currentSubtitleTrack, subtitleFontSize = "medium", hasSubtitles, subtitleLoadError, onToggleSettings, onChangePlaybackRate, onToggleSubtitles, onSelectSubtitleTrack, onChangeSubtitleFontSize }) {
+    const [currentView, setCurrentView] = useState("main");
+    const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    const fontSizes = [
+        { value: "small", label: "Small", size: "12px" },
+        { value: "medium", label: "Medium", size: "16px" },
+        { value: "large", label: "Large", size: "20px" }
+    ];
+    // Reset to main menu when settings close
+    useEffect(() => {
+        if (!showSettings) {
+            setCurrentView("main");
+        }
+    }, [showSettings]);
+    const handleSettingsClick = useCallback((e) => {
+        e.stopPropagation();
+        onToggleSettings();
+    }, [onToggleSettings]);
+    const handleDropdownClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleBackClick = useCallback(() => {
+        setCurrentView("main");
+    }, []);
+    const handleSelectSpeed = useCallback((rate) => {
+        onChangePlaybackRate(rate);
+        setCurrentView("main");
+    }, [onChangePlaybackRate]);
+    const handleSelectFontSize = useCallback((size) => {
+        onChangeSubtitleFontSize(size);
+        setCurrentView("main");
+    }, [onChangeSubtitleFontSize]);
+    const handleSelectSubtitle = useCallback((trackId) => {
+        if (trackId === null) {
+            // Turn off subtitles
+            if (subtitlesEnabled) {
+                onToggleSubtitles();
+            }
+        }
+        else {
+            // Select track and enable if needed
+            if (!subtitlesEnabled) {
+                onToggleSubtitles();
+            }
+            onSelectSubtitleTrack?.(trackId);
+        }
+        setCurrentView("main");
+    }, [subtitlesEnabled, onToggleSubtitles, onSelectSubtitleTrack]);
+    const renderMainMenu = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-gray-700 border-b px-3 py-2 font-semibold text-gray-400 text-xs uppercase tracking-wider", children: "Settings" }), _jsxs("div", { className: "py-1", children: [_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", !hasSubtitles && "cursor-not-allowed opacity-50"), onClick: () => hasSubtitles && setCurrentView("subtitles"), disabled: !hasSubtitles, children: [_jsxs("div", { className: "flex items-center gap-2", children: [defaultMinimalIcons.subtitle && _jsx(defaultMinimalIcons.subtitle, { size: 16 }), _jsx("span", { children: "Subtitles" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [!hasSubtitles ? (_jsx("span", { className: "text-gray-500", children: "Unavailable" })) : subtitleLoadError ? (_jsx("span", { className: "text-red-400", children: "Error" })) : subtitlesEnabled ? (_jsx("span", { className: "text-cyan-400", children: "On" })) : (_jsx("span", { children: "Off" })), hasSubtitles && (_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }))] })] }), hasSubtitles && (_jsxs("button", { className: "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", onClick: () => setCurrentView("fontSize"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7h16M4 7v10m0-10l4 10m8-10l4 10m-4-10v10" }) }), _jsx("span", { children: "Font Size" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [_jsx("span", { className: "capitalize", children: subtitleFontSize }), _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] })), _jsxs("button", { className: "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", onClick: () => setCurrentView("speed"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), _jsx("span", { children: "Playback Speed" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [_jsx("span", { children: playbackRate === 1 ? "Normal" : `${playbackRate}x` }), _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] })] })] }));
+    const renderSubtitlesMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Subtitles" }), _jsx("div", { className: "w-4" })] }), _jsxs("div", { className: "py-1", children: [_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", !subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSubtitle(null), children: [_jsx("span", { children: "Off" }), !subtitlesEnabled && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }), subtitleTracks.length > 0 ? (subtitleTracks.map((track) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitlesEnabled && currentSubtitleTrack === track.id && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSubtitle(track.id), children: [_jsx("span", { children: track.label }), subtitlesEnabled && currentSubtitleTrack === track.id && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, track.id)))) : (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"), onClick: () => {
+                            if (!subtitlesEnabled) {
+                                onToggleSubtitles();
+                            }
+                            setCurrentView("main");
+                        }, children: [_jsx("span", { children: "Default" }), subtitlesEnabled && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }))] })] }));
+    const renderFontSizeMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Font Size" }), _jsx("div", { className: "w-4" })] }), _jsx("div", { className: "py-1", children: fontSizes.map((size) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitleFontSize === size.value && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectFontSize(size.value), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-gray-400", style: { fontSize: size.size }, children: "Aa" }), _jsx("span", { children: size.label })] }), subtitleFontSize === size.value && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, size.value))) })] }));
+    const renderSpeedMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Playback Speed" }), _jsx("div", { className: "w-4" })] }), _jsx("div", { className: "py-1", children: playbackRates.map((rate) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", playbackRate === rate && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSpeed(rate), children: [_jsx("span", { children: rate === 1 ? "Normal" : `${rate}x` }), playbackRate === rate && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, rate))) })] }));
+    return (_jsxs("div", { className: "relative", style: { zIndex: showSettings ? 60 : "auto" }, children: [_jsx("button", { className: cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500"), onClick: handleSettingsClick, "aria-label": "Settings", title: "Settings", children: defaultMinimalIcons.settings && _jsx(defaultMinimalIcons.settings, { size: 18 }) }), showSettings && (_jsxs("div", { className: "absolute right-0 mb-2 min-w-[240px] overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-xl", style: {
+                    bottom: "100%",
+                    zIndex: 1000,
+                    maxHeight: "400px",
+                    overflowY: "auto"
+                }, onClick: handleDropdownClick, children: [currentView === "main" && renderMainMenu(), currentView === "subtitles" && renderSubtitlesMenu(), currentView === "fontSize" && renderFontSizeMenu(), currentView === "speed" && renderSpeedMenu()] }))] }));
+};

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

@@ -0,0 +1,9 @@
+interface PlaybackControlsProps {
+    isPlaying: boolean;
+    onTogglePlay: () => void;
+    onSeekBackward: () => void;
+    onSeekForward: () => void;
+}
+export declare const PlaybackControls: ({ isPlaying, onTogglePlay, onSeekBackward, onSeekForward }: PlaybackControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PlaybackControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackControls.d.ts","sourceRoot":"","sources":["PlaybackControls.tsx"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC9B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,eAAO,MAAM,gBAAgB,GAA6B,4DAKvD,qBAAqB,4CAmCvB,CAAA"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultMinimalIcons, MinimalBackward10Icon, MinimalForward10Icon } from "../../../icons";
+export const PlaybackControls = function PlaybackControls({ isPlaying, onTogglePlay, onSeekBackward, onSeekForward }) {
+    const PlayIcon = defaultMinimalIcons.play;
+    const PauseIcon = defaultMinimalIcons.pause;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "minimal-btn size-15", onClick: onTogglePlay, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying
+                    ? PauseIcon && _jsx(PauseIcon, { size: 32 })
+                    : PlayIcon && _jsx(PlayIcon, { size: 32 }) }), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: onSeekBackward, "aria-label": "Backward 10 seconds", title: "Backward 10s (J)", children: _jsx(MinimalBackward10Icon, { size: 18 }) }), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: onSeekForward, "aria-label": "Forward 10 seconds", title: "Forward 10s (L)", children: _jsx(MinimalForward10Icon, { size: 18 }) })] }));
+};

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

@@ -0,0 +1,25 @@
+interface RightControlsProps {
+    subtitleSrc?: string;
+    subtitlesEnabled: boolean;
+    subtitleTracks?: Array<{
+        id: string;
+        label: string;
+        language?: string;
+        src?: string;
+    }>;
+    currentTrackId?: string | null;
+    hasSubtitles?: boolean;
+    subtitleLoadError?: Error | null;
+    isFullscreen: boolean;
+    showSettings: boolean;
+    playbackRate: number;
+    onToggleSubtitles: () => void;
+    onSelectSubtitleTrack?: (trackId: string | null) => void;
+    onTakeScreenshot: (ctrlKey: boolean) => void;
+    onToggleFullscreen: () => void;
+    onToggleSettings: () => void;
+    onChangePlaybackRate: (rate: number) => void;
+}
+export declare const RightControls: ({ subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, isFullscreen, showSettings, playbackRate, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }: RightControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RightControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightControls.d.ts","sourceRoot":"","sources":["RightControls.tsx"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC;QACtB,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,GAAG,CAAC,EAAE,MAAM,CAAA;KACZ,CAAC,CAAA;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAChC,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxD,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAED,eAAO,MAAM,aAAa,GAA0B,sQAgBjD,kBAAkB,4CA4HpB,CAAA"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { cn } from "../../../../lib/utils";
+import { MinimalSubtitleIcon, MinimalScreenshotIcon, defaultMinimalIcons } from "../../../icons";
+import { SettingsDropdown } from "./SettingsDropdown";
+export const RightControls = function RightControls({ subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, isFullscreen, showSettings, playbackRate, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }) {
+    const [showSubtitleMenu, setShowSubtitleMenu] = useState(false);
+    const subtitleMenuRef = useRef(null);
+    const FullscreenIcon = defaultMinimalIcons.fullscreen;
+    const ExitFullscreenIcon = defaultMinimalIcons.exitFullscreen;
+    // Close subtitle menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (subtitleMenuRef.current && !subtitleMenuRef.current.contains(event.target)) {
+                setShowSubtitleMenu(false);
+            }
+        };
+        if (showSubtitleMenu) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [showSubtitleMenu]);
+    const handleSubtitleClick = () => {
+        if (subtitleTracks && subtitleTracks.length > 0) {
+            setShowSubtitleMenu(!showSubtitleMenu);
+        }
+        else {
+            onToggleSubtitles();
+        }
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [hasSubtitles && (_jsxs("div", { className: "relative", ref: subtitleMenuRef, children: [_jsx("button", { className: cn("minimal-btn h-9 w-9", subtitlesEnabled && "text-cyan-500", subtitleLoadError && "text-red-500"), onClick: handleSubtitleClick, "aria-label": "Subtitles", title: subtitleLoadError ? "Subtitle Error" : "Subtitles (C)", children: _jsx(MinimalSubtitleIcon, { size: 18 }) }), showSubtitleMenu && subtitleTracks && subtitleTracks.length > 0 && (_jsxs("div", { className: "absolute right-0 bottom-full mb-2 w-48 rounded-md bg-gray-900/95 py-2 shadow-lg backdrop-blur-sm", children: [_jsx("div", { className: "px-3 py-1 font-semibold text-gray-400 text-xs", children: "Subtitles" }), _jsx("button", { className: cn("flex w-full items-center px-3 py-1.5 text-gray-300 text-sm hover:bg-gray-800", !subtitlesEnabled && "bg-gray-800 text-cyan-500"), onClick: () => {
+                                    onSelectSubtitleTrack?.(null);
+                                    setShowSubtitleMenu(false);
+                                }, children: "Off" }), subtitleTracks.map((track) => (_jsxs("button", { className: cn("flex w-full items-center px-3 py-1.5 text-gray-300 text-sm hover:bg-gray-800", currentTrackId === track.id && "bg-gray-800 text-cyan-500"), onClick: () => {
+                                    onSelectSubtitleTrack?.(track.id);
+                                    setShowSubtitleMenu(false);
+                                }, children: [_jsx("span", { children: track.label }), track.language && (_jsxs("span", { className: "ml-2 text-gray-500 text-xs", children: ["(", track.language, ")"] }))] }, track.id))), subtitleLoadError && (_jsx("div", { className: "mt-2 border-gray-800 border-t px-3 py-2", children: _jsx("p", { className: "text-red-400 text-xs", children: "Failed to load subtitles" }) }))] }))] })), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: (e) => onTakeScreenshot(e.ctrlKey || e.metaKey), "aria-label": "Take Screenshot", title: "Screenshot (S) - Ctrl+Click to copy", children: _jsx(MinimalScreenshotIcon, { size: 18 }) }), _jsx(SettingsDropdown, { showSettings: showSettings, playbackRate: playbackRate, onToggleSettings: onToggleSettings, onChangePlaybackRate: onChangePlaybackRate }), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: onToggleFullscreen, "aria-label": isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen", title: "Fullscreen (F)", children: isFullscreen
+                    ? ExitFullscreenIcon && _jsx(ExitFullscreenIcon, { size: 18 })
+                    : FullscreenIcon && _jsx(FullscreenIcon, { size: 18 }) })] }));
+};

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

@@ -0,0 +1,11 @@
+import type { BufferedRange } from "../../../../hooks/useVideoPlayer";
+interface SeekBarProps {
+    currentTime: number;
+    duration: number;
+    bufferedRanges?: BufferedRange[];
+    isSeeking?: boolean;
+    onSeek: (time: number) => void;
+}
+export declare const SeekBar: ({ currentTime, duration, bufferedRanges, isSeeking, onSeek }: SeekBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SeekBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeekBar.d.ts","sourceRoot":"","sources":["SeekBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAErE,UAAU,YAAY;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,OAAO,GAAoB,8DAMrC,YAAY,4CAgHd,CAAA"}

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { cn } from "../../../../lib/utils";
+export const SeekBar = function SeekBar({ currentTime, duration, bufferedRanges = [], isSeeking = false, onSeek }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [hoverPosition, setHoverPosition] = useState(0);
+    const [showRipple, setShowRipple] = useState(false);
+    const [ripplePosition, setRipplePosition] = useState({ x: 0, y: 0 });
+    const seekBarRef = useRef(null);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const handleClick = (e) => {
+        if (duration === 0)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const position = (e.clientX - rect.left) / rect.width;
+        const newTime = Math.max(0, Math.min(duration, position * duration));
+        // Add ripple effect
+        setRipplePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+        setShowRipple(true);
+        setTimeout(() => setShowRipple(false), 600);
+        onSeek(newTime);
+    };
+    const handleMouseMove = (e) => {
+        if (!seekBarRef.current)
+            return;
+        const rect = seekBarRef.current.getBoundingClientRect();
+        const position = ((e.clientX - rect.left) / rect.width) * 100;
+        setHoverPosition(Math.max(0, Math.min(100, position)));
+    };
+    const handleMouseEnter = () => setIsHovering(true);
+    const handleMouseLeave = () => setIsHovering(false);
+    return (_jsxs("div", { className: "relative mb-3", children: [_jsxs("div", { ref: seekBarRef, className: cn("minimal-seekbar group relative cursor-pointer", isSeeking && "minimal-seekbar-seeking"), onClick: handleClick, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [bufferedRanges.map((range, index) => {
+                        const startPercent = duration > 0 ? (range.start / duration) * 100 : 0;
+                        const widthPercent = duration > 0 ? ((range.end - range.start) / duration) * 100 : 0;
+                        return (_jsx("div", { className: "minimal-seekbar-buffered", style: {
+                                left: `${startPercent}%`,
+                                width: `${widthPercent}%`
+                            } }, index));
+                    }), _jsx("div", { className: cn("minimal-seekbar-progress", isSeeking && "minimal-seekbar-progress-seeking"), style: { width: `${progress}%` } }), isHovering && !isSeeking && (_jsx("div", { className: "minimal-seekbar-hover-indicator", style: { left: `${hoverPosition}%` } })), _jsx("div", { className: cn("minimal-seekbar-thumb", (isHovering || isSeeking) && "opacity-100", isSeeking && "minimal-seekbar-thumb-seeking"), style: { left: `${progress}%` } }), showRipple && (_jsx("div", { className: "minimal-seekbar-ripple", style: {
+                            left: ripplePosition.x,
+                            top: ripplePosition.y
+                        } }))] }), isSeeking && (_jsx("div", { className: "-top-6 -translate-x-1/2 absolute left-1/2 transform", children: _jsx("div", { className: "rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm", children: "Seeking..." }) }))] }));
+};

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

@@ -0,0 +1,9 @@
+interface SettingsDropdownProps {
+    showSettings: boolean;
+    playbackRate: number;
+    onToggleSettings: () => void;
+    onChangePlaybackRate: (rate: number) => void;
+}
+export declare const SettingsDropdown: ({ showSettings, playbackRate, onToggleSettings, onChangePlaybackRate }: SettingsDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SettingsDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsDropdown.d.ts","sourceRoot":"","sources":["SettingsDropdown.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC9B,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAED,eAAO,MAAM,gBAAgB,GAA6B,wEAKvD,qBAAqB,4CAqDvB,CAAA"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { cn } from "../../../../lib/utils";
+import { defaultMinimalIcons } from "../../../icons";
+export const SettingsDropdown = function SettingsDropdown({ showSettings, playbackRate, onToggleSettings, onChangePlaybackRate }) {
+    const playbackRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    const handleSettingsClick = useCallback((e) => {
+        e.stopPropagation();
+        onToggleSettings();
+    }, [onToggleSettings]);
+    const handleDropdownClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return (_jsxs("div", { className: "relative", style: { zIndex: showSettings ? 60 : "auto" }, children: [_jsx("button", { className: cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500"), onClick: handleSettingsClick, "aria-label": "Settings", children: defaultMinimalIcons.settings && _jsx(defaultMinimalIcons.settings, { size: 18 }) }), showSettings && (_jsxs("div", { className: "absolute right-0 mb-2 min-w-[200px] rounded-lg border border-gray-700 bg-gray-900 py-2 shadow-xl", style: {
+                    bottom: "100%",
+                    zIndex: 1000
+                }, onClick: handleDropdownClick, children: [_jsx("div", { className: "px-3 py-1 text-gray-400 text-xs uppercase tracking-wider", children: "Speed" }), _jsx("div", { className: "px-1", children: playbackRates.map((rate) => (_jsx("button", { className: cn("w-full rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-gray-800", "text-white", playbackRate === rate && "bg-cyan-700/20 text-cyan-400"), onClick: () => onChangePlaybackRate(rate), children: rate === 1 ? "Normal" : `${rate}x` }, rate))) })] }))] }));
+};

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

@@ -0,0 +1,7 @@
+interface SubtitleDisplayProps {
+    subtitlesEnabled: boolean;
+    subtitleText: string;
+}
+export declare const SubtitleDisplay: ({ subtitlesEnabled, subtitleText }: SubtitleDisplayProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SubtitleDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubtitleDisplay.d.ts","sourceRoot":"","sources":["SubtitleDisplay.tsx"],"names":[],"mappings":"AAEA,UAAU,oBAAoB;IAC7B,gBAAgB,EAAE,OAAO,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,eAAe,GAA4B,oCAGrD,oBAAoB,mDAUtB,CAAA"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SubtitleDisplay = function SubtitleDisplay({ subtitlesEnabled, subtitleText }) {
+    if (!subtitlesEnabled || !subtitleText)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none absolute right-0 bottom-20 left-0 px-4 text-center", children: _jsx("div", { className: "inline-block rounded bg-black/75 px-4 py-2 font-medium text-lg text-white", children: subtitleText }) }));
+};

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

@@ -0,0 +1,7 @@
+interface TimeDisplayProps {
+    currentTime: number;
+    duration: number;
+}
+export declare const TimeDisplay: ({ currentTime, duration }: TimeDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TimeDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeDisplay.d.ts","sourceRoot":"","sources":["TimeDisplay.tsx"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,WAAW,GAAwB,2BAG7C,gBAAgB,4CAMlB,CAAA"}

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

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTime } from "../../../../lib/format-time";
+export const TimeDisplay = function TimeDisplay({ currentTime, duration }) {
+    return (_jsxs("div", { className: "font-mono text-sm text-white", children: [formatTime(currentTime), " / ", formatTime(duration)] }));
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface VideoElementProps {
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    src: string;
+    poster?: string;
+    subtitleSrc?: string;
+    subtitlesEnabled: boolean;
+    crossOrigin?: "anonymous" | "use-credentials";
+    onTogglePlay: () => void;
+}
+export declare const VideoElement: ({ videoRef, src, poster, subtitleSrc, subtitlesEnabled, crossOrigin, onTogglePlay }: VideoElementProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoElement.d.ts","sourceRoot":"","sources":["VideoElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AAEnC,UAAU,iBAAiB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAClD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAA;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,eAAO,MAAM,YAAY,GAAyB,qFAQ/C,iBAAiB,4CAmBnB,CAAA"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const VideoElement = function VideoElement({ videoRef, src, poster, subtitleSrc, subtitlesEnabled, crossOrigin, onTogglePlay }) {
+    return (_jsx("video", { ref: videoRef, src: src, poster: poster, crossOrigin: crossOrigin, className: "h-full w-full object-contain", onClick: onTogglePlay, children: subtitleSrc && (_jsx("track", { kind: "subtitles", src: subtitleSrc, default: subtitlesEnabled })) }));
+};

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

@@ -0,0 +1,13 @@
+interface VolumeControlProps {
+    volume: number;
+    isMuted: boolean;
+    showVolumeSlider: boolean;
+    onToggleMute: () => void;
+    onVolumeChange: (volume: number) => void;
+    onShowVolumeSlider: (show: boolean) => void;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+export declare const VolumeControl: ({ volume, isMuted, showVolumeSlider, onToggleMute, onVolumeChange, onShowVolumeSlider, orientation, className }: VolumeControlProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VolumeControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.d.ts","sourceRoot":"","sources":["VolumeControl.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,OAAO,CAAA;IACzB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,aAAa,GAA0B,iHASjD,kBAAkB,4CAgMpB,CAAA"}

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef, useEffect } from "react";
+import { cn } from "../../../../lib/utils";
+import { defaultMinimalIcons } from "../../../icons";
+export const VolumeControl = function VolumeControl({ volume, isMuted, showVolumeSlider, onToggleMute, onVolumeChange, onShowVolumeSlider, orientation = "horizontal", className }) {
+    const VolumeIcon = defaultMinimalIcons.volume;
+    const VolumeMutedIcon = defaultMinimalIcons.volumeMuted;
+    const sliderRefHorizontal = useRef(null);
+    const sliderRefVertical = useRef(null);
+    const isDragging = useRef(false);
+    const [isDraggingState, setIsDraggingState] = React.useState(false);
+    const [isHovering, setIsHovering] = React.useState(false);
+    const hideTimeoutRef = useRef(null);
+    const handleVolumeChange = useCallback((e) => {
+        const newVolume = parseFloat(e.target.value);
+        onVolumeChange(newVolume);
+    }, [onVolumeChange]);
+    const handleSliderClick = useCallback((e, isVertical) => {
+        const sliderRef = isVertical ? sliderRefVertical : sliderRefHorizontal;
+        if (!sliderRef.current)
+            return;
+        const rect = sliderRef.current.getBoundingClientRect();
+        let percentage;
+        if (!isVertical) {
+            percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        }
+        else {
+            percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+        }
+        onVolumeChange(percentage);
+    }, [onVolumeChange]);
+    const handleMouseDown = useCallback((e, isVertical) => {
+        e.preventDefault();
+        e.stopPropagation();
+        isDragging.current = true;
+        setIsDraggingState(true);
+        handleSliderClick(e, isVertical);
+    }, [handleSliderClick]);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isDragging.current)
+                return;
+            const sliderRef = orientation === "vertical" ? sliderRefVertical : sliderRefHorizontal;
+            if (!sliderRef.current)
+                return;
+            const rect = sliderRef.current.getBoundingClientRect();
+            let percentage;
+            if (orientation === "horizontal") {
+                percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            }
+            else {
+                percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+            }
+            onVolumeChange(percentage);
+        };
+        const handleMouseUp = () => {
+            isDragging.current = false;
+            setIsDraggingState(false);
+        };
+        if (isDraggingState) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            return () => {
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+    }, [isDraggingState, orientation, onVolumeChange]);
+    const handleMouseEnter = useCallback(() => {
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+        setIsHovering(true);
+        onShowVolumeSlider(true);
+    }, [onShowVolumeSlider]);
+    const handleMouseLeave = useCallback(() => {
+        // Add a small delay before hiding to prevent flickering
+        hideTimeoutRef.current = setTimeout(() => {
+            if (!isDragging.current) {
+                setIsHovering(false);
+                onShowVolumeSlider(false);
+            }
+        }, 200);
+    }, [onShowVolumeSlider]);
+    // Clean up timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+        };
+    }, []);
+    const volumePercentage = (isMuted ? 0 : volume) * 100;
+    return (_jsxs("div", { className: cn("volume-control-wrapper", orientation === "vertical" ? "relative" : "flex items-center gap-2", className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [orientation === "vertical" && (_jsx("div", { className: cn("volume-slider-vertical", "-translate-x-1/2 absolute bottom-full left-1/2 mb-2", "transition-all duration-300 ease-out", (showVolumeSlider || isHovering || isDraggingState)
+                    ? "pointer-events-auto translate-y-0 opacity-100"
+                    : "pointer-events-none translate-y-2 opacity-0"), children: _jsxs("div", { className: "rounded-lg bg-black/80 p-3 backdrop-blur-sm", children: [_jsxs("div", { ref: sliderRefVertical, className: "volume-slider-track-vertical group", onMouseDown: (e) => handleMouseDown(e, true), onClick: (e) => handleSliderClick(e, true), children: [_jsx("div", { className: "volume-slider-fill-vertical pointer-events-none", style: { height: `${volumePercentage}%` } }), _jsx("div", { className: cn("volume-slider-thumb-vertical pointer-events-none", isDraggingState && "active"), style: { bottom: `${volumePercentage}%` } })] }), _jsxs("div", { className: "mt-2 text-center text-white/70 text-xs", children: [Math.round(volumePercentage), "%"] })] }) })), _jsx("button", { className: "minimal-btn h-10 w-10", onClick: onToggleMute, "aria-label": isMuted ? "Unmute" : "Mute", children: isMuted || volume === 0
+                    ? VolumeMutedIcon && _jsx(VolumeMutedIcon, { size: 20 })
+                    : VolumeIcon && _jsx(VolumeIcon, { size: 20 }) }), orientation === "horizontal" && (_jsx("div", { className: cn("volume-slider-horizontal-wrapper", "overflow-hidden transition-all duration-300 ease-out", (showVolumeSlider || isHovering || isDraggingState) ? "w-24 opacity-100" : "w-0 opacity-0"), children: _jsxs("div", { ref: sliderRefHorizontal, className: "volume-slider-track-horizontal group", onMouseDown: (e) => handleMouseDown(e, false), onClick: (e) => handleSliderClick(e, false), children: [_jsx("div", { className: "volume-slider-fill-horizontal pointer-events-none", style: { width: `${volumePercentage}%` } }), _jsx("div", { className: cn("volume-slider-thumb-horizontal pointer-events-none", isDraggingState && "active"), style: { left: `${volumePercentage}%` } })] }) }))] }));
+};

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

@@ -0,0 +1,17 @@
+export { MinimalMediaPlayer } from "./MinimalMediaPlayer";
+export type { MinimalMediaPlayerProps } from "./MinimalMediaPlayer";
+export { MinimalControls } from "./MinimalControls";
+export type { MinimalControlsProps } from "./MinimalControls";
+export { MinimalPlayButton } from "./MinimalPlayButton";
+export type { MinimalPlayButtonProps } from "./MinimalPlayButton";
+export { MinimalSeekBar } from "./MinimalSeekBar";
+export type { MinimalSeekBarProps } from "./MinimalSeekBar";
+export { MinimalVolumeControl } from "./MinimalVolumeControl";
+export type { MinimalVolumeControlProps } from "./MinimalVolumeControl";
+export { MinimalOverlay } from "./MinimalOverlay";
+export type { MinimalOverlayProps } from "./MinimalOverlay";
+export { MinimalLoading } from "./MinimalLoading";
+export type { MinimalLoadingProps } from "./MinimalLoading";
+export { SimpleMinimalPlayer } from "./SimpleMinimalPlayer";
+export type { SimpleMinimalPlayerProps } from "./SimpleMinimalPlayer";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA"}

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

@@ -0,0 +1,8 @@
+export { MinimalMediaPlayer } from "./MinimalMediaPlayer";
+export { MinimalControls } from "./MinimalControls";
+export { MinimalPlayButton } from "./MinimalPlayButton";
+export { MinimalSeekBar } from "./MinimalSeekBar";
+export { MinimalVolumeControl } from "./MinimalVolumeControl";
+export { MinimalOverlay } from "./MinimalOverlay";
+export { MinimalLoading } from "./MinimalLoading";
+export { SimpleMinimalPlayer } from "./SimpleMinimalPlayer";

package/src/components/video-player.d.ts

@@ -0,0 +1,3 @@
+import type { VideoPlayerProps } from "../types/index";
+export declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=video-player.d.ts.map

package/src/components/video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["video-player.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,WAAW,6GAyFvB,CAAA"}

package/src/components/video-player.js

@@ -0,0 +1,38 @@
+"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 VideoPlayer = forwardRef(({ src, poster, width = "100%", height = "auto", aspectRatio = "16/9", className, children, keyboardControls = true, showControls = true, customControls = false, crossOrigin, ...options }, ref) => {
+    const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+        src,
+        crossOrigin,
+        ...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 containerStyle = {
+        width,
+        height,
+        aspectRatio: height === "auto" ? aspectRatio : undefined
+    };
+    const videoProps = {
+        ref: mediaRef,
+        controls: showControls && !customControls,
+        poster,
+        className: "w-full h-full object-contain bg-black",
+        ...(Array.isArray(src) ? {} : { src })
+    };
+    return (_jsxs("div", { ref: ref || containerRef, style: containerStyle, className: cn("relative overflow-hidden bg-black", "focus-within:outline-none", className), tabIndex: 0, children: [_jsxs("video", { ...videoProps, children: [Array.isArray(src) && renderSources(), "Your browser does not support the video element."] }), state.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: state.error })] }) })), state.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" }) }) })), customControls && typeof children === "function" && (_jsx("div", { className: "pointer-events-none absolute inset-0", children: _jsx("div", { className: "pointer-events-auto", children: children({ state, controls }) }) })), customControls && typeof children !== "function" && children] }));
+});
+VideoPlayer.displayName = "VideoPlayer";