import React, { createContext, useContext, useState, useEffect, useRef } from "react"; import { BrowserRouter, Routes, Route, Link, NavLink, useLocation } from "react-router-dom"; import { motion, AnimatePresence } from "framer-motion"; import { Play, Pause, SkipForward, SkipBack, Search, Heart, User, Compass, Sparkles, Volume2, VolumeX, ChevronDown, Plus, Check, Share2, Bell, Shield, ListMusic, Sliders, Info, LogOut, ArrowUpRight } from "lucide-react"; import { toast, Toaster } from "sonner"; // --- TRACK INTERFACE --- interface Track { id: string; title: string; artist: string; album: string; cover: string; audioUrl: string; duration: number; genre: string; color: string; } // --- MEDIA CONSTANTS --- const TRACKS: Track[] = [ { id: "1", title: "Midnight Drift", artist: "Kavinsky Protocol", album: "Outrun Horizon", cover: "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=300&auto=format&fit=crop", audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", duration: 372, genre: "Synthwave", color: "from-purple-900/60 to-zinc-950" }, { id: "2", title: "Neon Horizon", artist: "Cyberpunk Syndicate", album: "Grid Runner", cover: "https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?q=80&w=300&auto=format&fit=crop", audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", duration: 423, genre: "Phonk / Electro", color: "from-emerald-900/60 to-zinc-950" }, { id: "3", title: "Solitude Echoes", artist: "Lofi Dreamer", album: "Chill Station", cover: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300&auto=format&fit=crop", audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3", duration: 302, genre: "Lofi Ambient", color: "from-blue-900/60 to-zinc-950" }, { id: "4", title: "Prism Waves", artist: "Solaris", album: "Spectrum", cover: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300&auto=format&fit=crop", audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3", duration: 302, genre: "Dream Pop", color: "from-pink-900/60 to-zinc-950" }, { id: "5", title: "Vortex", artist: "Modulate", album: "Analog Sessions", cover: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300&auto=format&fit=crop", audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3", duration: 341, genre: "Techno", color: "from-amber-900/60 to-zinc-950" } ]; // --- PLAYER CONTEXT --- interface PlayerContextType { currentTrack: Track; isPlaying: boolean; progress: number; duration: number; volume: number; isMuted: boolean; likedTracks: string[]; isPremium: boolean; playTrack: (track: Track) => void; togglePlay: () => void; nextTrack: () => void; prevTrack: () => void; seek: (time: number) => void; setVolume: (vol: number) => void; toggleMute: () => void; toggleLike: (id: string) => void; setPremium: (status: boolean) => void; } const PlayerContext = createContext(null); export function PlayerProvider({ children }: { children: React.ReactNode }) { const [currentTrack, setCurrentTrack] = useState(TRACKS[0]); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolumeState] = useState(0.8); const [isMuted, setIsMuted] = useState(false); const [likedTracks, setLikedTracks] = useState(["1", "3"]); const [isPremium, setPremium] = useState(false); const audioRef = useRef(null); useEffect(() => { const AudioConstructor = typeof window !== "undefined" ? window.Audio : null; if (!AudioConstructor) return; audioRef.current = new AudioConstructor(currentTrack.audioUrl); audioRef.current.volume = isMuted ? 0 : volume; const handleTimeUpdate = () => { if (audioRef.current) setProgress(audioRef.current.currentTime); }; const handleLoadedMetadata = () => { if (audioRef.current) setDuration(audioRef.current.duration); }; const handleEnded = () => { nextTrack(); }; audioRef.current.addEventListener("timeupdate", handleTimeUpdate); audioRef.current.addEventListener("loadedmetadata", handleLoadedMetadata); audioRef.current.addEventListener("ended", handleEnded); if (isPlaying) { audioRef.current.play().catch(() => setIsPlaying(false)); } return () => { if (audioRef.current) { audioRef.current.pause(); audioRef.current.removeEventListener("timeupdate", handleTimeUpdate); audioRef.current.removeEventListener("loadedmetadata", handleLoadedMetadata); audioRef.current.removeEventListener("ended", handleEnded); } }; }, [currentTrack]); useEffect(() => { if (audioRef.current) { if (isPlaying) { audioRef.current.play().catch(() => setIsPlaying(false)); } else { audioRef.current.pause(); } } }, [isPlaying]); useEffect(() => { if (audioRef.current) { audioRef.current.volume = isMuted ? 0 : volume; } }, [volume, isMuted]); const playTrack = (track: Track) => { setCurrentTrack(track); setIsPlaying(true); toast.success(`Playing: ${track.title}`); }; const togglePlay = () => { setIsPlaying(!isPlaying); }; const nextTrack = () => { const currentIndex = TRACKS.findIndex((t) => t.id === currentTrack.id); const nextIndex = (currentIndex + 1) % TRACKS.length; playTrack(TRACKS[nextIndex]); }; const prevTrack = () => { const currentIndex = TRACKS.findIndex((t) => t.id === currentTrack.id); const prevIndex = (currentIndex - 1 + TRACKS.length) % TRACKS.length; playTrack(TRACKS[prevIndex]); }; const seek = (time: number) => { if (audioRef.current) { audioRef.current.currentTime = time; setProgress(time); } }; const setVolume = (vol: number) => { setVolumeState(vol); if (vol > 0) setIsMuted(false); }; const toggleMute = () => { setIsMuted(!isMuted); }; const toggleLike = (id: string) => { setLikedTracks((prev) => { const isLiked = prev.includes(id); if (isLiked) { toast.info("Removed from Liked Songs"); return prev.filter((item) => item !== id); } else { toast.success("Added to Liked Songs"); return [...prev, id]; } }); }; return ( {children} ); } export function usePlayer() { const context = useContext(PlayerContext); if (!context) throw new Error("usePlayer must be used within PlayerProvider"); return context; } // --- FORMAT HELPER --- const formatTime = (time: number) => { if (isNaN(time)) return "0:00"; const mins = Math.floor(time / 60); const secs = Math.floor(time % 60); return `${mins}:${secs < 10 ? "0" : ""}${secs}`; }; // --- APP LAYOUT COMPONENT --- function AppShell() { const { currentTrack, isPlaying, togglePlay, nextTrack, likedTracks, toggleLike } = usePlayer(); const [isExpanded, setIsExpanded] = useState(false); const location = useLocation(); return (

