{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "music-player-card",
  "type": "registry:ui",
  "title": "Music Player Card",
  "description": "A rich music player card with album art, action pills, seekable progress, shuffle, repeat, and full transport controls.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/music-player-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Heart,\n  ThumbsUp,\n  ThumbsDown,\n  MessageSquare,\n  ListPlus,\n  Share2,\n  Shuffle,\n  SkipBack,\n  Pause,\n  Play,\n  SkipForward,\n  Repeat,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Track {\n  id: string;\n  title: string;\n  artist: string;\n  cover: string;\n  duration: string;\n  src: string;\n  likes?: string;\n  comments?: string;\n}\n\ninterface MusicPlayerCardProps {\n  tracks: Track[];\n  className?: string;\n}\n\nfunction fmt(s: number) {\n  const m = Math.floor(s / 60);\n  const sec = Math.floor(s % 60);\n  return `${m}:${sec < 10 ? \"0\" : \"\"}${sec}`;\n}\n\nexport default function MusicPlayerCard({\n  tracks,\n  className,\n}: MusicPlayerCardProps) {\n  const audioRef = React.useRef<HTMLAudioElement | null>(null);\n  const progressRef = React.useRef<HTMLDivElement>(null);\n  const playingRef = React.useRef(false);\n\n  const [trackIndex, setTrackIndex] = React.useState(0);\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const [progress, setProgress] = React.useState(0);\n  const [currentTime, setCurrentTime] = React.useState(\"0:00\");\n  const [liked, setLiked] = React.useState(false);\n  const [shuffleOn, setShuffleOn] = React.useState(false);\n  const [repeatOn, setRepeatOn] = React.useState(false);\n\n  const track = tracks[trackIndex];\n\n  React.useEffect(() => {\n    playingRef.current = isPlaying;\n  }, [isPlaying]);\n\n  React.useEffect(() => {\n    if (!track) return;\n\n    setProgress(0);\n    setCurrentTime(\"0:00\");\n\n    const audio = new Audio(track.src);\n    audioRef.current = audio;\n\n    const onTime = () => {\n      setProgress((audio.currentTime / (audio.duration || 1)) * 100);\n      setCurrentTime(fmt(audio.currentTime));\n    };\n\n    const onEnd = () => {\n      if (repeatOn) {\n        audio.currentTime = 0;\n        audio.play().catch(() => {});\n      } else if (trackIndex < tracks.length - 1) {\n        setTrackIndex((i) => i + 1);\n      } else {\n        setIsPlaying(false);\n        setProgress(0);\n        setCurrentTime(\"0:00\");\n      }\n    };\n\n    audio.addEventListener(\"timeupdate\", onTime);\n    audio.addEventListener(\"ended\", onEnd);\n\n    if (playingRef.current) {\n      audio.play().catch(() => setIsPlaying(false));\n    }\n\n    return () => {\n      audio.removeEventListener(\"timeupdate\", onTime);\n      audio.removeEventListener(\"ended\", onEnd);\n      audio.pause();\n      audio.src = \"\";\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [trackIndex]);\n\n  const togglePlay = () => {\n    const audio = audioRef.current;\n    if (!audio) return;\n    if (isPlaying) {\n      audio.pause();\n      setIsPlaying(false);\n    } else {\n      audio.play().catch(() => {});\n      setIsPlaying(true);\n    }\n  };\n\n  const prevTrack = () => {\n    if (audioRef.current && audioRef.current.currentTime > 3) {\n      audioRef.current.currentTime = 0;\n    } else {\n      setTrackIndex((i) => (i > 0 ? i - 1 : tracks.length - 1));\n    }\n  };\n\n  const nextTrack = () => {\n    if (shuffleOn && tracks.length > 1) {\n      let next: number;\n      do {\n        next = Math.floor(Math.random() * tracks.length);\n      } while (next === trackIndex);\n      setTrackIndex(next);\n    } else {\n      setTrackIndex((i) => (i < tracks.length - 1 ? i + 1 : 0));\n    }\n  };\n\n  const seek = (e: React.PointerEvent | PointerEvent) => {\n    const bar = progressRef.current;\n    const audio = audioRef.current;\n    if (!bar || !audio || !audio.duration) return;\n    const rect = bar.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    audio.currentTime = pct * audio.duration;\n  };\n\n  const onPointerDown = (e: React.PointerEvent) => {\n    seek(e);\n    const onMove = (ev: PointerEvent) => seek(ev);\n    const onUp = () => {\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n    };\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n  };\n\n  if (!track) return null;\n\n  return (\n    <div\n      className={cn(\n        \"mx-auto w-full max-w-[320px] rounded-2xl border-2 border-border bg-card p-4\",\n        className,\n      )}\n    >\n      {/* album art + heart */}\n      <div className=\"relative overflow-hidden rounded-[10px]\">\n        <img\n          src={track.cover}\n          alt={track.title}\n          className=\"aspect-square w-full object-cover\"\n          loading=\"lazy\"\n          draggable={false}\n        />\n        <button\n          onClick={() => setLiked((l) => !l)}\n          className=\"absolute right-2.5 top-2.5 transition-transform duration-200 active:scale-90\"\n          aria-label={liked ? \"Unlike\" : \"Like\"}\n        >\n          <Heart\n            className=\"size-[18px] drop-shadow-md\"\n            fill={liked ? \"#ef4444\" : \"none\"}\n            stroke={liked ? \"#ef4444\" : \"rgba(255,255,255,0.6)\"}\n            strokeWidth={liked ? 0 : 1.8}\n          />\n        </button>\n      </div>\n\n      {/* title + artist */}\n      <div className=\"mt-3\">\n        <p className=\"truncate text-[14px] font-semibold tracking-[-0.01em] text-foreground\">\n          {track.title}\n        </p>\n        <p className=\"mt-0.5 truncate text-[11px] text-muted-foreground\">\n          {track.artist}\n        </p>\n      </div>\n\n      {/* action pills */}\n      <div className=\"mt-3 flex flex-wrap items-center gap-1.5\">\n        {/* like / dislike */}\n        <div className=\"flex items-center rounded-full bg-foreground/[0.08] px-2.5 py-1\">\n          <ThumbsUp className=\"size-[12px] text-muted-foreground\" />\n          {track.likes && (\n            <span className=\"ml-1 text-[10px] text-muted-foreground\">\n              {track.likes}\n            </span>\n          )}\n          <div className=\"mx-1.5 h-[12px] w-px bg-border\" />\n          <ThumbsDown className=\"size-[12px] text-muted-foreground\" />\n        </div>\n\n        {/* comments */}\n        {track.comments && (\n          <div className=\"flex items-center rounded-full bg-foreground/[0.08] px-2.5 py-1\">\n            <MessageSquare className=\"size-[12px] text-muted-foreground\" />\n            <span className=\"ml-1 text-[10px] text-muted-foreground\">\n              {track.comments}\n            </span>\n          </div>\n        )}\n\n        {/* save */}\n        <button className=\"flex items-center rounded-full bg-foreground/[0.08] px-2.5 py-1 transition-colors hover:bg-foreground/[0.12]\">\n          <ListPlus className=\"size-[12px] text-muted-foreground\" />\n          <span className=\"ml-1 text-[10px] text-muted-foreground\">Save</span>\n        </button>\n\n        {/* share */}\n        <button className=\"flex items-center rounded-full bg-foreground/[0.08] px-2.5 py-1 transition-colors hover:bg-foreground/[0.12]\">\n          <Share2 className=\"size-[12px] text-muted-foreground\" />\n          <span className=\"ml-1 text-[10px] text-muted-foreground\">Share</span>\n        </button>\n      </div>\n\n      {/* progress bar */}\n      <div className=\"mt-4\">\n        <div\n          ref={progressRef}\n          onPointerDown={onPointerDown}\n          className=\"relative h-[2px] w-full cursor-pointer rounded-full bg-foreground/[0.12]\"\n        >\n          <div\n            className=\"absolute inset-y-0 left-0 rounded-full bg-foreground\"\n            style={{ width: `${progress}%` }}\n          />\n          <div\n            className=\"absolute top-1/2 size-[9px] rounded-full bg-foreground shadow-md\"\n            style={{\n              left: `${progress}%`,\n              transform: \"translate(-50%, -50%)\",\n            }}\n          />\n        </div>\n        <div className=\"mt-1.5 flex justify-between\">\n          <span className=\"text-[10px] tabular-nums text-muted-foreground/60\">\n            {currentTime}\n          </span>\n          <span className=\"text-[10px] tabular-nums text-muted-foreground/60\">\n            {track.duration}\n          </span>\n        </div>\n      </div>\n\n      {/* transport controls */}\n      <div className=\"mt-1.5 flex items-center justify-between\">\n        <button\n          onClick={() => setShuffleOn((s) => !s)}\n          className={cn(\n            \"transition-colors duration-200\",\n            shuffleOn\n              ? \"text-foreground\"\n              : \"text-foreground/30 hover:text-foreground/50\",\n          )}\n          aria-label=\"Shuffle\"\n        >\n          <Shuffle className=\"size-[16px]\" />\n        </button>\n\n        <button\n          onClick={prevTrack}\n          className=\"text-foreground/60 transition-colors duration-200 hover:text-foreground\"\n          aria-label=\"Previous\"\n        >\n          <SkipBack className=\"size-[20px]\" fill=\"currentColor\" />\n        </button>\n\n        <button\n          onClick={togglePlay}\n          className=\"flex size-[44px] items-center justify-center rounded-full bg-foreground text-background transition-transform duration-200 active:scale-95\"\n          aria-label={isPlaying ? \"Pause\" : \"Play\"}\n        >\n          {isPlaying ? (\n            <Pause className=\"size-[18px]\" fill=\"currentColor\" />\n          ) : (\n            <Play className=\"ml-0.5 size-[18px]\" fill=\"currentColor\" />\n          )}\n        </button>\n\n        <button\n          onClick={nextTrack}\n          className=\"text-foreground/60 transition-colors duration-200 hover:text-foreground\"\n          aria-label=\"Next\"\n        >\n          <SkipForward className=\"size-[20px]\" fill=\"currentColor\" />\n        </button>\n\n        <button\n          onClick={() => setRepeatOn((r) => !r)}\n          className={cn(\n            \"transition-colors duration-200\",\n            repeatOn\n              ? \"text-foreground\"\n              : \"text-foreground/30 hover:text-foreground/50\",\n          )}\n          aria-label=\"Repeat\"\n        >\n          <Repeat className=\"size-[16px]\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/music-player-card.tsx"
    }
  ]
}