feat: generate transcript and event-driven particle processing

This generates the transcript and shows the caption experience on the client side for media particles. It also simplifies other side effects that we must perform such as updating the `last_child_created_at` field for stream and container particles.
2026-03-25 14:43:47 -07:00
parent 92bbaa11b3
commit 986a389606
17 changed files with 578 additions and 52 deletions
@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type { Transcript } from "@/api/types";
+
+interface TranscriptOverlayProps {
+  transcript: Transcript;
+  activeParagraph: Transcript["paragraphs"][number] | null;
+  activeWordIndex: number | null;
+}
+
+export function TranscriptOverlay({
+  transcript,
+  activeParagraph,
+  activeWordIndex,
+}: TranscriptOverlayProps) {
+  // Find the words that belong to the active paragraph by time range
+  const paragraphWords = useMemo(() => {
+    if (!activeParagraph) return [];
+    return transcript.words.filter(
+      (w) => w.start >= activeParagraph.start && w.end <= activeParagraph.end,
+    );
+  }, [transcript.words, activeParagraph]);
+
+  if (!activeParagraph || paragraphWords.length === 0) return null;
+
+  // The active word from the flat array — find it by index to compare
+  const activeWord =
+    activeWordIndex !== null ? transcript.words[activeWordIndex] : null;
+
+  return (
+    <div className="absolute bottom-10 left-0 right-0 flex justify-center px-6 py-4 max-w-md">
+      <p className="rounded-lg bg-black/20 px-5 py-3 text-base leading-relaxed backdrop-blur-sm text-lg text-left">
+        {paragraphWords.map((word, i) => {
+          const isSpoken =
+            activeWord !== null && word.start <= activeWord.end;
+
+          return (
+            <span
+              key={`${word.start}-${i}`}
+              className={
+                isSpoken
+                  ? "text-white font-medium transition-colors duration-150"
+                  : "text-white/40 transition-colors duration-150"
+              }
+            >
+              {i > 0 ? " " : ""}
+              {word.word}
+            </span>
+          );
+        })}
+      </p>
+    </div>
+  );
+}