{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post-audio",
  "type": "registry:block",
  "title": "Post Audio",
  "description": "A component for displaying an audio post.",
  "files": [
    {
      "path": "src/components/deso/post-audio.tsx",
      "content": "'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport WaveSurfer from 'wavesurfer.js';\nimport { cn } from '@/lib/utils/deso';\nimport { Button } from '../ui/button';\nimport { Play, Pause, Volume2, VolumeX } from 'lucide-react';\nimport { Slider } from '../ui/slider';\n\nexport interface PostAudioProps {\n  url: string;\n  className?: string;\n}\n\nconst formatTime = (seconds: number) => {\n  const date = new Date(0);\n  date.setSeconds(seconds || 0);\n  return date.toISOString().substr(14, 5);\n};\n\nexport const PostAudio: React.FC<PostAudioProps> = ({ url, className }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wavesurferRef = useRef<WaveSurfer | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [volume, setVolume] = useState(0.5);\n  const [isMuted, setIsMuted] = useState(false);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const ws = WaveSurfer.create({\n      container: containerRef.current,\n      waveColor: '#ddd',\n      progressColor: '#333',\n      barWidth: 5,\n      barGap: 4,\n      barRadius: 100,\n      height:40,\n      url,\n    });\n\n    wavesurferRef.current = ws;\n    ws.setVolume(volume);\n\n    ws.on('play', () => setIsPlaying(true));\n    ws.on('pause', () => setIsPlaying(false));\n    ws.on('finish', () => setIsPlaying(false));\n    ws.on('ready', (newDuration) => setDuration(newDuration));\n    ws.on('timeupdate', (newTime) => setCurrentTime(newTime));\n\n    return () => {\n      ws.destroy();\n    };\n  }, [url]);\n\n  const onPlayPause = useCallback(() => {\n    wavesurferRef.current?.playPause();\n  }, []);\n\n  const onVolumeChange = useCallback((newVolume: number[]) => {\n    const newVol = newVolume[0];\n    wavesurferRef.current?.setVolume(newVol);\n    setVolume(newVol);\n    if (newVol > 0) {\n      setIsMuted(false);\n    }\n  }, []);\n\n  const onMuteToggle = useCallback(() => {\n    const newMuted = !isMuted;\n    wavesurferRef.current?.setMuted(newMuted);\n    setIsMuted(newMuted);\n  }, [isMuted]);\n\n  return (\n    <div className={cn('mt-2 rounded-lg border border-border bg-muted', className)}>\n      <div className=\"p-6 bg-background rounded-t-lg\" ref={containerRef} />\n      <div className=\"flex justify-between items-center border-t border-border p-2\">\n        <div className=\"flex-grow flex gap-4\">\n          <Button onClick={onPlayPause} variant=\"outline\" size=\"icon\">\n            {isPlaying ? (\n              <Pause className=\"h-5 w-5\" />\n            ) : (\n              <Play className=\"h-5 w-5\" />\n            )}\n          </Button>\n          <div className=\"flex items-center gap-2 w-full max-w-xs\">\n            <Button onClick={onMuteToggle} variant=\"ghost\" size=\"icon\">\n              {isMuted || volume === 0 ? (\n                <VolumeX className=\"h-5 w-5 text-muted-foreground\" />\n              ) : (\n                <Volume2 className=\"h-5 w-5 text-muted-foreground\" />\n              )}\n            </Button>\n            <Slider\n              value={[isMuted ? 0 : volume]}\n              onValueChange={onVolumeChange}\n              max={1}\n              step={0.05}\n            />\n          </div>\n        </div>\n        <div className=\"flex flex-col items-end\">\n          <div className=\"text-sm text-foreground ml-auto text-right flex flex-row text-xs gap-1\">\n            <span className=\"text-muted-foreground\">{formatTime(currentTime)} / </span><span className=\"text-foreground\">{formatTime(duration)}</span>\n          </div>\n          <div className=\"text-xs text-muted-foreground truncate w-32 text-right\">{url}</div>\n        </div>\n      </div>\n    </div>\n  );\n}; ",
      "type": "registry:component",
      "target": "src/components/deso-ui/post-audio.tsx"
    }
  ]
}