feat: improved layout and captions

js/src/hooks/use-transcript-playback.ts

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import type { Transcript } from "@/api/types";
 
+type Sentence = Transcript["paragraphs"][number]["sentences"][number];
+
 interface TranscriptPlaybackState {
-  /** The paragraph currently being spoken, or null if before/after speech */
-  activeParagraph: Transcript["paragraphs"][number] | null;
+  /** The sentence currently being spoken, or null if between sentences */
+  activeSentence: Sentence | null;
   /** Index of the active word within the transcript's flat words array */
   activeWordIndex: number | null;
 }
@@ -13,12 +15,19 @@ export function useTranscriptPlayback(
   currentTime: number,
 ): TranscriptPlaybackState {
   return useMemo(() => {
-    if (!transcript) return { activeParagraph: null, activeWordIndex: null };
+    if (!transcript) return { activeSentence: null, activeWordIndex: null };
 
-    const activeParagraph =
-      transcript.paragraphs.find(
-        (p) => currentTime >= p.start && currentTime <= p.end,
-      ) ?? null;
+    // Find the active sentence across all paragraphs
+    let activeSentence: Sentence | null = null;
+    for (const paragraph of transcript.paragraphs) {
+      const sentence = paragraph.sentences.find(
+        (s) => currentTime >= s.start && currentTime <= s.end,
+      );
+      if (sentence) {
+        activeSentence = sentence;
+        break;
+      }
+    }
 
     // Binary search for active word
     const words = transcript.words;
@@ -35,6 +44,6 @@ export function useTranscriptPlayback(
       }
     }
 
-    return { activeParagraph, activeWordIndex };
+    return { activeSentence, activeWordIndex };
   }, [transcript, currentTime]);
 }