A scrollable, clickable transcript list for audio/video recordings where each line jumps playback to the moment it was spoken.
"use client";
import * as React from "react";
import {
TranscriptViewer,
type TranscriptCue,
} from "@/components/ui/transcript-viewer";
const cues: TranscriptCue[] = [
{
id: "1",
start: 0,
end: 4,
speaker: "Alex",
text: "So the plan is to ship the new onboarding flow this week.",
},
{
id: "2",
start: 4,
end: 9,
speaker: "Jordan",
text: "Sounds good, but we still need to test the edge cases.",
},
{
id: "3",
start: 9,
end: 14,
speaker: "Alex",
text: "Agreed. I'll put together a checklist today.",
},
{
id: "4",
start: 14,
end: 19,
speaker: "Sam",
text: "I can help review it once it's ready.",
},
{
id: "5",
start: 19,
end: 25,
speaker: "Jordan",
text: "Great, let's sync again tomorrow morning.",
},
{
id: "6",
start: 25,
end: 30,
speaker: "Alex",
text: "Works for me. I'll send the invite.",
},
];
const settings = {
time: 10,
follow: true,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="w-full max-w-md">
<TranscriptViewer cues={cues} time={s.time} follow={s.follow} />
</div>
);
}