diff --git a/app/api/media_files/GetMediaByUser.ts b/app/api/media_files/GetMediaByUser.ts index 95f86c907c..faa53ca8f9 100644 --- a/app/api/media_files/GetMediaByUser.ts +++ b/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< diff --git a/app/api/media_files/UploadEngineAsset.ts b/app/api/media_files/UploadEngineAsset.ts index 05d4c40ccf..096d7d45b2 100644 --- a/app/api/media_files/UploadEngineAsset.ts +++ b/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; } diff --git a/app/components/FileWrapper/FileWrapper.tsx b/app/components/FileWrapper/FileWrapper.tsx index 3328dc29e5..df15698710 100644 --- a/app/components/FileWrapper/FileWrapper.tsx +++ b/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, }} /> diff --git a/app/components/UploadModal/UploadModal.tsx b/app/components/UploadModal/UploadModal.tsx index ec649f3f08..080b5627e6 100644 --- a/app/components/UploadModal/UploadModal.tsx +++ b/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, diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx index 232bfca1f5..194a215ffa 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx +++ b/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) => { ), + type, }} />