"use client" import { useState, useEffect, useRef } from 'react'; import { ChevronRight, Play, Pause, Volume2, Heart, Plus, MoreHorizontal, SkipBack, SkipForward } from 'lucide-react'; interface Song { title: string; artists: string; duration: number; albumArt: string; } interface SpotifyCardProps { songs: Song[]; } export function SpotifyCard({ songs }: SpotifyCardProps) { const [isHovered, setIsHovered] = useState(false); const [isPlaying, setIsPlaying] = useState(false); const [animationProgress, setAnimationProgress] = useState(0); const [isLiked, setIsLiked] = useState(false); const [volume, setVolume] = useState(75); const [isDraggingVolume, setIsDraggingVolume] = useState(false); const [isDraggingProgress, setIsDraggingProgress] = useState(false); const [showContextMenu, setShowContextMenu] = useState(false); const [isMuted, setIsMuted] = useState(false); const [currentSongIndex, setCurrentSongIndex] = useState(0); const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({ x: 50, y: 50 }); const cardRef = useRef(null); const volumeBarRef = useRef(null); const progressBarRef = useRef(null); const contextMenuRef = useRef(null); const currentSong = songs[currentSongIndex]; const songDuration = currentSong.duration; useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (contextMenuRef.current && !contextMenuRef.current.contains(event.target as Node)) { setShowContextMenu(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); useEffect(() => { let interval: NodeJS.Timeout; if (isPlaying && !isDraggingProgress) { interval = setInterval(() => { setAnimationProgress(prev => { if (prev >= 100) { handleNextSong(); return 0; } return prev + (100 / (songDuration * 10)); }); }, 100); } return () => clearInterval(interval); }, [isPlaying, isDraggingProgress, songDuration, currentSongIndex]); const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); setMousePosition({ x: ((e.clientX - rect.left) / rect.width) * 100, y: ((e.clientY - rect.top) / rect.height) * 100 }); }; const handleVolumeMouseDown = (e: React.MouseEvent) => { e.stopPropagation(); setIsDraggingVolume(true); handleVolumeChange(e); const handleMouseMove = (e: MouseEvent) => handleVolumeChange(e); const handleMouseUp = () => { setIsDraggingVolume(false); document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleVolumeChange = (e: MouseEvent | React.MouseEvent) => { if (!volumeBarRef.current) return; const rect = volumeBarRef.current.getBoundingClientRect(); let newVolume = ((e.clientX - rect.left) / rect.width) * 100; newVolume = Math.max(0, Math.min(100, newVolume)); setVolume(newVolume); setIsMuted(newVolume === 0); }; const handleProgressMouseDown = (e: React.MouseEvent) => { e.stopPropagation(); setIsDraggingProgress(true); handleProgressChange(e); const handleMouseMove = (e: MouseEvent) => handleProgressChange(e); const handleMouseUp = () => { setIsDraggingProgress(false); document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleProgressChange = (e: MouseEvent | React.MouseEvent) => { if (!progressBarRef.current) return; const rect = progressBarRef.current.getBoundingClientRect(); let newProgress = ((e.clientX - rect.left) / rect.width) * 100; newProgress = Math.max(0, Math.min(100, newProgress)); setAnimationProgress(newProgress); }; const toggleMute = (e: React.MouseEvent) => { e.stopPropagation(); if (isMuted) { setIsMuted(false); setVolume(volume === 0 ? 75 : volume); } else { setIsMuted(true); } }; const togglePlay = (e?: React.MouseEvent) => { e?.stopPropagation(); setIsPlaying(!isPlaying); }; const handlePreviousSong = (e?: React.MouseEvent) => { e?.stopPropagation(); const newIndex = currentSongIndex === 0 ? songs.length - 1 : currentSongIndex - 1; setCurrentSongIndex(newIndex); setAnimationProgress(0); if (!isPlaying) setIsPlaying(true); }; const handleNextSong = (e?: React.MouseEvent) => { e?.stopPropagation(); const newIndex = (currentSongIndex + 1) % songs.length; setCurrentSongIndex(newIndex); setAnimationProgress(0); if (!isPlaying) setIsPlaying(true); }; const formatTime = (seconds: number): string => { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, '0')}`; }; const currentTime = (animationProgress / 100) * songDuration; const handleContextMenu = (e: React.MouseEvent) => { e.preventDefault(); setShowContextMenu(true); }; const VolumeIcon = () => { if (isMuted || volume === 0) { return ; } return ; }; return (

setIsHovered(true)} onMouseLeave={() => { setIsHovered(false); setShowContextMenu(false); }} onMouseMove={handleMouseMove} onContextMenu={handleContextMenu} >

Spotify

Premium Experience

Search for music and podcasts, browse your library, and control playback.

{showContextMenu && (

)}

{isPlaying && ( <> {[1, 2, 3, 4, 5].map((i) => (

))} )}

{currentSong.title}

{currentSong.artists}

{formatTime(currentTime)} / {formatTime(songDuration)}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Spotify Card

Created by

Installation

How to use

Dependencies

Spotify Card

Created by

Installation

How to use

Dependencies