added engine asset category filters for uploads/listing (#290)

Co-authored-by: Victor <victor@storyteller.ai>

app/api/media_files/GetMediaByUser.ts

@@ -14,7 +14,12 @@ export interface Pagination {}
 export interface GetMediaParams {
   page_index?: number;
   filter_media_type?: string;
-  filter_engine_categories?: string;
+  filter_engine_categories?:
+    | "scene"
+    | "character"
+    | "animation"
+    | "object"
+    | "skybox";
 }
 
 export const GetMediaByUser = MakeRequest<

app/api/media_files/UploadEngineAsset.ts

@@ -1,5 +1,13 @@
 import MakeMultipartRequest from "../MakeMultipartRequest";
 
+export enum MediaFileEngineCategory {
+  Scene = "scene",
+  Character = "character",
+  Animation = "animation",
+  Object = "object",
+  Skybox = "skybox",
+}
+
 export enum MediaFileSubtype {
   /// Animation file from Mixamo
   /// Primarily used for FBX and GLB.
@@ -30,6 +38,7 @@ export interface UploadEngineAssetRequest {
   file: File;
   media_file_subtype?: MediaFileSubtype;
   title?: string;
+  engine_category: MediaFileEngineCategory;
   uuid_idempotency_token?: string;
 }
 

app/components/FileWrapper/FileWrapper.tsx

@@ -1,5 +1,6 @@
 import React, { useId, useRef, useState } from "react";
 import { UploadModal } from "~/components";
+import { AssetType } from "~/pages/PageEnigma/models";
 // import { useId } from 'hooks'; // replace with react v18
 import "./FileWrapper.scss";
 
@@ -9,12 +10,14 @@ interface Props {
   onChange: (file?: React.ChangeEvent) => void;
   onSuccess: () => void;
   panelClass?: string;
+  type: AssetType;
 }
 
 export default function FileWrapper({
   render: Render,
   fileTypes = [],
   onSuccess,
+  type,
   ...rest
 }: Props) {
   const fileRef = useRef(null);
@@ -23,7 +26,9 @@ export default function FileWrapper({
   const [resetModal, resetModalSet] = useState(false);
   const [dragging, draggingSet] = useState(false);
   const id = "file-input-" + useId();
-  const accept = fileTypes.map((type) => `.${type.toLowerCase()}`).join(",");
+  const accept = fileTypes
+    .map((fileType) => `.${fileType.toLowerCase()}`)
+    .join(",");
   const clearFile = () => {
     if (fileRef.current !== null) {
       fileRef.current.value = "";
@@ -87,6 +92,7 @@ export default function FileWrapper({
           onSuccess,
           resetModal,
           resetModalSet,
+          type,
         }}
       />
     </div>

app/components/UploadModal/UploadModal.tsx

@@ -15,6 +15,7 @@ import "./UploadModal.scss";
 import { fitCameraToCenteredObject } from "./fitCameraToCenteredObject";
 import { EditCoverImage } from "~/api/media_files/EditCoverImage";
 import { Visibility } from "~/pages/PageEnigma/js/api_manager";
+import { AssetType } from "~/pages/PageEnigma/models";
 
 interface Props {
   closeModal: () => void;
@@ -24,6 +25,7 @@ interface Props {
   isOpen: boolean;
   resetModal: boolean;
   resetModalSet: (b: boolean) => void;
+  type: AssetType;
 }
 
 enum UploaderState {
@@ -46,6 +48,7 @@ export default function UploadModal({
   onSuccess,
   resetModal,
   resetModalSet,
+  type,
 }: Props) {
   const [title, titleSet] = useState("");
   const [visibility, visibilitySet] = useState("public");
@@ -172,6 +175,7 @@ export default function UploadModal({
   const uploadAsset = () => {
     objUploadStatusSet(UploaderState.uploadingAsset);
     UploadEngineAsset({
+      engine_category: type === AssetType.CHARACTER ? "character" : "object",
       file,
       media_file_subtype: "mixamo",
       title,

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx

@@ -26,6 +26,8 @@ import { BucketConfig } from "~/api/BucketConfig";
 import { AuthenticationContext } from "~/contexts/Authentication";
 // import { UploadModal } from "~/components/UploadModal";
 
+import { selectedTab } from "~/pages/PageEnigma/store/sidePanel";
+
 interface Props {
   type: AssetType;
 }
@@ -40,6 +42,8 @@ export enum FetchStatus {
 
 export const ObjectsTab = ({ type }: Props) => {
   useSignals();
+  const currentTab = selectedTab?.value?.value || "";
+  const [cachedTab, cachedTabSet] = useState(currentTab);
   const [objects, objectsSet] = useState<{ value: MediaItem[] }>({
     value: [
       {
@@ -60,13 +64,19 @@ export const ObjectsTab = ({ type }: Props) => {
   };
 
   useEffect(() => {
-    if (status === FetchStatus.ready && type !== AssetType.CHARACTER) {
+    // we need to cache the current tab because we don't unmount components
+    if (cachedTab !== currentTab) {
+      cachedTabSet(currentTab);
+      statusSet(FetchStatus.ready);
+    }
+    if (status === FetchStatus.ready) {
       statusSet(FetchStatus.in_progress);
       GetMediaByUser(
         authState?.userInfo?.username || "",
         {},
         {
-          filter_media_type: "glb",
+          filter_engine_categories:
+            type === AssetType.CHARACTER ? "character" : "object",
         },
       ).then((res: GetMediaListResponse) => {
         if (res.success && res.results) {
@@ -98,11 +108,11 @@ export const ObjectsTab = ({ type }: Props) => {
         }
       });
     }
-  }, [authState, status, type]);
+  }, [authState, cachedTab, currentTab, status, type]);
 
   const assetFilter =
     type === AssetType.CHARACTER ? characterFilter : objectFilter;
-  const items = type === AssetType.CHARACTER ? characterItems : objects;
+  const items = objects;
 
   return (
     <>
@@ -175,7 +185,9 @@ export const ObjectsTab = ({ type }: Props) => {
                   }}
                   debug="objects tab"
                   items={[
-                    ...(type !== AssetType.CHARACTER ? shapeItems.value : []),
+                    ...(type !== AssetType.CHARACTER
+                      ? shapeItems.value
+                      : characterItems.value),
                     ...items.value,
                   ]}
                   assetFilter={assetFilter.value}
@@ -183,6 +195,7 @@ export const ObjectsTab = ({ type }: Props) => {
               </div>
             </div>
           ),
+          type,
         }}
       />
     </>