got the generic inference job list to work

packages/fakeyou.com/src/App.tsx

@@ -206,6 +206,7 @@ function initInferenceJobsByCategoryMap(): Map<
     []
   );
   inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceDesignerTts, []);
+  inferenceJobsByCategory.set(FrontendInferenceJobType.VideoMotionCapture, []);
   return inferenceJobsByCategory;
 }
 
@@ -485,10 +486,8 @@ class App extends React.Component<Props, State> {
     frontendJobType: FrontendInferenceJobType
   ) => {
     const newJob = new InferenceJob(jobToken, frontendJobType);
-    let inferenceJobs = this.state.inferenceJobs.concat([newJob]);
-
     this.setState({
-      inferenceJobs: inferenceJobs,
+      inferenceJobs: [...this.state.inferenceJobs, newJob],
     });
   };
 

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

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { useSpring } from "@react-spring/web";
 import { FileDetails, FileWrapper, FileLabel } from "components/common";
 import { faFileVideo, faVideo } from "@fortawesome/pro-solid-svg-icons";
-import "./style.scss";
+import "./videoinput.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface Props {

packages/fakeyou.com/src/components/common/VideoInput/videoinput.scss

@@ -0,0 +1,5 @@
+@import "scss/colours.scss";
+
+.upload-details {
+	background-color: rgba($panel, .85);
+}

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

@@ -18,19 +18,26 @@ export default function InferenceJobsList({ failures, jobType, onSelect }: JobsL
   // let height = 0;
   // const transitions = useTransition(inferenceJobs,{ not right now });
 
-  return inferenceJobs.length ? <div {...{ className: "face-animator-jobs panel" }}>
-    <h5>{ t("core.heading") }</h5>
-    { 
-      inferenceJobs.map((job: InferenceJob, key: number) =>
-        <JobItem {...{
-          failures,
-          jobStatusDescription,
-          jobType,
-          key,
-          onSelect,
-          t,
-          // refSet: (ref: any) => console.log(ref),
-          ...job }} />).reverse()
-    }
-  </div> : null;
+  if (inferenceJobs.length){
+    return(
+      <div className="face-animator-jobs panel">
+        <h5>{ t("core.heading") }</h5>
+        { 
+          inferenceJobs.map((job: InferenceJob, key: number) =>
+            <JobItem {...{
+              failures,
+              jobStatusDescription,
+              jobType,
+              key,
+              onSelect,
+              t,
+              ...job }} />).reverse()
+        }
+      </div>
+    )
+  }
+  else{
+    return null;
+  }
+
 };

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -12,6 +12,16 @@ styles with important tags:
 // Once the rollout is complete, this outer wrapper class can be removed.
 
 .fakeyou-refresh {
+
+  //- BS5 classnames -//
+  .object-fit-cover{
+    object-fit: cover;
+  }
+  .ratio-1x1 {
+    aspect-ratio: 1/1;
+  }
+  //-end--//
+  
   ::-webkit-scrollbar-thumb {
     background-color: rgba($secondary, 1);
     border-radius: 0.5rem;
@@ -196,6 +206,9 @@ styles with important tags:
     color: #ffe600;
   }
 
+  .fill-secondary {
+    fill: $secondary;
+  }
   .alert-pricing {
     font-weight: 500 !important;
     font-size: 18px !important;

packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
+import { Redirect, useLocation } from "react-router-dom";
 
-import { useLocalize } from "hooks";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import {
   FrontendInferenceJobType,
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
-
-// import { PageVideoProvision } from "./components/pageVideoProvision";
 import { PageInferenceStatuses } from "./components/pageInferenceStatuses";
+
 import { BasicVideo, Container, Panel } from "components/common";
 import PageHeader from "components/layout/PageHeader";
 import Tabs from "components/common/Tabs";
-import { Redirect, useLocation } from "react-router-dom";
+import { useLocalize } from "hooks";
+
 import TabContentUpload from "./components/tabContentUpload";
 import TabContentLibrary from "./components/tabContentLibrary";
 

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/VideoInput/style.scss

@@ -1,20 +0,0 @@
-@import "scss/colours.scss";
-@import "scss/_breakpoint.scss";
-
-//TODO: PUSH TO TOP
-.fill-secondary {
-	fill: $secondary;
-}
-
-//TODO: PUSH TO TOP, given in BS5
-.object-fit-cover{
-	object-fit: cover;
-}
-.ratio-1x1 {
-	aspect-ratio: 1/1;
-}
-//-end--//
-
-.upload-details {
-	background-color: rgba($panel, .85);
-}

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/pageInferenceStatuses.tsx

@@ -24,7 +24,7 @@ export function PageInferenceStatuses (props:{
     console.log("ENQUEUE INFERENCE JOB>>")
     enqueueInferenceJob(
       props.pageState.jobToken,
-      FrontendInferenceJobType.FaceAnimation
+      FrontendInferenceJobType.VideoMotionCapture
     );
   }, [props.pageState.jobToken, enqueueInferenceJob])
 
@@ -33,7 +33,7 @@ export function PageInferenceStatuses (props:{
       case "sample case": 
         return "Sample Case, this should not have been shown";
       default:
-        return "Uknown failure";
+        return "Unknown failure";
     }
   };
 
@@ -45,7 +45,7 @@ export function PageInferenceStatuses (props:{
       <InferenceJobsList {...{
         failures,
         onSelect: () => Analytics.voiceConversionClickDownload(),
-        jobType: FrontendInferenceJobType.FaceAnimation,
+        jobType: FrontendInferenceJobType.VideoMotionCapture,
       }}/>
     </>
   )

packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentUpload.tsx

@@ -5,7 +5,7 @@ import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadM
 import { EnqueueVideoMotionCapture } from "@storyteller/components/src/api/video_mocap";
 import { useFile } from "hooks";
 
-import VideoInput from "v2/view/pages/video_mocap/components/VideoInput";
+import VideoInput from "components/common/VideoInput";
 
 export default function TabContentUpload(props: {
   t: Function;