File size: 2,482 Bytes
ef4c36f | 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 | "use client";
import { useRef } from "react";
import { FileUp, Sparkles, Trash2 } from "lucide-react";
import type { Caption } from "@/types";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { parseSrt } from "@/lib/srt-parser";
import { autoSyncCaptions, captionsToText } from "@/lib/timing";
interface CaptionEditorProps {
text: string;
captions: Caption[];
animationSpeed: number;
onTextChange: (text: string) => void;
onCaptionsChange: (captions: Caption[]) => void;
}
export function CaptionEditor({
text,
captions,
animationSpeed,
onTextChange,
onCaptionsChange,
}: CaptionEditorProps) {
const fileRef = useRef<HTMLInputElement>(null);
const handleAutoSync = () => {
if (!text.trim()) return;
onCaptionsChange(autoSyncCaptions(text, animationSpeed));
};
const handleSrtUpload = async (file: File) => {
const content = await file.text();
const parsed = parseSrt(content);
if (parsed.length === 0) return;
onCaptionsChange(parsed);
onTextChange(captionsToText(parsed));
};
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold uppercase tracking-wide text-zinc-500">Caption Text</h3>
<span className="text-xs text-zinc-400">{captions.length} words</span>
</div>
<Textarea
value={text}
onChange={(e) => onTextChange(e.target.value)}
placeholder="Type or paste your captions here..."
className="min-h-[160px] font-medium"
/>
<div className="flex flex-wrap gap-2">
<Button variant="secondary" size="sm" onClick={handleAutoSync}>
<Sparkles className="h-4 w-4" /> Auto-sync
</Button>
<Button variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
<FileUp className="h-4 w-4" /> Upload .srt
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => {
onTextChange("");
onCaptionsChange([]);
}}
>
<Trash2 className="h-4 w-4" /> Clear
</Button>
<input
ref={fileRef}
type="file"
accept=".srt"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) void handleSrtUpload(file);
}}
/>
</div>
</div>
);
}
|