{/* Mobile Device Frame Container */}

{/* Dynamic Background Glow mapped to current track */}

{/* Content Area */}

} /> } /> } /> } /> } />

{/* Mini Player Bar */}

setIsExpanded(true)} className="bg-zinc-900/90 backdrop-blur-md border border-zinc-800/60 rounded-2xl p-3 flex items-center justify-between cursor-pointer shadow-lg hover:border-emerald-500/30 transition-colors" >

{ (e.target as HTMLImageElement).src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

{currentTrack.title}

{currentTrack.artist}

e.stopPropagation()}>

{/* Bottom Navigation */}

} label="Discover" /> } label="Search" /> } label="Library" /> } label="Premium" /> } label="Profile" />

{/* Full Screen Player Modal Overlay */} {isExpanded && ( setIsExpanded(false)} /> )}

); } // --- NAV BUTTON HELPER --- function NavButton({ to, icon, label }: { to: string; icon: React.ReactNode; label: string }) { return ( ` flex flex-col items-center gap-1 py-2 px-3 rounded-xl transition-all duration-300 ${isActive ? 'text-emerald-400 scale-105' : 'text-zinc-500 hover:text-zinc-300'} `} > {React.cloneElement(icon as React.ReactElement, { className: "w-5 h-5" })} {label} ); } // --- FULL SCREEN PLAYER OVERLAY --- function FullScreenPlayer({ onClose }: { onClose: () => void }) { const { currentTrack, isPlaying, togglePlay, nextTrack, prevTrack, progress, duration, seek, volume, setVolume, isMuted, toggleMute, likedTracks, toggleLike } = usePlayer(); return ( {/* Dynamic Background Glow */}

{/* Header */}

