diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx index fd1962bfde..38559573f9 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx @@ -43,6 +43,8 @@ interface Props { } function VcModelListPage(props: Props) { + usePrefixedDocumentTitle("Voice Conversion"); + const [loading, setLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); @@ -51,11 +53,11 @@ function VcModelListPage(props: Props) { // Auto generated const [idempotencyToken, setIdempotencyToken] = useState(uuidv4()); - // UI hack + // NB: Something of a UI hack here. + // The 3rd party microphone component doesn't let you clear it, so we emulate form clearing + // with this variable. const [formIsCleared, setFormIsCleared] = useState(false); - usePrefixedDocumentTitle("Voice Conversion"); - let { setVoiceConversionModels, voiceConversionModels, @@ -63,10 +65,10 @@ function VcModelListPage(props: Props) { setMaybeSelectedVoiceConversionModel, } = props; - const ttsModelsLoaded = voiceConversionModels.length > 0; + const vcModelsLoaded = voiceConversionModels.length > 0; const listModels = useCallback(async () => { - if (ttsModelsLoaded) { + if (vcModelsLoaded) { return; // Already queried. } const models = await ListVoiceConversionModels(); @@ -87,26 +89,12 @@ function VcModelListPage(props: Props) { setVoiceConversionModels, maybeSelectedVoiceConversionModel, setMaybeSelectedVoiceConversionModel, - ttsModelsLoaded, + vcModelsLoaded, ]); - /*const handleLoading = useCallback(() => { - setLoading(true); - setTimeout(() => { - setLoading(false); - }, 2000); - }, []);*/ - useEffect(() => { listModels(); - //const timeout = setTimeout(() => { - // setLoading(false); - //}, 2000); - //return () => clearTimeout(timeout); - }, [ - //handleLoading, - listModels, - ]); + }, [listModels]); const handleClearClick = (ev: React.FormEvent) => { ev.preventDefault(); diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/RecordComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/RecordComponent.tsx index e2db9f10b4..f5298d5e0c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/RecordComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/RecordComponent.tsx @@ -33,7 +33,7 @@ function RecordedAudioComponent(props: RecorderProps) { } interface Props { - setMediaUploadToken: (token: string) => void, + setMediaUploadToken: (token?: string) => void, formIsCleared: boolean, setFormIsCleared: (cleared: boolean) => void, @@ -70,15 +70,16 @@ export default function RecordComponent(props: Props) { const handleStartRecording = async () => { startRecording(); - props.setFormIsCleared(false); }; const handleStopRecording = async (blob: any) => { stopRecording(); + props.setFormIsCleared(false); }; const handleClear = () => { stopRecording(); + props.setMediaUploadToken(undefined); // clear props.setFormIsCleared(true); }; @@ -92,15 +93,16 @@ export default function RecordComponent(props: Props) { let result = await UploadAudio(request); if (UploadAudioIsOk(result)) { - //setIsUploadDisabled(true); - //ggprops.setMediaUploadToken(result.upload_token); props.setMediaUploadToken(result.upload_token); } } - const speakButtonClass = false - ? "btn btn-primary w-100 disabled" - : "btn btn-primary w-100"; + const enableMediaReview = !props.formIsCleared && recordingBlob !== undefined; + const enableUploadButton = !props.formIsCleared && recordingBlob !== undefined && !isRecording; + + const speakButtonClass = enableUploadButton + ? "btn btn-primary w-100" + : "btn btn-primary w-100 disabled"; return (
@@ -123,10 +125,7 @@ export default function RecordComponent(props: Props) { )} - {props.formIsCleared ? ( - <> - ) : ( - + {enableMediaReview ? ( <> @@ -135,7 +134,7 @@ export default function RecordComponent(props: Props) { className={speakButtonClass} onClick={handleUpload} type="submit" - disabled={false} + disabled={!enableUploadButton} > Clear
- ) - + ) : ( + <> + ) }