EnqueueEngineCompositing in place, works but needs some tweaks

packages/components/src/api/engine_compositor/EnqueueEngineCompositing.ts

@@ -0,0 +1,16 @@
+import MakeRequest from "../MakeRequest";
+
+export interface EnqueueEngineCompositingRequest {
+  uuid_idempotency_token: string,
+  video_source: string
+}
+
+export interface EnqueueEngineCompositingResponse {
+  success: boolean,
+  inference_job_token?: string
+}
+
+export const EnqueueEngineCompositing = MakeRequest<string, EnqueueEngineCompositingRequest, EnqueueEngineCompositingResponse,{}>({
+  method: "POST",
+  routingFunction: () => `/v1/compositor/enqueue_engine_compositing`,
+});

packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss

@@ -10,14 +10,21 @@
 
 .fy-mocap-input {
   @include panel;
-  aspect-ratio: 1/1;
-  width: 100%;
+  height: 300px;
   border-radius: .5rem;
   overflow: hidden;
   position: relative;
   // background-color: $panel;
+}
 
+.fy-media-input-square {
+  aspect-ratio: 1/1;
 
+  .fy-media-picker-empty-controls {}
+}
+
+.fy-media-input-landscape {
+  height: 300px;
 }
 
 .fy-media-picker-empty, .fy-media-picker-full {

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

@@ -18,6 +18,7 @@ interface Props {
   label?: string, 
   onChange?: any,
   type?: MediaFilterProp,
+  aspectRatio?: "square" | "landscape" | "portrait"
 }
 
 interface SlideProps {
@@ -91,7 +92,7 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res
     <Render {...{ ...rest, animating }} />
   </a.div>;
 
-export default function MocapInput({ label, onChange, type }: Props) {
+export default function MocapInput({ aspectRatio = "square", label, onChange, type }: Props) {
   const { search } = useLocation();
   const presetToken = search ? new URLSearchParams(search).get("preset_token") : "";
   const [mediaToken,mediaTokenSet] = useState(presetToken || "");
@@ -134,7 +135,7 @@ export default function MocapInput({ label, onChange, type }: Props) {
 
   return <>
     <Label {...{ label }}/>
-    <div {...{ className: `fy-mocap-input panel-inner`, }}>
+    <div {...{ className: `fy-mocap-input panel-inner${ aspectRatio ? " fy-media-input-" + aspectRatio : "" }`, }}>
       { 
         // media ? <MocapInputFull {...{ media }}/> : <MediaPickerEmpty {...{ inputProps, media, onSelect, open, user }}/>
         transitions((style: any, i: number, state: any) => {

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

@@ -13,7 +13,6 @@ interface ModalConfig {
 
 export default function ModalProvider({ children }: Props) {
   const [modalState,modalStateSet] = useState<ModalConfig | null>(null);
-  console.log("🔮",modalState);
   const open = (cfg: ModalConfig) => {
     console.log("🪬",cfg);
     modalStateSet(cfg);

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { Button, MocapInput, TempInput } from "components/common";
+import { Button, MocapInput } from "components/common";
+import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing";
+import { v4 as uuidv4 } from "uuid";
 import "./EngineCompositor.scss"
 
 interface Props {
@@ -10,22 +12,30 @@ export default function EngineCompositor({ value }: Props) {
   const [mediaToken,mediaTokenSet] = useState();
   const onChange = ({ target }: any) => mediaTokenSet(target.value);
 
-  console.log("🪼",mediaToken);
+  const onClick = () => {
+    EnqueueEngineCompositing("",{
+        uuid_idempotency_token: uuidv4(),
+        video_source: mediaToken || "",
+    })
+    .then((res: any) => {
+        if (res && res.success) {
+          console.log("🚛 success!",{ mediaToken, res });
+          // enqueueInferenceJob( // I need to pass this
+          //   res.inference_job_token,
+          //   FrontendInferenceJobType.THING
+          // );
+
+        }
+      });
+  }
 
   return <div {...{ className: "fy-engine-compositor"}}>
     <div {...{ className: "panel engine-compositor-container" }}>
       <header>
         <h2>Engine Compositor</h2>
-        <Button {...{ label: "Enqueue", variant: "primary" }}/>
+        <Button {...{ label: "Enqueue", onClick, variant: "primary" }}/>
       </header>
-      <div {...{ className: "compositor-content" }}>
-        <div>
-          <MocapInput {...{ label: "Choose 3D data", onChange, type: "bvh" }}/>
-        </div>
-        <div>
-          <TempInput {...{ label: "Title", placeholder: "Enter a title" }}/>
-        </div>
-      </div>
+       <MocapInput {...{ aspectRatio: "landscape", label: "Choose 3D data", onChange, type: "bvh" }}/>
     </div>
   </div>;
 };