Post Audio

1'use client';
2 
3import React, { useRef, useEffect, useState, useCallback } from 'react';
4import WaveSurfer from 'wavesurfer.js';
5import { cn } from '@/lib/utils/deso';
6import { Button } from '../ui/button';
7import { Play, Pause, Volume2, VolumeX } from 'lucide-react';
8import { Slider } from '../ui/slider';
9 
10export interface PostAudioProps {
11  url: string;
12  className?: string;
13}
14 
15const formatTime = (seconds: number) => {
16  const date = new Date(0);
17  date.setSeconds(seconds || 0);
18  return date.toISOString().substr(14, 5);
19};
20 
21export const PostAudio: React.FC<PostAudioProps> = ({ url, className }) => {
22  const containerRef = useRef<HTMLDivElement>(null);
23  const wavesurferRef = useRef<WaveSurfer | null>(null);
24  const [isPlaying, setIsPlaying] = useState(false);
25  const [currentTime, setCurrentTime] = useState(0);
26  const [duration, setDuration] = useState(0);
27  const [volume, setVolume] = useState(0.5);
28  const [isMuted, setIsMuted] = useState(false);
29 
30  useEffect(() => {
31    if (!containerRef.current) return;
32 
33    const ws = WaveSurfer.create({
34      container: containerRef.current,
35      waveColor: '#ddd',
36      progressColor: '#333',
37      barWidth: 5,
38      barGap: 4,
39      barRadius: 100,
40      height:40,
41      url,
42    });
43 
44    wavesurferRef.current = ws;
45    ws.setVolume(volume);
46 
47    ws.on('play', () => setIsPlaying(true));
48    ws.on('pause', () => setIsPlaying(false));
49    ws.on('finish', () => setIsPlaying(false));
50    ws.on('ready', (newDuration) => setDuration(newDuration));
51    ws.on('timeupdate', (newTime) => setCurrentTime(newTime));
52 
53    return () => {
54      ws.destroy();
55    };
56  }, [url]);
57 
58  const onPlayPause = useCallback(() => {
59    wavesurferRef.current?.playPause();
60  }, []);
61 
62  const onVolumeChange = useCallback((newVolume: number[]) => {
63    const newVol = newVolume[0];
64    wavesurferRef.current?.setVolume(newVol);
65    setVolume(newVol);
66    if (newVol > 0) {
67      setIsMuted(false);
68    }
69  }, []);
70 
71  const onMuteToggle = useCallback(() => {
72    const newMuted = !isMuted;
73    wavesurferRef.current?.setMuted(newMuted);
74    setIsMuted(newMuted);
75  }, [isMuted]);
76 
77  return (
78    <div className={cn('mt-2 rounded-lg border border-border bg-muted', className)}>
79      <div className="p-6 bg-background rounded-t-lg" ref={containerRef} />
80      <div className="flex justify-between items-center border-t border-border p-2">
81        <div className="flex-grow flex gap-4">
82          <Button onClick={onPlayPause} variant="outline" size="icon">
83// … truncated