[V0_FILE]typescriptreact:file="app/page.tsx" import { Suspense } from "react" import MusicPlayer from "@/components/music-player" import LoadingScreen from "@/components/loading-screen" export default function HomePage() { return ( }>

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import "@/app/globals.css" import { ThemeProvider } from "@/components/theme-provider" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Music Player", description: "A modern music player application", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/loading-screen.tsx" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" export default function LoadingScreen() { const canvasRef = useRef(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions canvas.width = window.innerWidth canvas.height = 200 // Create a simple animation without audio const barCount = 50 const bars: number[] = Array(barCount) .fill(0) .map(() => Math.random() * 100) function renderFrame() { if (!canvas) return requestAnimationFrame(renderFrame) ctx.fillStyle = "#000" ctx.fillRect(0, 0, canvas.width, canvas.height) const barWidth = (canvas.width / barCount) * 0.8 for (let i = 0; i < barCount; i++) { // Animate bars bars[i] = bars[i] + (Math.random() * 10 - 5) bars[i] = Math.max(10, Math.min(100, bars[i])) const barHeight = bars[i] * 1.5 const x = i * (barWidth + 1) + (canvas.width - barCount * (barWidth + 1)) / 2 // Use the Wave logo blue color ctx.fillStyle = "rgb(61, 90, 254)" ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight) } } renderFrame() // Simulate loading time const timer = setTimeout(() => { setIsLoading(false) }, 3000) return () => { clearTimeout(timer) } }, []) if (!isLoading) return null return (

) } [V0_FILE]typescriptreact:file="components/playlist-manager.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, } from "@/components/ui/dialog" import { Plus, Share2, Lock, Globe, Music } from "lucide-react" import Image from "next/image" interface Song { id: string title: string artist: string duration: number file: File | string url: string coverArt?: string liked?: boolean } interface Playlist { id: string name: string songs: Song[] isPublic: boolean createdBy: string } interface PlaylistManagerProps { playlists: Playlist[] onCreatePlaylist: (name: string) => void onSharePlaylist: (playlistId: string) => void onSongSelect: (song: Song) => void currentSong: Song | null } export default function PlaylistManager({ playlists, onCreatePlaylist, onSharePlaylist, onSongSelect, currentSong, }: PlaylistManagerProps) { const [newPlaylistName, setNewPlaylistName] = useState("") const [selectedPlaylist, setSelectedPlaylist] = useState(playlists.length > 0 ? playlists[0] : null) const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}` } const handleCreatePlaylist = () => { if (newPlaylistName.trim()) { onCreatePlaylist(newPlaylistName.trim()) setNewPlaylistName("") } } return (

Your Playlists

Playlists

{playlists.length > 0 ? ( playlists.map((playlist) => (

setSelectedPlaylist(playlist)} >

{playlist.name}

{playlist.songs.length} songs

{playlist.isPublic ? ( ) : ( )}

)) ) : (

No playlists yet

Create a playlist to organize your music

)}

