@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,51 @@
+import React, { memo } from "react"
+import { defaultMinimalIcons, MinimalBackward10Icon, MinimalForward10Icon } from "../../../icons"
+
+interface PlaybackControlsProps {
+	isPlaying: boolean
+	onTogglePlay: () => void
+	onSeekBackward: () => void
+	onSeekForward: () => void
+}
+
+export const PlaybackControls = function PlaybackControls({
+	isPlaying,
+	onTogglePlay,
+	onSeekBackward,
+	onSeekForward
+}: PlaybackControlsProps) {
+	const PlayIcon = defaultMinimalIcons.play
+	const PauseIcon = defaultMinimalIcons.pause
+
+	return (
+		<div className="flex items-center gap-2">
+			<button
+				className="minimal-btn size-15"
+				onClick={onTogglePlay}
+				aria-label={isPlaying ? "Pause" : "Play"}
+			>
+				{isPlaying
+					? PauseIcon && <PauseIcon size={32} />
+					: PlayIcon && <PlayIcon size={32} />}
+			</button>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onSeekBackward}
+				aria-label="Backward 10 seconds"
+				title="Backward 10s (J)"
+			>
+				<MinimalBackward10Icon size={18} />
+			</button>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onSeekForward}
+				aria-label="Forward 10 seconds"
+				title="Forward 10s (L)"
+			>
+				<MinimalForward10Icon size={18} />
+			</button>
+		</div>
+	)
+}

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

@@ -0,0 +1,173 @@
+import React, { memo, useState, useRef, useEffect } from "react"
+import { cn } from "../../../../lib/utils"
+import {
+	MinimalSubtitleIcon,
+	MinimalScreenshotIcon,
+	defaultMinimalIcons
+} from "../../../icons"
+import { SettingsDropdown } from "./SettingsDropdown"
+
+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 const RightControls = function RightControls({
+	subtitleSrc,
+	subtitlesEnabled,
+	subtitleTracks,
+	currentTrackId,
+	hasSubtitles,
+	subtitleLoadError,
+	isFullscreen,
+	showSettings,
+	playbackRate,
+	onToggleSubtitles,
+	onSelectSubtitleTrack,
+	onTakeScreenshot,
+	onToggleFullscreen,
+	onToggleSettings,
+	onChangePlaybackRate
+}: RightControlsProps) {
+	const [showSubtitleMenu, setShowSubtitleMenu] = useState(false)
+	const subtitleMenuRef = useRef<HTMLDivElement>(null)
+	const FullscreenIcon = defaultMinimalIcons.fullscreen
+	const ExitFullscreenIcon = defaultMinimalIcons.exitFullscreen
+
+	// Close subtitle menu when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (subtitleMenuRef.current && !subtitleMenuRef.current.contains(event.target as Node)) {
+				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 (
+		<div className="flex items-center gap-2">
+			{/* Subtitle Button with Dropdown */}
+			{hasSubtitles && (
+				<div className="relative" ref={subtitleMenuRef}>
+					<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)"}
+					>
+						<MinimalSubtitleIcon size={18} />
+					</button>
+
+					{/* Subtitle Track Selection Menu */}
+					{showSubtitleMenu && subtitleTracks && subtitleTracks.length > 0 && (
+						<div className="absolute right-0 bottom-full mb-2 w-48 rounded-md bg-gray-900/95 py-2 shadow-lg backdrop-blur-sm">
+							<div className="px-3 py-1 font-semibold text-gray-400 text-xs">Subtitles</div>
+							
+							{/* Off Option */}
+							<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)
+								}}
+							>
+								Off
+							</button>
+
+							{/* Track Options */}
+							{subtitleTracks.map((track) => (
+								<button
+									key={track.id}
+									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)
+									}}
+								>
+									<span>{track.label}</span>
+									{track.language && (
+										<span className="ml-2 text-gray-500 text-xs">({track.language})</span>
+									)}
+								</button>
+							))}
+
+							{/* Error Message */}
+							{subtitleLoadError && (
+								<div className="mt-2 border-gray-800 border-t px-3 py-2">
+									<p className="text-red-400 text-xs">Failed to load subtitles</p>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			)}
+
+			<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"
+			>
+				<MinimalScreenshotIcon size={18} />
+			</button>
+
+			<SettingsDropdown
+				showSettings={showSettings}
+				playbackRate={playbackRate}
+				onToggleSettings={onToggleSettings}
+				onChangePlaybackRate={onChangePlaybackRate}
+			/>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onToggleFullscreen}
+				aria-label={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+				title="Fullscreen (F)"
+			>
+				{isFullscreen
+					? ExitFullscreenIcon && <ExitFullscreenIcon size={18} />
+					: FullscreenIcon && <FullscreenIcon size={18} />}
+			</button>
+		</div>
+	)
+}

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

