@@ -150,7 +150,7 @@ function RgbInput(props: { value: string; onChange: (value: string) => void }) {
150150}
151151
152152export function CaptionsTab ( ) {
153- const { project, setProject, editorInstance, editorState } =
153+ const { project, setProject, editorInstance, editorState, setEditorState } =
154154 useEditorContext ( ) ;
155155
156156 const getSetting = < K extends keyof CaptionSettings > (
@@ -172,12 +172,18 @@ export function CaptionsTab() {
172172 const [ selectedLanguage , setSelectedLanguage ] = createSignal ( "auto" ) ;
173173 const [ downloadedModels , setDownloadedModels ] = createSignal < string [ ] > ( [ ] ) ;
174174
175- const [ isDownloading , setIsDownloading ] = createSignal ( false ) ;
176- const [ downloadProgress , setDownloadProgress ] = createSignal ( 0 ) ;
177- const [ downloadingModel , setDownloadingModel ] = createSignal < string | null > (
178- null ,
179- ) ;
180- const [ isGenerating , setIsGenerating ] = createSignal ( false ) ;
175+ const isDownloading = ( ) => editorState . captions . isDownloading ;
176+ const setIsDownloading = ( value : boolean ) =>
177+ setEditorState ( "captions" , "isDownloading" , value ) ;
178+ const downloadProgress = ( ) => editorState . captions . downloadProgress ;
179+ const setDownloadProgress = ( value : number ) =>
180+ setEditorState ( "captions" , "downloadProgress" , value ) ;
181+ const downloadingModel = ( ) => editorState . captions . downloadingModel ;
182+ const setDownloadingModel = ( value : string | null ) =>
183+ setEditorState ( "captions" , "downloadingModel" , value ) ;
184+ const isGenerating = ( ) => editorState . captions . isGenerating ;
185+ const setIsGenerating = ( value : boolean ) =>
186+ setEditorState ( "captions" , "isGenerating" , value ) ;
181187 const [ hasAudio , setHasAudio ] = createSignal ( false ) ;
182188
183189 createEffect (
@@ -662,6 +668,27 @@ export function CaptionsTab() {
662668 />
663669 </ div >
664670
671+ < div class = "flex flex-col gap-2" >
672+ < div class = "flex items-center justify-between" >
673+ < span class = "text-gray-11 text-sm" >
674+ Active Word Highlight
675+ </ span >
676+ < Toggle
677+ checked = { getSetting ( "activeWordHighlight" ) }
678+ onChange = { ( checked ) =>
679+ updateCaptionSetting ( "activeWordHighlight" , checked )
680+ }
681+ disabled = { ! hasCaptions ( ) }
682+ />
683+ </ div >
684+ < p class = "text-xs text-gray-10" >
685+ This is the first version of captions in Cap. Active word
686+ highlighting may be inaccurate in some situations. We're
687+ working on a fix for this and it will be released in
688+ upcoming versions.
689+ </ p >
690+ </ div >
691+
665692 < div class = "flex flex-col gap-2" >
666693 < span class = "text-gray-11 text-sm" > Font Color</ span >
667694 < RgbInput
0 commit comments