{selectedPlaylist ? (

{selectedPlaylist.name}

Created by {selectedPlaylist.createdBy} • {selectedPlaylist.songs.length} songs

{selectedPlaylist.songs.length > 0 ? ( selectedPlaylist.songs.map((song) => (

onSongSelect(song)} >

{song.title}

{song.artist}

{formatTime(song.duration)}

)) ) : (

No songs in this playlist

Add songs from your library

)}

) : (

Select a playlist to view its contents

)}

) } [V0_FILE]typescriptreact:file="components/ai-recommendations.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Sparkles, Plus, Music, ListMusic } from "lucide-react" import Image from "next/image" interface Song { id: string title: string artist: string duration: number file: File | string url: string coverArt?: string liked?: boolean } interface Playlist { id: string name: string songs: Song[] isPublic: boolean createdBy: string } interface AIRecommendationsProps { userSongs: Song[] playlists: Playlist[] onAddToLibrary: (song: Song) => void } export default function AIRecommendations({ userSongs, playlists, onAddToLibrary }: AIRecommendationsProps) { const [recommendedSongs, setRecommendedSongs] = useState([]) const [recommendedPlaylists, setRecommendedPlaylists] = useState([]) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate AI recommendation loading const timer = setTimeout(() => { // Generate mock recommendations based on user's library const mockRecommendedSongs: Song[] = [ { id: "rec-1", title: "Summer Nights", artist: "Chill Vibes", duration: 195, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: false, }, { id: "rec-2", title: "Ocean Waves", artist: "Ambient Sounds", duration: 240, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: false, }, { id: "rec-3", title: "Mountain High", artist: "Nature Beats", duration: 210, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: false, }, { id: "rec-4", title: "City Lights", artist: "Urban Sounds", duration: 180, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: false, }, ] const mockRecommendedPlaylists: Playlist[] = [ { id: "rec-pl-1", name: "Summer Vibes 2025", songs: mockRecommendedSongs.slice(0, 2), isPublic: true, createdBy: "Community", }, { id: "rec-pl-2", name: "Chill & Relax", songs: mockRecommendedSongs.slice(2, 4), isPublic: true, createdBy: "Community", }, ] setRecommendedSongs(mockRecommendedSongs) setRecommendedPlaylists(mockRecommendedPlaylists) setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, [userSongs]) const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}` } return (

Discover New Music

AI-Powered Recommendations

Recommended Songs Trending Playlists Songs You Might Like {isLoading ? (

Finding songs for you...

) : (

{recommendedSongs.map((song) => (

{song.title}

{song.artist}

{formatTime(song.duration)}

))}

)} Popular Playlists {isLoading ? (

Finding playlists for you...

) : (

{recommendedPlaylists.map((playlist) => (

{playlist.songs.slice(0, 4).map((song, index) => (

))}

{playlist.name}

By {playlist.createdBy} • {playlist.songs.length} songs

))}

)}

) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/cover-art-modal.tsx" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Upload, ImageIcon, Camera } from "lucide-react" import Image from "next/image" interface CoverArtModalProps { isOpen: boolean onClose: () => void onSave: (imageUrl: string) => void currentImage?: string } export default function CoverArtModal({ isOpen, onClose, onSave, currentImage }: CoverArtModalProps) { const [selectedTab, setSelectedTab] = useState("upload") const [previewImage, setPreviewImage] = useState(null) const [isCapturing, setIsCapturing] = useState(false) const fileInputRef = useRef(null) const videoRef = useRef(null) const canvasRef = useRef(null) const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { const imageUrl = URL.createObjectURL(file) setPreviewImage(imageUrl) } } const handleSave = () => { if (previewImage) { onSave(previewImage) onClose() } } const startCamera = async () => { try { setIsCapturing(true) const stream = await navigator.mediaDevices.getUserMedia({ video: true }) if (videoRef.current) { videoRef.current.srcObject = stream } } catch (err) { console.error("Error accessing camera:", err) setIsCapturing(false) } } const stopCamera = () => { if (videoRef.current && videoRef.current.srcObject) { const stream = videoRef.current.srcObject as MediaStream stream.getTracks().forEach((track) => track.stop()) videoRef.current.srcObject = null } setIsCapturing(false) } const capturePhoto = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current const canvas = canvasRef.current const context = canvas.getContext("2d") if (context) { canvas.width = video.videoWidth canvas.height = video.videoHeight context.drawImage(video, 0, 0, canvas.width, canvas.height) const imageUrl = canvas.toDataURL("image/png") setPreviewImage(imageUrl) stopCamera() } } } const handleTabChange = (value: string) => { setSelectedTab(value) setPreviewImage(null) if (value === "camera") { startCamera() } else if (isCapturing) { stopCamera() } } return ( ) } [V0_FILE]typescriptreact:file="components/song-item.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Heart, HeartOff, MoreHorizontal, Play, ImageIcon } from "lucide-react" import Image from "next/image" import CoverArtModal from "./cover-art-modal" interface Song { id: string title: string artist: string duration: number file: File | string url: string coverArt?: string liked?: boolean } interface SongItemProps { song: Song isActive?: boolean onSelect: (song: Song) => void onToggleLike: (songId: string) => void onCoverArtChange: (songId: string, imageUrl: string) => void formatTime: (time: number) => string dropdownItems?: React.ReactNode } export default function SongItem({ song, isActive, onSelect, onToggleLike, onCoverArtChange, formatTime, dropdownItems, }: SongItemProps) { const [coverArtModalOpen, setCoverArtModalOpen] = useState(false) return ( <>

onSelect(song)} >

{ e.stopPropagation() setCoverArtModalOpen(true) }} >

