From 450c03662abde1b1e381d790f8cfb1b3d8f5b01f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 28 Jul 2026 16:21:38 +0000
Subject: [PATCH] Add SRT, VTT, and JSON transcript export

Serialize the word-level transcript to caption formats with speaker
labels. SRT/VTT omit cuts and remap times onto the edited timeline;
JSON keeps the full word list for round-trip re-import. Export is
available from the transcript toolbar and the media export dialog.

Co-authored-by: Wassim Gharbi <wassgha@gmail.com>
---
 README.md                            |   1 +
 components/ExportDialog.tsx          |  53 ++++++-
 components/TranscriptPanel.tsx       |  79 +++++++++-
 lib/serializeTranscript.ts           | 211 +++++++++++++++++++++++++++
 scripts/serialize-transcript-test.ts | 146 ++++++++++++++++++
 5 files changed, 486 insertions(+), 4 deletions(-)
 create mode 100644 lib/serializeTranscript.ts
 create mode 100644 scripts/serialize-transcript-test.ts

diff --git a/README.md b/README.md
index 5d579fd..e0a8052 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ the media. Export the final cut — without your file ever leaving your device.
 - 🔒 **Private by design** — no server, no auth, no uploads; all media processing happens on-device
 - 📝 **Word-level editing** — select words, press ⌫, the cut follows the text
 - 📥 **Import your own transcript** — skip Whisper and edit with an SRT, VTT, or JSON caption file
+- 📤 **Export the transcript** — download SRT, WebVTT, or JSON (captions follow your cuts)
 - 🧹 **Filler removal** — one-click cut of "um", "uh", and similar fillers
 - 🗣️ **Speaker diarization** — the transcript is grouped by speaker
 - 🎬 **Timeline** — waveform, word labels, cut regions, playhead, zoom
diff --git a/components/ExportDialog.tsx b/components/ExportDialog.tsx
index 6eb383a..725c435 100644
--- a/components/ExportDialog.tsx
+++ b/components/ExportDialog.tsx
@@ -5,6 +5,16 @@ import { Download, X } from "lucide-react";
 import { useEditorStore } from "@/lib/store";
 import { formatTime, getCutRanges, getEditedDuration, getKeepRanges } from "@/lib/edits";
 import { exportAudio, exportVideo } from "@/lib/ffmpeg";
