@neuctra/ui 0.2.2 → 0.2.4

package/dist/src/components/basic/AudioGallery.js

@@ -0,0 +1,425 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Play, Pause, Volume2, VolumeX, RotateCcw, SkipBack, SkipForward, Heart, Music, Shuffle, } from "lucide-react";
+const defaultTracks = [
+    {
+        src: "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav",
+        title: "Morning Bell",
+        artist: "Nature Sounds",
+        duration: "0:15",
+        thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop",
+    },
+    {
+        src: "https://www.soundjay.com/buttons/sounds/button-4.wav",
+        title: "Digital Click",
+        artist: "Tech Audio",
+        duration: "0:05",
+        thumbnail: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=300&h=300&fit=crop",
+    },
+    {
+        src: "https://www.soundjay.com/buttons/sounds/button-10.wav",
+        title: "Soft Chime",
+        artist: "Ambient Studio",
+        duration: "0:08",
+        thumbnail: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop",
+    },
+];
+export function AudioGallery({ tracks = defaultTracks, className = "", galleryTitle = "Audio Gallery", primaryColor = "#8b5cf6", backgroundColor = "#0f0f23", textColor = "#e4e4e7", secondaryColor = "#1a1a2e", border = 0, borderColor, maxWidth = 420, autoplay = false, loop = false, }) {
+    const [currentTrackIndex, setCurrentTrackIndex] = useState(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(0.7);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isLooping, setIsLooping] = useState(loop);
+    const [isShuffle, setIsShuffle] = useState(false);
+    const [isLiked, setIsLiked] = useState(false);
+    const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+    const audioRef = useRef(null);
+    const playerRef = useRef(null);
+    const volumeTimeoutRef = useRef(null);
+    useEffect(() => {
+        if (audioRef.current) {
+            audioRef.current.volume = volume;
+        }
+    }, [volume]);
+    useEffect(() => {
+        if (audioRef.current) {
+            audioRef.current.loop = isLooping;
+        }
+    }, [isLooping]);
+    useEffect(() => {
+        if (currentTrackIndex === null && audioRef.current) {
+            audioRef.current.pause();
+            setIsPlaying(false);
+            setCurrentTime(0);
+            setDuration(0);
+        }
+    }, [currentTrackIndex]);
+    const playPauseTrack = (index) => {
+        if (currentTrackIndex === index) {
+            if (!audioRef.current)
+                return;
+            if (audioRef.current.paused) {
+                audioRef.current.play().catch(() => { });
+                setIsPlaying(true);
+            }
+            else {
+                audioRef.current.pause();
+                setIsPlaying(false);
+            }
+        }
+        else {
+            setCurrentTrackIndex(index);
+            setTimeout(() => {
+                if (audioRef.current) {
+                    audioRef.current.play().catch(() => { });
+                    setIsPlaying(true);
+                }
+            }, 100);
+        }
+    };
+    const handleTimeUpdate = () => {
+        if (!audioRef.current)
+            return;
+        setCurrentTime(audioRef.current.currentTime);
+        if (audioRef.current.duration) {
+            setDuration(audioRef.current.duration);
+        }
+    };
+    const handleSeek = (e) => {
+        if (!audioRef.current || !duration)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const clickPos = e.clientX - rect.left;
+        const percent = clickPos / rect.width;
+        const seekTime = percent * duration;
+        audioRef.current.currentTime = seekTime;
+        setCurrentTime(seekTime);
+    };
+    const handleVolumeChange = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const clickPos = e.clientX - rect.left;
+        const percent = clickPos / rect.width;
+        const newVolume = Math.max(0, Math.min(1, percent));
+        setVolume(newVolume);
+    };
+    const skip = (seconds) => {
+        if (audioRef.current && duration) {
+            let newTime = audioRef.current.currentTime + seconds;
+            newTime = Math.min(Math.max(newTime, 0), duration);
+            audioRef.current.currentTime = newTime;
+            setCurrentTime(newTime);
+        }
+    };
+    const nextTrack = () => {
+        if (currentTrackIndex === null)
+            return;
+        let nextIndex;
+        if (isShuffle) {
+            nextIndex = Math.floor(Math.random() * tracks.length);
+        }
+        else {
+            nextIndex = (currentTrackIndex + 1) % tracks.length;
+        }
+        playPauseTrack(nextIndex);
+    };
+    const prevTrack = () => {
+        if (currentTrackIndex === null)
+            return;
+        let prevIndex;
+        if (isShuffle) {
+            prevIndex = Math.floor(Math.random() * tracks.length);
+        }
+        else {
+            prevIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
+        }
+        playPauseTrack(prevIndex);
+    };
+    const toggleMute = () => {
+        setVolume((prev) => (prev > 0 ? 0 : 0.7));
+    };
+    const showVolume = () => {
+        setShowVolumeSlider(true);
+        if (volumeTimeoutRef.current) {
+            clearTimeout(volumeTimeoutRef.current);
+        }
+        volumeTimeoutRef.current = setTimeout(() => {
+            setShowVolumeSlider(false);
+        }, 3000);
+    };
+    const formatTime = (time) => {
+        if (isNaN(time))
+            return "0:00";
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+    };
+    const currentTrack = currentTrackIndex !== null ? tracks[currentTrackIndex] : null;
+    return (_jsxs("div", { className: className, style: {
+            maxWidth: `${maxWidth}px`,
+            margin: "20px auto",
+            background: `linear-gradient(145deg, ${backgroundColor}, ${secondaryColor})`,
+            color: textColor,
+            borderRadius: "24px",
+            padding: "24px 16px",
+            fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            userSelect: "none",
+            backdropFilter: "blur(20px)",
+            border: `${border}px solid ${borderColor}40`,
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "24px",
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [_jsx("div", { style: {
+                                    width: "40px",
+                                    height: "40px",
+                                    borderRadius: "12px",
+                                    background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }, children: _jsx(Music, { size: 20, color: "white" }) }), _jsxs("div", { children: [_jsx("h2", { style: {
+                                            margin: 0,
+                                            fontSize: "1.25rem",
+                                            fontWeight: "700",
+                                            color: primaryColor, // fallback for browsers without WebkitTextFillColor
+                                        }, children: galleryTitle }), _jsxs("p", { style: { margin: 0, fontSize: "0.875rem", opacity: 0.7 }, children: [tracks.length, " tracks"] })] })] }), _jsx("button", { onClick: () => setIsShuffle(!isShuffle), style: {
+                            background: isShuffle ? primaryColor : "transparent",
+                            border: "none",
+                            borderRadius: "12px",
+                            padding: "8px",
+                            cursor: "pointer",
+                            transition: "all 0.3s ease",
+                            opacity: isShuffle ? 1 : 0.6,
+                        }, "aria-label": "Toggle Shuffle", children: _jsx(Shuffle, { size: 18, color: isShuffle ? "white" : textColor }) })] }), _jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px",
+                    marginBottom: "20px",
+                    maxHeight: "240px",
+                    overflowY: "auto",
+                    paddingRight: "4px",
+                }, children: tracks.map((track, index) => {
+                    const isActive = currentTrackIndex === index;
+                    const isCurrentlyPlaying = isActive && isPlaying;
+                    return (_jsxs("div", { onClick: () => playPauseTrack(index), style: {
+                            display: "flex",
+                            alignItems: "center",
+                            padding: "12px 16px",
+                            borderRadius: "16px",
+                            background: isActive
+                                ? `linear-gradient(135deg, ${primaryColor}20, ${primaryColor}10)`
+                                : "rgba(255,255,255,0.05)",
+                            border: isActive
+                                ? `1px solid ${primaryColor}40`
+                                : "1px solid transparent",
+                            cursor: "pointer",
+                            transition: "all 0.3s ease",
+                            backdropFilter: isActive ? `blur(20px)` : "none",
+                        }, children: [_jsxs("div", { style: {
+                                    width: "48px",
+                                    height: "48px",
+                                    borderRadius: "12px",
+                                    background: track.thumbnail
+                                        ? `url(${track.thumbnail}) center/cover`
+                                        : primaryColor,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    marginRight: "12px",
+                                    position: "relative",
+                                    overflow: "hidden",
+                                }, children: [!track.thumbnail && _jsx(Music, { size: 20, color: "white" }), isCurrentlyPlaying && (_jsx("div", { style: {
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                            background: "rgba(0,0,0,0.6)",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                        }, children: _jsx("div", { style: {
+                                                width: "16px",
+                                                height: "16px",
+                                                display: "flex",
+                                                gap: "2px",
+                                                alignItems: "end",
+                                                justifyContent: "center",
+                                            }, children: [0, 1, 2].map((i) => (_jsx("div", { style: {
+                                                    width: "3px",
+                                                    background: "white",
+                                                    borderRadius: "2px",
+                                                    animation: `equalizer 1s ease-in-out infinite ${i * 0.2}s`,
+                                                    height: "12px",
+                                                } }, i))) }) }))] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                            fontWeight: "600",
+                                            fontSize: "0.95rem",
+                                            color: isActive ? primaryColor : textColor,
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: track.title }), track.artist && (_jsx("div", { style: {
+                                            fontSize: "0.8rem",
+                                            opacity: 0.7,
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: track.artist }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [track.duration && (_jsx("span", { style: { fontSize: "0.8rem", opacity: 0.6 }, children: track.duration })), _jsx("div", { style: {
+                                            width: "32px",
+                                            height: "32px",
+                                            borderRadius: "8px",
+                                            background: isActive
+                                                ? primaryColor
+                                                : "rgba(255,255,255,0.1)",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            transition: "all 0.3s ease",
+                                        }, children: isCurrentlyPlaying ? (_jsx(Pause, { size: 16, color: "white" })) : (_jsx(Play, { size: 16, color: "white" })) })] })] }, index));
+                }) }), currentTrack && (_jsxs("div", { ref: playerRef, style: {
+                    background: `linear-gradient(135deg, ${secondaryColor}, ${backgroundColor})`,
+                    borderRadius: "20px",
+                    padding: "20px",
+                    border: `1px solid ${primaryColor}40`,
+                    backdropFilter: "blur(20px)",
+                    position: "relative",
+                    overflow: "hidden",
+                }, children: [currentTrack.thumbnail && (_jsx("div", { style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundImage: `url(${currentTrack.thumbnail})`,
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                            filter: "blur(60px) opacity(0.1)",
+                            transform: "scale(1.1)",
+                        } })), _jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [_jsxs("div", { style: { textAlign: "center", marginBottom: "20px" }, children: [_jsx("h3", { style: {
+                                            margin: "0 0 4px 0",
+                                            fontSize: "1.1rem",
+                                            fontWeight: "700",
+                                            color: primaryColor,
+                                        }, children: currentTrack.title }), currentTrack.artist && (_jsx("p", { style: { margin: 0, opacity: 0.7, fontSize: "0.9rem" }, children: currentTrack.artist }))] }), _jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: "20px",
+                                    marginBottom: "20px",
+                                }, children: [_jsx("button", { onClick: prevTrack, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Previous Track", children: _jsx(SkipBack, { size: 20 }) }), _jsxs("button", { onClick: () => skip(-10), style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Skip back 10 seconds", children: [_jsx(SkipBack, { size: 16 }), _jsx("span", { style: { fontSize: "0.7rem", marginLeft: "2px" }, children: "10" })] }), _jsx("button", { onClick: () => {
+                                            if (!audioRef.current)
+                                                return;
+                                            if (isPlaying) {
+                                                audioRef.current.pause();
+                                                setIsPlaying(false);
+                                            }
+                                            else {
+                                                audioRef.current.play().catch(() => { });
+                                                setIsPlaying(true);
+                                            }
+                                        }, style: {
+                                            ...controlButtonStyle("#fff", primaryColor),
+                                            width: "60px",
+                                            height: "60px",
+                                            borderRadius: "50%",
+                                            boxShadow: `0 8px 25px ${primaryColor}40`,
+                                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 24 }) : _jsx(Play, { size: 24 }) }), _jsxs("button", { onClick: () => skip(10), style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Skip forward 10 seconds", children: [_jsx("span", { style: { fontSize: "0.7rem", marginRight: "2px" }, children: "10" }), _jsx(SkipForward, { size: 16 })] }), _jsx("button", { onClick: nextTrack, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": "Next Track", children: _jsx(SkipForward, { size: 20 }) })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "space-between",
+                                            marginBottom: "8px",
+                                            fontSize: "0.8rem",
+                                            opacity: 0.7,
+                                        }, children: [_jsx("span", { children: formatTime(currentTime) }), _jsx("span", { children: formatTime(duration) })] }), _jsx("div", { onClick: handleSeek, style: {
+                                            height: "6px",
+                                            background: "rgba(255,255,255,0.2)",
+                                            borderRadius: "3px",
+                                            cursor: "pointer",
+                                            position: "relative",
+                                            overflow: "hidden",
+                                        }, children: _jsx("div", { style: {
+                                                width: `${(currentTime / duration) * 100 || 0}%`,
+                                                height: "100%",
+                                                background: `linear-gradient(90deg, ${primaryColor}, #ec4899)`,
+                                                borderRadius: "3px",
+                                                position: "relative",
+                                            }, children: _jsx("div", { style: {
+                                                    position: "absolute",
+                                                    right: "-6px",
+                                                    top: "50%",
+                                                    transform: "translateY(-50%)",
+                                                    width: "12px",
+                                                    height: "12px",
+                                                    background: primaryColor,
+                                                    borderRadius: "50%",
+                                                    boxShadow: `0 2px 8px ${primaryColor}60`,
+                                                } }) }) })] }), _jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                }, children: [_jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("button", { onClick: () => setIsLiked(!isLiked), style: controlButtonStyle(isLiked ? "#ec4899" : textColor, "rgba(255,255,255,0.1)"), "aria-label": "Like", children: _jsx(Heart, { size: 16, fill: isLiked ? "#ec4899" : "none" }) }), _jsx("button", { onClick: () => setIsLooping(!isLooping), style: controlButtonStyle(isLooping ? primaryColor : textColor, "rgba(255,255,255,0.1)"), "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 16 }) })] }), _jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "8px",
+                                            position: "relative",
+                                        }, children: [showVolumeSlider && (_jsx("div", { onClick: handleVolumeChange, style: {
+                                                    width: "80px",
+                                                    height: "4px",
+                                                    background: "rgba(255,255,255,0.2)",
+                                                    borderRadius: "2px",
+                                                    cursor: "pointer",
+                                                    position: "relative",
+                                                }, children: _jsx("div", { style: {
+                                                        width: `${volume * 100}%`,
+                                                        height: "100%",
+                                                        background: primaryColor,
+                                                        borderRadius: "2px",
+                                                    } }) })), _jsx("button", { onClick: toggleMute, onMouseEnter: showVolume, style: controlButtonStyle(textColor, "rgba(255,255,255,0.1)"), "aria-label": volume > 0 ? "Mute" : "Unmute", children: volume > 0 ? _jsx(Volume2, { size: 16 }) : _jsx(VolumeX, { size: 16 }) })] })] })] }), _jsx("audio", { ref: audioRef, src: currentTrack.src, autoPlay: autoplay, loop: isLooping, onTimeUpdate: handleTimeUpdate, onEnded: () => {
+                            setIsPlaying(false);
+                            if (!isLooping) {
+                                nextTrack();
+                            }
+                        }, onLoadedMetadata: handleTimeUpdate, preload: "metadata", style: { display: "none" } })] })), _jsx("style", { children: `
+        @keyframes equalizer {
+          0%, 100% { height: 4px; }
+          50% { height: 12px; }
+        }
+        
+        /* Custom Scrollbar */
+        div::-webkit-scrollbar {
+          width: 4px;
+        }
+        
+        div::-webkit-scrollbar-track {
+          background: rgba(255,255,255,0.1);
+          border-radius: 2px;
+        }
+        
+        div::-webkit-scrollbar-thumb {
+          background: ${primaryColor};
+          border-radius: 2px;
+        }
+        
+        div::-webkit-scrollbar-thumb:hover {
+          background: ${primaryColor}dd;
+        }
+      ` })] }));
+}
+function controlButtonStyle(color, backgroundColor) {
+    return {
+        border: "none",
+        backgroundColor,
+        color,
+        cursor: "pointer",
+        padding: "10px",
+        borderRadius: "12px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.3s ease",
+        backdropFilter: "blur(10px)",
+    };
+}