Now Playing

{/* Album Art & Track details */}

{currentTrack.title}

{currentTrack.artist}

{currentTrack.genre}

{/* Controls & Progress */}

{/* Progress Slider */}

{ const rect = e.currentTarget.getBoundingClientRect(); const clickX = e.clientX - rect.left; const percentage = clickX / rect.width; seek(percentage * duration); }}>

{formatTime(progress)} {formatTime(duration)}

{/* Playback Buttons */}

{/* Volume & Details */}

setVolume(parseFloat(e.target.value))} className="w-full accent-emerald-500 h-1 bg-zinc-800 rounded-lg cursor-pointer" />

); } // --- VIEW 1: HOME / DISCOVER --- function HomeView() { const { playTrack, currentTrack, isPlaying } = usePlayer(); const [greeting, setGreeting] = useState("Good evening"); useEffect(() => { const hrs = new Date().getHours(); if (hrs < 12) setGreeting("Good morning"); else if (hrs < 18) setGreeting("Good afternoon"); else setGreeting("Good evening"); }, []); return ( {/* Header */}

Echo Stream

{greeting}

{/* Featured Banner */}

Featured Mix

Retro Future Synthwave

The ultimate neon-drenched driving soundtrack updated daily.

{/* Quick Picks Grid */}

Quick Picks

{TRACKS.slice(0, 4).map((track) => (

playTrack(track)} className="flex items-center gap-3 p-2 bg-zinc-900/40 hover:bg-zinc-900/80 border border-zinc-800/40 rounded-xl cursor-pointer transition-colors" >

{ event.currentTarget.onerror = null; event.currentTarget.src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

{track.title}

{track.artist}

))}

{/* Trending Tracks */}

Trending Now

{ toast.info("Discovering all trending tracks in your area"); }} className="text-xs text-emerald-400 font-mono cursor-pointer hover:underline" > See All

{TRACKS.map((track, idx) => (

playTrack(track)} className={`flex items-center justify-between p-3 rounded-xl cursor-pointer transition-all ${ currentTrack.id === track.id ? 'bg-emerald-500/10 border border-emerald-500/20' : 'bg-zinc-900/20 hover:bg-zinc-900/50 border border-transparent' }`} >

0{idx + 1}

{ event.currentTarget.onerror = null; event.currentTarget.src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

{track.title}

{track.artist}

{formatTime(track.duration)} {currentTrack.id === track.id && isPlaying ? (

) : ( )}

))}

); } // --- VIEW 2: SEARCH & BROWSE --- function SearchView() { const { playTrack } = usePlayer(); const [query, setQuery] = useState(""); const [filtered, setFiltered] = useState(TRACKS); const categories = [ { title: "Synthwave", color: "from-purple-600 to-indigo-900" }, { title: "Lofi Beats", color: "from-blue-600 to-cyan-900" }, { title: "Cyberpunk", color: "from-emerald-600 to-teal-900" }, { title: "Techno Club", color: "from-amber-600 to-orange-900" }, { title: "Dream Pop", color: "from-pink-600 to-rose-900" }, { title: "Chillstep", color: "from-violet-600 to-purple-900" }, ]; useEffect(() => { if (!query) { setFiltered(TRACKS); } else { const q = query.toLowerCase(); setFiltered( TRACKS.filter( (t) => t.title.toLowerCase().includes(q) || t.artist.toLowerCase().includes(q) || t.genre.toLowerCase().includes(q) ) ); } }, [query]); return (

Search

Discover tracks, artists, and genres

{/* Search Bar */}

setQuery(e.target.value)} className="w-full bg-zinc-900 border border-zinc-800 focus:border-emerald-500 rounded-2xl py-3.5 pl-12 pr-4 text-sm text-white placeholder-zinc-500 focus:outline-none transition-colors shadow-inner" />