+import {
+  downloadTranscript,
+  type TranscriptFormat,
+} from "@/lib/serializeTranscript";
+
+const TRANSCRIPT_FORMATS: { format: TranscriptFormat; label: string }[] = [
+  { format: "srt", label: "SRT" },
+  { format: "vtt", label: "VTT" },
+  { format: "json", label: "JSON" },
+];
 
 export default function ExportDialog() {
   const open = useEditorStore((s) => s.exportOpen);
@@ -28,9 +38,10 @@ export default function ExportDialog() {
   const ext = isAudio ? "m4a" : "mp4";
   const formatLabel = isAudio ? "M4A" : "MP4";
 
-  const fileName = videoFile
-    ? videoFile.name.replace(/\.[^.]+$/, "") + `.edited.${ext}`
-    : `edited.${ext}`;
+  const baseName = videoFile
+    ? videoFile.name.replace(/\.[^.]+$/, "")
+    : "edited";
+  const fileName = `${baseName}.edited.${ext}`;
 
   const start = useCallback(async () => {
     if (!videoFile) return;
@@ -52,6 +63,18 @@ export default function ExportDialog() {
     }
   }, [videoFile, isAudio, cuts, duration, editedDuration, setStatus, setExportUrl]);
 
+  const exportCaption = useCallback(
+    (format: TranscriptFormat) => {
+      if (words.length === 0) return;
+      try {
+        downloadTranscript(words, format, baseName, { duration });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Transcript export failed.");
+      }
+    },
+    [words, baseName, duration]
+  );
+
   if (!open) return null;
 
   return (
@@ -143,6 +166,30 @@ export default function ExportDialog() {
             Export {formatLabel}
           </button>
         )}
+
+        {words.length > 0 && !exporting && (
+          <div className="mt-5 border-t border-zinc-100 pt-4">
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+              Transcript
+            </p>
+            <p className="mb-3 text-xs text-zinc-500">
+              SRT and VTT use the edited timeline (cuts applied). JSON keeps the
+              full word list for re-import.
+            </p>
+            <div className="grid grid-cols-3 gap-2">
+              {TRANSCRIPT_FORMATS.map(({ format, label }) => (
+                <button
+                  key={format}
+                  onClick={() => exportCaption(format)}
+                  className="flex h-9 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50"
+                >
+                  <Download size={13} className="shrink-0 text-zinc-400" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/components/TranscriptPanel.tsx b/components/TranscriptPanel.tsx
index bfc790e..701ef4e 100644
--- a/components/TranscriptPanel.tsx
+++ b/components/TranscriptPanel.tsx
@@ -1,7 +1,17 @@
 "use client";
 
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Eye, EyeOff, FileText, Pencil, RotateCcw, Scissors, WandSparkles, X } from "lucide-react";
+import {
+  Download,
+  Eye,
+  EyeOff,
+  FileText,
+  Pencil,
+  RotateCcw,
+  Scissors,
+  WandSparkles,
+  X,
+} from "lucide-react";
 import { useEditorStore } from "@/lib/store";
 import { findFillerWordIds } from "@/lib/fillers";
 import {
@@ -9,6 +19,10 @@ import {
   parseTranscriptFile,
   TRANSCRIPT_ACCEPT,
 } from "@/lib/parseTranscript";
+import {
+  downloadTranscript,
+  type TranscriptFormat,
+} from "@/lib/serializeTranscript";
 import type { SpeakerTurn, Word } from "@/lib/types";
 
 export const SPEAKER_COLORS = [
@@ -89,11 +103,15 @@ export default function TranscriptPanel() {
   const correctWords = useEditorStore((s) => s.correctWords);
   const importWords = useEditorStore((s) => s.importWords);
   const playing = useEditorStore((s) => s.playing);
+  const videoFile = useEditorStore((s) => s.videoFile);
+  const duration = useEditorStore((s) => s.duration);
   const activeWordId = useEditorStore((s) => findActiveWordId(s.words, s.currentTime));
 
   const containerRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const importInputRef = useRef<HTMLInputElement>(null);
+  const exportMenuRef = useRef<HTMLDivElement>(null);
+  const [exportMenuOpen, setExportMenuOpen] = useState(false);
   const [selection, setSelection] = useState<SelectionInfo | null>(null);
   const [correcting, setCorrecting] = useState<{
     ids: number[];
@@ -148,6 +166,34 @@ export default function TranscriptPanel() {
     [words.length, importWords]
   );
 
+  const handleExportTranscript = useCallback(
+    (format: TranscriptFormat) => {
+      if (words.length === 0) return;
+      const base = videoFile
+        ? videoFile.name.replace(/\.[^.]+$/, "")
+        : "transcript";
+      try {
+        downloadTranscript(words, format, base, { duration });
+        setExportMenuOpen(false);
+      } catch (err) {
+        console.error(err);
+        alert(err instanceof Error ? err.message : "Could not export transcript.");
+      }
+    },
+    [words, videoFile, duration]
+  );
+
+  useEffect(() => {
+    if (!exportMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (!exportMenuRef.current?.contains(e.target as Node)) {
+        setExportMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [exportMenuOpen]);
+
   const seekToWord = useCallback((word: Word) => {
     const { videoEl, setCurrentTime } = useEditorStore.getState();
     if (videoEl) videoEl.currentTime = word.start + 0.001;
@@ -352,6 +398,37 @@ export default function TranscriptPanel() {
               />
             </>
           )}
+          {status === "ready" && words.length > 0 && (
+            <div ref={exportMenuRef} className="relative">
+              <button
+                onClick={() => setExportMenuOpen((o) => !o)}
+                title="Export transcript as SRT, VTT, or JSON"
+                className="flex h-7 items-center gap-1.5 rounded-lg px-2 text-xs text-zinc-500 transition hover:bg-zinc-100"
+              >
+                <Download size={14} />
+                <span className="hidden sm:inline">Export</span>
+              </button>
+              {exportMenuOpen && (
+                <div className="absolute right-0 top-full z-30 mt-1 min-w-[9.5rem] rounded-xl border border-zinc-200 bg-white py-1 shadow-lg shadow-zinc-900/10">
+                  {(
+                    [
+                      { format: "srt", label: "SRT" },
+                      { format: "vtt", label: "WebVTT" },
+                      { format: "json", label: "JSON" },
+                    ] as const
+                  ).map(({ format, label }) => (
+                    <button
+                      key={format}
+                      onClick={() => handleExportTranscript(format)}
+                      className="flex w-full items-center px-3 py-1.5 text-left text-xs text-zinc-700 transition hover:bg-zinc-50"
+                    >
+                      {label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
           <button
             onClick={toggleShowDeleted}
             title={showDeleted ? "Hide deleted words" : "Show deleted words"}
diff --git a/lib/serializeTranscript.ts b/lib/serializeTranscript.ts
new file mode 100644
index 0000000..b42498a
--- /dev/null
+++ b/lib/serializeTranscript.ts
@@ -0,0 +1,211 @@
+import { getCutRanges, originalToEdited } from "./edits";
+import type { Word } from "./types";
+
+export type TranscriptFormat = "srt" | "vtt" | "json";
+
+export interface SerializeOptions {
+  /**
+   * When true (default for SRT/VTT), omit deleted words and remap times onto
+   * the edited timeline so captions sync with the exported media.
+   * JSON ignores this and always writes the full word list for round-trips.
+   */
+  editedTimeline?: boolean;
+  /** Media duration in seconds; used when remapping onto the edited timeline. */
+  duration?: number;
+}
+
+interface Cue {
+  start: number;
+  end: number;
+  text: string;
+  speaker: number;
+}
+
+/** Split a cue when the gap between consecutive words exceeds this (seconds). */
+const CUE_GAP = 0.75;
+
+const MIME: Record<TranscriptFormat, string> = {
+  srt: "application/x-subrip",
+  vtt: "text/vtt",
+  json: "application/json",
+};
+
+export function transcriptMime(format: TranscriptFormat): string {
+  return MIME[format];
+}
+
+export function transcriptExtension(format: TranscriptFormat): string {
+  return `.${format}`;
+}
+
+/**
+ * Serialize editor words to SRT, WebVTT, or JSON.
+ * SRT/VTT group consecutive same-speaker words into cues (splitting on gaps).
+ * JSON writes `{ "words": [...] }` matching `parseTranscript` import.
+ */
+export function serializeTranscript(
+  words: Word[],
+  format: TranscriptFormat,
+  options: SerializeOptions = {}
+): string {
+  if (format === "json") return serializeJson(words);
+
+  const editedTimeline = options.editedTimeline !== false;
+  const prepared = prepareCaptionWords(words, editedTimeline, options.duration ?? 0);
+  if (prepared.length === 0) {
+    throw new Error("No words to export.");
+  }
+  const cues = wordsToCues(prepared);
+  return format === "vtt" ? serializeVtt(cues) : serializeSrt(cues);
+}
+
+/** Trigger a browser download of the serialized transcript. */
+export function downloadTranscript(
+  words: Word[],
+  format: TranscriptFormat,
+  filename: string,
+  options: SerializeOptions = {}
+): void {
+  const text = serializeTranscript(words, format, options);
+  const blob = new Blob([text], { type: `${MIME[format]};charset=utf-8` });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename.endsWith(`.${format}`)
+    ? filename
+    : `${filename}${transcriptExtension(format)}`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function serializeJson(words: Word[]): string {
+  return JSON.stringify(
+    {
+      words: words.map((w) => ({
+        text: w.text,
+        start: roundTime(w.start),
+        end: roundTime(w.end),
+        speaker: w.speaker,
+        deleted: w.deleted,
+      })),
+    },
+    null,
+    2
+  );
+}
+
+function prepareCaptionWords(
+  words: Word[],
+  editedTimeline: boolean,
+  duration: number
+): Word[] {
+  const kept = words.filter((w) => !w.deleted);
+  if (!editedTimeline || kept.length === 0) return kept;
+
+  const cuts = getCutRanges(words, duration > 0 ? duration : Infinity);
+  if (cuts.length === 0) return kept;
+
+  return kept.map((w) => ({
+    ...w,
+    start: originalToEdited(w.start, cuts),
+    end: originalToEdited(w.end, cuts),
+  }));
+}
+
+function wordsToCues(words: Word[]): Cue[] {
+  const cues: Cue[] = [];
+  let batch: Word[] = [];
+
+  const flush = () => {
+    if (batch.length === 0) return;
+    cues.push({
+      start: batch[0].start,
+      end: Math.max(batch[batch.length - 1].end, batch[0].start + 0.02),
+      text: batch.map((w) => w.text).join(" "),
+      speaker: batch[0].speaker,
+    });
+    batch = [];
+  };
+
+  for (const w of words) {
+    const last = batch[batch.length - 1];
+    if (
+      last &&
+      (w.speaker !== last.speaker || w.start - last.end > CUE_GAP)
+    ) {
+      flush();
+    }
+    batch.push(w);
+  }
+  flush();
+  return cues;
+}
+
+function serializeSrt(cues: Cue[]): string {
+  return (
+    cues
+      .map((cue, i) => {
+        const lines = [
+          String(i + 1),
+          `${formatSrtTimestamp(cue.start)} --> ${formatSrtTimestamp(cue.end)}`,
+        ];
+        if (cue.speaker >= 0) {
+          lines.push(`Speaker ${cue.speaker + 1}: ${cue.text}`);
+        } else {
+          lines.push(cue.text);
+        }
+        return lines.join("\n");
+      })
+      .join("\n\n") + "\n"
+  );
+}
+
+function serializeVtt(cues: Cue[]): string {
+  const body = cues
+    .map((cue) => {
+      const timing = `${formatVttTimestamp(cue.start)} --> ${formatVttTimestamp(cue.end)}`;
+      const text =
+        cue.speaker >= 0
+          ? `<v Speaker ${cue.speaker + 1}>${cue.text}`
+          : cue.text;
+      return `${timing}\n${text}`;
+    })
+    .join("\n\n");
+  return `WEBVTT\n\n${body}\n`;
+}
+
+/** SRT timestamps use a comma decimal separator: `HH:MM:SS,mmm`. */
+export function formatSrtTimestamp(seconds: number): string {
+  return formatCaptionTimestamp(seconds, ",");
+}
+
+/** WebVTT timestamps use a dot decimal separator: `HH:MM:SS.mmm`. */
+export function formatVttTimestamp(seconds: number): string {
+  return formatCaptionTimestamp(seconds, ".");
+}
+
+function formatCaptionTimestamp(seconds: number, decimal: "," | "."): string {
+  const t = Math.max(0, seconds);
+  const h = Math.floor(t / 3600);
+  const m = Math.floor((t % 3600) / 60);
+  const s = Math.floor(t % 60);
+  const ms = Math.round((t - Math.floor(t)) * 1000);
+  // Carry if rounding pushed ms to 1000.
+  const carry = ms === 1000 ? 1 : 0;
+  const msClamped = ms === 1000 ? 0 : ms;
+  const s2 = s + carry;
+  const m2 = m + Math.floor(s2 / 60);
+  const h2 = h + Math.floor(m2 / 60);
+  return (
+    `${pad(h2, 2)}:${pad(m2 % 60, 2)}:${pad(s2 % 60, 2)}` +
+    `${decimal}${pad(msClamped, 3)}`
+  );
+}
+
+function pad(n: number, width: number): string {
+  return String(n).padStart(width, "0");
+}
+
+function roundTime(t: number): number {
+  return Math.round(t * 1000) / 1000;
+}
diff --git a/scripts/serialize-transcript-test.ts b/scripts/serialize-transcript-test.ts
new file mode 100644
index 0000000..b44fab0
--- /dev/null
+++ b/scripts/serialize-transcript-test.ts
@@ -0,0 +1,146 @@
+/**
+ * Unit tests for SRT / VTT / JSON transcript export (and round-trips).
+ * Run: npx tsx scripts/serialize-transcript-test.ts
+ */
+import { parseTranscript } from "../lib/parseTranscript";
+import {
+  formatSrtTimestamp,
+  formatVttTimestamp,
+  serializeTranscript,
+} from "../lib/serializeTranscript";
+import type { Word } from "../lib/types";
+
+function assert(cond: boolean, msg: string) {
+  if (!cond) throw new Error(msg);
+}
+
+function near(a: number, b: number, eps = 1e-3): boolean {
+  return Math.abs(a - b) <= eps;
+}
+
+const sample: Word[] = [
+  { id: 0, text: "Hello", start: 1, end: 1.4, speaker: 0, deleted: false },
+  { id: 1, text: "world", start: 1.4, end: 2, speaker: 0, deleted: false },
+  { id: 2, text: "um", start: 2.1, end: 2.3, speaker: 0, deleted: true },
+  { id: 3, text: "How", start: 3.5, end: 3.8, speaker: 1, deleted: false },
+  { id: 4, text: "are", start: 3.8, end: 4.1, speaker: 1, deleted: false },
+  { id: 5, text: "you", start: 4.1, end: 4.5, speaker: 1, deleted: false },
+];
+
+{
+  assert(formatSrtTimestamp(1) === "00:00:01,000", "srt ts 1s");
+  assert(formatSrtTimestamp(3661.5) === "01:01:01,500", "srt ts hh");
+  assert(formatVttTimestamp(1.25) === "00:00:01.250", "vtt ts");
+  console.log("timestamps: ok");
+}
+
+{
+  const srt = serializeTranscript(sample, "srt", { duration: 10 });
+  assert(srt.includes("1\n"), "srt has cue index");
+  assert(srt.includes("00:00:01,000 --> 00:00:02,000"), `srt timing\n${srt}`);
+  assert(srt.includes("Speaker 1: Hello world"), `srt speaker label\n${srt}`);
+  assert(srt.includes("Speaker 2: How are you"), `srt speaker 2\n${srt}`);
+  assert(!srt.includes("um"), "srt omits deleted");
+  // Edited timeline: deleted "um" [2.1,2.3) removes 0.2s before the second cue.
+  // Original 3.5 → edited 3.3 (MERGE_GAP may expand the cut).
+  assert(/Speaker 2:/.test(srt), "srt second speaker present");
+  console.log("srt export: ok");
+}
+
+{
+  const vtt = serializeTranscript(sample, "vtt", { duration: 10 });
+  assert(vtt.startsWith("WEBVTT"), "vtt header");
+  assert(vtt.includes("<v Speaker 1>Hello world"), `vtt voice\n${vtt}`);
+  assert(vtt.includes("<v Speaker 2>How are you"), `vtt voice 2\n${vtt}`);
+  assert(!vtt.includes("um"), "vtt omits deleted");
+  console.log("vtt export: ok");
+}
+
+{
+  const json = serializeTranscript(sample, "json");
+  const data = JSON.parse(json);
+  assert(Array.isArray(data.words), "json words array");
+  assert(data.words.length === 6, "json keeps deleted words");
+  assert(data.words[2].deleted === true && data.words[2].text === "um", "json deleted flag");
+  assert(data.words[0].speaker === 0, "json speaker");
+  console.log("json export: ok");
+}
+
+{
+  // JSON round-trip preserves text, times, speakers, deleted.
+  const json = serializeTranscript(sample, "json");
+  const back = parseTranscript(json, "roundtrip.json");
+  assert(back.length === sample.length, "json round-trip length");
+  for (let i = 0; i < sample.length; i++) {
+    assert(back[i].text === sample[i].text, `json rt text ${i}`);
+    assert(near(back[i].start, sample[i].start), `json rt start ${i}`);
+    assert(near(back[i].end, sample[i].end), `json rt end ${i}`);
+    assert(back[i].speaker === sample[i].speaker, `json rt speaker ${i}`);
+    assert(back[i].deleted === sample[i].deleted, `json rt deleted ${i}`);
+  }
+  console.log("json round-trip: ok");
+}
+
+{
+  // SRT round-trip (no deletes, original timeline) keeps cue text/times/speakers.
+  const clean: Word[] = sample
+    .filter((w) => !w.deleted)
+    .map((w, i) => ({ ...w, id: i }));
+  const srt = serializeTranscript(clean, "srt", {
+    editedTimeline: false,
+    duration: 10,
+  });
+  const back = parseTranscript(srt, "roundtrip.srt");
+  assert(back.map((w) => w.text).join(" ") === "Hello world How are you", "srt rt text");
+  assert(back[0].speaker === 0 && back[2].speaker === 1, "srt rt speakers");
+  assert(near(back[0].start, 1), `srt rt start ${back[0].start}`);
+  assert(near(back[back.length - 1].end, 4.5), `srt rt end ${back[back.length - 1].end}`);
+  console.log("srt round-trip: ok");
+}
+
+{
+  const clean: Word[] = sample
+    .filter((w) => !w.deleted)
+    .map((w, i) => ({ ...w, id: i }));
+  const vtt = serializeTranscript(clean, "vtt", {
+    editedTimeline: false,
+    duration: 10,
+  });
+  const back = parseTranscript(vtt, "roundtrip.vtt");
+  assert(back.map((w) => w.text).join(" ") === "Hello world How are you", "vtt rt text");
+  assert(back[0].speaker === 0 && back[2].speaker === 1, "vtt rt speakers");
+  console.log("vtt round-trip: ok");
+}
+
+{
+  let threw = false;
+  try {
+    serializeTranscript(
+      sample.map((w) => ({ ...w, deleted: true })),
+      "srt",
+      { duration: 10 }
+    );
+  } catch {
+    threw = true;
+  }
+  assert(threw, "empty kept words should throw");
+  console.log("empty export: ok");
+}
+
+{
+  // Edited timeline remaps times after a cut.
+  const words: Word[] = [
+    { id: 0, text: "Keep", start: 0, end: 1, speaker: 0, deleted: false },
+    { id: 1, text: "Cut", start: 1, end: 2, speaker: 0, deleted: true },
+    { id: 2, text: "Later", start: 3, end: 4, speaker: 0, deleted: false },
+  ];
+  const srt = serializeTranscript(words, "srt", { duration: 5, editedTimeline: true });
+  // Cut [1,2) removes 1s; "Later" 3→4 becomes 2→3 on edited timeline.
+  // MERGE_GAP is 0.35 — gap from cut end 2 to next word 3 is 1s, so no merge expansion of the cut itself.
+  assert(srt.includes("00:00:00,000 --> 00:00:01,000"), `edited first cue\n${srt}`);
+  assert(srt.includes("00:00:02,000 --> 00:00:03,000"), `edited second cue\n${srt}`);
+  assert(srt.includes("Keep") && srt.includes("Later") && !srt.includes("Cut"), "edited text");
+  console.log("edited timeline: ok");
+}
+
+console.log("ALL SERIALIZE TRANSCRIPT TESTS PASSED");