Spaces:
Sleeping
Sleeping
File size: 3,919 Bytes
5f2f7a2 b943caa 5f2f7a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React, { useState, useEffect } from 'react';
import { Copy, FileText, Check } from 'lucide-react';
interface RawTranscriptViewerProps {
taskId: string;
baseUrl: string;
}
export default function RawTranscriptViewer({ taskId, baseUrl }: RawTranscriptViewerProps) {
const [transcript, setTranscript] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
useEffect(() => {
const fetchTranscript = async () => {
try {
const res = await fetch(`${baseUrl}/api/stream/${taskId}/lyrics.srt`);
if (res.ok) {
const text = await res.text();
setTranscript(text);
} else {
setTranscript(null);
}
} catch (err) {
console.error("Failed to fetch transcript", err);
setTranscript(null);
} finally {
setLoading(false);
}
};
fetchTranscript();
}, [taskId, baseUrl]);
const handleCopy = () => {
if (transcript) {
navigator.clipboard.writeText(transcript);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
if (loading) return null;
if (!transcript || transcript.trim() === '') return null; // Don't render if there's no transcript
return (
<div className="bg-[#111] border border-[#27272a] rounded-2xl p-6 mb-8 w-full max-w-xl mx-auto">
<div className="flex items-center justify-between mb-4">
<h4 className="text-lg font-bold text-white flex items-center gap-2">
<FileText className="w-5 h-5 text-emerald-500" /> Raw Transcript
</h4>
<div className="flex items-center gap-2 flex-wrap">
<a
href={`${baseUrl}/api/stream/${taskId}/lyrics.srt`}
download={`transcript_${taskId}.srt`}
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 text-xs bg-[#1a1a1a] hover:bg-[#1877F2]/20 border border-[#27272a] hover:border-[#1877F2]/50 hover:text-[#1877F2] transition-colors text-gray-400 px-2.5 py-1.5 rounded-lg"
>
SRT
</a>
<a
href={`${baseUrl}/api/stream/${taskId}/transcript.json`}
download={`transcript_${taskId}.json`}
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 text-xs bg-[#1a1a1a] hover:bg-[#1877F2]/20 border border-[#27272a] hover:border-[#1877F2]/50 hover:text-[#1877F2] transition-colors text-gray-400 px-2.5 py-1.5 rounded-lg"
>
JSON
</a>
<button
onClick={() => {
const element = document.createElement("a");
const file = new Blob([transcript || ""], {type: 'text/plain'});
element.href = URL.createObjectURL(file);
element.download = `transcript_${taskId}.txt`;
document.body.appendChild(element); // Required for this to work in FireFox
element.click();
}}
className="flex items-center gap-1 text-xs bg-[#1a1a1a] hover:bg-[#1877F2]/20 border border-[#27272a] hover:border-[#1877F2]/50 hover:text-[#1877F2] transition-colors text-gray-400 px-2.5 py-1.5 rounded-lg"
>
TXT
</button>
<button
onClick={handleCopy}
className="flex items-center gap-1 text-sm bg-[#1a1a1a] hover:bg-[#27272a] border border-[#27272a] transition-colors text-gray-300 px-3 py-1.5 rounded-lg ml-2"
>
{copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
{copied ? 'Copied!' : 'Copy'}
</button>
</div>
</div>
<div className="bg-[#050505] border border-[#27272a] rounded-xl p-4 max-h-64 overflow-y-auto font-mono text-sm text-gray-300 whitespace-pre-wrap">
{transcript}
</div>
</div>
);
}
|