diff --git a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
index 26e4957cf1..927fa15f75 100644
--- a/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
+++ b/packages/fakeyou.com/src/components/common/MocapInput/MocapInput.tsx
@@ -5,7 +5,7 @@ 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 { EntityType, 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";
@@ -65,7 +65,7 @@ const MocapInputFull = ({ media }: SlideProps) => {
const MediaPickerEmpty = ({ media, onSelect, open, inputProps, type, user }: EmptySlideProps) => {
const browserClick = () => open({
component: MediaBrowser,
- props: { onSelect, type, username: user?.username || "" }
+ props: { entityType: EntityType.media, onSelect, type, username: user?.username || "" }
});
return <>
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss
new file mode 100644
index 0000000000..a0d864315d
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss
@@ -0,0 +1,109 @@
+@import "scss/colours.scss";
+@import "scss/site-refresh.scss";
+
+
+.fy-slide-frame {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.fy-entity-input {
+ @include panel;
+ border-radius: .5rem;
+ overflow: hidden;
+ position: relative;
+ // background-color: $panel;
+}
+
+.fy-entity-input-square {
+ aspect-ratio: 1/1;
+ height: 300px;
+
+ .fy-entity-input-empty-controls {}
+}
+
+.fy-entity-input-landscape {
+ width: 100%;
+ aspect-ratio: 4/3;
+ max-height: 66vh;
+}
+
+.fy-entity-input-empty, .fy-entity-input-full {
+ // position: relative;
+ // overflow: hidden;
+
+ .fy-entity-input-icon {
+ position: absolute;
+ height: 80%;
+ opacity: 75%;
+ // background-color: blue;
+ margin: auto;
+ inset: 0;
+
+ path { fill: $panel-inner-border}
+ }
+
+}
+
+.fy-entity-input-label-icon {
+ margin-right: .5rem;
+ height: 1.25rem;
+}
+
+.fy-entity-input-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-entity-input-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-entity-input-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-entity-input-row {
+
+ height: 100%;
+ }
+
+ .fy-entity-input-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/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
new file mode 100644
index 0000000000..ec306800b6
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx
@@ -0,0 +1,159 @@
+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 { EntityType, MediaFilterProp, WeightFilterProp } 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 "./EntityInput.scss";
+
+interface Props {
+ label?: string,
+ onChange?: any,
+ mediaType?: MediaFilterProp,
+ aspectRatio?: "square" | "landscape" | "portrait",
+ weightType?: WeightFilterProp,
+}
+
+interface SlideProps {
+ media?: MediaFile
+};
+
+interface EmptySlideProps extends SlideProps {
+ entityType: EntityType,
+ filterType: MediaFilterProp | WeightFilterProp,
+ inputProps?: any,
+ onSelect: any,
+ open: any,
+ user: any
+};
+
+interface AniProps {
+ animating: boolean,
+ className: string,
+ isLeaving: boolean,
+ render: any,
+ style: any
+}
+
+const MediaBusy = () => {
+ return ;
+};
+
+const MocapInputFull = ({ media }: SlideProps) => {
+ const bucketConfig = new BucketConfig();
+ const bvhUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : "";
+
+ return <>
+
+
+ Your file
+
+ >;
+};
+
+const MediaPickerEmpty = ({ entityType, filterType, media, onSelect, open, inputProps, user }: EmptySlideProps) => {
+ const browserClick = () => open({
+ component: MediaBrowser,
+ props: { entityType, filterType, onSelect, username: user?.username || "" }
+ });
+
+ return <>
+
+
+
+ <>
+
+ Upload, click or drag here
+ >
+
+
+
+ Choose from your media
+
+
+ >;
+}
+
+const AniMod = ({ animating, className, isLeaving, render: Render, style, ...rest }: AniProps) =>
+
+ ;
+
+export default function EntityInput({ aspectRatio = "square", label, onChange, mediaType, weightType }: Props) {
+ const entityType = mediaType ? EntityType.media : weightType ? EntityType.weights : EntityType.unknown;
+ const filterType = mediaType || weightType || "all";
+ 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 <>
+
+
+ {
+ // media ?
:
+ transitions((style: any, i: number, state: any) => {
+ let isLeaving = state.phase === "leave";
+ let sharedProps = { animating, isLeaving, media, style };
+
+ return [
+
,
+
,
+
+ ][i];
+
+ })
+ }
+
+ >;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/index.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/index.tsx
new file mode 100644
index 0000000000..333325f50a
--- /dev/null
+++ b/packages/fakeyou.com/src/components/entities/EntityInput/index.tsx
@@ -0,0 +1 @@
+export { default } from "./EntityInput";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
index 9be33ff4bc..2a6e3eaddc 100644
--- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
+++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx
@@ -8,11 +8,33 @@ export enum MediaFilters {
fbx
}
-export type MediaFilterProp = keyof typeof MediaFilters;
+export enum WeightsFilters {
+ all,
+ hifigan_tt2,
+ sd_1,
+ "sd_1.5",
+ sdxl,
+ so_vits_svc,
+ tt2,
+ loRA,
+ vall_e
+}
-export const MediaFilterOptions = (t = (v:string) => v) => Object.values(MediaFilters)
+export type MediaFilterProp = keyof typeof MediaFilters;
+export type WeightFilterProp = keyof typeof WeightsFilters;
+
+export enum EntityType {
+ unknown,
+ media,
+ weights
+}
+
+export const EntityFilterOptions = ( mode: EntityType, t = (v:string) => v) => {
+ const filters = [{},MediaFilters,WeightsFilters][mode];
+ return mode ? Object.values(filters)
.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
+ }) : [];
+};
\ 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 77a518e48a..7a0662e0d6 100644
--- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
+++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx
@@ -1,10 +1,9 @@
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 AudioCard from "components/common/Card/AudioCard";
import { ImagePreview, MocapPreview, VideoPreview } from '../CardPreviews';
import { AudioCard, OverlayCard, CardWrapper } from "components/entities";
+import { EntityType } from "components/entities/EntityTypes";
interface MediaCardsProps {
props: any,
@@ -12,6 +11,7 @@ interface MediaCardsProps {
}
interface Props {
+ entityType: EntityType,
list: MediaFile[],
success?: boolean
}
@@ -31,20 +31,32 @@ const MediaCards = ({ props, type }: MediaCardsProps) => {
}
};
-export default function MediaList({ list, success, ...rest }: Props) {
+const WeightsCards = ({ props, type }: MediaCardsProps) => {
+ switch (type) {
+ default:
+ return Unsupported media type
;
+ }
+};
+
+export default function MediaList({ entityType, list, success, ...rest }: Props) {
const gridRef = useRef(null);
return list.length === 0 && success ?
No media created yet.
:
- { list.map((data: MediaFile, key: number) => {
+ { list.map((data: any, key: number) => {
let props = { data, type: "media", ...rest };
return
-
+ {
+ [ null,
+ ,
+
+ ][entityType]
+ }
;
}) }
;
diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx
index f33c0adf40..dc973c453e 100644
--- a/packages/fakeyou.com/src/components/entities/index.tsx
+++ b/packages/fakeyou.com/src/components/entities/index.tsx
@@ -1,6 +1,7 @@
import AudioCard from "./AudioCard";
import CardWrapper from "./CardWrapper";
+import EntityInput from "./EntityInput";
import MediaList from "./MediaList";
import OverlayCard from "./OverlayCard";
-export { AudioCard, CardWrapper, MediaList, OverlayCard };
\ No newline at end of file
+export { AudioCard, CardWrapper, EntityInput, MediaList, OverlayCard };
\ 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
index f5f88d83b2..4c6eeb3ba8 100644
--- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
@@ -1,12 +1,14 @@
import React, { useState } from "react";
import { MediaList } from "components/entities";
-import { MediaFilterOptions, MediaFilterProp } from "components/entities/EntityTypes";
+import { EntityType, EntityFilterOptions, MediaFilterProp, WeightFilterProp } 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 { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
import { useListContent, useRatings } from "hooks";
import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
import { faArrowDownWideShort, faFilter, faXmark } from "@fortawesome/pro-solid-svg-icons";
@@ -14,26 +16,27 @@ import prepFilter from "resources/prepFilter";
import "./MediaBrowser.scss";
interface Props {
+ entityType: EntityType,
handleClose: any,
mediaToken: string,
onSelect?: any,
- type?: MediaFilterProp,
+ filterType?: MediaFilterProp | WeightFilterProp,
username: string,
}
-export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSelect, type, username }: Props) {
+export default function MediaBrowser({ entityType, filterType: inputFilter, mediaToken, handleClose = () => {}, onSelect, username }: Props) {
+ console.log("😎",entityType);
const ratings = useRatings();
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
- const [mediaType, mediaTypeSet] = useState(type || "all");
- const [list, listSet] = useState([]);
- const media = useListContent({
+ const [filterType, filterTypeSet] = useState(inputFilter || "all");
+ const [list, listSet] = useState([]);
+ const entities = useListContent({
addQueries: {
page_size: 24,
- ...prepFilter(mediaType, "filter_media_type"),
+ ...prepFilter(filterType, ["","filter_media_type","maybe_scoped_weight_type"][entityType]),
},
- addSetters: { mediaTypeSet },
- // debug: "profile media",
- fetcher: GetMediaByUser,
+ addSetters: { filterTypeSet },
+ fetcher: [() => {},GetMediaByUser,GetWeightsByUser][entityType] || GetMediaByUser,
list,
listSet,
onInputChange: () => setShowMasonryGrid(false),
@@ -43,18 +46,18 @@ export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSel
setShowMasonryGrid(true);
},
requestList: true,
- urlParam: username,
+ urlParam: "echelon",
urlUpdate: false
});
const handlePageClick = (selectedItem: { selected: number }) => {
- media.pageChange(selectedItem.selected);
+ entities.pageChange(selectedItem.selected);
};
const paginationProps = {
onPageChange: handlePageClick,
- pageCount: media.pageCount,
- currentPage: media.page,
+ pageCount: entities.pageCount,
+ currentPage: entities.page,
};
const sortOptions = [
@@ -71,7 +74,7 @@ export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSel
return <>
-
Media
+ { ["","Media","Weights"][entityType] }
handleClose() }}/>
@@ -80,22 +83,22 @@ export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSel
icon: faArrowDownWideShort,
options: sortOptions,
name: "sort",
- onChange: media.onChange,
- value: media.sort,
+ onChange: entities.onChange,
+ value: entities.sort,
}}
/>
- { (!type || type === "all") &&
}
- { media.isLoading ? (
+ { entities.isLoading ? (
{Array.from({ length: 12 }).map((_, index) => (
@@ -105,7 +108,7 @@ export default function MediaBrowser({ mediaToken, handleClose = () => {}, onSel
<>
{ showMasonryGrid && (
-
+
) }
>
diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
index 59f7369eaf..ec88d331fd 100644
--- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
+++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
@@ -33,6 +33,7 @@ export default function useListContent({
urlParam = "",
urlUpdate = true
}: Props) {
+ console.log("💎",fetcher);
const { pathname, search: locSearch } = useLocation();
const history = useHistory();
const urlQueries = new URLSearchParams(locSearch);
diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
index bb9471247b..2d970a6a6d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx
@@ -1,5 +1,6 @@
import React, { useState } from "react";
-import { Button, MocapInput } from "components/common";
+import { EntityInput } from "components/entities";
+import { Button } from "components/common";
// import { useInferenceJobs } from "hooks";
// import InferenceJobsList from "components/layout/InferenceJobsList";
// import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing";
@@ -28,7 +29,7 @@ export default function DevMediaInput({ value }: Props) {
{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }
-
+
{ mediaToken }