Merge pull request #366 from storytold/olivicmic-fy-voice-designer-consume-api-react

added jobs list component working with new inference jobs polling

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -5,8 +5,12 @@ import {
   GetPendingTtsJobCountIsOk,
   GetPendingTtsJobCountSuccessResponse,
 } from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
+
+import { JobState } from "@storyteller/components/src/jobs/JobStates";
+
+import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
 // import { springs } from "resources";
-import { useInferenceJobs } from "hooks";
+// import { useInferenceJobs } from "hooks";
 import { Button } from 'components/common';
 import { Analytics } from "common/Analytics";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -14,8 +18,10 @@ import { faChevronRight, faHourglass1, faRemove, faTrophy, faWarning } from "@fo
 
 const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000;
 
-export default function InferenceJobsList({ t }: { t: any }) {
-  const { inferenceJobs = [] } = useInferenceJobs({ type: 0 });
+export default function InferenceJobsList({ t, inferenceJobs }: { t: any, inferenceJobs?: any }) {
+  // const { inferenceJobs = [] } = useInferenceJobs({ type: 0 });
+  // const oldJobs = thejobs || inferenceJobs;
+  // console.log("😎",inferenceJobs);
   const [pending, pendingSet] = useState<GetPendingTtsJobCountSuccessResponse>({
     success: true,
     pending_job_count: 0,
@@ -32,6 +38,24 @@ export default function InferenceJobsList({ t }: { t: any }) {
     }
   };
 
+  const processStatus = (job: InferenceJob) => {
+    switch (job.jobState) {
+      case JobState.PENDING:
+      case JobState.UNKNOWN: return 0;
+      case JobState.STARTED: return 1
+      case JobState.ATTEMPT_FAILED: return 2;
+      case JobState.COMPLETE_FAILURE:
+      case JobState.DEAD: return 3;
+      case JobState.COMPLETE_SUCCESS: return 4;
+      default: return -1;
+    }
+  };
+
+  const jobs = inferenceJobs.map((job: InferenceJob, i: number) => ({
+    ...job!,
+    statusIndex: processStatus(job!)
+  }));
+
   // const transitions = useTransition(inferenceJobs, { // not today
   //   ...springs.soft,
   //   from: { opacity: 0, position: "absolute" },
@@ -61,9 +85,10 @@ export default function InferenceJobsList({ t }: { t: any }) {
     return () => clearInterval(interval);
   }, [pending]);
 
-    return inferenceJobs.length ? <div {...{ className: "face-animator-jobs panel" }}>
+    return jobs.length ? <div {...{ className: "face-animator-jobs panel" }}>
       <h5>{ t("headings.yourJobs") }</h5>
-      { inferenceJobs.map((job, key) => {
+      { jobs.map((job: any, key: number) => {
+        console.log("🌸",job);
       return <div {...{ className: "panel face-animator-job", key }}>
         <FontAwesomeIcon {...{ className: `job-status-icon job-status-${job.statusIndex}`, icon: statusIcons[job.statusIndex] }}/>
         <div {...{ className: "job-details" }}>

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -677,7 +677,7 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/voice-designer">
-              <VoiceDesignerMainPage />
+              <VoiceDesignerMainPage {...{ inferenceJobs: this.props.inferenceJobs }} />
             </Route>
 
             <Route path="/generate-speech">

packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncEditor/LipsyncEditor.tsx

@@ -32,6 +32,7 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 export default function LipsyncEditor({
   enqueueInferenceJob,
   sessionSubscriptionsWrapper,
+  inferenceJobs,
   inferenceJobsByCategory,
   ...rest
 }: FaceAnimatorCore) {
@@ -182,7 +183,7 @@ export default function LipsyncEditor({
           );
         })}
       </div>
-      <InferenceJobsList {...{ t }}/>
+      <InferenceJobsList {...{ t, inferenceJobs }}/>
       <div {...{ className: "face-animator-mobile-sample" }}>
         <BasicVideo {...{ src: "/videos/face-animator-instruction-en.mp4" }} />
       </div>

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx

@@ -30,7 +30,7 @@ function VoiceDesignerFormPage() {
   const history = useHistory();
   const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests({});
   const [language, languageSet] = useState("en");
-  const [visibility, visibilitySet] = useState("");
+  const [visibility, visibilitySet] = useState("hidden");
   const [title, titleSet] = useState("");
   const [fetched,fetchedSet] = useState(false);
 
@@ -108,8 +108,6 @@ function VoiceDesignerFormPage() {
           creator_set_visibility: visibility,
           idempotency_token: uuidv4(),
         }).then((res: any) => {
-
-          console.log("😎",res);
           if (res && res.success && res.token) {
             history.push(`/voice-designer/dataset/${ res.token }/upload`);
           } 

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx

@@ -12,7 +12,7 @@ import ListItems from "./components/NewList";
 import Modal from "components/common/Modal";
 import useVoiceRequests from "./useVoiceRequests";
 
-function VoiceDesignerMainPage() {
+function VoiceDesignerMainPage({ inferenceJobs }: { inferenceJobs: any }) {
   const { pathname } = useLocation();
   const { t } = useLocalize("FaceAnimator");
   const { datasets, voices } = useVoiceRequests({ requestDatasets: true, requestVoices: true });
@@ -131,7 +131,7 @@ function VoiceDesignerMainPage() {
           panel={false}
           imageUrl="/images/header/voice-designer.png"
         />
-        <InferenceJobsList {...{ t }}/>
+        <InferenceJobsList {...{ t, inferenceJobs }}/>
         <Panel mb={true}>
           <nav>
             <ul className="nav nav-tabs">

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx

@@ -16,7 +16,7 @@ import { useHistory } from "react-router-dom";
 
 function VoiceDesignerVoiceEditPage() {
   const [language, languageSet] = useState("en");
-  const [visibility, visibilitySet] = useState("");
+  const [visibility, visibilitySet] = useState("hidden");
   const [title, titleSet] = useState("");
 
   const [fetched,fetchedSet] = useState(false);
@@ -88,6 +88,7 @@ function VoiceDesignerVoiceEditPage() {
           </div>
 
           <div>
+          aaaaa
             <TempSelect
               {...{
                 icon: faEye,