improved controls (2)

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<HTMLButtonElement>) => {
     ev.preventDefault();

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 (
     <div className="d-flex flex-column gap-3" id="record-audio">
@@ -123,10 +125,7 @@ export default function RecordComponent(props: Props) {
         </button>
       )}
 
-      {props.formIsCleared ? (
-          <></>
-        ) : (
-
+      {enableMediaReview ? (
           <>
             <RecordedAudioComponent recordingBlob={recordingBlob} />
 
@@ -135,7 +134,7 @@ export default function RecordComponent(props: Props) {
                 className={speakButtonClass}
                 onClick={handleUpload}
                 type="submit"
-                disabled={false}
+                disabled={!enableUploadButton}
               >
                 <FontAwesomeIcon
                   icon={faUpload}
@@ -146,15 +145,15 @@ export default function RecordComponent(props: Props) {
               <button
                 className="btn btn-destructive w-100"
                 onClick={handleClear}
-                disabled={false}
               >
                 <FontAwesomeIcon icon={faTrash} className="me-2" />
                 Clear
               </button>
             </div>
           </>
-        )
-
+        ) : (
+          <></>
+        ) 
       }
 
     </div>