@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/variants/minimal/components/TimeDisplay.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from "react"
+import { formatTime } from "../../../../lib/format-time"
+
+interface TimeDisplayProps {
+	currentTime: number
+	duration: number
+}
+
+export const TimeDisplay = function TimeDisplay({
+	currentTime,
+	duration
+}: TimeDisplayProps) {
+	return (
+		<div className="font-mono text-sm text-white">
+			{formatTime(currentTime)} / {formatTime(duration)}
+		</div>
+	)
+}

package/dist/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/dist/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/dist/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/dist/src/components/variants/minimal/components/VideoElement.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from "react"
+
+interface VideoElementProps {
+	videoRef: React.RefObject<HTMLVideoElement | null>
+	src: string
+	poster?: string
+	subtitleSrc?: string
+	subtitlesEnabled: boolean
+	crossOrigin?: "anonymous" | "use-credentials"
+	onTogglePlay: () => void
+}
+
+export const VideoElement = function VideoElement({
+	videoRef,
+	src,
+	poster,
+	subtitleSrc,
+	subtitlesEnabled,
+	crossOrigin,
+	onTogglePlay
+}: VideoElementProps) {
+	return (
+		<video
+			ref={videoRef}
+			src={src}
+			poster={poster}
+			crossOrigin={crossOrigin}
+			className="h-full w-full object-contain"
+			onClick={onTogglePlay}
+		>
+			{subtitleSrc && (
+				<track 
+					kind="subtitles" 
+					src={subtitleSrc} 
+					default={subtitlesEnabled} 
+				/>
+			)}
+		</video>
+	)
+}

package/dist/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/dist/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/dist/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/dist/src/components/variants/minimal/components/VolumeControl.tsx

