studio vst enqueues in inference jobs list

packages/fakeyou.com/src/components/common/SelectionBubblesV2/SelectionBubblesV2.tsx

@@ -100,9 +100,9 @@ export default function SelectionBubblesV2({
       >
         {variant === "default" ? (
           <>
-            {options.map(({ label }) => (
+            {options.map(({ label }, key) => (
               <button
-                key={label}
+                key={key}
                 className={`bubble-button ${
                   selectedOption === label
                     ? `selected ${selectedStyle === "fill" ? "fill" : ""}`
@@ -121,10 +121,9 @@ export default function SelectionBubblesV2({
                 mobileSideScroll ? "mobile-flex-nowrap" : ""
               }`}
             >
-              {options.map(({ label, imageUrl }) => (
-                <div className="col-4 col-lg-3">
+              {options.map(({ label, imageUrl }, key) => (
+                <div className="col-4 col-lg-3" key={key}>
                   <button
-                    key={label}
                     className={`bubble-button ${
                       selectedOption === label
                         ? `selected ${selectedStyle === "fill" ? "fill" : ""}`

packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx

@@ -6,9 +6,10 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { useHistory, useParams } from "react-router-dom";
 import "./StudioIntro.scss";
 import LoadingSpinner from "components/common/LoadingSpinner";
-import { useMedia, useJobStatus } from "hooks";
+import { useMedia, useInferenceJobs } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { MediaFileType } from "@storyteller/components/src/api/media_files";
+import { JobState } from "@storyteller/components/src/jobs/JobStates";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -20,14 +21,15 @@ interface Props {
 function StudioIntroResultPage(props: Props) {
   const { jobToken } = useParams<{ jobToken: string }>();
   const history = useHistory();
+  const { inferenceJobs } = useInferenceJobs();
+  const job = inferenceJobs.find((item: any) => item.jobToken === jobToken);
+
   // const [mediaToken, setMediaToken] = useState(
   //   "m_f5kp3hm74qeq16eq7536jb73jkbvkh"
   // ); // Set the media token after polling success
   // const [jobExists, setJobExists] = useState<boolean | null>(null);
 
-  const job = useJobStatus({ jobToken });
-
-  console.log("🩵",job);
+  // const job = useJobStatus({ jobToken });
 
   const [mediaFile, setMediaFile] = useState<MediaFileType>();
 
@@ -49,6 +51,20 @@ function StudioIntroResultPage(props: Props) {
     history.push("/");
   }
 
+  const contentSwitch = () => {
+    switch (job.jobState) {
+      case JobState.UNKNOWN:
+      case JobState.PENDING:
+      case JobState.STARTED: return <LoadingSpinner label="Generating your movie..." />;
+      case JobState.ATTEMPT_FAILED: return <div {...{ className: "d-flex justify-content-center align-items-center" }}>
+        <h3>{`Attempt failed, retrying (attempt ${ job.attemptCount } )`}</h3>
+      </div>;
+      case JobState.COMPLETE_SUCCESS: return <video src={mediaLink} controls />;
+      case JobState.DEAD: return <h3>Job dead</h3>;
+      case JobState.CANCELED_BY_USER: return <h3>Job canceled by user</h3>;
+    };
+  }
+
   // Should also check if job actually exists or not
   //
   // if (!jobExists) {
@@ -65,11 +81,9 @@ function StudioIntroResultPage(props: Props) {
       </Panel>
       <Panel className="overflow-hidden rounded result-video-wrapper">
         <div className="ratio ratio-16x9">
-          {mediaToken ? (
-            <video src={mediaLink} controls />
-          ) : (
-            <LoadingSpinner label="Generating your movie..." />
-          )}
+          { 
+            contentSwitch()
+          }
         </div>
       </Panel>
       {mediaToken ? (

packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx

@@ -6,12 +6,13 @@ import { Button, Container, Panel, TextArea } from "components/common";
 //   QuickTrimData,
 // } from "components/common/VideoQuickTrim";
 import { VideoFakeyou } from "components/common";
-import { useJobStatus } from "hooks";
+import { useJobStatus, useInferenceJobs } from "hooks";
 import { EnqueueVST, EnqueueVSTResponse } from "@storyteller/components/src/api/video_styleTransfer/Enqueue_VST";
 import { initialValues } from "./defaultValues";
 import { VSTType } from "./helpers";
 import LoadingSpinner from "components/common/LoadingSpinner";
 import SelectionBubblesV2 from "components/common/SelectionBubblesV2";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 
 export default function PageVSTApp() {
   const { jobToken } = useParams<{ jobToken: string }>();
@@ -20,6 +21,8 @@ export default function PageVSTApp() {
 
   const job = useJobStatus({ jobToken });
 
+  const { enqueue } = useInferenceJobs(FrontendInferenceJobType.VideoStyleTransfer);
+
   const [vstValues, setVstValues] = useState<VSTType>({
     ...initialValues,
     // fileToken: job?.maybe_result?.entity_token || "",
@@ -49,6 +52,7 @@ export default function PageVSTApp() {
     })
     .then((res: EnqueueVSTResponse) => {
       if (res.success && res.inference_job_token) {
+        enqueue(res.inference_job_token);
         // console.log("Job enqueued successfully", res.inference_job_token);
         history.push(`/studio-intro/result/${res.inference_job_token}`);
       } else {
@@ -112,6 +116,20 @@ export default function PageVSTApp() {
     history.push("/");
   }
 
+  // const contentSwitch = () => {
+  //   switch (job.jobState) {
+  //     case JobState.UNKNOWN:
+  //     case JobState.PENDING:
+  //     case JobState.STARTED: return <LoadingSpinner label="Loading Video" />;
+  //     case JobState.ATTEMPT_FAILED: return <div {...{ className: "d-flex justify-content-center align-items-center" }}>
+  //      { `Video compositor attempt failed, retrying (attempt ${ job.attemptCount } )` }
+  //     </div>;
+  //     case JobState.COMPLETE_SUCCESS: return <VideoFakeyou mediaToken={job.maybe_result.entity_token}/>;
+  //     case JobState.DEAD: return <div>Job dead</div>;
+  //     case JobState.CANCELED_BY_USER: return <div>Job canceled by user</div>;
+  //   };
+  // }
+
   // Should also check if job actually exists or not
   //
   // if (!jobExists) {