1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-30 10:36:35 +02:00
joplin/packages/app-mobile/components/voiceTyping/VoiceTypingDialog.tsx

123 lines
3.7 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { useState, useEffect, useCallback } from 'react';
import { Banner, ActivityIndicator } from 'react-native-paper';
import { _, languageName } from '@joplin/lib/locale';
import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
import { getVosk, Recorder, startRecording, Vosk } from '../../services/voiceTyping/vosk';
import { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
import { modelIsDownloaded } from '../../services/voiceTyping/vosk.android';
interface Props {
locale: string;
onDismiss: ()=> void;
onText: (text: string)=> void;
}
enum RecorderState {
Loading = 1,
Recording = 2,
Processing = 3,
2023-06-11 17:13:36 +02:00
Error = 4,
Downloading = 5,
}
const useVosk = (locale: string): [Error | null, boolean, Vosk|null] => {
const [vosk, setVosk] = useState<Vosk>(null);
2023-06-11 17:13:36 +02:00
const [error, setError] = useState<Error>(null);
const [mustDownloadModel, setMustDownloadModel] = useState<boolean | null>(null);
useAsyncEffect(async (event: AsyncEffectEvent) => {
if (mustDownloadModel === null) return;
2023-06-11 17:13:36 +02:00
try {
const v = await getVosk(locale);
2023-06-11 17:13:36 +02:00
if (event.cancelled) return;
setVosk(v);
} catch (error) {
setError(error);
} finally {
setMustDownloadModel(false);
2023-06-11 17:13:36 +02:00
}
}, [locale, mustDownloadModel]);
useAsyncEffect(async (_event: AsyncEffectEvent) => {
setMustDownloadModel(!(await modelIsDownloaded(locale)));
}, [locale]);
return [error, mustDownloadModel, vosk];
};
export default (props: Props) => {
const [recorder, setRecorder] = useState<Recorder>(null);
const [recorderState, setRecorderState] = useState<RecorderState>(RecorderState.Loading);
const [voskError, mustDownloadModel, vosk] = useVosk(props.locale);
useEffect(() => {
2023-06-11 17:13:36 +02:00
if (voskError) {
setRecorderState(RecorderState.Error);
} else if (vosk) {
setRecorderState(RecorderState.Recording);
}
}, [vosk, voskError]);
useEffect(() => {
if (mustDownloadModel) {
setRecorderState(RecorderState.Downloading);
}
}, [mustDownloadModel]);
useEffect(() => {
if (recorderState === RecorderState.Recording) {
setRecorder(startRecording(vosk, {
onResult: (text: string) => {
props.onText(text);
},
}));
}
}, [recorderState, vosk, props.onText]);
const onDismiss = useCallback(() => {
if (recorder) recorder.cleanup();
props.onDismiss();
}, [recorder, props.onDismiss]);
const renderContent = () => {
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
2023-06-11 17:13:36 +02:00
const components: Record<RecorderState, Function> = {
[RecorderState.Loading]: () => _('Loading...'),
[RecorderState.Recording]: () => _('Please record your voice...'),
[RecorderState.Processing]: () => _('Converting speech to text...'),
[RecorderState.Downloading]: () => _('Downloading %s language files...', languageName(props.locale)),
2023-06-11 17:13:36 +02:00
[RecorderState.Error]: () => _('Error: %s', voskError.message),
};
2023-06-11 17:13:36 +02:00
return components[recorderState]();
};
const renderIcon = () => {
const components: Record<RecorderState, IconSource> = {
[RecorderState.Loading]: ({ size }: { size: number }) => <ActivityIndicator animating={true} style={{ width: size, height: size }} />,
[RecorderState.Recording]: 'microphone',
[RecorderState.Processing]: 'microphone',
[RecorderState.Downloading]: ({ size }: { size: number }) => <ActivityIndicator animating={true} style={{ width: size, height: size }} />,
2023-06-11 17:13:36 +02:00
[RecorderState.Error]: 'alert-circle-outline',
};
return components[recorderState];
};
return (
<Banner
visible={true}
icon={renderIcon()}
actions={[
{
label: _('Done'),
onPress: onDismiss,
},
]}>
{`${_('Voice typing...')}\n${renderContent()}`}
</Banner>
);
};