[V0_FILE]typescriptreact:file="app/page.tsx" import { MusicPlayer } from "@/components/music-player" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="components/music-player.tsx" "use client" import React, { useState, useEffect, useRef } from "react" import { motion, AnimatePresence, useAnimation } from "framer-motion" import { Play, Pause, SkipBack, SkipForward, X, MoreHorizontal } from 'lucide-react' import { Avatar, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" const playerData = { initialSong: { name: "Song name", author: "Author Title", }, sidhuSong: { name: "295", author: "Sidhu Moosewala", cover: "https://i.scdn.co/image/ab67616d0000b2731d1cc2e40d533d7bcebf5dae", audio: "https://drive.google.com/uc?export=download&id=1-oQHxOTy9mkfrNTLju_20kLBt3hBLHrl" } } const initialPlaylist = [ { title: "Like a Rolling Stone" }, { title: "The Times They Are a-Changin'" }, { title: "Subterranean Homesick Blues" }, ] const updatedPlaylist = [ { title: "295" }, { title: "Same Beef" }, { title: "Never Fold" }, ] export function MusicPlayer() { const [isTyping, setIsTyping] = useState(true) const [text, setText] = useState("") const [isPlaying, setIsPlaying] = useState(false) const [progress, setProgress] = useState(0) const [showMusicPlayer, setShowMusicPlayer] = useState(false) const [showPlaylist, setShowPlaylist] = useState(false) const [currentPhase, setCurrentPhase] = useState(1) const [playlist, setPlaylist] = useState(initialPlaylist) const [currentSong, setCurrentSong] = useState(playerData.initialSong) const [isAudioLoaded, setIsAudioLoaded] = useState(false) const audioRef = useRef(null) const progressControls = useAnimation() // Improved typing effect useEffect(() => { const prompts = [ "generate a simple music player", "add a playlist on the right", "play 295 by sidhu moosewala" ] let currentIndex = 0 const startTyping = (promptIndex: number) => { const typingInterval = setInterval(() => { if (currentIndex <= prompts[promptIndex].length) { setText(prompts[promptIndex].slice(0, currentIndex)) currentIndex++ } else { clearInterval(typingInterval) setIsTyping(false) handlePromptCompletion(promptIndex + 1) } }, 30) return () => clearInterval(typingInterval) } const handlePromptCompletion = (phase: number) => { switch (phase) { case 1: setTimeout(() => { setShowMusicPlayer(true) setTimeout(() => { setIsTyping(true) currentIndex = 0 setCurrentPhase(2) startTyping(1) }, 3000) }, 1000) break case 2: setTimeout(() => { setShowPlaylist(true) setTimeout(() => { setIsTyping(true) currentIndex = 0 setCurrentPhase(3) startTyping(2) }, 3000) }, 1000) break case 3: setTimeout(() => { setCurrentSong(playerData.sidhuSong) setPlaylist(updatedPlaylist) loadAudio() setIsPlaying(true) animateProgress() }, 1000) break } } startTyping(0) }, []) const loadAudio = () => { if (audioRef.current) { audioRef.current.src = playerData.sidhuSong.audio audioRef.current.load() audioRef.current.oncanplaythrough = () => { setIsAudioLoaded(true) setIsPlaying(true) audioRef.current?.play().catch(error => console.error("Audio playback failed:", error)) } } } // Handle audio progress useEffect(() => { if (audioRef.current) { if (isPlaying && isAudioLoaded) { audioRef.current.play().catch(error => console.error("Audio playback failed:", error)) } else { audioRef.current.pause() } } }, [isPlaying, isAudioLoaded]) const handleTimeUpdate = () => { if (audioRef.current) { const progress = (audioRef.current.currentTime / audioRef.current.duration) * 100 setProgress(progress) } } const togglePlayPause = () => { if (isAudioLoaded) { setIsPlaying(!isPlaying) } else if (currentSong === playerData.sidhuSong) { loadAudio() } } const animateProgress = () => { progressControls.start({ width: "100%", transition: { duration: 30, ease: "linear" } }) } return (

{text} {isTyping && ( | )}

{showMusicPlayer && (

Music Player

{currentSong === playerData.sidhuSong && ( {currentSong.name}

)}

{currentSong.name}

{currentSong.author}

{showPlaylist && (

Playlist

{playlist.map((song, index) => (

{song.title}

))}

)}

) }

About

About