+ {/* Top gradient safe zone — keeps progress bar & breadcrumbs readable */}
+
+
+ {/* Bottom gradient safe zone — keeps captions & controls readable */}
+
- {/* Bottom overlay: stream info + reply */}
-
-
-
- {currentParticle && (
-
- )}
- {/* Exit countdown */}
- {exitRemainingMs !== null && (
-
- Closing in {Math.ceil(exitRemainingMs / 1000)}s
-
- )}
-
-
+ {/* Bottom bar: metadata left, controls right */}
+
+ {/* Left: seen indicator + exit countdown */}
+
+ {currentParticle && (
+
+ )}
+ {exitRemainingMs !== null && (
+
+ Closing in {Math.ceil(exitRemainingMs / 1000)}s
+
+ )}
+
+
+ {/* Right: recording controls */}
+
);
diff --git a/js/src/features/particles/transcript-overlay.tsx b/js/src/features/particles/transcript-overlay.tsx
index e1cefd2..bd52f15 100644
--- a/js/src/features/particles/transcript-overlay.tsx
+++ b/js/src/features/particles/transcript-overlay.tsx
@@ -1,35 +1,66 @@
import { useMemo } from "react";
import type { Transcript } from "@/api/types";
+type Sentence = Transcript["paragraphs"][number]["sentences"][number];
+type Word = Transcript["words"][number];
+
+const CHUNK_SIZE = 9;
+
+/** Split an array of words into fixed-size display chunks */
+function chunkWords(words: Word[]): Word[][] {
+ const chunks: Word[][] = [];
+ for (let i = 0; i < words.length; i += CHUNK_SIZE) {
+ chunks.push(words.slice(i, i + CHUNK_SIZE));
+ }
+ return chunks;
+}
+
interface TranscriptOverlayProps {
transcript: Transcript;
- activeParagraph: Transcript["paragraphs"][number] | null;
+ activeSentence: Sentence | null;
activeWordIndex: number | null;
+ /** Center captions vertically (e.g. for audio-only playback) */
+ centered?: boolean;
}
export function TranscriptOverlay({
transcript,
- activeParagraph,
+ activeSentence,
activeWordIndex,
+ centered = false,
}: TranscriptOverlayProps) {
- // Find the words that belong to the active paragraph by time range
- const paragraphWords = useMemo(() => {
- if (!activeParagraph) return [];
+ const sentenceWords = useMemo(() => {
+ if (!activeSentence) return [];
return transcript.words.filter(
- (w) => w.start >= activeParagraph.start && w.end <= activeParagraph.end,
+ (w) => w.start >= activeSentence.start && w.end <= activeSentence.end,
);
- }, [transcript.words, activeParagraph]);
+ }, [transcript.words, activeSentence]);
- if (!activeParagraph || paragraphWords.length === 0) return null;
+ const chunks = useMemo(() => chunkWords(sentenceWords), [sentenceWords]);
- // The active word from the flat array — find it by index to compare
const activeWord =
activeWordIndex !== null ? transcript.words[activeWordIndex] : null;
+ // Find which chunk contains the active word
+ const activeChunk = useMemo(() => {
+ if (!activeWord) return chunks[0] ?? null;
+ for (const chunk of chunks) {
+ if (chunk.some((w) => w.start === activeWord.start && w.end === activeWord.end)) {
+ return chunk;
+ }
+ }
+ return chunks[0] ?? null;
+ }, [chunks, activeWord]);
+
+ if (!activeSentence || !activeChunk || activeChunk.length === 0) return null;
+
return (
-
-
- {paragraphWords.map((word, i) => {
+
+
+ {activeChunk.map((word, i) => {
const isSpoken =
activeWord !== null && word.start <= activeWord.end;
diff --git a/js/src/hooks/use-transcript-playback.ts b/js/src/hooks/use-transcript-playback.ts
index 33ae8fd..b047362 100644
--- a/js/src/hooks/use-transcript-playback.ts
+++ b/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]);
}