4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T143a,'use client'; import * as React from 'react'; import { useObjectUrl } from '@/lib/browser-utils'; import { cn } from '@/registry/localmode/lib/utils'; /** * One time-aligned word. Matches the shape you can derive from `useTranscribe` * word-level timestamps (`{ text, start, end }` in seconds). */ export interface TimedWord { /** The word text. */ text: string; /** Start time in seconds. */ start: number; /** End time in seconds. */ end: number; } /** * Find the index of the word active at `time` via binary search. Returns the * last word whose `start <= time`, or -1 before the first word starts. */ function activeWordIndex(words: TimedWord[], time: number): number { let lo = 0; let hi = words.length - 1; let result = -1; while (lo <= hi) { const mid = (lo + hi) >> 1; if (words[mid].start <= time) { result = mid; lo = mid + 1; } else { hi = mid - 1; } } // Only highlight if we're still within (or just past) the word's window. if (result >= 0 && time > words[result].end + 0.25 && result < words.length - 1) { // Between words: keep the previous word dim rather than highlighted. if (time < words[result + 1].start) return -1; } return result; } /** Props for {@link SyncedTranscriptViewer}. */ export interface SyncedTranscriptViewerProps { /** The time-aligned words to render. */ words: TimedWord[]; /** * Local audio to play — a `Blob` (e.g. a recording) or URL. Optional: when * omitted, drive the highlight externally via {@link SyncedTranscriptViewerProps.activeIndex}. */ audio?: Blob | string; /** * Controlled active-word index. When provided (not `undefined`), it OVERRIDES * the internal audio-`currentTime`-derived index — e.g. driven by streaming * STT progress or TTS boundary events. Use `-1` for no highlighted word. */ activeIndex?: number; /** * Called when a word is clicked (when no `audio` is provided). Wire this to * seek your external driver (e.g. re-speak from that word). */ onSeekWord?: (index: number, word: TimedWord) => void; /** Additional class names merged onto the root element. */ className?: string; } /** * @file synced-transcript-viewer.tsx * @description Karaoke-style transcript viewer. Drive it two ways: pass recording `audio` and it highlights each word from playback `currentTime` (click a word to seek); or pass a controlled `activeIndex` from an external driver (streaming STT progress / TTS boundary events) and handle `onSeekWord`. Feed `words` from `useTranscribe`. * @constraint shadcn tokens only; zero @localmode/* imports. * * @example * ```tsx * // Recording-driven: * * // Externally driven (e.g. TTS boundary events): * speakFrom(i)} /> * ``` */ export function SyncedTranscriptViewer({ words, audio, activeIndex: controlledIndex, onSeekWord, className, }: SyncedTranscriptViewerProps) { const audioRef = React.useRef(null); const [currentTime, setCurrentTime] = React.useState(0); // useObjectUrl creates/revokes the object URL for Blobs; strings pass through. const objectUrl = useObjectUrl(!audio || typeof audio === 'string' ? null : audio); const src = typeof audio === 'string' ? audio : objectUrl; // A controlled `activeIndex` (external driver) wins over the audio-derived one. const activeIndex = controlledIndex !== undefined ? controlledIndex : activeWordIndex(words, currentTime); const seekTo = (i: number, word: TimedWord) => { if (audio) { const el = audioRef.current; if (el) { el.currentTime = word.start; void el.play(); } setCurrentTime(word.start); } else { onSeekWord?.(i, word); } }; return (

{words.map((word, i) => { const isActive = i === activeIndex; const isPast = i < activeIndex; return ( {' '} ); })}

{audio ? (

); } export default SyncedTranscriptViewer; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/lib/browser-utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/localmode/audio/synced-transcript-viewer/synced-transcript-viewer.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]