Engine Compositor should enqueue now

packages/components/src/jobs/InferenceJob.ts

@@ -11,6 +11,7 @@ export enum FrontendInferenceJobType {
   ImageGeneration,
   VideoMotionCapture,
   ConvertFbxtoGltf,
+  EngineComposition
 }
 
 // NB: Many of these fields are optional despite the response payload containing them

packages/fakeyou.com/src/App.tsx

@@ -839,6 +839,7 @@ class App extends React.Component<Props, State> {
               <ModalProvider> 
               <InferenceJobs
                 {...{
+                  enqueue: this.enqueueInferenceJob,
                   byCategory: this.state.inferenceJobsByCategory,
                 }}
               >

packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx

@@ -15,13 +15,13 @@ export default function BvhCard({ data, showCreator }: Props) {
   const timeAgo = useTimeAgo(data.created_at);
   const handleInnerClick = (event: any) => event.stopPropagation();
   return <>
-    <Icon {...{ className: "card-mocap", icon: faPersonWalking }}/>
+    <Icon {...{ className: "card-img", icon: faPersonWalking }}/>
     <div className="card-img-overlay">
       <div className="card-img-gradient" />
 
       <div className="d-flex align-items-center">
         <div className="d-flex flex-grow-1">
-          <Badge label="Mocap" color="pink" overlay={true} />
+          <Badge label="BVH" color="pink" overlay={true} />
         </div>
       </div>
 

packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx

@@ -3,17 +3,25 @@ import { Link } from "react-router-dom";
 import getCardUrl from "components/common/Card/getCardUrl";
 
 interface Props {
+  canHover?: boolean,
   card: any,
   data: any,
   onClick?: (e:any) => any,
+  padding?: boolean,
   source?: string,
   type: "media" | "weights"
 }
 
-export default function CardWrapper({ card: Card, data, onClick, source = "", type, ...rest }: Props) {
+export default function CardWrapper({ canHover, card: Card, data, onClick, padding, source = "", type, ...rest }: Props) {
   const linkUrl = getCardUrl(data,source,type);
   const cardProps = { data, source, type, ...rest }
-  return onClick ? <Card {...{ onClick, ...cardProps }}/> : <Link {...{ to: linkUrl }}>
-      <Card {...cardProps}/> 
-    </Link>;
+  const className = `card ${ padding ? "p-3" : "" }${ onClick || canHover ? " card-clickable" : ""  }`;
+
+  return onClick ?
+  <div {...{ className, onClick }}>
+    <Card { ...cardProps }/>
+  </div> : 
+  <Link {...{ className, to: linkUrl }}>
+    <Card {...cardProps}/> 
+  </Link>;
 };

packages/fakeyou.com/src/components/entities/CardWrapper/index.tsx

@@ -0,0 +1 @@
+export { default } from "./CardWrapper";

packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx

@@ -5,7 +5,7 @@ import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
-import { BvhCard } from "components/entities";
+import { BvhCard, CardWrapper } from "components/entities";
 
 interface MediaCardsProps {
   props: any,
@@ -26,7 +26,7 @@ const MediaCards = ({ props, type }: MediaCardsProps) => {
     case "video":
       return <VideoCard {...props} />;
     case "bvh":
-      return <BvhCard {...props}/>
+      return <CardWrapper {...{ ...props, card: BvhCard }}/>
     default:
       return <div>Unsupported media type</div>;
   }

packages/fakeyou.com/src/components/entities/index.tsx

@@ -1,4 +1,5 @@
 import BvhCard from "./BvhCard";
+import CardWrapper from "./CardWrapper";
 import MediaList from "./MediaList";
 
-export { BvhCard, MediaList };
+export { BvhCard, CardWrapper, MediaList };

packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx

@@ -3,11 +3,12 @@ import { InferenceJobsContext } from 'context';
 
 interface Props {
   children?: any;
+  enqueue?: any;
   byCategory?: any;
 }
 
-export default function InferenceJobs({ children, byCategory }: Props) {
-	return <InferenceJobsContext.Provider {...{ value: { byCategory } }}>
+export default function InferenceJobs({ byCategory, children, enqueue }: Props) {
+	return <InferenceJobsContext.Provider {...{ value: { byCategory, enqueue } }}>
 		{ children }
 	</InferenceJobsContext.Provider>
 };

packages/fakeyou.com/src/context/InferenceJobsContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-interface InferenceJobsContext { byCategory?: any }
+interface InferenceJobsContext { byCategory?: any, enqueue?: any }
 
 export default createContext<InferenceJobsContext>({ });

packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx

@@ -4,8 +4,9 @@ import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/Infer
 import { InferenceJobsContext } from 'context';
 
 export default function useInferenceJobs(jobType: FrontendInferenceJobType) {
-  const { byCategory } = useContext(InferenceJobsContext);
+  const { byCategory, enqueue } = useContext(InferenceJobsContext);
   return {
+    enqueue,
     inferenceJobs: (byCategory?.get(jobType) || []),
     jobStatusDescription: (jobState: JobState) => Object.keys(JobState).filter(key => isNaN(Number(key)))[jobState]
   };

packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { Button, MocapInput } from "components/common";
+import { useInferenceJobs } from "hooks";
+import InferenceJobsList from "components/layout/InferenceJobsList";
 import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { v4 as uuidv4 } from "uuid";
 import "./EngineCompositor.scss"
 
@@ -11,6 +14,7 @@ interface Props {
 export default function EngineCompositor({ value }: Props) {
   const [mediaToken,mediaTokenSet] = useState();
   const onChange = ({ target }: any) => mediaTokenSet(target.value);
+  const inferenceJobs = useInferenceJobs(FrontendInferenceJobType.EngineComposition);
 
   const onClick = () => {
     EnqueueEngineCompositing("",{
@@ -20,15 +24,22 @@ export default function EngineCompositor({ value }: Props) {
     .then((res: any) => {
         if (res && res.success) {
           console.log("🚛 success!",{ mediaToken, res });
-          // enqueueInferenceJob( // I need to pass this
-          //   res.inference_job_token,
-          //   FrontendInferenceJobType.THING
-          // );
+          inferenceJobs.enqueue( // I need to pass this
+            res.inference_job_token,
+            FrontendInferenceJobType.EngineComposition
+          );
 
         }
       });
   }
 
+  const failures = (fail = "") => {
+    switch (fail) {
+      default:
+        return "Uknown failure";
+    }
+  };
+
   return <div {...{ className: "fy-engine-compositor"}}>
     <div {...{ className: "panel engine-compositor-container" }}>
       <header>
@@ -37,5 +48,11 @@ export default function EngineCompositor({ value }: Props) {
       </header>
        <MocapInput {...{ aspectRatio: "landscape", label: "Choose 3D data", onChange, type: "bvh" }}/>
     </div>
+      <InferenceJobsList
+        {...{
+          failures,
+          jobType: FrontendInferenceJobType.EngineComposition,
+        }}
+      />
   </div>;
 };