package/dist/src/components/basic/AudioPlayer.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, RotateCcw, SkipBack, SkipForward, } from "lucide-react";
+export const AudioPlayer = ({ src, thumbnail, autoPlay = false, loop = false, backgroundColor = "#000000", primaryColor = "#10b981", secondaryColor = "#ffffff", borderRadius = "12px", padding = "16px", width = "100%", className, }) => {
+    const audioRef = useRef(null);
+    const playerRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(0.5);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isLooping, setIsLooping] = useState(loop);
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.volume = volume;
+    }, [volume]);
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.loop = isLooping;
+    }, [isLooping]);
+    const togglePlayPause = () => {
+        if (!audioRef.current)
+            return;
+        isPlaying ? audioRef.current.pause() : audioRef.current.play();
+        setIsPlaying(!isPlaying);
+    };
+    const handleTimeUpdate = () => {
+        if (!audioRef.current)
+            return;
+        setCurrentTime(audioRef.current.currentTime);
+        setDuration(audioRef.current.duration);
+    };
+    const handleSeek = (e) => {
+        if (!audioRef.current || !e.currentTarget)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        const time = percent * duration;
+        audioRef.current.currentTime = time;
+        setCurrentTime(time);
+    };
+    const skip = (seconds) => {
+        if (audioRef.current)
+            audioRef.current.currentTime += seconds;
+    };
+    const toggleFullscreen = () => {
+        if (!playerRef.current)
+            return;
+        isFullscreen
+            ? document.exitFullscreen?.()
+            : playerRef.current.requestFullscreen?.();
+        setIsFullscreen(!isFullscreen);
+    };
+    const formatTime = (time) => {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+    };
+    return (_jsxs("div", { ref: playerRef, className: className, style: {
+            position: "relative",
+            width,
+            backgroundColor,
+            borderRadius,
+            color: secondaryColor,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+            overflow: "hidden",
+            padding,
+            boxSizing: "border-box",
+            maxWidth: "100%",
+        }, children: [_jsx("audio", { ref: audioRef, src: src, autoPlay: autoPlay, loop: loop, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleTimeUpdate }), thumbnail && (_jsx("img", { src: thumbnail, alt: "Audio Thumbnail", style: {
+                    width: "100%",
+                    objectFit: "cover",
+                    borderRadius,
+                    marginBottom: "16px",
+                    maxHeight: "150px",
+                } })), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "10px",
+                    flexShrink: 0,
+                    marginTop: "10px",
+                }, children: [_jsx("button", { onClick: () => skip(-10), "aria-label": "Skip Back 10s", children: _jsx(SkipBack, { size: 20 }) }), _jsx("button", { onClick: togglePlayPause, style: {
+                            background: primaryColor,
+                            borderRadius: "9999px",
+                            padding: "10px",
+                            color: "#fff",
+                            border: "none",
+                            cursor: "pointer",
+                        }, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }) }), _jsx("button", { onClick: () => skip(10), "aria-label": "Skip Forward 10s", children: _jsx(SkipForward, { size: 20 }) })] }), _jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "12px",
+                    width: "100%",
+                }, children: [_jsxs("div", { style: { flexShrink: 0, minWidth: "60px", textAlign: "center" }, children: [_jsx("span", { style: { fontSize: "14px", marginRight: "4px" }, children: formatTime(currentTime) }), _jsxs("span", { style: { fontSize: "14px", color: "#aaa" }, children: ["/ ", formatTime(duration)] })] }), _jsx("div", { onClick: handleSeek, style: {
+                            flex: 1,
+                            height: "8px",
+                            background: "#444",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                            position: "relative",
+                            minWidth: "100px",
+                        }, children: _jsx("div", { style: {
+                                width: `${(currentTime / duration) * 100 || 0}%`,
+                                height: "100%",
+                                background: primaryColor,
+                                borderRadius: "4px",
+                            } }) }), _jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            flexShrink: 0,
+                        }, children: [_jsx("button", { onClick: () => setIsLooping(!isLooping), "aria-label": "Toggle Loop", children: _jsx(RotateCcw, { size: 18, color: isLooping ? primaryColor : undefined }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.5), "aria-label": "Toggle Mute", children: volume > 0 ? _jsx(Volume2, { size: 18 }) : _jsx(VolumeX, { size: 18 }) }), _jsx("button", { onClick: toggleFullscreen, "aria-label": "Toggle Fullscreen", children: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }) })] })] })] }));
+};