{(tabs ?? []).map((tab) => {
- if (tab.title === TabTitles.SET_OBJECTS && !showSetsTab) {
+ if (tab.title === TabTitles.OBJECTS_SETS && !showSetsTab) {
return;
}
if (tab.title === TabTitles.IMAGE_PLANE && !showImagePlaneTab) {
return;
}
- if (tab.title === TabTitles.CREATURES && !showCreaturesTab) {
+ if (tab.title === TabTitles.OBJECTS_CREATURES && !showCreaturesTab) {
return;
}
return (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
index eb1cab6827..54fc40956e 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
@@ -10,6 +10,22 @@ interface Props {
item: MediaItem;
}
+const mapObejctType = (mediaType: string) => {
+ const typeCased = mediaType.toLowerCase();
+ switch (typeCased) {
+ case "fbx":
+ case "glb": {
+ return "Mixamo";
+ }
+ case "pmx": {
+ return "MMD";
+ }
+ default: {
+ return typeCased.toUpperCase();
+ }
+ }
+};
+
export const ItemElement = ({ item }: Props) => {
useSignals();
const defaultThumb = `/resources/images/default-covers/${(item.imageIndex || 0) % 24}.webp`;
@@ -23,14 +39,9 @@ export const ItemElement = ({ item }: Props) => {
{item.media_type && (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/AnimeTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/AnimeTab.tsx
new file mode 100644
index 0000000000..ac25bdf214
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/AnimeTab.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { MediaFileAnimationType, TabTitles } from "~/enums";
+import { TabTitle } from "../../sharedComps";
+import { AnimationTab } from "./subpageAnimation";
+import { CharactersTab } from "./subpageCharacters";
+
+export const AnimeTab = () => {
+ const [subPage, setSubPage] = useState<
+ TabTitles.ANIMATION | TabTitles.CHARACTERS
+ >(TabTitles.CHARACTERS);
+
+ return (
+ <>
+
+
+
+
+
+
+ {subPage === TabTitles.ANIMATION && (
+
+ )}
+ {subPage === TabTitles.CHARACTERS && (
+
+ )}
+
+ );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/CartoonsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/CartoonsTab.tsx
new file mode 100644
index 0000000000..8cfd8e6921
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/CartoonsTab.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { twMerge } from "tailwind-merge";
+import { MediaFileAnimationType, TabTitles } from "~/enums";
+import { TabTitle } from "../../sharedComps";
+import { AnimationTab } from "./subpageAnimation";
+import { CharactersTab } from "./subpageCharacters";
+import { characterItems, animationItems } from "~/pages/PageEnigma/signals";
+
+export const CartoonsTab = () => {
+ useSignals();
+
+ const [subPage, setSubPage] = useState<
+ TabTitles.ANIMATION | TabTitles.CHARACTERS
+ >(TabTitles.CHARACTERS);
+
+ return (
+ <>
+
+
+
+
+
+
+ {subPage === TabTitles.CHARACTERS && (
+
+ )}
+ {subPage === TabTitles.ANIMATION && (
+
+ )}
+
+ );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/filterCharacterTypes.ts b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/filterCharacterTypes.ts
new file mode 100644
index 0000000000..ea7f51110a
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/filterCharacterTypes.ts
@@ -0,0 +1,32 @@
+import { FilterMediaType, MediaFileAnimationType } from "~/enums";
+import { MediaItem } from "~/pages/PageEnigma/models";
+
+export const filterMMDCharacters = (item: MediaItem) => {
+ return (
+ item.maybe_animation_type === MediaFileAnimationType.MikuMikuDance ||
+ item.media_type === FilterMediaType.PMD ||
+ item.media_type === FilterMediaType.PMX
+ );
+};
+
+export const filterMixamoCharacters = (item: MediaItem) => {
+ return (
+ item.maybe_animation_type === MediaFileAnimationType.Mixamo ||
+ (item.media_type !== FilterMediaType.PMD &&
+ item.media_type !== FilterMediaType.PMX)
+ );
+};
+
+export const filterMMDAnimations = (item: MediaItem) => {
+ return (
+ item.maybe_animation_type === MediaFileAnimationType.MikuMikuDance ||
+ item.media_type === FilterMediaType.VMD
+ );
+};
+
+export const filterMixamoAnimations = (item: MediaItem) => {
+ return (
+ item.maybe_animation_type === MediaFileAnimationType.Mixamo ||
+ item.media_type !== FilterMediaType.VMD
+ );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/index.ts b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/index.ts
new file mode 100644
index 0000000000..a8cb899772
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/index.ts
@@ -0,0 +1,2 @@
+export * from "./AnimeTab";
+export * from "./CartoonsTab";
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageAnimation.tsx
similarity index 78%
rename from app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationTab.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageAnimation.tsx
index ed43ff986b..50bf7c417b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageAnimation.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
-import { useSignals } from "@preact/signals-react/runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
import {
ANIMATION_FILE_TYPE,
@@ -8,7 +7,6 @@ import {
FilterEngineCategories,
MediaFileAnimationType,
} from "~/enums";
-import { animationItems } from "~/pages/PageEnigma/signals";
import {
Button,
FilterButtons,
@@ -16,10 +14,7 @@ import {
SearchFilter,
UploadModal,
} from "~/components";
-import {
- TabTitle,
- ItemElements,
-} from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
+import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
import { FetchStatus } from "~/pages/PageEnigma/enums";
import {
fetchFeaturedMediaItems,
@@ -28,15 +23,32 @@ import {
fetchUserMediaItems,
fetchUserMediaItemsSearchResults,
isAnyStatusFetching,
-} from "../utilities";
+} from "../../utilities";
import { usePosthogFeatureFlag } from "~/hooks/usePosthogFeatureFlag";
+import {
+ filterMixamoAnimations,
+ filterMMDAnimations,
+} from "./filterCharacterTypes";
+import { MediaItem } from "~/pages/PageEnigma/models";
-export const AnimationTab = () => {
- useSignals();
-
+export const AnimationTab = ({
+ animationType,
+ demoAnimationItems = [],
+}: {
+ animationType: MediaFileAnimationType;
+ demoAnimationItems?: MediaItem[];
+}) => {
const showSearchObjectComponent = usePosthogFeatureFlag(
FeatureFlags.SHOW_SEARCH_OBJECTS,
);
+ const showUploadButton = usePosthogFeatureFlag(FeatureFlags.DEV_ONLY);
+ const filterAnimationType = useMemo(
+ () =>
+ animationType === MediaFileAnimationType.Mixamo
+ ? filterMixamoAnimations
+ : filterMMDAnimations,
+ [animationType],
+ );
const [open, setOpen] = useState(false);
const [searchTermFeatured, setSearchTermFeatured] = useState("");
@@ -76,7 +88,7 @@ export const AnimationTab = () => {
);
const displayedItems =
selectedFilter === AssetFilterOption.FEATURED
- ? [...(featuredAnimations || []), ...animationItems.value]
+ ? [...(featuredAnimations || []), ...demoAnimationItems]
: userAnimations ?? [];
const [currentPage, setCurrentPage] = useState
(0);
@@ -96,10 +108,13 @@ export const AnimationTab = () => {
fetchUserMediaItems({
filterEngineCategories: [FilterEngineCategories.ANIMATION],
setState: (newState: FetchMediaItemStates) => {
+ const filterNewMediaItems = newState.mediaItems
+ ? newState.mediaItems.filter(filterAnimationType)
+ : undefined;
setUserFetch((curr) => ({
status: newState.status,
- mediaItems: newState.mediaItems
- ? newState.mediaItems
+ mediaItems: filterNewMediaItems
+ ? filterNewMediaItems
: curr.mediaItems,
}));
},
@@ -113,10 +128,13 @@ export const AnimationTab = () => {
fetchFeaturedMediaItems({
filterEngineCategories: [FilterEngineCategories.ANIMATION],
setState: (newState: FetchMediaItemStates) => {
+ const filterNewMediaItems = newState.mediaItems
+ ? newState.mediaItems.filter(filterAnimationType)
+ : undefined;
setFeaturedFetch((curr) => ({
status: newState.status,
- mediaItems: newState.mediaItems
- ? newState.mediaItems
+ mediaItems: filterNewMediaItems
+ ? filterNewMediaItems
: curr.mediaItems,
}));
},
@@ -126,7 +144,7 @@ export const AnimationTab = () => {
);
const filterAnimationItems = (searchTerm: string) =>
- animationItems.value.filter((item) =>
+ demoAnimationItems.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()),
);
@@ -197,7 +215,7 @@ export const AnimationTab = () => {
return (
<>
-
+ {/* */}
{
/>
-
+ {showUploadButton && (
+
+ )}
{showSearchObjectComponent && (
{
onClose={() => setOpen(false)}
onSuccess={fetchUserAnimations}
isOpen={open}
+ type={FilterEngineCategories.ANIMATION}
fileTypes={Object.values(ANIMATION_FILE_TYPE)}
title="Upload Animation"
options={{
fileSubtypes: [
- { Mixamo: MediaFileAnimationType.Mixamo },
- { MikuMikuDance: MediaFileAnimationType.MikuMikuDance },
- { MoveAi: MediaFileAnimationType.MoveAi },
- { Rigify: MediaFileAnimationType.Rigify },
- { Rokoko: MediaFileAnimationType.Rokoko },
+ { [animationType]: animationType },
+ // { Mixamo: MediaFileAnimationType.Mixamo },
+ // { MikuMikuDance: MediaFileAnimationType.MikuMikuDance },
+ // { MoveAi: MediaFileAnimationType.MoveAi },
+ // { Rigify: MediaFileAnimationType.Rigify },
+ // { Rokoko: MediaFileAnimationType.Rokoko },
],
hasLength: true,
hasThumbnailUpload: true,
}}
- type={FilterEngineCategories.ANIMATION}
/>
);
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageCharacters.tsx
similarity index 78%
rename from app/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersTab.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageCharacters.tsx
index 822a92d832..4eaefca51a 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AnimationCharacterComboTabs/subpageCharacters.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { useSignals } from "@preact/signals-react/runtime";
import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
import {
@@ -9,7 +9,7 @@ import {
MediaFileAnimationType,
} from "~/enums";
import { FetchStatus } from "~/pages/PageEnigma/enums";
-import { characterItems as demoCharacterItems } from "~/pages/PageEnigma/signals";
+import { MediaItem } from "~/pages/PageEnigma/models";
import {
Button,
FilterButtons,
@@ -17,10 +17,7 @@ import {
SearchFilter,
UploadModal,
} from "~/components";
-import {
- ItemElements,
- TabTitle,
-} from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
+import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/sharedComps";
import { usePosthogFeatureFlag } from "~/hooks/usePosthogFeatureFlag";
import {
fetchFeaturedMediaItems,
@@ -29,14 +26,32 @@ import {
fetchUserMediaItems,
fetchUserMediaItemsSearchResults,
isAnyStatusFetching,
-} from "../utilities";
+} from "../../utilities";
+import {
+ filterMixamoCharacters,
+ filterMMDCharacters,
+} from "./filterCharacterTypes";
-export const CharactersTab = () => {
+export const CharactersTab = ({
+ animationType,
+ demoCharacterItems = [],
+}: {
+ animationType: MediaFileAnimationType;
+ demoCharacterItems?: MediaItem[];
+}) => {
useSignals();
const showSearchObjectComponent = usePosthogFeatureFlag(
FeatureFlags.SHOW_SEARCH_OBJECTS,
);
+ const showUploadButton = usePosthogFeatureFlag(FeatureFlags.DEV_ONLY);
+ const filterCharacterType = useMemo(
+ () =>
+ animationType === MediaFileAnimationType.Mixamo
+ ? filterMixamoCharacters
+ : filterMMDCharacters,
+ [animationType],
+ );
const [openUploadModal, setOpenUploadModal] = useState(false);
@@ -76,7 +91,7 @@ export const CharactersTab = () => {
AssetFilterOption.FEATURED,
);
const allFeaturedCharacters = [
- ...demoCharacterItems.value,
+ ...demoCharacterItems,
...(featuredCharacters ?? []),
];
const displayedItems =
@@ -101,16 +116,19 @@ export const CharactersTab = () => {
fetchUserMediaItems({
filterEngineCategories: [FilterEngineCategories.CHARACTER],
setState: (newState: FetchMediaItemStates) => {
+ const filterNewMediaItems = newState.mediaItems
+ ? newState.mediaItems.filter(filterCharacterType)
+ : undefined;
setUserFetch((curr) => ({
status: newState.status,
- mediaItems: newState.mediaItems
- ? newState.mediaItems
+ mediaItems: filterNewMediaItems
+ ? filterNewMediaItems
: curr.mediaItems,
}));
},
defaultErrorMessage: "Unknown Error in Fetching User Characters",
}),
- [],
+ [filterCharacterType],
);
const fetchFeaturedCharacters = useCallback(
@@ -118,20 +136,23 @@ export const CharactersTab = () => {
fetchFeaturedMediaItems({
filterEngineCategories: [FilterEngineCategories.CHARACTER],
setState: (newState: FetchMediaItemStates) => {
+ const filterNewMediaItems = newState.mediaItems
+ ? newState.mediaItems.filter(filterCharacterType)
+ : undefined;
setFeaturedFetch((curr) => ({
status: newState.status,
- mediaItems: newState.mediaItems
- ? newState.mediaItems
+ mediaItems: filterNewMediaItems
+ ? filterNewMediaItems
: curr.mediaItems,
}));
},
defaultErrorMessage: "Unknown Error in Fetching Featured Characters",
}),
- [],
+ [filterCharacterType],
);
const filterCharacterItems = (searchTerm: string) =>
- demoCharacterItems.value.filter((item) =>
+ demoCharacterItems.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()),
);
@@ -202,7 +223,7 @@ export const CharactersTab = () => {
return (
<>
-
+ {/* */}
{
/>
-
+ {showUploadButton && (
+
+ )}
{showSearchObjectComponent && (
{
options={{
hasThumbnailUpload: true,
fileSubtypes: [
- { Mixamo: MediaFileAnimationType.Mixamo },
- { MikuMikuDance: MediaFileAnimationType.MikuMikuDance },
- { MoveAi: MediaFileAnimationType.MoveAi },
- { Rigify: MediaFileAnimationType.Rigify },
- { Rokoko: MediaFileAnimationType.Rokoko },
+ { [animationType]: animationType },
+ // { Mixamo: MediaFileAnimationType.Mixamo },
+ // { MikuMikuDance: MediaFileAnimationType.MikuMikuDance },
+ // { MoveAi: MediaFileAnimationType.MoveAi },
+ // { Rigify: MediaFileAnimationType.Rigify },
+ // { Rokoko: MediaFileAnimationType.Rokoko },
],
}}
fileTypes={Object.values(CHARACTER_FILE_TYPE)}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/utilities/fetchMediaItems.ts b/app/pages/PageEnigma/comps/SidePanelTabs/utilities/fetchMediaItems.ts
index e9ac03c8a0..5b8cc134b0 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/utilities/fetchMediaItems.ts
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/utilities/fetchMediaItems.ts
@@ -1,4 +1,4 @@
-import { FilterEngineCategories, ToastTypes } from "~/enums";
+import { FilterEngineCategories, FilterMediaType, ToastTypes } from "~/enums";
import { addToast } from "~/signals";
import { FetchStatus } from "~/pages/PageEnigma/enums";
import { MediaFilesApi } from "~/Classes/ApiManager";
@@ -13,6 +13,7 @@ export interface FetchMediaItemStates {
interface fetchMediaItemsInterface {
setState: ({ mediaItems, status }: FetchMediaItemStates) => void;
filterEngineCategories: FilterEngineCategories[];
+ filterMediaType?: FilterMediaType[];
defaultErrorMessage?: string;
searchTerm?: string;
}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/utilities/misc.ts b/app/pages/PageEnigma/comps/SidePanelTabs/utilities/misc.ts
index c8d6a352ea..978b32df5b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/utilities/misc.ts
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/utilities/misc.ts
@@ -40,6 +40,9 @@ export const responseMapping = (
name: item.maybe_title ?? "Unknown",
type: assetType as AssetType,
media_type: item.media_type,
+ maybe_animation_type: item.maybe_animation_type
+ ? item.maybe_animation_type
+ : undefined,
length: ((item.maybe_duration_millis ?? 1000) / 1000) * 60,
version: 1,
...(item.cover_image.maybe_cover_image_public_bucket_path
diff --git a/app/pages/PageEnigma/models/assets.ts b/app/pages/PageEnigma/models/assets.ts
index 1617845284..73c87c846c 100644
--- a/app/pages/PageEnigma/models/assets.ts
+++ b/app/pages/PageEnigma/models/assets.ts
@@ -3,7 +3,7 @@ import { AssetType } from "~/enums";
export interface MediaItem {
version: number;
type: AssetType;
- // maybe_animation_type?: string;
+ maybe_animation_type?: string;
media_type?: string;
media_id: string;
object_uuid?: string;
diff --git a/app/pages/PageEnigma/models/mediaInfo.ts b/app/pages/PageEnigma/models/mediaInfo.ts
index 49cfa1955b..bc9a199a74 100644
--- a/app/pages/PageEnigma/models/mediaInfo.ts
+++ b/app/pages/PageEnigma/models/mediaInfo.ts
@@ -12,7 +12,7 @@ export interface MediaInfo {
token: string;
media_type: MediaFileType;
media_class: MediaFileClass | null;
- // maybe_animation_type: string | null;
+ maybe_animation_type: string | null;
maybe_media_subtype: MediaFileSubtype | null;
maybe_engine_extension: string | null;
maybe_batch_token: string;