Dubbing panelPro
Source and target language with speaker tracks, per line review and re-voice.
On this page
ProA ferry documentary in Spanish: one take runs long, one line changed since voicing.
Installation
Usage
import { DubbingPanel } from "@/components/ui/chatcn/pro/dubbing-panel"
<DubbingPanel sourceLanguage={english} targetLanguage={spanish} speakers={speakers} lines={lines} onLinesChange={setLines} duration={36} onPlay={play} onRevoice={revoice} />Every take is measured against the original line's slot: one that runs past it by more than tolerance is flagged with how much, before it drifts out of sync. Editing a translation marks its take stale until it is voiced again, and the header offers to re-voice every changed line. Lines with an empty target show as translating while translating is set, so a streamed translation fills in place. Omit onLinesChange for a read only review.
Examples
States
ProTranslating, a failed take, German read only, and no lines yet.
Props
| Prop | Type | Notes |
|---|---|---|
sourceLanguage, targetLanguage | { code, label, dir? } | code sets lang on the text |
targetLanguages, onTargetLanguageChange | DubLanguage[] | Shows the language select |
speakers | { id, name, voice? }[] | One lane each, in order |
lines, onLinesChange | DubLine[] | { id, speaker, start, end, source, target, take?, voicedText?, approved?, error? } |
onPlay, onStop | (line, track) => Promise<void> | track is source or dub |
onRevoice | (line) => Promise<{ take }> | Reject with a message to show it |
duration, currentTime, onSeek | number | Seconds |
translating | boolean | Empty targets shimmer |
tolerance | number | Seconds a take may run long. Default 0.3 |
Accessibility
- Source and target text carry their
lang, and the target its direction, so screen readers switch voices. - Play buttons name the language and line and turn into Stop; Approve is a toggle button.
- Every flag has an icon and a sentence that says how to fix it; failures are alerts.