shadcn/app/public/registry/styles/default/music-player.json

{
  "name": "music-player",
  "description": "Advanced music player with playlist support",
  "dependencies": [
    "react-h5-audio-player"
  ],
  "files": [
    {
      "name": "music-player.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDown,\n  ChevronUp,\n  ListMusic,\n  Pause,\n  Play,\n  Repeat,\n  Shuffle,\n  SkipBack,\n  SkipForward,\n  Volume2,\n  VolumeX,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { Button } from \"./button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"./collapsible\"\nimport { ScrollArea } from \"./scroll-area\"\nimport { Slider } from \"./slider\"\n\nexport interface Track {\n  id: string\n  title: string\n  artist: string\n  album?: string\n  duration: number\n  src: string\n  artwork?: string\n}\n\ninterface MusicPlayerProps {\n  tracks: Track[]\n  className?: string\n  autoPlay?: boolean\n  showWaveform?: boolean\n}\n\nfunction formatTime(seconds: number): string {\n  if (isNaN(seconds)) return \"0:00\"\n  const mins = Math.floor(seconds / 60)\n  const secs = Math.floor(seconds % 60)\n  return `${mins}:${secs.toString().padStart(2, \"0\")}`\n}\n\nexport function MusicPlayer({\n  tracks,\n  className,\n  autoPlay = false,\n  showWaveform = true,\n}: MusicPlayerProps) {\n  const [currentTrackIndex, setCurrentTrackIndex] = React.useState(0)\n  const [isPlaying, setIsPlaying] = React.useState(false)\n  const [currentTime, setCurrentTime] = React.useState(0)\n  const [duration, setDuration] = React.useState(0)\n  const [volume, setVolume] = React.useState(0.7)\n  const [isMuted, setIsMuted] = React.useState(false)\n  const [isRepeat, setIsRepeat] = React.useState(false)\n  const [isShuffle, setIsShuffle] = React.useState(false)\n  const [showPlaylist, setShowPlaylist] = React.useState(false)\n  const [waveformData, setWaveformData] = React.useState<number[]>([])\n\n  const audioRef = React.useRef<HTMLAudioElement | null>(null)\n  const canvasRef = React.useRef<HTMLCanvasElement | null>(null)\n  const animationRef = React.useRef<number | undefined>(undefined)\n\n  const currentTrack = tracks[currentTrackIndex]\n\n  // Initialize audio element\n  React.useEffect(() => {\n    const audio = new Audio()\n    audioRef.current = audio\n    audio.volume = volume\n\n    const handleTimeUpdate = () => {\n      setCurrentTime(audio.currentTime)\n    }\n\n    const handleLoadedMetadata = () => {\n      setDuration(audio.duration)\n      if (showWaveform) {\n        generateWaveform()\n      }\n    }\n\n    const handleEnded = () => {\n      if (isRepeat) {\n        audio.currentTime = 0\n        audio.play()\n      } else {\n        handleNext()\n      }\n    }\n\n    audio.addEventListener(\"timeupdate\", handleTimeUpdate)\n    audio.addEventListener(\"loadedmetadata\", handleLoadedMetadata)\n    audio.addEventListener(\"ended\", handleEnded)\n\n    return () => {\n      audio.removeEventListener(\"timeupdate\", handleTimeUpdate)\n      audio.removeEventListener(\"loadedmetadata\", handleLoadedMetadata)\n      audio.removeEventListener(\"ended\", handleEnded)\n      audio.pause()\n      audio.src = \"\"\n    }\n  }, [])\n\n  // Update audio source when track changes\n  React.useEffect(() => {\n    if (!audioRef.current || !currentTrack) return\n\n    audioRef.current.src = currentTrack.src\n    setCurrentTime(0)\n\n    if (isPlaying || autoPlay) {\n      audioRef.current.play().catch(console.error)\n      setIsPlaying(true)\n    }\n  }, [currentTrackIndex, currentTrack])\n\n  // Update volume\n  React.useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.volume = isMuted ? 0 : volume\n    }\n  }, [volume, isMuted])\n\n  // Generate waveform data\n  const generateWaveform = () => {\n    const bars = 64\n    const data = []\n    for (let i = 0; i < bars; i++) {\n      data.push(Math.random() * 0.7 + 0.3)\n    }\n    setWaveformData(data)\n  }\n\n  // Animate waveform\n  React.useEffect(() => {\n    if (!showWaveform || !canvasRef.current || !isPlaying) {\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n      }\n      return\n    }\n\n    const canvas = canvasRef.current\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n\n    const draw = () => {\n      ctx.clearRect(0, 0, canvas.width, canvas.height)\n\n      const barWidth = canvas.width / waveformData.length\n      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      gradient.addColorStop(0, \"hsl(var(--primary))\")\n      gradient.addColorStop(1, \"hsl(var(--primary) / 0.3)\")\n\n      waveformData.forEach((height, i) => {\n        const x = i * barWidth\n        const barHeight =\n          height *\n          canvas.height *\n          (0.5 + Math.sin(Date.now() * 0.001 + i * 0.2) * 0.5)\n\n        ctx.fillStyle = gradient\n        ctx.fillRect(x, canvas.height - barHeight, barWidth - 2, barHeight)\n      })\n\n      animationRef.current = requestAnimationFrame(draw)\n    }\n\n    draw()\n\n    return () => {\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n      }\n    }\n  }, [isPlaying, waveformData, showWaveform])\n\n  const handlePlayPause = () => {\n    if (!audioRef.current) return\n\n    if (isPlaying) {\n      audioRef.current.pause()\n      setIsPlaying(false)\n    } else {\n      audioRef.current.play().catch(console.error)\n      setIsPlaying(true)\n    }\n  }\n\n  const handleNext = () => {\n    if (isShuffle) {\n      const nextIndex = Math.floor(Math.random() * tracks.length)\n      setCurrentTrackIndex(nextIndex)\n    } else {\n      setCurrentTrackIndex((prev) => (prev + 1) % tracks.length)\n    }\n  }\n\n  const handlePrevious = () => {\n    if (currentTime > 3) {\n      if (audioRef.current) {\n        audioRef.current.currentTime = 0\n      }\n    } else {\n      setCurrentTrackIndex((prev) => (prev - 1 + tracks.length) % tracks.length)\n    }\n  }\n\n  const handleSeek = (value: number[]) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime = value[0]\n      setCurrentTime(value[0])\n    }\n  }\n\n  const handleVolumeChange = (value: number[]) => {\n    setVolume(value[0])\n    setIsMuted(false)\n  }\n\n  const toggleMute = () => {\n    setIsMuted(!isMuted)\n  }\n\n  const selectTrack = (index: number) => {\n    setCurrentTrackIndex(index)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative w-full rounded-lg border bg-background p-4 shadow-lg\",\n        className\n      )}\n    >\n      {/* Album Art and Track Info */}\n      <div className=\"mb-4 flex items-center gap-4\">\n        <div className=\"relative h-20 w-20 overflow-hidden rounded-md bg-muted\">\n          {currentTrack?.artwork ? (\n            <img\n              src={currentTrack.artwork}\n              alt={`${currentTrack.title} artwork`}\n              className=\"h-full w-full object-cover\"\n            />\n          ) : (\n            <div className=\"flex h-full w-full items-center justify-center\">\n              <ListMusic className=\"h-8 w-8 text-muted-foreground\" />\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-1\">\n          <h3 className=\"font-semibold\">{currentTrack?.title || \"No track\"}</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            {currentTrack?.artist || \"Unknown artist\"}\n          </p>\n          {currentTrack?.album && (\n            <p className=\"text-xs text-muted-foreground\">\n              {currentTrack.album}\n            </p>\n          )}\n        </div>\n      </div>\n\n      {/* Waveform Visualization */}\n      {showWaveform && (\n        <div className=\"mb-4 h-16 w-full overflow-hidden rounded bg-muted/30\">\n          <canvas\n            ref={canvasRef}\n            width={640}\n            height={64}\n            className=\"h-full w-full\"\n          />\n        </div>\n      )}\n\n      {/* Progress Bar */}\n      <div className=\"mb-4 space-y-1\">\n        <Slider\n          value={[currentTime]}\n          max={duration || 100}\n          step={0.1}\n          onValueChange={handleSeek}\n          className=\"w-full\"\n        />\n        <div className=\"flex justify-between text-xs text-muted-foreground\">\n          <span>{formatTime(currentTime)}</span>\n          <span>{formatTime(duration)}</span>\n        </div>\n      </div>\n\n      {/* Controls */}\n      <div className=\"mb-4 flex items-center justify-center gap-2\">\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={() => setIsShuffle(!isShuffle)}\n          className={cn(isShuffle && \"text-primary\")}\n        >\n          <Shuffle className=\"h-4 w-4\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" onClick={handlePrevious}>\n          <SkipBack className=\"h-5 w-5\" />\n        </Button>\n        <Button size=\"icon\" onClick={handlePlayPause} className=\"h-10 w-10\">\n          {isPlaying ? (\n            <Pause className=\"h-5 w-5\" />\n          ) : (\n            <Play className=\"h-5 w-5 ml-0.5\" />\n          )}\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" onClick={handleNext}>\n          <SkipForward className=\"h-5 w-5\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={() => setIsRepeat(!isRepeat)}\n          className={cn(isRepeat && \"text-primary\")}\n        >\n          <Repeat className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      {/* Volume Control */}\n      <div className=\"mb-4 flex items-center gap-2\">\n        <Button variant=\"ghost\" size=\"icon\" onClick={toggleMute}>\n          {isMuted ? (\n            <VolumeX className=\"h-4 w-4\" />\n          ) : (\n            <Volume2 className=\"h-4 w-4\" />\n          )}\n        </Button>\n        <Slider\n          value={[isMuted ? 0 : volume]}\n          max={1}\n          step={0.01}\n          onValueChange={handleVolumeChange}\n          className=\"w-24\"\n        />\n      </div>\n\n      {/* Playlist */}\n      <Collapsible open={showPlaylist} onOpenChange={setShowPlaylist}>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"outline\" className=\"w-full justify-between\">\n            <span className=\"flex items-center gap-2\">\n              <ListMusic className=\"h-4 w-4\" />\n              Playlist ({tracks.length} tracks)\n            </span>\n            {showPlaylist ? (\n              <ChevronUp className=\"h-4 w-4\" />\n            ) : (\n              <ChevronDown className=\"h-4 w-4\" />\n            )}\n          </Button>\n        </CollapsibleTrigger>\n        <CollapsibleContent className=\"mt-2\">\n          <ScrollArea className=\"h-48 w-full rounded-md border\">\n            <div className=\"p-2\">\n              {tracks.map((track, index) => (\n                <button\n                  key={track.id}\n                  onClick={() => selectTrack(index)}\n                  className={cn(\n                    \"flex w-full items-center gap-3 rounded-md p-2 text-left transition-colors hover:bg-accent\",\n                    currentTrackIndex === index && \"bg-accent\"\n                  )}\n                >\n                  <div className=\"flex h-10 w-10 items-center justify-center rounded bg-muted\">\n                    {currentTrackIndex === index && isPlaying ? (\n                      <div className=\"flex items-center gap-0.5\">\n                        <span className=\"h-3 w-0.5 animate-pulse bg-primary\" />\n                        <span className=\"h-4 w-0.5 animate-pulse bg-primary animation-delay-150\" />\n                        <span className=\"h-2 w-0.5 animate-pulse bg-primary animation-delay-300\" />\n                      </div>\n                    ) : (\n                      <span className=\"text-xs text-muted-foreground\">\n                        {index + 1}\n                      </span>\n                    )}\n                  </div>\n                  <div className=\"flex-1 space-y-0.5\">\n                    <p className=\"text-sm font-medium leading-none\">\n                      {track.title}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {track.artist}\n                    </p>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {formatTime(track.duration)}\n                  </span>\n                </button>\n              ))}\n            </div>\n          </ScrollArea>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:ui"
}