diff --git a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx index ce33446072..fbea15c328 100644 --- a/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx +++ b/packages/fakeyou.com/src/components/common/AudioInput/AudioInput.tsx @@ -21,26 +21,10 @@ interface Props { const n = () => {}; export default function AudioInput({ children, clear = n, file, hideDetails, hideClearDetails, inputProps, ...rest }: Props) { - - // const transitions = useTransition(file, { - // config: { tension: 120, friction: 15 }, - // from: { opacity: 0 }, - // enter: { opacity: 1 }, - // leave: { opacity: 0 }, - // onRest, - // }); - return
{ file ? : } - { children - // transitions((style, i) => i ? - //
- // - //
- // { !hideActions && } - //
: null ) - } + { children }
; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx index 606ea93aec..0e78478cdb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx @@ -1,11 +1,6 @@ import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import { - faEye, - faLanguage, - faPencil, - faWaveform, -} from "@fortawesome/pro-solid-svg-icons"; +import { faEye, faLanguage, faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import { Stepper } from "./components/Stepper"; @@ -15,14 +10,9 @@ import { VoiceDetails } from "./components/steps/VoiceDetails"; import PageHeader from "components/layout/PageHeader"; import Container from "components/common/Container"; import { useHistory } from "react-router-dom"; - import { v4 as uuidv4 } from "uuid"; - import { useFile } from "hooks"; - import useVoiceRequests from "./useVoiceRequests"; -import useUploadedFiles from "hooks/useUploadedFiles"; - import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; @@ -37,8 +27,8 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu const [visibility, visibilitySet] = useState("hidden"); const [title, titleSet] = useState(""); const [fetched,fetchedSet] = useState(false); - const deleteEverything = useUploadedFiles((state: any) => state.deleteEverything); - const audioProps = useFile({}); // contains upload inout state and controls, see docs + const [uploadStatus,uploadStatusSet] = useState(0); // will replace with enum + const audioProps = useFile({}); const datasetInputs = [ { @@ -67,26 +57,20 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu ]; const { dataset_token } = useParams(); - const [isNewCreation] = useState(!dataset_token); - const isEditMode = Boolean(dataset_token) && !isNewCreation; + const existingVoice = !!dataset_token; - usePrefixedDocumentTitle(isEditMode ? "Edit Dataset" : "Create New Voice"); + usePrefixedDocumentTitle(existingVoice ? "Edit Dataset" : "Create New Voice"); const initialStep = history.location.pathname.includes("/upload") ? 1 : 0; const [currentStep, setCurrentStep] = useState(initialStep); - const [audioSamplesReady, setAudioSamplesReady] = useState(false); + const steps = existingVoice ? ["Edit Details", "Edit Samples"] : ["Voice Details", "Upload Samples"]; - const steps = isEditMode - ? ["Edit Details", "Edit Samples"] - : ["Voice Details", "Upload Samples"]; - - // const key = !isNewCreation && (dataset_token || uuidv4()); const displayStep = (step: any) => { switch (step) { case 0: return ; case 1: - return ; + return ; default: return null; } @@ -104,7 +88,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu const handleNext = () => { if (currentStep === 0) { - if (isNewCreation) { + if (!existingVoice) { // It's a new creation and on the first step datasets.create("",{ @@ -113,7 +97,6 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu idempotency_token: uuidv4(), }).then((res: any) => { if (res && res.success && res.token) { - deleteEverything(); history.push(`/voice-designer/dataset/${ res.token }/upload`); } }); @@ -143,7 +126,6 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu voice_dataset_token: dataset_token || "", }) .then((res: any) => { - deleteEverything(); if (res && res.success) { enqueueInferenceJob( res.inference_job_token, @@ -174,10 +156,10 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu return ( @@ -202,7 +184,7 @@ function VoiceDesignerFormPage({ enqueueInferenceJob, sessionWrapper }: { enqueu onBack={handleBack} onNext={handleNext} onCreate={handleCreateVoice} - createDisabled={!audioSamplesReady} + createDisabled={uploadStatus === 1} // will replace with enum /> diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx index 9787269231..971d54b1f6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx @@ -4,7 +4,7 @@ import { faPenToSquare, faPlus, faRightToBracket, - // faStar, + faStar, faWaveform, } from "@fortawesome/pro-solid-svg-icons"; import InferenceJobsList from "components/layout/InferenceJobsList"; @@ -170,11 +170,11 @@ function VoiceDesignerMainPage(props: Props) { to: "/signup", }; - // const pricingButton = { - // label: `View Pricing`, - // icon: faStar, - // to: "/pricing", - // }; + const pricingButton = { + label: `View Pricing`, + icon: faStar, + to: "/pricing", + }; const dataPlaceholder = () =>
@@ -263,7 +263,7 @@ function VoiceDesignerMainPage(props: Props) { (); - // const [formIsCleared, setFormIsCleared] = useState(false); - const [uploaded,uploadedSet] = useState(false); +function UploadSamples({ audioProps, datasetToken, uploadStatus, uploadStatusSet }: Props) { const [samples,samplesSet] = useState([]); const [listFetched,listFetchedSet] = useState(false); @@ -54,8 +49,8 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud }); useEffect(() => { - if (audioProps.file && datasetToken && !uploaded) { - uploadedSet(true); + if (audioProps.file && datasetToken && !uploadStatus) { + uploadStatusSet(1); UploadSample("",{ dataset_token: datasetToken || "", file: audioProps.file, @@ -64,13 +59,12 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud .then((res) => { if (res.success) { audioProps.clear(); - uploadedSet(false); + uploadStatusSet(2); listFetchedSet(false); } }); } - if (datasetToken && !listFetched) { listFetchedSet(true); ListSamplesForDataset(datasetToken,{}) @@ -81,7 +75,7 @@ function UploadSamples({ audioProps, datasetToken, setAudioSamplesReady }: { aud }); } - },[audioProps, datasetToken, listFetched, uploaded]); + },[audioProps, datasetToken, listFetched, uploadStatus, uploadStatusSet]); return (