🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)

* refactor: do not call await inside useCallbacks, rely on updates for dropdown

* fix: remember last selected voice

* refactor: Update Speech component to use TypeScript in useCallback

* refactor: Update Dropdown component styles to match header theme
This commit is contained in:
Danny Avila 2024-08-13 02:42:49 -04:00 committed by GitHub
parent 8cbb6ba166
commit 05696233a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 436 additions and 367 deletions

View file

@ -1,4 +1,5 @@
import { useRecoilState } from 'recoil';
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import store from '~/store';
export enum STTEndpoints {
@ -13,13 +14,16 @@ export enum TTSEndpoints {
}
const useGetAudioSettings = () => {
const [engineSTT] = useRecoilState<string>(store.engineSTT);
const [engineTTS] = useRecoilState<string>(store.engineTTS);
const engineSTT = useRecoilValue<string>(store.engineSTT);
const engineTTS = useRecoilValue<string>(store.engineTTS);
const speechToTextEndpoint: STTEndpoints = engineSTT as STTEndpoints;
const textToSpeechEndpoint: TTSEndpoints = engineTTS as TTSEndpoints;
const speechToTextEndpoint = engineSTT;
const textToSpeechEndpoint = engineTTS;
return { speechToTextEndpoint, textToSpeechEndpoint };
return useMemo(
() => ({ speechToTextEndpoint, textToSpeechEndpoint }),
[speechToTextEndpoint, textToSpeechEndpoint],
);
};
export default useGetAudioSettings;