{song.title}

{song.artist}

{formatTime(song.duration)} e.stopPropagation()}> onSelect(song)}> Play Now setCoverArtModalOpen(true)}> Change Cover Art {dropdownItems}

setCoverArtModalOpen(false)} onSave={(imageUrl) => onCoverArtChange(song.id, imageUrl)} currentImage={song.coverArt} /> ) } [V0_FILE]typescriptreact:file="components/music-library.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { DropdownMenuItem } from "@/components/ui/dropdown-menu" import { Search, Plus } from "lucide-react" import SongItem from "./song-item" interface Song { id: string title: string artist: string duration: number file: File | string url: string coverArt?: string liked?: boolean } interface Playlist { id: string name: string songs: Song[] isPublic: boolean createdBy: string } // Update the MusicLibraryProps interface to include onCoverArtChange interface MusicLibraryProps { songs: Song[] onSongSelect: (song: Song) => void onToggleLike: (songId: string) => void onAddToPlaylist: (songId: string, playlistId: string) => void onCoverArtChange: (songId: string, imageUrl: string) => void playlists: Playlist[] currentSong: Song | null } export default function MusicLibrary({ songs, onSongSelect, onToggleLike, onAddToPlaylist, playlists, currentSong, onCoverArtChange, }: MusicLibraryProps) { const [searchQuery, setSearchQuery] = useState("") const [filter, setFilter] = useState<"all" | "liked">("all") const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}` } const filteredSongs = songs.filter((song) => { const matchesSearch = song.title.toLowerCase().includes(searchQuery.toLowerCase()) || song.artist.toLowerCase().includes(searchQuery.toLowerCase()) if (filter === "liked") { return matchesSearch && song.liked } return matchesSearch }) return ( Music Library

setSearchQuery(e.target.value)} />

