From 57d05f06671f934f0f4265e190647cd5262ce800 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 30 Jan 2024 15:00:25 -0800
Subject: [PATCH 1/7] mocap input creation

---
 packages/fakeyou.com/src/App.tsx              |   3 +
 .../common/Card/AudioCard/AudioCard.tsx       |  14 +-
 .../common/Card/MocapCard/MocapCard.tsx       |  25 +--
 .../common/FileWrapper/FileWrapper.scss       |  22 ++-
 .../common/FileWrapper/FileWrapper.tsx        |  10 +-
 .../common/MocapInput/MocapInput.scss         | 100 ++++++++++++
 .../common/MocapInput/MocapInput.tsx          | 154 ++++++++++++++++++
 .../components/common/MocapInput/index.tsx    |   1 +
 .../src/components/common/Modal/Modal.scss    |   8 +
 .../src/components/common/Modal/Modal.tsx     |  29 +++-
 .../components/common/TempSelect/Select.scss  |  27 ---
 .../common/TempSelect/TempSelect.scss         |   3 +
 .../common/TempSelect/TempSelect.tsx          |   5 +-
 .../src/components/common/index.tsx           |   2 +
 .../src/components/entities/EntityTypes.tsx   |  18 ++
 .../entities/MediaList/MediaList.tsx          |  28 ++++
 .../components/entities/MediaList/index.tsx   |   1 +
 .../src/components/entities/index.tsx         |   3 +
 .../components/layout/SideNav/SideNavJobs.tsx |  43 +++++
 .../modals/MediaBrowser/MediaBrowser.scss     |  42 +++++
 .../modals/MediaBrowser/MediaBrowser.tsx      | 119 ++++++++++++++
 .../components/modals/MediaBrowser/index.tsx  |   1 +
 .../src/components/modals/index.tsx           |   3 +
 .../providers/ModalProvider/ModalProvider.tsx |  39 +++++
 .../providers/ModalProvider/index.tsx         |   1 +
 .../src/components/providers/index.ts         |   3 +-
 .../fakeyou.com/src/context/ModalContext.tsx  |  20 +++
 packages/fakeyou.com/src/context/index.ts     |   3 +-
 packages/fakeyou.com/src/hooks/index.tsx      |   2 +
 .../fakeyou.com/src/hooks/useFile/useFile.tsx |   3 +-
 .../hooks/useListContent/useListContent.tsx   |   5 +-
 .../src/hooks/useMedia/useMedia.tsx           |   6 +-
 .../fakeyou.com/src/hooks/useModal/index.tsx  |   1 +
 .../src/hooks/useModal/useModal.tsx           |   6 +
 .../src/hooks/useSession/useSession.tsx       |  10 --
 .../fakeyou.com/src/scss/site-refresh.scss    |  32 ++--
 .../fakeyou.com/src/v2/view/PageContainer.tsx |   6 +-
 .../EngineCompositor/EngineCompositor.scss    |  29 ++++
 .../EngineCompositor/EngineCompositor.tsx     |  31 ++++
 .../v2/view/pages/EngineCompositor/index.tsx  |   1 +
 .../profile/profile_view/tabs/MediaTab.tsx    |   2 +
 41 files changed, 760 insertions(+), 101 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss
 create mode 100644 packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/MocapInput/index.tsx
 delete mode 100644 packages/fakeyou.com/src/components/common/TempSelect/Select.scss
 create mode 100644 packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss
 create mode 100644 packages/fakeyou.com/src/components/entities/EntityTypes.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/MediaList/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/layout/SideNav/SideNavJobs.tsx
 create mode 100644 packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss
 create mode 100644 packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
 create mode 100644 packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/modals/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx
 create mode 100644 packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx
 create mode 100644 packages/fakeyou.com/src/context/ModalContext.tsx
 create mode 100644 packages/fakeyou.com/src/hooks/useModal/index.tsx
 create mode 100644 packages/fakeyou.com/src/hooks/useModal/useModal.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/EngineCompositor/index.tsx

diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index aacbd5d7ea..8047873590 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/packages/fakeyou.com/src/App.tsx
@@ -62,6 +62,7 @@ import HttpBackend from "i18next-http-backend";
 
 import {
   InferenceJobs,
+  ModalProvider,
   SessionProvider,
 } from "components/providers";
 
@@ -833,6 +834,7 @@ class App extends React.Component<Props, State> {
             */}
 
             <div className="migrationComponentWrapper">
