diff --git a/src/components/audio/AudioView.tsx b/src/components/audio/AudioView.tsx index c74aefb..62a45fe 100644 --- a/src/components/audio/AudioView.tsx +++ b/src/components/audio/AudioView.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { ChatHeader } from "@/components/ChatHeader"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; @@ -24,6 +24,15 @@ interface TranscriptionResult { timestamp: Date; } +interface GeneratedAudio { + id: string; + text: string; + voice: string; + voiceLabel: string; + audioUrl: string; + timestamp: Date; +} + const VOICE_OPTIONS = { alloy: { label: "Alloy", @@ -70,11 +79,51 @@ export const AudioView = () => { const [transcriptionResult, setTranscriptionResult] = useState(null); const [selectedFile, setSelectedFile] = useState(null); const [selectedVoice, setSelectedVoice] = useState("alloy"); + const [generatedAudio, setGeneratedAudio] = useState(null); + const [transcriptionHistory, setTranscriptionHistory] = useState([]); + const [audioHistory, setAudioHistory] = useState([]); const { toast } = useToast(); + // Load history from localStorage + useEffect(() => { + const savedTranscriptions = localStorage.getItem('transcriptionHistory'); + const savedAudios = localStorage.getItem('audioHistory'); + if (savedTranscriptions) { + setTranscriptionHistory(JSON.parse(savedTranscriptions)); + } + if (savedAudios) { + setAudioHistory(JSON.parse(savedAudios)); + } + }, []); + const handleGenerateAudio = () => { setIsProcessing(true); - setTimeout(() => setIsProcessing(false), 2000); + + // Simulate audio generation - replace with actual API call + setTimeout(() => { + const audio: GeneratedAudio = { + id: Date.now().toString(), + text: textToSpeech, + voice: selectedVoice, + voiceLabel: VOICE_OPTIONS[selectedVoice].label, + audioUrl: "data:audio/mp3;base64,//sample", // Placeholder + timestamp: new Date(), + }; + + setGeneratedAudio(audio); + + // Add to history + const newHistory = [audio, ...audioHistory].slice(0, 10); + setAudioHistory(newHistory); + localStorage.setItem('audioHistory', JSON.stringify(newHistory)); + + setIsProcessing(false); + + toast({ + title: "Áudio gerado com sucesso", + description: `Voz: ${VOICE_OPTIONS[selectedVoice].label}`, + }); + }, 2000); }; const handleFileSelect = (event: React.ChangeEvent) => { @@ -119,6 +168,12 @@ export const AudioView = () => { }; setTranscriptionResult(result); + + // Add to history + const newHistory = [result, ...transcriptionHistory].slice(0, 10); + setTranscriptionHistory(newHistory); + localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory)); + setIsTranscribing(false); toast({ @@ -128,11 +183,54 @@ export const AudioView = () => { }, 2000); }; + const handleDownloadAudio = (audio: GeneratedAudio) => { + // In real implementation, download the actual audio file + const a = document.createElement('a'); + a.href = audio.audioUrl; + a.download = `audio_${audio.voiceLabel}_${new Date(audio.timestamp).getTime()}.mp3`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + + toast({ + title: "Download iniciado", + description: "O arquivo de áudio está sendo baixado.", + }); + }; + + const handleDeleteAudio = (audioId: string) => { + if (generatedAudio?.id === audioId) { + setGeneratedAudio(null); + } + const newHistory = audioHistory.filter(a => a.id !== audioId); + setAudioHistory(newHistory); + localStorage.setItem('audioHistory', JSON.stringify(newHistory)); + + toast({ + title: "Áudio removido", + description: "O áudio foi removido do histórico.", + }); + }; + const handleDeleteTranscription = () => { setTranscriptionResult(null); setSelectedFile(null); }; + const handleDeleteTranscriptionFromHistory = (transcriptionId: string) => { + if (transcriptionResult?.id === transcriptionId) { + setTranscriptionResult(null); + } + const newHistory = transcriptionHistory.filter(t => t.id !== transcriptionId); + setTranscriptionHistory(newHistory); + localStorage.setItem('transcriptionHistory', JSON.stringify(newHistory)); + + toast({ + title: "Transcrição removida", + description: "A transcrição foi removida do histórico.", + }); + }; + const handleCopyTranscription = () => { if (transcriptionResult) { navigator.clipboard.writeText(transcriptionResult.text); @@ -352,67 +450,152 @@ export const AudioView = () => { )} - {/* Sample Generated Audio */} -
-
-
-

Áudio Gerado

-

- Há 2 minutos · Voz Neutra + {/* Generated Audio Result */} + {generatedAudio && ( +

+
+
+

Áudio Gerado - {generatedAudio.voiceLabel}

+

+ {new Date(generatedAudio.timestamp).toLocaleString('pt-BR')} +

+
+
+ + +
+
+
+

+ {generatedAudio.text}

-
- - +
+
+
+ + 0:00 +
- -
- -
-
-
- - 0:12 / 0:35 - -
-
+ )} {/* History Section */} -
-

Histórico Recente

-
- {[1, 2].map((i) => ( -
-
-
- +
+ {/* Transcription History */} + {transcriptionHistory.length > 0 && ( +
+

Histórico de Transcrições

+
+ {transcriptionHistory.map((item) => ( +
+
+
+ +
+
+

{item.fileName}

+

+ {new Date(item.timestamp).toLocaleString('pt-BR')} +

+
+
+
+ + +
-
-

audio_file_{i}.mp3

-

- Processado há {i} hora{i > 1 ? "s" : ""} -

-
-
- + ))}
- ))} -
+
+ )} + + {/* Audio Generation History */} + {audioHistory.length > 0 && ( +
+

Histórico de Áudios Gerados

+
+ {audioHistory.map((item) => ( +
+
+
+ +
+
+

{item.voiceLabel}

+

+ {new Date(item.timestamp).toLocaleString('pt-BR')} +

+
+
+
+ + + +
+
+ ))} +
+
+ )}