fixing some things before video

app/components/VoiceApp.tsx

@@ -8,6 +8,7 @@ import {
     BookOpen,
     Play,
     Stop,
+    Pause,
     DownloadSimple,
     ArrowClockwise,
     SpinnerGap
@@ -37,6 +38,9 @@ export function VoiceApp({ onClose, onMinimize, onMaximize, onFocus, zIndex }: V
     const [voiceContents, setVoiceContents] = useState<VoiceContent[]>([])
     const [currentlyPlaying, setCurrentlyPlaying] = useState<string | null>(null)
     const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null)
+    const [isPlaying, setIsPlaying] = useState(false)
+    const [currentTime, setCurrentTime] = useState(0)
+    const [duration, setDuration] = useState(0)
 
     // Load saved content from server and localStorage
     useEffect(() => {
@@ -84,27 +88,58 @@ export function VoiceApp({ onClose, onMinimize, onMaximize, onFocus, zIndex }: V
         await loadContent()
     }
 
+    const formatTime = (time: number) => {
+        const minutes = Math.floor(time / 60)
+        const seconds = Math.floor(time % 60)
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`
+    }
+
     const handlePlay = (content: VoiceContent) => {
         if (!content.audioUrl) return
 
-        // Stop current audio if playing
+        if (currentlyPlaying === content.id && audioElement) {
+            if (isPlaying) {
+                audioElement.pause()
+                setIsPlaying(false)
+            } else {
+                audioElement.play()
+                setIsPlaying(true)
+            }
+            return
+        }
+
+        // Stop previous
         if (audioElement) {
             audioElement.pause()
             audioElement.currentTime = 0
         }
 
-        if (currentlyPlaying === content.id) {
-            setCurrentlyPlaying(null)
-            setAudioElement(null)
-        } else {
-            const audio = new Audio(content.audioUrl)
-            audio.onended = () => {
-                setCurrentlyPlaying(null)
-                setAudioElement(null)
-            }
-            audio.play()
-            setAudioElement(audio)
-            setCurrentlyPlaying(content.id)
+        const audio = new Audio(content.audioUrl)
+
+        audio.addEventListener('loadedmetadata', () => {
+            setDuration(audio.duration)
+        })
+
+        audio.addEventListener('timeupdate', () => {
+            setCurrentTime(audio.currentTime)
+        })
+
+        audio.addEventListener('ended', () => {
+            setIsPlaying(false)
+            setCurrentTime(0)
+        })
+
+        audio.play()
+        setAudioElement(audio)
+        setCurrentlyPlaying(content.id)
+        setIsPlaying(true)
+    }
+
+    const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const time = parseFloat(e.target.value)
+        setCurrentTime(time)
+        if (audioElement) {
+            audioElement.currentTime = time
         }
     }
 
@@ -114,18 +149,28 @@ export function VoiceApp({ onClose, onMinimize, onMaximize, onFocus, zIndex }: V
             audioElement.currentTime = 0
             setAudioElement(null)
             setCurrentlyPlaying(null)
+            setIsPlaying(false)
+            setCurrentTime(0)
         }
     }
 
-    const handleDownload = (content: VoiceContent) => {
+    const handleDownload = async (content: VoiceContent) => {
         if (!content.audioUrl) return
 
-        const link = document.createElement('a')
-        link.href = content.audioUrl
-        link.download = `${content.title.replace(/\s+/g, '_')}.mp3`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+        try {
+            const response = await fetch(content.audioUrl)
+            const blob = await response.blob()
+            const url = window.URL.createObjectURL(blob)
+            const link = document.createElement('a')
+            link.href = url
+            link.download = `${content.title.replace(/\s+/g, '_')}.mp3`
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(url)
+        } catch (error) {
+            console.error('Download failed:', error)
+        }
     }
 
     const handleRefresh = () => {
@@ -206,8 +251,8 @@ export function VoiceApp({ onClose, onMinimize, onMaximize, onFocus, zIndex }: V
                                     <div className="flex items-start justify-between mb-3">
                                         <div className="flex items-center gap-3">
                                             <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${content.type === 'song'
-                                                    ? 'bg-purple-100 text-purple-600'
-                                                    : 'bg-blue-100 text-blue-600'
+                                                ? 'bg-purple-100 text-purple-600'
+                                                : 'bg-blue-100 text-blue-600'
                                                 }`}>
                                                 {content.type === 'song' ? (
                                                     <MusicNote size={20} weight="fill" />
@@ -258,25 +303,46 @@ export function VoiceApp({ onClose, onMinimize, onMaximize, onFocus, zIndex }: V
                                             )}
 
                                             {content.audioUrl && (
-                                                <button
-                                                    onClick={() => handlePlay(content)}
-                                                    className={`w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all ${currentlyPlaying === content.id
-                                                            ? 'bg-red-50 text-red-600 border border-red-100 hover:bg-red-100'
-                                                            : 'bg-[#F5F5F7] text-gray-700 border border-gray-200 hover:bg-gray-200 hover:border-gray-300'
-                                                        }`}
-                                                >
+                                                <div className="mt-3">
                                                     {currentlyPlaying === content.id ? (
-                                                        <>
-                                                            <Stop size={16} weight="fill" />
-                                                            Stop Playback
-                                                        </>
+                                                        <div className="bg-white rounded-lg border border-gray-200 p-3 space-y-2">
+                                                            <div className="flex items-center gap-3">
+                                                                <button
+                                                                    onClick={() => handlePlay(content)}
+                                                                    className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-900 text-white hover:bg-gray-800 transition-colors"
+                                                                >
+                                                                    {isPlaying ? (
+                                                                        <Pause size={14} weight="fill" />
+                                                                    ) : (
+                                                                        <Play size={14} weight="fill" />
+                                                                    )}
+                                                                </button>
+                                                                <div className="flex-1">
+                                                                    <input
+                                                                        type="range"
+                                                                        min="0"
+                                                                        max={duration || 100}
+                                                                        value={currentTime}
+                                                                        onChange={handleSeek}
+                                                                        className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-gray-900 [&::-webkit-slider-thumb]:rounded-full"
+                                                                    />
+                                                                    <div className="flex justify-between text-[10px] text-gray-500 mt-1 font-medium">
+                                                                        <span>{formatTime(currentTime)}</span>
+                                                                        <span>{formatTime(duration)}</span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
                                                     ) : (
-                                                        <>
+                                                        <button
+                                                            onClick={() => handlePlay(content)}
+                                                            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm bg-[#F5F5F7] text-gray-700 border border-gray-200 hover:bg-gray-200 hover:border-gray-300 transition-all"
+                                                        >
                                                             <Play size={16} weight="fill" />
                                                             Play Audio
-                                                        </>
+                                                        </button>
                                                     )}
-                                                </button>
+                                                </div>
                                             )}
                                         </div>
                                     )}