From 800e5bf46ebdb288ab999c171f7429ab5bbcbecb Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 31 Jan 2024 19:59:51 -0800
Subject: [PATCH] EnqueueEngineCompositing in place, works but needs some
 tweaks

---
 .../EnqueueEngineCompositing.ts               | 16 ++++++++++
 .../common/MocapInput/MocapInput.scss         | 11 +++++--
 .../common/MocapInput/MocapInput.tsx          |  5 +--
 .../providers/ModalProvider/ModalProvider.tsx |  1 -
 .../EngineCompositor/EngineCompositor.tsx     | 32 ++++++++++++-------
 5 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 packages/components/src/api/engine_compositor/EnqueueEngineCompositing.ts

diff --git a/packages/components/src/api/engine_compositor/EnqueueEngineCompositing.ts b/packages/components/src/api/engine_compositor/EnqueueEngineCompositing.ts
new file mode 100644
index 0000000000..eddaed4cd3
--- /dev/null
+++ b/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`,
+});
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss
index e1b0013879..125954470b 100644
--- a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss
+++ b/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 {
diff --git a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
index 2990c65c90..26e4957cf1 100644
--- a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
+++ b/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) => {
diff --git a/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx b/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx
index f7652b66b4..4ad7b68506 100644
--- a/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx
+++ b/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);
diff --git a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
index 3dbebe5d1e..66b2c0573c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
+++ b/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>;
 };
\ No newline at end of file