83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import { TimingCue } from "@/lib/tts/types";
|
|
import { Clock, PlayCircle } from "lucide-react";
|
|
|
|
interface TranscriptViewerProps {
|
|
timings: TimingCue[];
|
|
currentTime: number;
|
|
onSeek: (time: number) => void;
|
|
}
|
|
|
|
export function TranscriptViewer({
|
|
timings,
|
|
currentTime,
|
|
onSeek,
|
|
}: TranscriptViewerProps) {
|
|
const activeRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
// Auto-scroll active cue into view smoothly
|
|
useEffect(() => {
|
|
if (activeRef.current) {
|
|
activeRef.current.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "nearest",
|
|
});
|
|
}
|
|
}, [currentTime]);
|
|
|
|
const formatSeconds = (secs: number) => {
|
|
const m = Math.floor(secs / 60);
|
|
const s = Math.floor(secs % 60);
|
|
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
|
};
|
|
|
|
if (!timings || timings.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center p-8 text-slate-500 border border-dashed border-slate-800 rounded-xl">
|
|
<Clock className="w-8 h-8 mb-2 opacity-50" />
|
|
<p className="text-sm">No synchronized transcript available for this episode.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 max-h-[500px] overflow-y-auto pr-2">
|
|
{timings.map((cue, idx) => {
|
|
const isActive = currentTime >= cue.startTime && currentTime <= cue.endTime;
|
|
|
|
return (
|
|
<div
|
|
key={idx}
|
|
ref={isActive ? activeRef : null}
|
|
onClick={() => onSeek(cue.startTime)}
|
|
className={`group flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 border ${
|
|
isActive
|
|
? "bg-blue-950/40 border-blue-500/40 text-blue-100 shadow-sm"
|
|
: "bg-slate-900/30 border-slate-800/60 hover:bg-slate-850 hover:border-slate-700 text-slate-300"
|
|
}`}
|
|
>
|
|
{/* Timestamp badge */}
|
|
<span
|
|
className={`text-xs font-mono px-2 py-0.5 rounded shrink-0 flex items-center gap-1 ${
|
|
isActive
|
|
? "bg-blue-600 text-white font-semibold"
|
|
: "bg-slate-800 text-slate-400 group-hover:bg-slate-700 group-hover:text-slate-200"
|
|
}`}
|
|
>
|
|
<PlayCircle className="w-3 h-3" />
|
|
{formatSeconds(cue.startTime)}
|
|
</span>
|
|
|
|
{/* Cue text */}
|
|
<p className="text-sm leading-relaxed flex-1">
|
|
{cue.text}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|