{/* Results or Categories */} {query ? (

Search Results

{filtered.length > 0 ? (

{filtered.map((track) => (

playTrack(track)} className="flex items-center gap-3 p-2 bg-zinc-900/30 hover:bg-zinc-900/60 border border-zinc-800/40 rounded-xl cursor-pointer transition-colors" >

{ event.currentTarget.onerror = null; event.currentTarget.src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

{track.title}

{track.artist}

))}

) : (

No tracks found matching "{query}"

)}

) : (

Browse All

{categories.map((cat, idx) => (

{ setQuery(cat.title); toast.info(`Filtering by ${cat.title}`); }} className={`h-28 rounded-2xl bg-gradient-to-br ${cat.color} p-4 flex flex-col justify-between cursor-pointer hover:scale-[1.02] transition-transform relative overflow-hidden group border border-white/5`} >

{cat.title}

Explore

))}

)} ); } // --- VIEW 3: LIBRARY --- function LibraryView() { const { playTrack, likedTracks, toggleLike } = usePlayer(); const [activeTab, setActiveTab] = useState<"liked" | "playlists">("liked"); const likedList = TRACKS.filter((t) => likedTracks.includes(t.id)); return (

Your Library

Your curated world of sound

{/* Tabs */}

{/* Tab Content */} {activeTab === "liked" ? (

{likedList.length} Tracks Saved {likedList.length > 0 && ( )}

{likedList.length > 0 ? (

{likedList.map((track) => (

playTrack(track)} className="flex items-center justify-between p-2 bg-zinc-900/20 hover:bg-zinc-900/50 rounded-xl cursor-pointer transition-colors border border-transparent hover:border-zinc-800/50" >

{ event.currentTarget.onerror = null; event.currentTarget.src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

{track.title}

{track.artist}

e.stopPropagation()}>

))}

) : (

No liked songs yet. Start exploring!

)}

) : (

Create Playlist

Build your custom soundscape

Your Playlists

toast.info("Opening Late Night Drives playlist")} className="flex items-center gap-3 p-3 bg-zinc-900/20 rounded-xl cursor-pointer hover:bg-zinc-900/40 transition-colors" > Chill Mix

{ event.currentTarget.onerror = null; event.currentTarget.src = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=100&auto=format&fit=crop"; }} />

Late Night Drives

4 tracks • Curated by you

)} ); } // --- VIEW 4: PREMIUM --- function PremiumView() { const { isPremium, setPremium } = usePlayer(); const handleActivate = () => { setPremium(true); toast.success("Echo Premium Activated! Enjoy Hi-Fi sound."); }; return (

Echo Premium

Limitless Sound.

Experience music in lossless 24-bit studio quality with offline playback.

{/* Premium Card */}

Hi-Fi Access

$9.99 / month

24-bit FLAC High-Resolution Audio

Unlimited skips & zero ad interruptions

Offline listening with smart downloads

{isPremium ? (

You are an Echo Premium Member

) : ( )}

{/* Free vs Premium Comparison */}

Why Premium?

Free Tier

128kbps standard audio, occasional ads, online only.

Premium Tier

1411kbps Lossless, ad-free, offline cache enabled.

); } // --- VIEW 5: PROFILE --- function ProfileView() { const { isPremium, setPremium } = usePlayer(); const [notifications, setNotifications] = useState(true); return ( {/* Profile Header */}

Elena Rostova

Member since Dec 2023

{isPremium ? "Premium Member" : "Free Tier"}

{/* Settings Options */}

Account Settings

{/* Notifications Toggle */}

Push Notifications

Alerts for new releases

{/* Audio Quality Setting */}

toast.info("Audio format is set to maximum available")}>

Streaming Quality

{isPremium ? "Extreme (24-bit Hi-Fi)" : "High (320kbps)"}

{/* Premium Toggle (Simulated) */}

{ setPremium(!isPremium); toast.success(`Premium status toggled to: ${!isPremium ? 'Active' : 'Inactive'}`); }}>

Manage Subscription

Toggle or upgrade tier

Modify

{/* Support & Legal */}

Support

toast.info("Help Center is simulated")}> Help Center

toast.info("Privacy Policy is simulated")}> Privacy Policy

{/* Logout */} ); } // --- MAIN CONTAINER --- export default function App() { return ( ); }