@@ -0,0 +1,217 @@
+import React, { memo, useCallback, useRef, useEffect } from "react"
+import { cn } from "../../../../lib/utils"
+import { defaultMinimalIcons } from "../../../icons"
+
+interface VolumeControlProps {
+	volume: number
+	isMuted: boolean
+	showVolumeSlider: boolean
+	onToggleMute: () => void
+	onVolumeChange: (volume: number) => void
+	onShowVolumeSlider: (show: boolean) => void
+	orientation?: "horizontal" | "vertical"
+	className?: string
+}
+
+export const VolumeControl = function VolumeControl({
+	volume,
+	isMuted,
+	showVolumeSlider,
+	onToggleMute,
+	onVolumeChange,
+	onShowVolumeSlider,
+	orientation = "horizontal",
+	className
+}: VolumeControlProps) {
+	const VolumeIcon = defaultMinimalIcons.volume
+	const VolumeMutedIcon = defaultMinimalIcons.volumeMuted
+	const sliderRefHorizontal = useRef<HTMLDivElement>(null)
+	const sliderRefVertical = useRef<HTMLDivElement>(null)
+	const isDragging = useRef(false)
+	const [isDraggingState, setIsDraggingState] = React.useState(false)
+	const [isHovering, setIsHovering] = React.useState(false)
+  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+	const handleVolumeChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newVolume = parseFloat(e.target.value)
+			onVolumeChange(newVolume)
+		},
+		[onVolumeChange]
+	)
+
+	const handleSliderClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
+			const sliderRef = isVertical ? sliderRefVertical : sliderRefHorizontal
+			if (!sliderRef.current) return
+			const rect = sliderRef.current.getBoundingClientRect()
+			
+			let percentage: number
+			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: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
+		e.preventDefault()
+		e.stopPropagation()
+		isDragging.current = true
+		setIsDraggingState(true)
+		handleSliderClick(e, isVertical)
+	}, [handleSliderClick])
+
+	useEffect(() => {
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isDragging.current) return
+			
+			const sliderRef = orientation === "vertical" ? sliderRefVertical : sliderRefHorizontal
+			if (!sliderRef.current) return
+			
+			const rect = sliderRef.current.getBoundingClientRect()
+			let percentage: number
+			
+			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 (
+		<div
+			className={cn(
+				"volume-control-wrapper",
+				orientation === "vertical" ? "relative" : "flex items-center gap-2",
+				className
+			)}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			{/* Volume slider for vertical orientation (appears above) */}
+			{orientation === "vertical" && (
+				<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"
+					)}
+				>
+					<div className="rounded-lg bg-black/80 p-3 backdrop-blur-sm">
+						<div
+							ref={sliderRefVertical}
+							className="volume-slider-track-vertical group"
+							onMouseDown={(e) => handleMouseDown(e, true)}
+							onClick={(e) => handleSliderClick(e, true)}
+						>
+							<div 
+								className="volume-slider-fill-vertical pointer-events-none"
+								style={{ height: `${volumePercentage}%` }}
+							/>
+							<div 
+								className={cn("volume-slider-thumb-vertical pointer-events-none", isDraggingState && "active")}
+								style={{ bottom: `${volumePercentage}%` }}
+							/>
+						</div>
+						<div className="mt-2 text-center text-white/70 text-xs">
+							{Math.round(volumePercentage)}%
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* Volume button */}
+			<button
+				className="minimal-btn h-10 w-10"
+				onClick={onToggleMute}
+				aria-label={isMuted ? "Unmute" : "Mute"}
+			>
+				{isMuted || volume === 0
+					? VolumeMutedIcon && <VolumeMutedIcon size={20} />
+					: VolumeIcon && <VolumeIcon size={20} />}
+			</button>
+
+			{/* Volume slider for horizontal orientation (appears beside) */}
+			{orientation === "horizontal" && (
+				<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"
+				)}
+			>
+					<div
+						ref={sliderRefHorizontal}
+						className="volume-slider-track-horizontal group"
+						onMouseDown={(e) => handleMouseDown(e, false)}
+						onClick={(e) => handleSliderClick(e, false)}
+					>
+						<div 
+							className="volume-slider-fill-horizontal pointer-events-none"
+							style={{ width: `${volumePercentage}%` }}
+						/>
+						<div 
+							className={cn("volume-slider-thumb-horizontal pointer-events-none", isDraggingState && "active")}
+							style={{ left: `${volumePercentage}%` }}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/dist/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/dist/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/dist/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/dist/src/components/variants/minimal/index.ts

@@ -0,0 +1,23 @@
+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"

package/dist/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/dist/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/dist/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";

package/dist/src/components/video-player.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { forwardRef } from "react"
+import { useKeyboardControls } from "../hooks/use-keyboard-controls"
+import { useMediaPlayer } from "../hooks/use-media-player"
+import { cn } from "../lib/utils"
+import type { VideoPlayerProps } from "../types/index"
+
+export const VideoPlayer = forwardRef<HTMLDivElement, VideoPlayerProps>(
+	(
+		{
+			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) => <source key={index} src={source} />)
+			}
+			return null
+		}
+
+		const containerStyle = {
+			width,
+			height,
+			aspectRatio: height === "auto" ? aspectRatio : undefined
+		}
+
+		const videoProps = {
+			ref: mediaRef as React.RefObject<HTMLVideoElement>,
+			controls: showControls && !customControls,
+			poster,
+			className: "w-full h-full object-contain bg-black",
+			...(Array.isArray(src) ? {} : { src })
+		}
+
+		return (
+			<div
+				ref={ref || containerRef}
+				style={containerStyle}
+				className={cn("relative overflow-hidden bg-black", "focus-within:outline-none", className)}
+				tabIndex={0}>
+				<video {...videoProps}>
+					{Array.isArray(src) && renderSources()}
+					Your browser does not support the video element.
+				</video>
+
+				{state.error && (
+					<div className="absolute inset-0 flex items-center justify-center bg-black/80">
+						<div className="text-center text-white">
+							<p className="font-semibold text-lg">Error</p>
+							<p className="text-sm opacity-80">{state.error}</p>
+						</div>
+					</div>
+				)}
+
+				{state.isLoading && (
+					<div className="absolute inset-0 flex items-center justify-center bg-black/50">
+						<div className="text-white">
+							<div className="h-8 w-8 animate-spin rounded-full border-white border-b-2"></div>
+						</div>
+					</div>
+				)}
+
+				{customControls && typeof children === "function" && (
+					<div className="pointer-events-none absolute inset-0">
+						<div className="pointer-events-auto">{children({ state, controls })}</div>
+					</div>
+				)}
+
+				{customControls && typeof children !== "function" && children}
+			</div>
+		)
+	}
+)
+
+VideoPlayer.displayName = "VideoPlayer"