{filteredSongs.length > 0 ? ( filteredSongs.map((song) => ( { // This function needs to be passed up to the parent component // We'll assume there's a function called onCoverArtChange in the props if (typeof onCoverArtChange === "function") { onCoverArtChange(songId, imageUrl) } }} formatTime={formatTime} dropdownItems={ playlists.length > 0 && ( <> Add to Playlist {playlists.map((playlist) => ( onAddToPlaylist(song.id, playlist.id)}> {playlist.name} ))} ) } /> )) ) : (

No songs found

{filter === "liked" ? (

Like some songs to see them here

) : searchQuery ? (

Try a different search term

) : (

Upload music to get started

)}

) } [V0_FILE]typescriptreact:file="components/music-player.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, Upload, ListMusic, Share2, Save, Sparkles, Heart, HeartOff, } from "lucide-react" import Image from "next/image" import { useToast } from "@/hooks/use-toast" import { useMobile } from "@/hooks/use-mobile" import MusicLibrary from "@/components/music-library" import PlaylistManager from "@/components/playlist-manager" import AIRecommendations from "@/components/ai-recommendations" // Add this import at the top of the file import SongItem from "./song-item" interface Song { id: string title: string artist: string duration: number file: File | string url: string coverArt?: string liked?: boolean } interface Playlist { id: string name: string songs: Song[] isPublic: boolean createdBy: string } export default function MusicPlayer() { const [songs, setSongs] = useState([]) const [playlists, setPlaylists] = useState([]) const [currentSong, setCurrentSong] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState(0.7) const [isMuted, setIsMuted] = useState(false) const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) const [activeTab, setActiveTab] = useState("player") const audioRef = useRef(null) const { toast } = useToast() const isMobile = useMobile() // Load demo songs useEffect(() => { const demoSongs: Song[] = [ { id: "1", title: "Summer Vibes", artist: "Various Artists", duration: 180, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: false, }, { id: "2", title: "Chill Afternoon", artist: "Various Artists", duration: 210, file: "", url: "", // Empty URL to prevent loading non-existent files coverArt: "/placeholder.svg?height=300&width=300", liked: true, }, ] const demoPlaylists: Playlist[] = [ { id: "1", name: "My Favorites", songs: [demoSongs[1]], isPublic: false, createdBy: "You", }, { id: "2", name: "Trending Playlists", songs: demoSongs, isPublic: true, createdBy: "Community", }, ] setSongs(demoSongs) setPlaylists(demoPlaylists) // Don't automatically set current song to prevent auto-play of non-existent files // setCurrentSong(demoSongs[0]); }, []) // Handle audio events useEffect(() => { const audio = audioRef.current if (!audio) return const handleTimeUpdate = () => { setCurrentTime(audio.currentTime) } const handleLoadedMetadata = () => { setDuration(audio.duration) } const handleEnded = () => { playNextSong() } audio.addEventListener("timeupdate", handleTimeUpdate) audio.addEventListener("loadedmetadata", handleLoadedMetadata) audio.addEventListener("ended", handleEnded) return () => { audio.removeEventListener("timeupdate", handleTimeUpdate) audio.removeEventListener("loadedmetadata", handleLoadedMetadata) audio.removeEventListener("ended", handleEnded) } }, []) // Handle play/pause useEffect(() => { const audio = audioRef.current if (!audio) return if (isPlaying && currentSong?.url) { audio.play().catch((error) => { console.error("Error playing audio:", error) setIsPlaying(false) // Show toast notification for playback error toast({ title: "Playback Error", description: "This song cannot be played. Please upload audio files to play music.", variant: "destructive", }) }) } else { audio.pause() } }, [isPlaying, currentSong, toast]) // Handle volume change useEffect(() => { const audio = audioRef.current if (!audio) return audio.volume = isMuted ? 0 : volume }, [volume, isMuted]) const formatTime = (time: number) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}` } const handlePlayPause = () => { setIsPlaying(!isPlaying) } const handleVolumeChange = (value: number[]) => { setVolume(value[0]) if (isMuted && value[0] > 0) { setIsMuted(false) } } const toggleMute = () => { setIsMuted(!isMuted) } const handleSeek = (value: number[]) => { const audio = audioRef.current if (audio) { audio.currentTime = value[0] setCurrentTime(value[0]) } } const playNextSong = () => { if (!currentSong || songs.length === 0) return const currentIndex = songs.findIndex((song) => song.id === currentSong.id) const nextIndex = (currentIndex + 1) % songs.length setCurrentSong(songs[nextIndex]) setIsPlaying(true) } const playPreviousSong = () => { if (!currentSong || songs.length === 0) return const currentIndex = songs.findIndex((song) => song.id === currentSong.id) const prevIndex = (currentIndex - 1 + songs.length) % songs.length setCurrentSong(songs[prevIndex]) setIsPlaying(true) } const handleSongSelect = (song: Song) => { if (!song.url) { toast({ title: "Cannot Play Demo Song", description: "Please upload real audio files to play music.", variant: "destructive", }) return } setCurrentSong(song) setIsPlaying(true) } // Add a new function to handle cover art upload const handleCoverArtUpload = (songId: string, file: File) => { if (!file.type.startsWith("image/")) { toast({ title: "Invalid File", description: "Please select an image file for cover art.", variant: "destructive", }) return } const imageUrl = URL.createObjectURL(file) setSongs((prev) => prev.map((song) => (song.id === songId ? { ...song, coverArt: imageUrl } : song))) // Update current song if it's the one being modified if (currentSong?.id === songId) { setCurrentSong((prev) => (prev ? { ...prev, coverArt: imageUrl } : null)) } toast({ title: "Cover Art Updated", description: "The song cover art has been updated.", }) } // Modify the handleFileUpload function to extract cover art from audio files if possible const handleFileUpload = (event: React.ChangeEvent) => { const files = event.target.files if (!files || files.length === 0) return const newSongs: Song[] = [] // Process each audio file Array.from(files).forEach((file, index) => { // Create object URL for the audio file const url = URL.createObjectURL(file) // Extract file name without extension as the title const title = file.name.replace(/\.[^/.]+$/, "") // Create a new song object const newSong: Song = { id: `upload-${Date.now()}-${index}`, title, artist: "Unknown Artist", duration: 0, // Will be updated when audio loads file, url, coverArt: "/placeholder.svg?height=300&width=300", liked: false, } newSongs.push(newSong) // Try to extract cover art from audio file metadata // This is a simplified approach - in a real app, you'd use a library like jsmediatags const audio = new Audio() audio.src = url audio.onloadedmetadata = () => { // After audio loads, show a toast prompting user to add cover art toast({ title: "Add Cover Art", description: `Would you like to add cover art for "${title}"?`, action: ( ), }) } }) setSongs((prev) => [...prev, ...newSongs]) toast({ title: "Music Added", description: `${files.length} song${files.length > 1 ? "s" : ""} added to your library`, }) // Select the first uploaded song setCurrentSong(newSongs[0]) } const toggleLike = (songId: string) => { setSongs((prev) => prev.map((song) => (song.id === songId ? { ...song, liked: !song.liked } : song))) // If the current song is being liked/unliked, update it too if (currentSong && currentSong.id === songId) { setCurrentSong((prev) => (prev ? { ...prev, liked: !prev.liked } : null)) } } const addToPlaylist = (songId: string, playlistId: string) => { const song = songs.find((s) => s.id === songId) if (!song) return setPlaylists((prev) => prev.map((playlist) => playlist.id === playlistId ? { ...playlist, songs: [...playlist.songs, song] } : playlist, ), ) toast({ title: "Added to Playlist", description: `Song added to playlist successfully`, }) } const createPlaylist = (name: string) => { const newPlaylist: Playlist = { id: `playlist-${Date.now()}`, name, songs: [], isPublic: false, createdBy: "You", } setPlaylists((prev) => [...prev, newPlaylist]) toast({ title: "Playlist Created", description: `"${name}" playlist has been created`, }) } const sharePlaylist = (playlistId: string) => { const playlist = playlists.find((p) => p.id === playlistId) if (!playlist) return // Toggle public status setPlaylists((prev) => prev.map((p) => (p.id === playlistId ? { ...p, isPublic: !p.isPublic } : p))) if (!playlist.isPublic) { toast({ title: "Playlist Shared", description: `"${playlist.name}" is now public and can be discovered by others`, }) } else { toast({ title: "Playlist Unshared", description: `"${playlist.name}" is now private`, }) } } const saveMusic = () => { // In a real app, this would save to a database or local storage toast({ title: "Music Library Saved", description: "Your music library and playlists have been saved", }) } return (

{!isMobile && "Player"} {!isMobile && "Library"} {!isMobile && "Playlists"} {!isMobile && "Discover"}

{currentSong ? ( {currentSong.title}

) : (

)}

{currentSong?.title || "No song selected"}

{currentSong?.artist || "Select a song to play"}

{formatTime(currentTime)} {formatTime(duration)}

Now Playing Queue

{songs.length > 0 ? ( songs.map((song) => ( )) ) : (

No songs in your library

Upload music to get started

)}

p.isPublic)} onAddToLibrary={(song) => { setSongs((prev) => [...prev, song]) toast({ title: "Song Added", description: `"${song.title}" has been added to your library`, }) }} /> {/* Hidden audio element */}

) } [V0_FILE]typescriptreact:file="hooks/use-mobile.ts" isQuickEdit="true" "use client" import { useState, useEffect } from "react" export function useMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768) // Adjust breakpoint as needed } // Set initial value handleResize() // Add event listener window.addEventListener("resize", handleResize) // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize) }, []) return isMobile }

About

About