+              <ModalProvider> 
               <InferenceJobs
                 {...{
                   byCategory: this.state.inferenceJobsByCategory,
@@ -955,6 +957,7 @@ class App extends React.Component<Props, State> {
                   </Switch>
                 </SessionProvider>
               </InferenceJobs>
+              </ModalProvider>
             </div>
           </div>
         </div>
diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 85adf2974a..be571a3fe0 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -24,6 +24,7 @@ interface AudioCardProps {
   source?: string;
   type: "media" | "weights";
   inSelectModal?: boolean;
+  onClick?: (e:any) => any; 
   onResultSelect?: () => void;
 }
 
@@ -36,6 +37,7 @@ export default function AudioCard({
   source = "",
   type,
   inSelectModal = false,
+  onClick: inClick,
   onResultSelect,
 }: AudioCardProps) {
   const { setToken, setWeightTitle } = useToken();
@@ -83,11 +85,15 @@ export default function AudioCard({
     }
   }
 
+  const onClick = () => {
+    if (inClick) inClick(data);
+  };
+
   const card = (
     <Card
       padding={true}
       canHover={true}
-      onClick={handleSelectModalResultSelect}
+      onClick={onClick}
     >
       {type === "media" && (
         <>
@@ -163,14 +169,14 @@ export default function AudioCard({
                 <div className="d-flex flex-grow-1">
                   <Badge label={weightBadgeLabel} color={weightBadgeColor} />
                 </div>
-                {inSelectModal ? (
+                {inClick ? (
                   <Button
                     icon={faArrowRight}
                     iconFlip={true}
                     variant="link"
                     label="Select"
                     className="fs-7"
-                    onClick={handleSelectModalResultSelect}
+                    onClick={onClick}
                   />
                 ) : (
                   <Button
@@ -257,7 +263,7 @@ export default function AudioCard({
 
   return (
     <>
-      {inSelectModal ? (
+      {inClick ? (
         <>{card}</>
       ) : (
         <Link
diff --git a/packages/fakeyou.com/src/components/common/Card/MocapCard/MocapCard.tsx b/packages/fakeyou.com/src/components/common/Card/MocapCard/MocapCard.tsx
index 8013d13f1a..f1e973271b 100644
--- a/packages/fakeyou.com/src/components/common/Card/MocapCard/MocapCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/MocapCard/MocapCard.tsx
@@ -13,15 +13,17 @@ import getCardUrl from "../getCardUrl";
 interface ImageCardProps {
   bookmarks: any;
   data: any;
+  onClick?: (e:any) => any;
   ratings: any;
   showCreator?: boolean;
   source?: string;
   type: "media" | "weights";
 }
 
-export default function ImageCard({
+export default function MocapCard({
   bookmarks,
   data,
+  onClick: inClick,
   showCreator,
   source = "",
   ratings,
@@ -35,14 +37,12 @@ export default function ImageCard({
 
   const timeAgo = useTimeAgo(data.created_at);
 
+  const Wrapper = ({ children }: { children: any }) => inClick ? <div {...{ onClick: () => { inClick(data) } }}>{ children }</div> : <Link {...{ to: linkUrl  }}>{ children }</Link>;
+
   // const bucketConfig = new BucketConfig();
 
   return (
-    <Link
-      {...{
-        to: linkUrl
-      }}
-    >
+    <Wrapper>
       <Card padding={false} canHover={true}>
         <FontAwesomeIcon {...{ className: "card-mocap", icon: faPersonWalking }}/>
         <div className="card-img-overlay">
@@ -83,20 +83,11 @@ export default function ImageCard({
                 </div>
               )}
 
-              <div>
-                <LikeButton
-                  {...{
-                    ...ratings.makeProps({
-                      entityToken: data.token,
-                      entityType: "media_file",
-                    }),
-                  }}
-                />
-              </div>
+         
             </div>
           </div>
         </div>
       </Card>
-    </Link>
+    </Wrapper>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.scss b/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.scss
index 8d9e467507..4897f97a4f 100644
--- a/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.scss
+++ b/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.scss
@@ -1,6 +1,6 @@
 @import "scss/colours.scss";
 
-.fy-uploader {
+.fy-uploader, .fy-uploader-no-style {
   [type="file"] {
     border: 0;
     clip: rect(0, 0, 0, 0);
@@ -13,12 +13,6 @@
 
     + label {
       cursor: pointer;
-      border: dashed 2px rgba(255, 255, 255, 0.12) !important;
-      border-radius: 0.5rem;
-      transition: 0.1s all;
-      &:hover {
-        background-color: lighten($panel, 6%);
-      }
     }
   }
   .fy-uploader-layout {
@@ -31,3 +25,17 @@
     }
   }
 }
+
+.fy-uploader {
+    [type="file"] {
+
+    + label {
+      border: dashed 2px rgba(255, 255, 255, 0.12) !important;
+      border-radius: 0.5rem;
+      transition: 0.1s all;
+      &:hover {
+        background-color: lighten($panel, 6%);
+      }
+    }
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.tsx b/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.tsx
index 649c6f2c81..29fc95c57b 100644
--- a/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.tsx
+++ b/packages/fakeyou.com/src/components/common/FileWrapper/FileWrapper.tsx
@@ -7,12 +7,13 @@ interface Props {
   containerClass?: string;
   fileTypes?: string[];
   inputRef: any;
+  noStyle?: boolean;
   onChange: (file?: any) => void;
   panelClass?: string;
   [x:string]: any;
 };
 
-export default function FileWrapper({ children, containerClass, fileTypes = [], inputRef, onChange, panelClass, ...rest }: Props) {
+export default function FileWrapper({ children, containerClass, fileTypes = [], inputRef, noStyle, onChange, panelClass, ...rest }: Props) {
   const id = 'file-input-' + useId();
   const accept = fileTypes.map((type,i) => `.${ type.toLowerCase() }`).join(",");
 
@@ -32,9 +33,12 @@ export default function FileWrapper({ children, containerClass, fileTypes = [],
     }
   };
 
-  return <div {...{ className: `fy-uploader${ containerClass ? " " + containerClass : "" }`, onDragLeave: onDragEvent(1), onDragOver: onDragEvent(0), onDrop }}>
+  const containerBaseClass = noStyle ? "-no-style" : "";
+  const panelBaseClass = noStyle ? "" : "panel panel-inner d-flex align-items-center";
+
+  return <div {...{ className: `fy-uploader${ containerBaseClass }${ containerClass ? " " + containerClass : "" }`, onDragLeave: onDragEvent(1), onDragOver: onDragEvent(0), onDrop }}>
     <input { ...{ accept, onChange: fileChange, type: "file", id, ref: inputRef, ...rest }} />
-    <label {...{ className: `panel panel-inner d-flex align-items-center${ panelClass ? " " + panelClass : "" }`, htmlFor: id }} >
+    <label {...{ className: `${ panelBaseClass }${ panelClass ? " " + panelClass : "" }`, htmlFor: id }} >
       { children }
     </label>
   </div>;
diff --git a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss
new file mode 100644
index 0000000000..e1b0013879
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.scss
@@ -0,0 +1,100 @@
+@import "scss/colours.scss";
+@import "scss/site-refresh.scss";
+
+
+.fy-slide-frame {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.fy-mocap-input {
+  @include panel;
+  aspect-ratio: 1/1;
+  width: 100%;
+  border-radius: .5rem;
+  overflow: hidden;
+  position: relative;
+  // background-color: $panel;
+
+
+}
+
+.fy-media-picker-empty, .fy-media-picker-full {
+  // position: relative;
+  // overflow: hidden;
+
+  .fy-media-picker-icon {
+    position: absolute;
+    height: 80%;
+    opacity: 75%;
+    // background-color: blue;
+    margin: auto;
+    inset: 0;
+
+    path { fill: $panel-inner-border}
+  }
+
+}
+
+.fy-media-picker-label-icon {
+  margin-right: .5rem;
+  height: 1.25rem;
+}
+
+.fy-media-picker-mocap-preview {
+  position: absolute;
+  border-radius: .5rem;
+  border: 1px solid rgba(#fff,.2);
+  display: block;
+  vertical-align: bottom;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.fy-media-picker-full-controls {
+  position: absolute;
+  background-color: rgba(#000, .5);
+  padding: 1rem;
+  // backdrop-filter: blur(2px);
+  overflow: hidden;
+  border-radius: .5rem .5rem 0 0;
+  width: 100%;
+}
+
+.fy-media-picker-empty-controls {
+  // background-color: red;
+    position: absolute;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 1rem;
+  gap: 1rem;
+
+  .fy-media-picker-row {
+
+    height: 100%;
+  }
+
+  .fy-media-picker-button {
+    background-color: rgba(#000,.15);
+    border-radius: .5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    transition: .25s all ease-in-out;
+    color: rgba(#fff, .66);
+
+    &:hover {
+      background-color: rgba(#000,.1);
+      color: rgba(#fff, 1);
+    }
+
+    label { }
+  }
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
new file mode 100644
index 0000000000..2990c65c90
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { a, useTransition } from "@react-spring/web";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import Iframe from "react-iframe";
+import { MediaBrowser } from "components/modals";
+import { FileWrapper, Label, Spinner } from "components/common";
+import { MediaFilterProp } from "components/entities/EntityTypes";
+import { useFile, useMedia, useModal, useSession } from "hooks";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import { faFileArrowUp, faGrid, faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/api/media_files/UploadMedia";
+import { v4 as uuidv4 } from "uuid";
+import "./MocapInput.scss"
+
+interface Props {
+  label?: string, 
+  onChange?: any,
+  type?: MediaFilterProp,
+}
+
+interface SlideProps {
+  media?: MediaFile
+};
+
+interface EmptySlideProps extends SlideProps {
+  inputProps?: any,
+  onSelect: any,
+  open: any,
+  type: MediaFilterProp,
+  user: any
+};
+
+interface AniProps {
+  animating: boolean,
+  className: string,
+  isLeaving: boolean,
+  render: any,
+  style: any
+}
+
+const MediaBusy = () => {
+  return <Spinner/>;
+};
+
+const MocapInputFull = ({ media }: SlideProps) => {
+  const bucketConfig = new BucketConfig();
+  const bvhUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : "";
+
+  return <>
+    <Iframe
+        {...{
+          url: `https://engine.fakeyou.com?mode=viewer&bvh=${bvhUrl}`,
+          className: "fy-media-picker-mocap-preview",
+        }}
+      />
+    <div {...{ className: "fy-media-picker-full-controls" }}>
+      Your file
+    </div>
+  </>;
+};
+
+const MediaPickerEmpty = ({ media, onSelect, open, inputProps, type, user }: EmptySlideProps) => {
+  const browserClick = () => open({
+    component: MediaBrowser,
+    props: { onSelect, type, username: user?.username || "" }
+  });
+
+  return <>
+    <Icon {...{ className: "fy-media-picker-icon", icon: faPersonWalking }}/>
+    <div {...{ className: "fy-media-picker-empty-controls" }}>
+      <FileWrapper {...{ containerClass: "fy-media-picker-row", panelClass: "fy-media-picker-button", noStyle: true, ...inputProps }}>
+        <>
+        <Icon {...{ className: "fy-media-picker-label-icon", icon: faFileArrowUp }}/>
+        Upload, click or drag here
+        </>
+      </FileWrapper>
+      <div {...{ className: "fy-media-picker-row fy-media-picker-button", onClick: browserClick }}>
+        <Icon {...{ className: "fy-media-picker-label-icon", icon: faGrid }}/>
+        Choose from your media
+      </div>
+    </div>
+  </>;
+}
+
+const AniMod = ({ animating, className, isLeaving, render: Render, style, ...rest }: AniProps) => <a.div {...{
+  className: `fy-slide-frame${ className ?  " " + className : "" }`,
+  style
+}}>
+    <Render {...{ ...rest, animating }} />
+  </a.div>;
+
+export default function MocapInput({ label, onChange, type }: Props) {
+  const { search } = useLocation();
+  const presetToken = search ? new URLSearchParams(search).get("preset_token") : "";
+  const [mediaToken,mediaTokenSet] = useState(presetToken || "");
+  const { media, mediaSet } = useMedia({ mediaToken });
+  const { user } = useSession();
+  const { open } = useModal();
+  const { clear, inputProps } = useFile({
+    onChange: (inputFile: any) => {
+      if (inputFile) UploadMedia({
+        uuid_idempotency_token: uuidv4(),
+        file: inputFile,
+        source: "file",
+      })
+      .then((res: UploadMediaResponse) => {
+        if ("media_file_token" in res) {
+          clear();
+          mediaTokenSet(res.media_file_token);
+        }
+      });
+      else console.log("🥺 no file");
+    }
+  });
+  const onSelect = (data: MediaFile) => {
+    mediaSet(data)
+    onChange({ target: { name: "temp", value: data.token } });
+  }
+  const busy = false;
+  const index = busy ? 0 : media ? 1 : 2;
+  const [animating,animatingSet] = useState(false);
+
+  const transitions = useTransition(index, {
+    config: { mass: 1, tension: 80, friction: 10 },
+    from: { opacity: 0, transform: `translateX(${ 5 }rem)` },
+    enter: { opacity: 1, transform: `translateX(0)` },
+    leave: { opacity: 0, transform: `translateX(${ 5 }rem)` },
+    onRest: () => animatingSet(false),
+    onStart: () => animatingSet(true)
+  });
+
+
+  return <>
+    <Label {...{ label }}/>
+    <div {...{ className: `fy-mocap-input panel-inner`, }}>
+      { 
+        // media ? <MocapInputFull {...{ media }}/> : <MediaPickerEmpty {...{ inputProps, media, onSelect, open, user }}/>
+        transitions((style: any, i: number, state: any) => {
+          let isLeaving = state.phase === "leave";
+          let sharedProps = { animating, isLeaving, media, style };
+
+          return [
+            <AniMod {...{ render: MediaBusy, className: "fy-media-picker-busy", ...sharedProps }}/>,
+            <AniMod {...{ render: MocapInputFull, className: "fy-media-picker-full", ...sharedProps }}/>,
+            <AniMod {...{ render: MediaPickerEmpty, className: "fy-media-picker-empty", inputProps, onSelect, open, type, user, ...sharedProps }}/>
+          ][i];
+        
+        })
+      }
+    </div>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/MocapInput/index.tsx b/packages/fakeyou.com/src/components/common/MocapInput/index.tsx
new file mode 100644
index 0000000000..a5dd4e939f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/MocapInput/index.tsx
@@ -0,0 +1 @@
+export { default } from "./MocapInput";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.scss b/packages/fakeyou.com/src/components/common/Modal/Modal.scss
index ddaca1ad60..2f8ee68c7a 100644
--- a/packages/fakeyou.com/src/components/common/Modal/Modal.scss
+++ b/packages/fakeyou.com/src/components/common/Modal/Modal.scss
@@ -63,3 +63,11 @@
     }
   }
 }
+
+.fy-core-modal {
+  .modal-content {
+    width: 85vw;
+    height: 85vh;
+    padding: 1rem;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
index 6268bdd253..0d0e184151 100644
--- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
+++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Button from "../Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSpring, a } from "@react-spring/web";
@@ -6,11 +6,13 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import "./Modal.scss";
 
 interface ModalProps {
-  content: React.ElementType;
+  className?: string;
+  content?: React.ElementType | null;
   contentProps?: any;
   show: boolean;
   handleClose: () => void;
   noHeader?: boolean;
+  omitBody?: boolean;
   onCancel?: (e: React.MouseEvent<HTMLElement>) => any;
   onConfirm?: (e: React.MouseEvent<HTMLElement>) => any;
   title?: string;
@@ -23,12 +25,18 @@ interface ModalProps {
   mobileFullscreen?: boolean;
 }
 
+const ModalBody = ({ children, omitBody, padding }: { children: any, omitBody?: boolean, padding?: boolean }) => omitBody ? children : <div {...{ className: `modal-body ${padding ? "p-3" : ""}` }}>
+  { children }
+</div>;
+
 const Modal: React.FC<ModalProps> = ({
   autoWidth,
+  className,
   content: Content,
   contentProps,
   handleClose,
   noHeader,
+  omitBody,
   onCancel: cancelEvent,
   onConfirm: confirmEvent,
   icon,
@@ -44,6 +52,9 @@ const Modal: React.FC<ModalProps> = ({
     opacity: show ? 1 : 0,
     config: { duration: 80, easing: t => t },
   });
+  const [loaded,loadedSet] = useState(false);
+
+  console.log("🩵",loaded);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -53,6 +64,10 @@ const Modal: React.FC<ModalProps> = ({
       }
     };
 
+    if (!loaded) {
+      loadedSet(true);
+    }
+
     if (show) {
       document.addEventListener("mousedown", handleClickOutside);
     }
@@ -60,7 +75,7 @@ const Modal: React.FC<ModalProps> = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [show, handleClose]);
+  }, [show, handleClose, loaded]);
 
   const onCancel = (e: React.MouseEvent<HTMLElement>) => {
     if (cancelEvent) cancelEvent(e);
@@ -78,7 +93,7 @@ const Modal: React.FC<ModalProps> = ({
 
   return (
     <a.div style={fadeIn} className="modal-backdrop">
-      <div className="modal" role="dialog">
+      <div {...{ className: `modal${ className ? " " + className : "" }`, role: "dialog" }}>
         <div
           className={`modal-dialog ${
             position === "center" ? "modal-dialog-centered" : ""
@@ -101,9 +116,9 @@ const Modal: React.FC<ModalProps> = ({
                 />
               </header>
             )}
-            <div {...{ className: `modal-body ${padding ? "p-3" : ""}` }}>
-              {Content && <Content {...{ handleClose }} />}
-            </div>
+            <ModalBody {...{ omitBody, padding }}>
+              {Content && <Content {...{ ...contentProps, handleClose }} />}
+            </ModalBody>
             {showButtons && (
               <div className="modal-footer">
                 <Button variant="secondary" label="Cancel" onClick={onCancel} />
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/Select.scss b/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
deleted file mode 100644
index d250ad03b8..0000000000
--- a/packages/fakeyou.com/src/components/common/TempSelect/Select.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.fy-select {
-  margin-bottom: 1rem !important;
-
-  &:only-child,
-  &:last-child {
-    margin-bottom: 0 !important;
-  }
-}
-
-.d-flex:not(.flex-column) > .fy-select {
-  margin-bottom: 0 !important;
-  margin-right: 0.5rem;
-
-  &:only-child,
-  &:last-child {
-    margin-bottom: 0 !important;
-  }
-}
-
-.gap-1 > .fy-select,
-.gap-2 > .fy-select,
-.gap-3 > .fy-select,
-.gap-4 > .fy-select,
-.gap-5 > .fy-select {
-  margin-bottom: 0 !important;
-  margin-right: 0 !important;
-}
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss
new file mode 100644
index 0000000000..55c75df3ac
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss
@@ -0,0 +1,3 @@
+.fy-temp-select { // NO !IMPORTANT
+  margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
index 84d68bf9a0..3834708122 100644
--- a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
+++ b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import "../Select/Select.scss";
 import ReactSelect, { Props as ReactSelectProps } from "react-select";
-import "./Select.scss";
+import "./TempSelect.scss";
 
 export interface Option {
   value: string | number | boolean;
@@ -54,7 +53,7 @@ export default function Select({
 
   return (
     // Changed fragment to div here just so that it can be laid out with bootstrap easily using d-flex, flex-column and responsive gaps which requires grouping.
-    <div className="fy-select">
+    <div className="fy-temp-select">
       {label && (
         <label className={`sub-title ${required ? "required" : ""}`}>
           {label}
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 069b13cf3d..8f2632355c 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -12,6 +12,7 @@ import FileLabel from "./FileLabel";
 import ImageInput from "./ImageInput";
 import Input from "./Input";
 import Label from "./Label";
+import MocapInput from "./MocapInput";
 import Modal from "./Modal";
 import NumberSlider from "./NumberSlider";
 import Panel from "./Panel";
@@ -43,6 +44,7 @@ export {
   ImageInput,
   Input,
   Label,
+  MocapInput,
   Modal,
   NumberSlider,
   Panel,
diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
new file mode 100644
index 0000000000..9be33ff4bc
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
@@ -0,0 +1,18 @@
+export enum MediaFilters {
+  all,
+  audio,
+  image,
+  video,
+  bvh,
+  gltf,
+  fbx
+}
+
+export type MediaFilterProp = keyof typeof MediaFilters;
+
+export const MediaFilterOptions = (t = (v:string) => v) => Object.values(MediaFilters)
+  .filter(val => isNaN(Number(val)))
+  .map((value) => {
+    if (typeof value === "string") return { value, label: t(value) }
+    return { label: "", value: "" };
+  });
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
new file mode 100644
index 0000000000..2b61429612
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
@@ -0,0 +1,28 @@
+import React, { useRef } from "react";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
+import MediaCards from "components/common/Card/MediaCards";
+
+interface Props {
+  list: MediaFile[],
+  success?: boolean
+}
+
+export default function MediaList({ list, success, ...rest }: Props) {
+  const gridRef = useRef<HTMLDivElement | null>(null);
+
+  return list.length === 0 && success ?
+    <div className="text-center mt-4 opacity-75">
+      No media created yet.
+    </div> : <MasonryGrid {...{ gridRef }}>
+      { list.map((data: MediaFile, key: number) => {
+        let props = { data, type: "media", ...rest };
+        return <div {...{
+          className: "col-12 col-sm-6 col-xl-4 grid-item",
+          key,
+        }}>
+          <MediaCards {...{ type: data.media_type, props }} />
+        </div>;
+      }) }
+    </MasonryGrid>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/index.tsx b/packages/fakeyou.com/src/components/entities/MediaList/index.tsx
new file mode 100644
index 0000000000..cf54abd646
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/MediaList/index.tsx
@@ -0,0 +1 @@
+export { default } from "./MediaList";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx
new file mode 100644
index 0000000000..f15f581a5f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/index.tsx
@@ -0,0 +1,3 @@
+import MediaList from "./MediaList";
+
+export { MediaList };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNavJobs.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNavJobs.tsx
new file mode 100644
index 0000000000..f8654c1a76
--- /dev/null
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNavJobs.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+interface Props {
+  byQueue: any,
+  t: any,
+  ttsQueuedCount: number
+}
+
+export default function SideNavJobs({ byQueue, t, ttsQueuedCount }: Props) {
+  return <div className="d-none d-lg-block">
+    <div className="sidebar-heading">Jobs Queue</div>
+    <div className="ps-4 mb-3">
+      <div>
+        {t("queueTts")}:{" "}
+        <span className="text-red">{ ttsQueuedCount }</span>
+      </div>
+      <div>
+        {t("queueRvc")}:{" "}
+        <span className="text-red">
+          { byQueue.pending_rvc_jobs }
+        </span>
+      </div>
+      <div>
+        {t("queueSvc")}:{" "}
+        <span className="text-red">
+          { byQueue.pending_svc_jobs }
+        </span>
+      </div>
+      <div>
+        {t("queueFaceAnimator")}:{" "}
+        <span className="text-red">
+          { byQueue.pending_face_animation_jobs }
+        </span>
+      </div>
+      <div>
+        Voice Designer:{" "}
+        <span className="text-red">
+          { byQueue.pending_voice_designer }
+        </span>
+      </div>
+    </div>
+  </div>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss
new file mode 100644
index 0000000000..a60424f16f
--- /dev/null
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss
@@ -0,0 +1,42 @@
+.fy-media-browser-tools {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+
+  .pagination {
+    margin: auto 0 auto auto;
+  }
+
+  .fy-temp-select { margin-bottom: 0 }
+}
+
+.fy-media-browser-header{
+  h3 { margin-bottom: 0 }
+  > * {
+    margin-bottom: 1rem;
+  }
+
+  .icon-close-button {
+    cursor: pointer;
+    height: 1.5rem;
+    opacity: .33;
+    // transition: .25s all ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+
+.fy-media-browser-list {
+  flex-grow: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 50vh;
+}
+
+.fy-media-browser-footer {
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
new file mode 100644
index 0000000000..f5f88d83b2
--- /dev/null
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { MediaList } from "components/entities";
+import { MediaFilterOptions, MediaFilterProp } from "components/entities/EntityTypes";
+import { TempSelect } from "components/common";
+import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
+import SkeletonCard from "components/common/Card/SkeletonCard";
+import Pagination from "components/common/Pagination";
+import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import { useListContent, useRatings } from "hooks";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { faArrowDownWideShort, faFilter, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import prepFilter from "resources/prepFilter";
+import "./MediaBrowser.scss";
+
+interface Props {
+  handleClose: any,
+  mediaToken: string,
+  onSelect?: any,
+  type?: MediaFilterProp,
+  username: string,
+}
+
+export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSelect, type, username }: Props) {
+  const ratings = useRatings();
+  const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+  const [mediaType, mediaTypeSet] = useState(type || "all");
+  const [list, listSet] = useState<MediaFile[]>([]);
+  const media = useListContent({
+    addQueries: {
+      page_size: 24,
+      ...prepFilter(mediaType, "filter_media_type"),
+    },
+    addSetters: { mediaTypeSet },
+    // debug: "profile media",
+    fetcher: GetMediaByUser,
+    list,
+    listSet,
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: (res) => {
+      // bookmarks.gather({ res, key: "token" });
+      ratings.gather({ res, key: "token" });
+      setShowMasonryGrid(true);
+    },
+    requestList: true,
+    urlParam: username,
+    urlUpdate: false
+  });
+
+  const handlePageClick = (selectedItem: { selected: number }) => {
+    media.pageChange(selectedItem.selected);
+  };
+
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: media.pageCount,
+    currentPage: media.page,
+  };
+
+  const sortOptions = [
+    { value: false, label: "Newest" },
+    { value: true, label: "Oldest" },
+    // { value: "mostliked", label: "Most Liked" },
+  ];
+
+  const onClick = (data: any) => {
+    onSelect(data);
+    handleClose();
+  };
+
+  return <>
+    <header {...{ className: "fy-media-browser-header" }}>
+      <div {...{ className: "fy-media-browser-tools" }}>
+        <h3>Media</h3>
+        <Icon {...{ className: "icon-close-button", icon: faXmark, onClick: () => handleClose() }}/>
+      </div>
+      <div {...{ className: "fy-media-browser-tools" }}>
+        <TempSelect
+          {...{
+            icon: faArrowDownWideShort,
+            options: sortOptions,
+            name: "sort",
+            onChange: media.onChange,
+            value: media.sort,
+          }}
+        />
+        { (!type || type === "all") && <TempSelect {...{
+              icon: faFilter,
+              options: MediaFilterOptions(),
+              name: "mediaType",
+              onChange: media.onChange,
+              value: mediaType,
+            }}/> }
+        <Pagination {...paginationProps} />
+      </div>
+    </header>
+    <AudioPlayerProvider>
+      { media.isLoading ? (
+        <div {...{ className: "row gx-3 gy-3" }}>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <SkeletonCard key={index} />
+          ))}
+        </div>
+      ) : (
+        <>
+          { showMasonryGrid && (
+            <div {...{ className: "fy-media-browser-list" }}>
+              <MediaList {...{ list: media.list, success: media.status === 3, onClick }}/>
+            </div>
+          ) }
+        </>
+      )}
+    </AudioPlayerProvider>
+
+    <footer {...{ className: "fy-media-browser-footer fy-media-browser-tools" }}>
+      <Pagination {...paginationProps} />
+    </footer>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx
new file mode 100644
index 0000000000..44c7ff0f7e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx
@@ -0,0 +1 @@
+export { default } from "./MediaBrowser";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/modals/index.tsx b/packages/fakeyou.com/src/components/modals/index.tsx
new file mode 100644
index 0000000000..edecc13e79
--- /dev/null
+++ b/packages/fakeyou.com/src/components/modals/index.tsx
@@ -0,0 +1,3 @@
+import MediaBrowser from "./MediaBrowser";
+
+export { MediaBrowser };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx b/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx
new file mode 100644
index 0000000000..f7652b66b4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { ModalContext } from "context";
+import { Modal } from "components/common";
+
+interface Props {
+  children?: any,
+}
+
+interface ModalConfig {
+  component: React.ElementType,
+  props?: any
+}
+
+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);
+  };
+  const close = () => modalStateSet(null);
+
+  return <ModalContext.Provider {...{ value: { close, open, modalState } }}>
+    { children }
+    {
+     <Modal {...{
+        autoWidth: true,
+        className: "fy-core-modal",
+        content: modalState?.component,
+        contentProps: modalState?.props,
+        handleClose: close,
+        noHeader: true,
+        omitBody: true,
+        show: !!modalState?.component,
+        showButtons: false,
+      }}/> 
+    }
+  </ModalContext.Provider>
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx b/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx
new file mode 100644
index 0000000000..28b7ac1f9e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/providers/ModalProvider/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ModalProvider";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/providers/index.ts b/packages/fakeyou.com/src/components/providers/index.ts
index 96d1a54039..9005f27cc3 100644
--- a/packages/fakeyou.com/src/components/providers/index.ts
+++ b/packages/fakeyou.com/src/components/providers/index.ts
@@ -1,5 +1,6 @@
 import AccountModalProvider from "./AccountModalProvider";
 import InferenceJobs from "./InferenceJobs";
+import ModalProvider from "./ModalProvider";
 import SessionProvider from "./SessionProvider";
 
-export { AccountModalProvider, InferenceJobs, SessionProvider };
\ No newline at end of file
+export { AccountModalProvider, InferenceJobs, ModalProvider, SessionProvider };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/context/ModalContext.tsx b/packages/fakeyou.com/src/context/ModalContext.tsx
new file mode 100644
index 0000000000..cbae90da8b
--- /dev/null
+++ b/packages/fakeyou.com/src/context/ModalContext.tsx
@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+export enum ModalView {
+  Closed,
+  Signup,
+  Login
+}
+
+interface ModalConfig {
+  component: React.ElementType,
+  props?: any
+}
+
+interface AccountModalContext { close: () => void, modalState: ModalConfig | null, open: (comp: any) => void  }
+
+export default createContext<AccountModalContext>({
+	close: () => {},
+	open: () => {},
+	modalState: null,
+});
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/context/index.ts b/packages/fakeyou.com/src/context/index.ts
index bced7d98f7..7682959f70 100644
--- a/packages/fakeyou.com/src/context/index.ts
+++ b/packages/fakeyou.com/src/context/index.ts
@@ -1,5 +1,6 @@
 import AccountModalContext from "./AccountModalContext";
 import InferenceJobsContext from "./InferenceJobsContext";
+import ModalContext from "./ModalContext";
 import SessionContext from "./SessionContext";
 
-export { AccountModalContext, InferenceJobsContext, SessionContext };
+export { AccountModalContext, InferenceJobsContext, ModalContext, SessionContext };
diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx
index bdccde3deb..38dcb36da3 100644
--- a/packages/fakeyou.com/src/hooks/index.tsx
+++ b/packages/fakeyou.com/src/hooks/index.tsx
@@ -12,6 +12,7 @@ import useLazyLists from './useLazyLists';
 import useListContent from './useListContent';
 import useLocalize from './useLocalize';
 import useMedia from './useMedia';
+import useModal from './useModal';
 import useRatings from './useRatings';
 import useSdUpload from './useSdUpload';
 import useSession from './useSession';
@@ -33,6 +34,7 @@ export {
   useListContent,
   useLocalize,
   useMedia,
+  useModal,
   useRatings,
   useSdUpload,
   useSession,
diff --git a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
index 103f835e0a..ed6a4a2156 100644
--- a/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
+++ b/packages/fakeyou.com/src/hooks/useFile/useFile.tsx
@@ -6,10 +6,9 @@ interface Props {
   debug?: any;
   onChange?: (file: any) => void;
   onClear?: (x?: any) => void;
-  onSubmit?: (file: any) => Promise<boolean | undefined> | Promise<void>;
 }
 
-export default function useFile({ debug, onChange = n, onClear = n, onSubmit = n }: Props) {
+export default function useFile({ debug, onChange = n, onClear = n }: Props) {
   const [file, fileSet] = useState<any>(undefined);
   const [blob, blobSet] = useState<string>();
   const inputRef = useRef<HTMLInputElement>(null);
diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
index c62d195b4a..59f7369eaf 100644
--- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
+++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
@@ -14,6 +14,7 @@ interface Props {
   pagePreset?: number;
   requestList?: boolean;
   urlParam: string;
+  urlUpdate?: boolean;
 }
 
 const n = () => {};
@@ -30,6 +31,7 @@ export default function useListContent({
   pagePreset = 0,
   requestList = false,
   urlParam = "",
+  urlUpdate = true
 }: Props) {
   const { pathname, search: locSearch } = useLocation();
   const history = useHistory();
@@ -76,7 +78,7 @@ export default function useListContent({
       if (status === FetchStatus.ready) {
         let search = new URLSearchParams(queries).toString();
         statusSet(FetchStatus.in_progress);
-        history.replace({ pathname, search });
+        if (urlUpdate) history.replace({ pathname, search });
         fetcher(urlParam,{},queries).then((res: any) => {
           if (debug)
             console.log(`🪲 useListContent success debug at: ${debug}`, res);
@@ -101,6 +103,7 @@ export default function useListContent({
     sort,
     status,
     urlParam,
+    urlUpdate
   ]);
 
   return {
diff --git a/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx b/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
index 92d5217637..781f943cce 100644
--- a/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
+++ b/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
@@ -7,7 +7,7 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
   const [media,mediaSet] = useState<MediaFile | undefined>();
 
   useEffect(() => {
-    if (mediaToken && status === FetchStatus.ready) {
+    if (!media && mediaToken && status === FetchStatus.ready) {
       statusSet(FetchStatus.in_progress);
       GetMedia(mediaToken,{})
       .then((res) => {
@@ -22,6 +22,6 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
       });
     }
 
-  },[mediaToken, onSuccess, status, statusSet]);
- return { media, status };
+  },[media, mediaToken, onSuccess, status, statusSet]);
+ return { media, mediaSet, status };
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useModal/index.tsx b/packages/fakeyou.com/src/hooks/useModal/index.tsx
new file mode 100644
index 0000000000..9c692df084
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useModal/index.tsx
@@ -0,0 +1 @@
+export { default } from "./useModal";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useModal/useModal.tsx b/packages/fakeyou.com/src/hooks/useModal/useModal.tsx
new file mode 100644
index 0000000000..4794f28a7c
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useModal/useModal.tsx
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ModalContext } from 'context';
+
+export default function useInferenceJobs() {
+  return useContext(ModalContext);
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
index a0ea91aa67..c3bf71f497 100644
--- a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
+++ b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx
@@ -3,14 +3,4 @@ import { SessionContext } from 'context';
 
 export default function useInferenceJobs() {
   return useContext(SessionContext);
-  // const { querySession, querySubscriptions, sessionFetched, sessionWrapper } = useContext(SessionContext);
-  // const { logged_in: loggedIn, user } = sessionWrapper?.sessionStateResponse || { logged_in: false };
-
-  // return {
-  //   loggedIn,
-  //   querySession,
-  //   querySubscriptions,
-  //   sessionFetched,
-  //   user
-  // };
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 26149cb445..6bc6afa574 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -11,6 +11,23 @@ styles with important tags:
 //
 // Once the rollout is complete, this outer wrapper class can be removed.
 
+  @mixin panel {
+    background-color: $panel;
+    border-color: #ffffff12 !important;
+    border: 1px solid;
+    border-left: none;
+    border-right: none;
+    border-radius: 0px;
+    box-shadow:
+      0 0 0 1px rgba(0 0 0 / 16%),
+      0 70px 65px rgb(0 0 0 / 8%),
+      0 30px 30px rgb(0 0 0 / 7%),
+      0 15px 15px rgb(0 0 0 / 5%),
+      0 10px 8px rgb(0 0 0 / 3%),
+      0 4px 4px rgb(0 0 0 / 2%),
+      0 2px 2px rgb(0 0 0 / 1%) !important;
+}
+
 .fakeyou-refresh {
 
   //- BS5 classnames -//
@@ -316,22 +333,9 @@ styles with important tags:
   }
 
   .panel {
+    @include panel;
     position: relative;
     width: 100%;
-    background-color: $panel;
-    border-color: #ffffff12 !important;
-    border: 1px solid;
-    border-left: none;
-    border-right: none;
-    border-radius: 0px;
-    box-shadow:
-      0 0 0 1px rgba(0 0 0 / 16%),
-      0 70px 65px rgb(0 0 0 / 8%),
-      0 30px 30px rgb(0 0 0 / 7%),
-      0 15px 15px rgb(0 0 0 / 5%),
-      0 10px 8px rgb(0 0 0 / 3%),
-      0 4px 4px rgb(0 0 0 / 2%),
-      0 2px 2px rgb(0 0 0 / 1%) !important;
 
     .video-bg {
       background-color: $black;
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 313813cfc5..51d711a86f 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -97,6 +97,7 @@ import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVo
 import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage";
 import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
 import DevUpload from "./pages/dev_upload/DevUpload";
+import EngineCompositor from "./pages/EngineCompositor";
 import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage";
 import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage";
 import WeightPage from "./pages/weight/WeightPage";
@@ -207,7 +208,6 @@ class PageContainer extends React.Component<
   constructor(props: Props & RouteComponentProps) {
     super(props);
 
-  console.log("💰",);
     this.state = {};
   }
 
@@ -761,6 +761,10 @@ class PageContainer extends React.Component<
                 />
               </Route>
 
+              <Route path="/engine-compositor">
+                <EngineCompositor />
+              </Route>
+
               <Route path="/voice-designer">
                 <VoiceDesignerMainPage />
               </Route>
diff --git a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss
new file mode 100644
index 0000000000..d5cddc989a
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss
@@ -0,0 +1,29 @@
+.fy-engine-compositor {
+  // margin: 1rem;
+  padding: 1rem;
+
+  .engine-compositor-container {
+    padding: 1rem;
+
+    header {
+      // background: blue;
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    h2 { margin-bottom: 0; }
+  }
+  .compositor-content {
+    display: flex;
+    gap: 1rem;
+    // padding: 1rem;
+
+    > * {
+      width: 100%;
+      // background: red;
+     }
+  }
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
new file mode 100644
index 0000000000..3dbebe5d1e
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Button, MocapInput, TempInput } from "components/common";
+import "./EngineCompositor.scss"
+
+interface Props {
+  value?: any;
+}
+
+export default function EngineCompositor({ value }: Props) {
+  const [mediaToken,mediaTokenSet] = useState();
+  const onChange = ({ target }: any) => mediaTokenSet(target.value);
+
+  console.log("🪼",mediaToken);
+
+  return <div {...{ className: "fy-engine-compositor"}}>
+    <div {...{ className: "panel engine-compositor-container" }}>
+      <header>
+        <h2>Engine Compositor</h2>
+        <Button {...{ label: "Enqueue", 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>
+    </div>
+  </div>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/index.tsx b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/index.tsx
new file mode 100644
index 0000000000..bde996dfbe
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/index.tsx
@@ -0,0 +1 @@
+export { default } from "./EngineCompositor";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
index 0bc7e3bcaf..904e7d36e8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
@@ -47,6 +47,8 @@ export default function MediaTab({ username }: { username: string }) {
     urlParam: username,
   });
 
+  console.log("🐸",media.status);
+
   const handlePageClick = (selectedItem: { selected: number }) => {
     media.pageChange(selectedItem.selected);
   };

From 7f5bdd50f9ccfb2ee0b847c17411d4a673c8d43b Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 30 Jan 2024 22:07:55 -0800
Subject: [PATCH 2/7] initial entity cards

---
 .../entities/AudioCard/AudioCard.tsx          | 10 +++
 .../components/entities/BvhCard/BvhCard.tsx   | 72 +++++++++++++++++++
 .../src/components/entities/BvhCard/index.tsx |  1 +
 .../entities/CardWrapper/CardWrapper.tsx      | 19 +++++
 .../entities/MediaList/MediaList.tsx          | 29 +++++++-
 .../src/components/entities/index.tsx         |  3 +-
 6 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/entities/AudioCard/AudioCard.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/BvhCard/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx

diff --git a/packages/fakeyou.com/src/components/entities/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/entities/AudioCard/AudioCard.tsx
new file mode 100644
index 0000000000..d909e9e2f1
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/AudioCard/AudioCard.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+// import { CardWrapper } from "components/entities";
+
+interface Props {
+  value?: any;
+}
+
+export default function AudioCard({ value }: Props) {
+  return {};
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx b/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
new file mode 100644
index 0000000000..c8d7142628
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import useTimeAgo from "hooks/useTimeAgo";
+import { faPersonWalking } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import CreatorName from "components/common/Card/CreatorName";
+import Badge from "components/common/Badge";
+
+interface Props {
+  data: any,
+  showCreator?: boolean
+}
+
+
+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 }}/>
+    <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} />
+        </div>
+      </div>
+
+      <div className="card-img-overlay-text">
+        <div>
+          <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
+        </div>
+
+        <hr className="my-2" />
+
+        <div
+          className="d-flex align-items-center gap-2"
+          onClick={handleInnerClick}
+        >
+          {showCreator && (
+            <div className="flex-grow-1">
+              <CreatorName
+                displayName={
+                  data.maybe_creator?.display_name || "Anonymous"
+                }
+                gravatarHash={data.maybe_creator?.gravatar_hash || null}
+                avatarIndex={
+                  data.maybe_creator?.default_avatar.image_index || 0
+                }
+                backgroundIndex={
+                  data.maybe_creator?.default_avatar.color_index || 0
+                }
+                username={data.maybe_creator?.username || "anonymous"}
+              />
+            </div>
+          )}
+          {
+            // <div>
+            //   <LikeButton
+            //     {...{
+            //       ...ratings.makeProps({
+            //         entityToken: data.token,
+            //         entityType: "media_file",
+            //       }),
+            //     }}
+            //   />
+            // </div>
+          }
+        </div>
+      </div>
+    </div>
+  </>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/BvhCard/index.tsx b/packages/fakeyou.com/src/components/entities/BvhCard/index.tsx
new file mode 100644
index 0000000000..33fa21416e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/BvhCard/index.tsx
@@ -0,0 +1 @@
+export { default } from "./BvhCard";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx b/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx
new file mode 100644
index 0000000000..2aed6ef642
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import getCardUrl from "components/common/Card/getCardUrl";
+
+interface Props {
+  card: any,
+  data: any,
+  onClick?: (e:any) => any,
+  source?: string,
+  type: "media" | "weights"
+}
+
+export default function CardWrapper({ card: Card, data, onClick, 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>;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
index 2b61429612..461d3e572e 100644
--- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
+++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
@@ -1,13 +1,40 @@
 import React, { useRef } from "react";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import MediaCards from "components/common/Card/MediaCards";
+// import MediaCards from "components/common/Card/MediaCards";
+import AudioCard from "components/common/Card/AudioCard";
+import ImageCard from "components/common/Card/ImageCard";
+import MocapCard from "components/common/Card/MocapCard";
+import VideoCard from "components/common/Card/VideoCard";
+import { BvhCard } from "components/entities";
+
+interface MediaCardsProps {
+  props: any,
+  type: string
+}
 
 interface Props {
   list: MediaFile[],
   success?: boolean
 }
 
+const MediaCards = ({ props, type }: MediaCardsProps) => {
+  switch (type) {
+    case "audio":
+      return <AudioCard {...props} />;
+    case "image":
+      return <ImageCard {...props} />;
+    case "mocap":
+      return <MocapCard {...props} />;
+    case "video":
+      return <VideoCard {...props} />;
+    case "bvh":
+      return <BvhCard {...props}/>
+    default:
+      return <div>Unsupported media type</div>;
+  }
+};
+
 export default function MediaList({ list, success, ...rest }: Props) {
   const gridRef = useRef<HTMLDivElement | null>(null);
 
diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx
index f15f581a5f..f8cd453fd4 100644
--- a/packages/fakeyou.com/src/components/entities/index.tsx
+++ b/packages/fakeyou.com/src/components/entities/index.tsx
@@ -1,3 +1,4 @@
+import BvhCard from "./BvhCard";
 import MediaList from "./MediaList";
 
-export { MediaList };
\ No newline at end of file
+export { BvhCard, MediaList };
\ No newline at end of file

From 574b1417dc9ae596f697fd7901de6e94d7e0ee90 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 31 Jan 2024 16:19:58 -0800
Subject: [PATCH 3/7] free floating "go to top" button on inifinite scroll
 pages

---
 packages/fakeyou.com/src/AppNew.scss          | 13 +++++++++++
 .../src/components/common/Button/Button.tsx   |  3 ++-
 .../components/common/Button/ButtonProps.tsx  |  1 +
 packages/fakeyou.com/src/hooks/index.tsx      |  2 ++
 .../src/hooks/useLazyLists/useLazyLists.tsx   | 17 +++++++++++++-
 .../v2/view/pages/explore/tabs/MediaTab.tsx   | 22 +++++++++++++++----
 .../v2/view/pages/explore/tabs/WeightsTab.tsx | 18 +++++++++++++--
 7 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/packages/fakeyou.com/src/AppNew.scss b/packages/fakeyou.com/src/AppNew.scss
index c7683717df..784d6847a0 100644
--- a/packages/fakeyou.com/src/AppNew.scss
+++ b/packages/fakeyou.com/src/AppNew.scss
@@ -329,6 +329,19 @@ $headings-font-family: "Fira Sans", sans-serif;
     height: 100%;
     pointer-events: none;
   }
+
+  .to-top-button-off-screen {
+    position: fixed;
+    width: fit-content;
+    white-space: nowrap;
+    top: 5rem;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    
+      box-shadow: 0px 5px 20px rgba($black, 0.3);
+  }
 }
 
 @media screen and (max-height: 740px) {
diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx
index 060a9cf10b..c276f9214f 100644
--- a/packages/fakeyou.com/src/components/common/Button/Button.tsx
+++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx
@@ -7,6 +7,7 @@ import Tippy from "@tippyjs/react";
 import "tippy.js/dist/tippy.css";
 
 export default function Button({
+  buttonRef,
   label,
   icon,
   small,
@@ -81,7 +82,7 @@ export default function Button({
       {ButtonContent}
     </a>
   ) : (
-    <button type="button" {...commonProps} {...rest}>
+    <button {...{ ...commonProps, ...rest, type: "button", ref: buttonRef }}>
       {ButtonContent}
     </button>
   );
diff --git a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx
index a4680b7be9..9a0936fca5 100644
--- a/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx
+++ b/packages/fakeyou.com/src/components/common/Button/ButtonProps.tsx
@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 export default interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  buttonRef?: any;
   label?: string | null;
   icon?: IconDefinition;
   small?: boolean;
diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx
index bdccde3deb..a4f893e1e4 100644
--- a/packages/fakeyou.com/src/hooks/index.tsx
+++ b/packages/fakeyou.com/src/hooks/index.tsx
@@ -12,6 +12,7 @@ import useLazyLists from './useLazyLists';
 import useListContent from './useListContent';
 import useLocalize from './useLocalize';
 import useMedia from './useMedia';
+import useOnScreen from "./useOnScreen";
 import useRatings from './useRatings';
 import useSdUpload from './useSdUpload';
 import useSession from './useSession';
@@ -33,6 +34,7 @@ export {
   useListContent,
   useLocalize,
   useMedia,
+  useOnScreen,
   useRatings,
   useSdUpload,
   useSession,
diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx
index 66ef5480ec..6fdc35c516 100644
--- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx
+++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx
@@ -45,6 +45,9 @@ export default function useLazyLists({
     status === FetchStatus.ready || status === FetchStatus.in_progress;
   const fetchError = status === FetchStatus.error;
 
+  const [goingtToTop,goingtToTopSet] = useState(false);
+  const [y,ySet] = useState(0);
+
   const getMore = () => {
     if (next) statusSet(1);
   };
@@ -67,6 +70,8 @@ export default function useLazyLists({
     nextSet("");
     previousSet("");
     statusSet(FetchStatus.ready);
+    window.scrollTo(0,0);
+    goingtToTopSet(true);
   }
 
   useEffect(() => {
@@ -76,7 +81,15 @@ export default function useLazyLists({
       ...(sort ? { sort_ascending: true } : {}),
     };
 
-    if (status === FetchStatus.ready) {
+    const adjustY = () => ySet(window.pageYOffset);
+
+    if (goingtToTop) {
+      window.addEventListener('scroll', adjustY, { passive: true });
+      if (y === 0) setTimeout(() => goingtToTopSet(false),500);
+    }
+    else window.removeEventListener('scroll',adjustY);
+
+    if (status === FetchStatus.ready && !goingtToTop) {
       let search = new URLSearchParams(queries).toString();
       statusSet(FetchStatus.in_progress);
       !disableUrlQueries && history.replace({ pathname, search });
@@ -114,6 +127,7 @@ export default function useLazyLists({
     addQueries,
     debug,
     fetcher,
+    goingtToTop,
     history,
     listKeys,
     listSet,
@@ -124,6 +138,7 @@ export default function useLazyLists({
     status,
     totalKeys,
     disableUrlQueries,
+    y
   ]);
 
   return {
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
index 2f5adc56db..de5912e1eb 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
@@ -11,7 +11,7 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useBookmarks, useLazyLists, useRatings } from "hooks";
+import { useBookmarks, useLazyLists, useOnScreen, useRatings } from "hooks";
 import InfiniteScroll from "react-infinite-scroll-component";
 import prepFilter from "resources/prepFilter";
 
@@ -20,6 +20,9 @@ export default function MediaTab() {
   const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const ratings = useRatings();
+  const toTopBtnRef = useRef<HTMLDivElement | null>(null);
+  const onScreen = useOnScreen(toTopBtnRef,"0px");
+
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [mediaType, mediaTypeSet] = useState(
     urlQueries.get("filter_media_type") || "all"
@@ -59,8 +62,6 @@ export default function MediaTab() {
     // { value: "mostliked", label: "Most Liked" },
   ];
 
-  console.log("💎",media.urlCursor);
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -84,8 +85,20 @@ export default function MediaTab() {
             }}
           />
         </div>
-        { media.urlCursor ? <Button {...{ label: "Back to top", onClick: () => media.reset() }}/> : null }
+        { media.urlCursor ? 
+          <Button {...{
+            className: `to-top-button`,
+            buttonRef: toTopBtnRef,
+            label: "Back to top",
+            onClick: () => media.reset(),
+          }}/> : null }
       </div>
+      { media.urlCursor && !onScreen ? 
+        <Button {...{
+          className: `to-top-button-off-screen`,
+          label: "Back to top",
+          onClick: () => media.reset(),
+        }}/> : null }
       <AudioPlayerProvider>
         {media.isLoading && !media.list.length ? (
           <div className="row gx-3 gy-3">
@@ -94,6 +107,7 @@ export default function MediaTab() {
             ))}
           </div>
         ) : (
+
           <InfiniteScroll
             dataLength={media.list.length}
             next={media.getMore}
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
index 2420e511f5..ec70f5be75 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
@@ -12,7 +12,7 @@ import SkeletonCard from "components/common/Card/SkeletonCard";
 import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useBookmarks, useLazyLists, useRatings } from "hooks";
+import { useBookmarks, useLazyLists, useOnScreen, useRatings } from "hooks";
 import prepFilter from "resources/prepFilter";
 
 export default function WeightsTab() {
@@ -25,6 +25,8 @@ export default function WeightsTab() {
   const [weightCategory, weightCategorySet] = useState(urlQueries.get("maybe_scoped_weight_category") || "all");
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<Weight[]>([]);
+  const toTopBtnRef = useRef<HTMLDivElement | null>(null);
+  const onScreen = useOnScreen(toTopBtnRef,"0px");
   const weights = useLazyLists({
     addQueries: {
       page_size: 24,
@@ -145,8 +147,20 @@ export default function WeightsTab() {
             />
           )} */}
         </div>
-        { weights.urlCursor ? <Button {...{ label: "Back to top", onClick: () => weights.reset() }}/> : null }
+        { weights.urlCursor ? 
+          <Button {...{
+            className: `to-top-button`,
+            buttonRef: toTopBtnRef,
+            label: "Back to top",
+            onClick: () => weights.reset(),
+          }}/> : null }
       </div>
+      { weights.urlCursor && !onScreen ? 
+        <Button {...{
+          className: `to-top-button-off-screen`,
+          label: "Back to top",
+          onClick: () => weights.reset(),
+        }}/> : null }
       <AudioPlayerProvider>
         {weights.isLoading && !weights.list.length ? (
           <div className="row gx-3 gy-3">

From ed637d9baa043f8359514b3d211677ff6b9c9661 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 31 Jan 2024 19:11:06 -0800
Subject: [PATCH 4/7] removed log

---
 packages/fakeyou.com/src/components/common/Modal/Modal.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
index 0d0e184151..876228e817 100644
--- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
+++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
@@ -54,8 +54,6 @@ const Modal: React.FC<ModalProps> = ({
   });
   const [loaded,loadedSet] = useState(false);
 
-  console.log("🩵",loaded);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const modalContent = document.querySelector(".modal-content");

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 5/7] 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

From b5b8afd18e9fb27019caf4eb7169ed9d5a704be6 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 31 Jan 2024 21:50:40 -0800
Subject: [PATCH 6/7] removed log from profile media tab

---
 .../src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
index 904e7d36e8..0bc7e3bcaf 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
@@ -47,8 +47,6 @@ export default function MediaTab({ username }: { username: string }) {
     urlParam: username,
   });
 
-  console.log("🐸",media.status);
-
   const handlePageClick = (selectedItem: { selected: number }) => {
     media.pageChange(selectedItem.selected);
   };

From 20eff299269ab21591f759ae83cb01c8273dda6c Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 31 Jan 2024 22:51:39 -0800
Subject: [PATCH 7/7] Engine Compositor should enqueue now

---
 packages/components/src/jobs/InferenceJob.ts  |  1 +
 packages/fakeyou.com/src/App.tsx              |  1 +
 .../components/entities/BvhCard/BvhCard.tsx   |  4 +--
 .../entities/CardWrapper/CardWrapper.tsx      | 16 +++++++++---
 .../components/entities/CardWrapper/index.tsx |  1 +
 .../entities/MediaList/MediaList.tsx          |  4 +--
 .../src/components/entities/index.tsx         |  3 ++-
 .../providers/InferenceJobs/InferenceJobs.tsx |  5 ++--
 .../src/context/InferenceJobsContext.tsx      |  2 +-
 .../useInferenceJobs/useInferenceJobs.tsx     |  3 ++-
 .../EngineCompositor/EngineCompositor.tsx     | 25 ++++++++++++++++---
 11 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/entities/CardWrapper/index.tsx

diff --git a/packages/components/src/jobs/InferenceJob.ts b/packages/components/src/jobs/InferenceJob.ts
index ddc39f2646..53aa9ae0f7 100644
--- a/packages/components/src/jobs/InferenceJob.ts
+++ b/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
diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx
index 248fc6b9f2..12e574f6ff 100644
--- a/packages/fakeyou.com/src/App.tsx
+++ b/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,
                 }}
               >
diff --git a/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx b/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
index c8d7142628..e0d1e5ef76 100644
--- a/packages/fakeyou.com/src/components/entities/BvhCard/BvhCard.tsx
+++ b/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>
 
diff --git a/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx b/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx
index 2aed6ef642..8814e59cae 100644
--- a/packages/fakeyou.com/src/components/entities/CardWrapper/CardWrapper.tsx
+++ b/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>;
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/CardWrapper/index.tsx b/packages/fakeyou.com/src/components/entities/CardWrapper/index.tsx
new file mode 100644
index 0000000000..db1ba94dea
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/CardWrapper/index.tsx
@@ -0,0 +1 @@
+export { default } from "./CardWrapper";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
index 56b4363fb0..7818218c2c 100644
--- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
+++ b/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>;
   }
diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx
index f8cd453fd4..a9ee9dddbc 100644
--- a/packages/fakeyou.com/src/components/entities/index.tsx
+++ b/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 };
\ No newline at end of file
+export { BvhCard, CardWrapper, MediaList };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx
index 83460a23a5..1bc486811d 100644
--- a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx
+++ b/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>
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/context/InferenceJobsContext.tsx b/packages/fakeyou.com/src/context/InferenceJobsContext.tsx
index 5e1720001b..36d4de88de 100644
--- a/packages/fakeyou.com/src/context/InferenceJobsContext.tsx
+++ b/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>({ });
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx b/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx
index 18d3f0b929..d614de5ed6 100644
--- a/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx
+++ b/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]
   };
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 66b2c0573c..fb9bdbd520 100644
--- a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx
+++ b/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>;
 };
\ No newline at end of file