diff --git a/packages/app-mobile/components/voiceTyping/VoiceTypingDialog.tsx b/packages/app-mobile/components/voiceTyping/VoiceTypingDialog.tsx index eb40a905b..285a9a419 100644 --- a/packages/app-mobile/components/voiceTyping/VoiceTypingDialog.tsx +++ b/packages/app-mobile/components/voiceTyping/VoiceTypingDialog.tsx @@ -15,30 +15,39 @@ enum RecorderState { Loading = 1, Recording = 2, Processing = 3, + Error = 4, } -const useVosk = (): Vosk|null => { +const useVosk = (): [Error | null, Vosk|null] => { const [vosk, setVosk] = useState(null); + const [error, setError] = useState(null); useAsyncEffect(async (event: AsyncEffectEvent) => { - const v = await getVosk(); - if (event.cancelled) return; - setVosk(v); + try { + const v = await getVosk(); + if (event.cancelled) return; + setVosk(v); + } catch (error) { + setError(error); + } }, []); - return vosk; + return [error, vosk]; }; export default (props: Props) => { const [recorder, setRecorder] = useState(null); const [recorderState, setRecorderState] = useState(RecorderState.Loading); - const vosk = useVosk(); + const [voskError, vosk] = useVosk(); useEffect(() => { - if (!vosk) return; - setRecorderState(RecorderState.Recording); - }, [vosk]); + if (voskError) { + setRecorderState(RecorderState.Error); + } else if (vosk) { + setRecorderState(RecorderState.Recording); + } + }, [vosk, voskError]); useEffect(() => { if (recorderState === RecorderState.Recording) { @@ -56,13 +65,14 @@ export default (props: Props) => { }, [recorder, props.onDismiss]); const renderContent = () => { - const components: Record = { - [RecorderState.Loading]: _('Loading...'), - [RecorderState.Recording]: _('Please record your voice...'), - [RecorderState.Processing]: _('Converting speech to text...'), + const components: Record = { + [RecorderState.Loading]: () => _('Loading...'), + [RecorderState.Recording]: () => _('Please record your voice...'), + [RecorderState.Processing]: () => _('Converting speech to text...'), + [RecorderState.Error]: () => _('Error: %s', voskError.message), }; - return components[recorderState]; + return components[recorderState](); }; const renderIcon = () => { @@ -70,6 +80,7 @@ export default (props: Props) => { [RecorderState.Loading]: ({ size }: { size: number }) => , [RecorderState.Recording]: 'microphone', [RecorderState.Processing]: 'microphone', + [RecorderState.Error]: 'alert-circle-outline', }; return components[recorderState];