@@ -0,0 +1,131 @@
+import React, { memo, useState, useRef } from "react"
+import { cn } from "../../../../lib/utils"
+import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
+
+interface SeekBarProps {
+	currentTime: number
+	duration: number
+	bufferedRanges?: BufferedRange[]
+	isSeeking?: boolean
+	onSeek: (time: number) => void
+}
+
+export const SeekBar = function SeekBar({
+	currentTime,
+	duration,
+	bufferedRanges = [],
+	isSeeking = false,
+	onSeek
+}: SeekBarProps) {
+	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<HTMLDivElement>(null)
+	
+	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		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: React.MouseEvent<HTMLDivElement>) => {
+		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 (
+		<div className="relative mb-3">
+			<div 
+				ref={seekBarRef}
+				className={cn(
+					"minimal-seekbar group relative cursor-pointer",
+					isSeeking && "minimal-seekbar-seeking"
+				)}
+				onClick={handleClick}
+				onMouseMove={handleMouseMove}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+			>
+				{/* Buffered ranges */}
+				{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 (
+						<div
+							key={index}
+							className="minimal-seekbar-buffered"
+							style={{
+								left: `${startPercent}%`,
+								width: `${widthPercent}%`
+							}}
+						/>
+					)
+				})}
+				
+				{/* Progress bar */}
+				<div 
+					className={cn(
+						"minimal-seekbar-progress",
+						isSeeking && "minimal-seekbar-progress-seeking"
+					)}
+					style={{ width: `${progress}%` }} 
+				/>
+				
+				{/* Hover indicator */}
+				{isHovering && !isSeeking && (
+					<div
+						className="minimal-seekbar-hover-indicator"
+						style={{ left: `${hoverPosition}%` }}
+					/>
+				)}
+				
+				{/* Thumb */}
+				<div
+					className={cn(
+						"minimal-seekbar-thumb",
+						(isHovering || isSeeking) && "opacity-100",
+						isSeeking && "minimal-seekbar-thumb-seeking"
+					)}
+					style={{ left: `${progress}%` }}
+				/>
+				
+				{/* Ripple effect */}
+				{showRipple && (
+					<div
+						className="minimal-seekbar-ripple"
+						style={{
+							left: ripplePosition.x,
+							top: ripplePosition.y
+						}}
+					/>
+				)}
+			</div>
+			
+			{/* Seeking indicator */}
+			{isSeeking && (
+				<div className="-top-6 -translate-x-1/2 absolute left-1/2 transform">
+					<div className="rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm">
+						Seeking...
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,70 @@
+import React, { memo, useCallback } from "react"
+import { cn } from "../../../../lib/utils"
+import { defaultMinimalIcons } from "../../../icons"
+
+interface SettingsDropdownProps {
+	showSettings: boolean
+	playbackRate: number
+	onToggleSettings: () => void
+	onChangePlaybackRate: (rate: number) => void
+}
+
+export const SettingsDropdown = function SettingsDropdown({
+	showSettings,
+	playbackRate,
+	onToggleSettings,
+	onChangePlaybackRate
+}: SettingsDropdownProps) {
+	const playbackRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+	const handleSettingsClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation()
+		onToggleSettings()
+	}, [onToggleSettings])
+
+	const handleDropdownClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation()
+	}, [])
+
+	return (
+		<div className="relative" style={{ zIndex: showSettings ? 60 : "auto" }}>
+			<button
+				className={cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500")}
+				onClick={handleSettingsClick}
+				aria-label="Settings"
+			>
+				{defaultMinimalIcons.settings && <defaultMinimalIcons.settings size={18} />}
+			</button>
+
+			{showSettings && (
+				<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}
+				>
+					<div className="px-3 py-1 text-gray-400 text-xs uppercase tracking-wider">
+						Speed
+					</div>
+					<div className="px-1">
+						{playbackRates.map((rate) => (
+							<button
+								key={rate}
+								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)}
+							>
+								{rate === 1 ? "Normal" : `${rate}x`}
+							</button>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,21 @@
+import React, { memo } from "react"
+
+interface SubtitleDisplayProps {
+	subtitlesEnabled: boolean
+	subtitleText: string
+}
+
+export const SubtitleDisplay = function SubtitleDisplay({
+	subtitlesEnabled,
+	subtitleText
+}: SubtitleDisplayProps) {
+	if (!subtitlesEnabled || !subtitleText) return null
+
+	return (
+		<div className="pointer-events-none absolute right-0 bottom-20 left-0 px-4 text-center">
+			<div className="inline-block rounded bg-black/75 px-4 py-2 font-medium text-lg text-white">
+				{subtitleText}
+			</div>
+		</div>
+	)
+}

package/dist/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/dist/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/dist/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)] }));
+};