From 46b99f25eed97647bb719caeb3276ac5671ce0f8 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 28 Apr 2023 11:33:01 +0700 Subject: [PATCH] loading states for upload and convert --- .../fakeyou.com/src/scss/site-refresh.scss | 6 + .../vc/vc_model_list/VcModelListPage.tsx | 14 +- .../components/RecordComponent.tsx | 125 +++++++++++------- .../components/UploadComponent.tsx | 43 +++++- 4 files changed, 130 insertions(+), 58 deletions(-) diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 61a15467be..98c2be5bb3 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -1282,6 +1282,12 @@ select { background-color: $danger !important; } +.btn-uploaded { + background-color: lighten($secondary, 5%) !important; + border-color: lighten($secondary, 5%) !important; + color: $white !important; +} + .video-card-title, .video-card-text { color: $white !important; 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 e12dbf60b3..6d1274d4d0 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 @@ -55,7 +55,7 @@ interface Props { function VcModelListPage(props: Props) { usePrefixedDocumentTitle("Voice Conversion"); - + const [convertLoading, setConvertLoading] = useState(false); const [canConvert, setCanConvert] = useState(false); const [mediaUploadToken, setMediaUploadToken] = useState( @@ -135,6 +135,8 @@ function VcModelListPage(props: Props) { return; } + setConvertLoading(true); + let request: EnqueueVoiceConversionRequest = { uuid_idempotency_token: convertIdempotencyToken, voice_conversion_model_token: @@ -154,15 +156,15 @@ function VcModelListPage(props: Props) { FrontendInferenceJobType.VoiceConversion ); } + + setConvertLoading(false); }; const handleFormSubmit = async (ev: React.FormEvent) => { ev.preventDefault(); }; - const loading = false; // TODO: Remove. - - const speakButtonClass = loading + const speakButtonClass = convertLoading ? "btn btn-primary w-100 disabled" : "btn btn-primary w-100"; @@ -323,7 +325,7 @@ function VcModelListPage(props: Props) { className="me-2" /> Convert - {loading && } + {convertLoading && } @@ -366,7 +368,7 @@ function VcModelListPage(props: Props) { className="me-2" /> Convert - {loading && } + {convertLoading && } 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 8e7c6bc59f..f6c02ae9c9 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 @@ -1,23 +1,29 @@ -import React, { useEffect, useMemo } from "react"; +import React, { useEffect, useState, useMemo } from "react"; import { v4 as uuidv4 } from "uuid"; import { useAudioRecorder } from "react-audio-voice-recorder"; import { InputVcAudioPlayer } from "../../../../_common/InputVcAudioPlayer"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faMicrophone, faUpload } from "@fortawesome/pro-solid-svg-icons"; -import { UploadAudio, UploadAudioIsOk, UploadAudioRequest } from "@storyteller/components/src/api/upload/UploadAudio"; -import { faTrash } from "@fortawesome/free-solid-svg-icons"; +import { faFileArrowUp, faMicrophone } from "@fortawesome/pro-solid-svg-icons"; +import { + UploadAudio, + UploadAudioIsOk, + UploadAudioRequest, +} from "@storyteller/components/src/api/upload/UploadAudio"; +import { faCheck, faTrash } from "@fortawesome/free-solid-svg-icons"; interface Props { - setMediaUploadToken: (token?: string) => void, + setMediaUploadToken: (token?: string) => void; - formIsCleared: boolean, - setFormIsCleared: (cleared: boolean) => void, + formIsCleared: boolean; + setFormIsCleared: (cleared: boolean) => void; - setCanConvert: (canConvert: boolean) => void, - changeConvertIdempotencyToken: () => void, + setCanConvert: (canConvert: boolean) => void; + changeConvertIdempotencyToken: () => void; } export default function RecordComponent(props: Props) { + const [uploadLoading, setUploadLoading] = useState(false); + const [isUploadDisabled, setIsUploadDisabled] = useState(false); const { startRecording, stopRecording, recordingBlob, isRecording } = useAudioRecorder(); @@ -44,7 +50,7 @@ export default function RecordComponent(props: Props) { // props.setMediaUploadToken(result.upload_token); // } //})(); - }, [recordingBlob]) + }, [recordingBlob]); const handleStartRecording = async () => { startRecording(); @@ -55,6 +61,7 @@ export default function RecordComponent(props: Props) { stopRecording(); props.setFormIsCleared(false); props.setCanConvert(false); + setIsUploadDisabled(false); }; const handleClear = () => { @@ -66,11 +73,13 @@ export default function RecordComponent(props: Props) { }; const handleUpload = async () => { - const request : UploadAudioRequest = { + const request: UploadAudioRequest = { uuid_idempotency_token: uuidv4(), // TODO: only send on change. file: recordingBlob, - source: 'device', - } + source: "device", + }; + + setUploadLoading(true); let result = await UploadAudio(request); @@ -79,15 +88,19 @@ export default function RecordComponent(props: Props) { props.setFormIsCleared(false); props.setCanConvert(true); props.changeConvertIdempotencyToken(); + setIsUploadDisabled(true); } - } + + setUploadLoading(false); + }; const enableMediaReview = !props.formIsCleared && recordingBlob !== undefined; - const enableUploadButton = !props.formIsCleared && recordingBlob !== undefined && !isRecording; + const enableUploadButton = + !props.formIsCleared && recordingBlob !== undefined && !isRecording; - const speakButtonClass = enableUploadButton - ? "btn btn-primary w-100" - : "btn btn-primary w-100 disabled"; + const speakButtonClass = isUploadDisabled + ? "btn btn-uploaded w-100 disabled" + : "btn btn-primary w-100"; return (
@@ -111,36 +124,40 @@ export default function RecordComponent(props: Props) { )} {enableMediaReview ? ( - <> - - -
- - -
- - ) : ( - <> - ) - } + <> + +
+ + +
+ + ) : ( + <> + )}
); } @@ -150,7 +167,6 @@ interface RecorderProps { } function RecordedAudioComponent(props: RecorderProps) { - // Only generate the URL on change. const audioLink = useMemo(() => { if (!props.recordingBlob) { @@ -170,6 +186,19 @@ function RecordedAudioComponent(props: RecorderProps) { ); } +const LoadingIcon: React.FC = () => { + return ( + <> + + Loading... + + ); +}; + /* In case you'd like to update colors of the icons just follow the instruction here: https://github.com/samhirtarif/react-audio-recorder/issues/19#issuecomment-1420248073 diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx index 8a25863802..6c96818af4 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx @@ -1,4 +1,5 @@ import { + faCheck, faFileArrowUp, faFileAudio, faTrash, @@ -30,6 +31,7 @@ function UploadComponent(props: Props) { const [file, setFile] = useState(undefined); const [audioLink, setAudioLink] = useState(); const [isUploadDisabled, setIsUploadDisabled] = useState(false); + const [uploadLoading, setUploadLoading] = useState(false); // Auto generated const [idempotencyToken, setIdempotencyToken] = useState(uuidv4()); @@ -43,6 +45,7 @@ function UploadComponent(props: Props) { props.setFormIsCleared(false); props.setCanConvert(false); props.changeConvertIdempotencyToken(); + setIsUploadDisabled(false); }; const handleDragOver = (e: React.DragEvent): void => { @@ -61,6 +64,7 @@ function UploadComponent(props: Props) { setFile(null); setAudioLink(""); setIdempotencyToken(uuidv4()); + setIsUploadDisabled(false); props.setMediaUploadToken(undefined); // clear props.setFormIsCleared(true); props.setCanConvert(false); @@ -72,6 +76,8 @@ function UploadComponent(props: Props) { return false; } + setUploadLoading(true); + const request: UploadAudioRequest = { uuid_idempotency_token: idempotencyToken, file: file, @@ -86,6 +92,8 @@ function UploadComponent(props: Props) { props.setFormIsCleared(false); props.setCanConvert(true); } + + setUploadLoading(false); }; const fileSize = @@ -95,6 +103,10 @@ function UploadComponent(props: Props) { ? `${Math.floor(file.size / 1024)} KB` : null; + const uploadBtnClass = isUploadDisabled + ? "btn btn-uploaded w-100 disabled" + : "btn btn-primary w-100"; + return (
{/* Usage refer to https://github.com/KarimMokhtar/react-drag-drop-files */} @@ -178,15 +190,25 @@ function UploadComponent(props: Props) { {file ? (