Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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

@@ -9,8 +9,29 @@
   }
 
   .select__value-container--is-multi {
-    gap: .25rem;
+    height: min-content;
+    // background: red;
+    display: inline-block;
+    white-space: nowrap;
+    overflow-x: scroll;
+    border-radius: .5rem;
+    // flex-wrap: 
+    // gap: .25rem;
     padding: 0;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
+  .select__input-container {
+    min-width: 10rem;
+    // background: red;
+    padding: 0 0 0 .5rem;
+    margin: 0;}
   }
 
   [class^="select__multi-value"] {
@@ -18,10 +39,14 @@
   }
 
   .select__multi-value {
+    display: inline-flex;
     border-radius: .5rem;
     overflow: hidden;
     padding: 0 0 0 .125rem;
-    background: $secondary-lighter
+    background: $secondary-lighter;
+    margin-bottom: 0;
+    margin-top: 0;
+    width: fit-content;
   }
 
   .select__multi-value__remove {

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, 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";
@@ -15,9 +15,11 @@ import "./EntityInput.scss";
 interface Props {
   accept?: AcceptTypes | AcceptTypes[],
   aspectRatio?: "square" | "landscape" | "portrait",
-  label?: string, 
+  label?: string,
+  name?: string,
   onChange?: any,
   type: EntityModeProp,
+  value?: string
 }
 
 export interface SlideProps {
@@ -60,19 +62,19 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res
     <Render {...{ ...rest, animating }} />
   </a.div>;
 
-export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, onChange, type, ...rest }: Props) {
+export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, name = "", onChange, type, value, ...rest }: Props) {
   const accept = Array.isArray(inAccept) ? inAccept : [inAccept];
   const inputMode = EntityInputMode[type];
   const { search } = useLocation();
   const presetToken = search ? new URLSearchParams(search).get("preset_token") : "";
-  const [mediaToken,mediaTokenSet] = useState(presetToken || "");
+  const [mediaToken,mediaTokenSet] = useState(presetToken || value || "");
   const { media, mediaSet } = useMedia({ mediaToken });
   const { user } = useSession();
   const { open } = useModal();
 
   const selectToken = (token: string) => {
     mediaTokenSet(token);
-    onChange({ target: { name: "temp", value: token } });
+    onChange({ target: { name, value: token } });
   };
 
   const { clear, inputProps } = useFile({
@@ -109,6 +111,10 @@ export default function EntityInput({ accept: inAccept, aspectRatio = "square",
     onStart: () => animatingSet(true)
   });
 
+  useEffect(() => {
+    if (presetToken && value !== presetToken) onChange({ target: { name, value: presetToken } });
+  },[presetToken, name, onChange, value]);
+
   return <>
     <Label {...{ label }}/>
     <div {...{ className: `fy-entity-input panel-inner${ aspectRatio ? " fy-entity-input-" + aspectRatio : "" }`, }}>

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

@@ -52,6 +52,13 @@
     white-space: nowrap;
   }
 
+  .job-info {
+    line-height: .75rem;
+    font-size: .75rem;
+    white-space: nowrap;
+    opacity: .6;
+  }
+
   span {
     font-weight: lighter;
     line-height: 1rem;

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

@@ -65,6 +65,7 @@ export default function EngineCompositor({ value, sessionWrapper }: Props) {
                 label: "Choose 3D data",
                 onChange,
                 type: "media",
+                value: mediaToken
               }}
             />
           </div>

packages/fakeyou.com/src/v2/view/pages/dev_upload/DevEntityInput.scss

@@ -0,0 +1,13 @@
+.fy-basic-grid {
+	 header {
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    
+	>:not(.fy-input-label) {
+		margin-bottom: 1rem;
+	}
+}

packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx

@@ -4,6 +4,7 @@ import { EntityFilterOptions, EntityInputMode, EntityModeProp, ListEntityFilters
 import { useModal, useSession } from "hooks";
 import { InferenceJobsModal } from "components/modals";
 import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
+import "./DevEntityInput.scss";
 
 interface Props {
   value?: any;
@@ -40,10 +41,10 @@ export default function DevMediaInput({ value }: Props) {
 
   const openModal = () => open({ component: InferenceJobsModal });
 
-  return studioAccessCheck(<div {...{ className: "fy-engine-compositor"}}>
-    <div {...{ className: "panel engine-compositor-container" }}>
+  return studioAccessCheck(<div {...{ className: "fy-engine-compositor p-3"}}>
+    <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
+    <div {...{ className: "panel p-3 fy-basic-grid" }}>
       <header>
-        <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
         <SegmentButtons {...{ onChange: ({ target }: { target: any }) => modeSet(target.value), options, value: mode }}/>
         <TempInput {...{ value: owner, onChange: ({ target }: { target: any }) => ownerSet(target.value), placeholder: "User" }}/>
       </header>
@@ -55,14 +56,14 @@ export default function DevMediaInput({ value }: Props) {
      <EntityInput {...{
         accept: ["bvh","glb","gltf"],
         aspectRatio: "landscape",
-        label: "not now",
+        label: "Choose entity",
         // label: `Choose ${ ["","media file","weight"][entityType] }`,
         onChange,
         owner,
         search: "Dream",
         type: "media"
       }}/>
-      <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>
+      <Button {...{ label: "Open modal", onClick: openModal, variant: "primary" }}/>
      <div>
       { mediaToken }
      </div>