279 lines
10 KiB
TypeScript
279 lines
10 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import type { MouseEvent } from "react";
|
||
import { Upload, RefreshCw, Play, Pause, Pencil, Trash2, Check, X, Mic, Square } from "lucide-react";
|
||
|
||
interface RefAudio {
|
||
id: string;
|
||
name: string;
|
||
path: string;
|
||
ref_text: string;
|
||
duration_sec: number;
|
||
created_at: number;
|
||
}
|
||
|
||
interface RefAudioPanelProps {
|
||
refAudios: RefAudio[];
|
||
selectedRefAudio: RefAudio | null;
|
||
onSelectRefAudio: (audio: RefAudio) => void;
|
||
isUploadingRef: boolean;
|
||
uploadRefError: string | null;
|
||
onClearUploadRefError: () => void;
|
||
onUploadRefAudio: (file: File) => void;
|
||
onFetchRefAudios: () => void;
|
||
playingAudioId: string | null;
|
||
onTogglePlayPreview: (audio: RefAudio, event: MouseEvent) => void;
|
||
editingAudioId: string | null;
|
||
editName: string;
|
||
onEditNameChange: (value: string) => void;
|
||
onStartEditing: (audio: RefAudio, event: MouseEvent) => void;
|
||
onSaveEditing: (id: string, event: MouseEvent) => void;
|
||
onCancelEditing: (event: MouseEvent) => void;
|
||
onDeleteRefAudio: (id: string) => void;
|
||
recordedBlob: Blob | null;
|
||
isRecording: boolean;
|
||
recordingTime: number;
|
||
onStartRecording: () => void;
|
||
onStopRecording: () => void;
|
||
onUseRecording: () => void;
|
||
formatRecordingTime: (seconds: number) => string;
|
||
fixedRefText: string;
|
||
}
|
||
|
||
export function RefAudioPanel({
|
||
refAudios,
|
||
selectedRefAudio,
|
||
onSelectRefAudio,
|
||
isUploadingRef,
|
||
uploadRefError,
|
||
onClearUploadRefError,
|
||
onUploadRefAudio,
|
||
onFetchRefAudios,
|
||
playingAudioId,
|
||
onTogglePlayPreview,
|
||
editingAudioId,
|
||
editName,
|
||
onEditNameChange,
|
||
onStartEditing,
|
||
onSaveEditing,
|
||
onCancelEditing,
|
||
onDeleteRefAudio,
|
||
recordedBlob,
|
||
isRecording,
|
||
recordingTime,
|
||
onStartRecording,
|
||
onStopRecording,
|
||
onUseRecording,
|
||
formatRecordingTime,
|
||
fixedRefText,
|
||
}: RefAudioPanelProps) {
|
||
const [recordedUrl, setRecordedUrl] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!recordedBlob) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
setRecordedUrl(null);
|
||
return;
|
||
}
|
||
const url = URL.createObjectURL(recordedBlob);
|
||
setRecordedUrl(url);
|
||
return () => {
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
}, [recordedBlob]);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="flex justify-between items-center mb-2">
|
||
<span className="text-sm text-gray-300">📁 我的参考音频</span>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="file"
|
||
id="ref-audio-upload"
|
||
accept=".wav,.mp3,.m4a,.webm,.ogg,.flac,.aac"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) {
|
||
onUploadRefAudio(file);
|
||
}
|
||
e.target.value = '';
|
||
}}
|
||
className="hidden"
|
||
/>
|
||
<label
|
||
htmlFor="ref-audio-upload"
|
||
className={`px-2 py-1 text-xs rounded cursor-pointer transition-all flex items-center gap-1 ${isUploadingRef
|
||
? "bg-gray-600 cursor-not-allowed text-gray-400"
|
||
: "bg-purple-600 hover:bg-purple-700 text-white"
|
||
}`}
|
||
>
|
||
<Upload className="h-3.5 w-3.5" />
|
||
上传
|
||
</label>
|
||
<button
|
||
onClick={onFetchRefAudios}
|
||
className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
|
||
>
|
||
<RefreshCw className="h-3.5 w-3.5" />
|
||
刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{isUploadingRef && (
|
||
<div className="mb-2 p-2 bg-purple-500/10 rounded text-sm text-purple-300">
|
||
⏳ 上传中...
|
||
</div>
|
||
)}
|
||
|
||
{uploadRefError && (
|
||
<div className="mb-2 p-2 bg-red-500/20 text-red-200 rounded text-xs flex justify-between">
|
||
<span>❌ {uploadRefError}</span>
|
||
<button onClick={onClearUploadRefError} className="text-red-300 hover:text-white">
|
||
<X className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{refAudios.length === 0 ? (
|
||
<div className="text-center py-4 text-gray-500 text-sm">
|
||
暂无参考音频，请上传或录制
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-2 gap-2" style={{ contentVisibility: 'auto' }}>
|
||
{refAudios.map((audio) => (
|
||
<div
|
||
key={audio.id}
|
||
className={`p-2 rounded-lg border transition-all relative group cursor-pointer ${selectedRefAudio?.id === audio.id
|
||
? "border-purple-500 bg-purple-500/20"
|
||
: "border-white/10 bg-white/5 hover:border-white/30"
|
||
}`}
|
||
onClick={() => {
|
||
if (editingAudioId !== audio.id) {
|
||
onSelectRefAudio(audio);
|
||
}
|
||
}}
|
||
>
|
||
{editingAudioId === audio.id ? (
|
||
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
||
<input
|
||
type="text"
|
||
value={editName}
|
||
onChange={(e) => onEditNameChange(e.target.value)}
|
||
className="w-full bg-black/50 text-white text-xs px-1 py-0.5 rounded border border-purple-500 focus:outline-none"
|
||
autoFocus
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') onSaveEditing(audio.id, e as unknown as MouseEvent);
|
||
if (e.key === 'Escape') onCancelEditing(e as unknown as MouseEvent);
|
||
}}
|
||
/>
|
||
<button onClick={(e) => onSaveEditing(audio.id, e)} className="text-green-400 hover:text-green-300 text-xs">
|
||
<Check className="h-3 w-3" />
|
||
</button>
|
||
<button onClick={(e) => onCancelEditing(e)} className="text-gray-400 hover:text-gray-300 text-xs">
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="flex justify-between items-start mb-1">
|
||
<div className="text-white text-xs truncate pr-1 flex-1" title={audio.name}>
|
||
{audio.name}
|
||
</div>
|
||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<button
|
||
onClick={(e) => onTogglePlayPreview(audio, e)}
|
||
className="text-gray-400 hover:text-purple-400 text-xs"
|
||
title="试听"
|
||
>
|
||
{playingAudioId === audio.id ? (
|
||
<Pause className="h-3.5 w-3.5" />
|
||
) : (
|
||
<Play className="h-3.5 w-3.5" />
|
||
)}
|
||
</button>
|
||
<button
|
||
onClick={(e) => onStartEditing(audio, e)}
|
||
className="text-gray-400 hover:text-blue-400 text-xs"
|
||
title="重命名"
|
||
>
|
||
<Pencil className="h-3.5 w-3.5" />
|
||
</button>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDeleteRefAudio(audio.id);
|
||
}}
|
||
className="text-gray-400 hover:text-red-400 text-xs"
|
||
title="删除"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="text-gray-400 text-xs">{audio.duration_sec.toFixed(1)}s</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="border-t border-white/10 pt-4">
|
||
<span className="text-sm text-gray-300 mb-2 block">🎤 或在线录音</span>
|
||
<div className="flex gap-2 items-center">
|
||
{!isRecording ? (
|
||
<button
|
||
onClick={onStartRecording}
|
||
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
|
||
>
|
||
<Mic className="h-4 w-4" />
|
||
开始录音
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={onStopRecording}
|
||
className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
|
||
>
|
||
<Square className="h-4 w-4" />
|
||
停止
|
||
</button>
|
||
)}
|
||
{isRecording && (
|
||
<span className="text-red-400 text-sm animate-pulse">
|
||
🔴 录音中 {formatRecordingTime(recordingTime)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{recordedBlob && !isRecording && (
|
||
<div className="mt-3 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="text-green-300 text-sm">✅ 录音完成 ({formatRecordingTime(recordingTime)})</span>
|
||
<audio src={recordedUrl || ''} controls className="h-8" />
|
||
</div>
|
||
<button
|
||
onClick={onUseRecording}
|
||
disabled={isUploadingRef}
|
||
className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm disabled:bg-gray-600"
|
||
>
|
||
使用此录音
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="border-t border-white/10 pt-4">
|
||
<label className="text-sm text-gray-300 mb-2 block">📝 录音/上传时请朗读以下内容：</label>
|
||
<div className="w-full bg-black/30 border border-white/10 rounded-lg p-3 text-white text-sm">
|
||
{fixedRefText}
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
请清晰朗读上述内容完成录音，系统将以此为参考克隆您的声音
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|