From 34849ab4ef73a4f7c6ceba6f41ba30f7e809e959 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 6 Feb 2024 23:26:39 -0800 Subject: [PATCH] weight card revision/type consolidation --- .../src/components/common/Label/Label.tsx | 30 ++++------- .../entities/EntityInput/EntityInput.scss | 10 ++++ .../entities/EntityInput/EntityInput.tsx | 41 +++++++++----- .../src/components/entities/EntityTypes.tsx | 3 +- .../entities/MediaList/MediaList.tsx | 6 ++- .../entities/WeightCard/WeightCard.tsx | 54 +++++++++++++++++++ .../components/entities/WeightCard/index.tsx | 1 + .../src/components/entities/index.tsx | 3 +- .../modals/MediaBrowser/MediaBrowser.tsx | 8 +-- .../providers/ModalProvider/ModalProvider.tsx | 5 +- .../hooks/useListContent/useListContent.tsx | 1 - .../EngineCompositor/EngineCompositor.scss | 10 +--- .../view/pages/dev_upload/DevMediaInput.tsx | 40 +++++++------- 13 files changed, 137 insertions(+), 75 deletions(-) create mode 100644 packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx create mode 100644 packages/fakeyou.com/src/components/entities/WeightCard/index.tsx diff --git a/packages/fakeyou.com/src/components/common/Label/Label.tsx b/packages/fakeyou.com/src/components/common/Label/Label.tsx index 8950320fcd..e20984c47b 100644 --- a/packages/fakeyou.com/src/components/common/Label/Label.tsx +++ b/packages/fakeyou.com/src/components/common/Label/Label.tsx @@ -14,24 +14,14 @@ export default function Label({ required, disabled, }: Props) { - return ( -
- {label ? ( - - ) : null} - {invalidReason ? ( - - {invalidReason} - - ) : null} -
- ); + return label ?
+ + { invalidReason ? ( + + {invalidReason} + + ) : null } +
: null; } diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss index a0d864315d..72b4355d6f 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.scss @@ -106,4 +106,14 @@ label { } } + + .fy-entity-input-upload-detail { + span { + opacity: .66; + display: block; + font-size: .75rem; + line-height: 1em; + height: .75rem; + } + } } \ 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 index ec306800b6..3224678abb 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -8,7 +8,7 @@ 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 { faDiagramSankey, faFile, faFileArrowUp, faGrid, faImage, faPersonWalking, faWaveform } 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"; @@ -17,6 +17,7 @@ import "./EntityInput.scss"; interface Props { label?: string, onChange?: any, + owner?: string, mediaType?: MediaFilterProp, aspectRatio?: "square" | "landscape" | "portrait", weightType?: WeightFilterProp, @@ -32,6 +33,7 @@ interface EmptySlideProps extends SlideProps { inputProps?: any, onSelect: any, open: any, + owner: string, user: any }; @@ -64,24 +66,37 @@ const MocapInputFull = ({ media }: SlideProps) => { ; }; -const MediaPickerEmpty = ({ entityType, filterType, media, onSelect, open, inputProps, user }: EmptySlideProps) => { +const MediaPickerEmpty = ({ entityType, filterType, media, onSelect, open, owner, inputProps, user }: EmptySlideProps) => { const browserClick = () => open({ component: MediaBrowser, - props: { entityType, filterType, onSelect, username: user?.username || "" } + props: { entityType, filterType, onSelect, owner, username: user?.username || "" } }); + const mediaIcons = () => { + switch (filterType) { + case "audio": return faWaveform; + case "image": return faImage; + case "bvh": return faPersonWalking; + default: return faFile; + } + } + return <> - +
- - <> - - Upload, click or drag here - - + { entityType === EntityType.media && + + <> + +
+ Upload, click or drag here + { filterType !== "all" && { filterType } files supported } +
+ + }
- Choose from your media + Choose from your { ["","media","weights"][entityType] }
; @@ -94,7 +109,7 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res ; -export default function EntityInput({ aspectRatio = "square", label, onChange, mediaType, weightType }: Props) { +export default function EntityInput({ aspectRatio = "square", label, onChange, owner, mediaType, weightType }: Props) { const entityType = mediaType ? EntityType.media : weightType ? EntityType.weights : EntityType.unknown; const filterType = mediaType || weightType || "all"; const { search } = useLocation(); @@ -149,7 +164,7 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, m return [ , , - + ][i]; }) diff --git a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx index 2a6e3eaddc..cb36434825 100644 --- a/packages/fakeyou.com/src/components/entities/EntityTypes.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityTypes.tsx @@ -11,6 +11,7 @@ export enum MediaFilters { export enum WeightsFilters { all, hifigan_tt2, + rvc_v2, sd_1, "sd_1.5", sdxl, @@ -35,6 +36,6 @@ export const EntityFilterOptions = ( mode: EntityType, t = (v:string) => v) => { .filter(val => isNaN(Number(val))) .map((value) => { if (typeof value === "string") return { value, label: t(value) } - return { label: "", value: "" }; + return { label: "all", value: "all" }; }) : []; }; \ 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 7a0662e0d6..2a5522647f 100644 --- a/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx +++ b/packages/fakeyou.com/src/components/entities/MediaList/MediaList.tsx @@ -2,7 +2,7 @@ import React, { useRef } from "react"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import { ImagePreview, MocapPreview, VideoPreview } from '../CardPreviews'; -import { AudioCard, OverlayCard, CardWrapper } from "components/entities"; +import { AudioCard, OverlayCard, CardWrapper, WeightCard } from "components/entities"; import { EntityType } from "components/entities/EntityTypes"; interface MediaCardsProps { @@ -33,6 +33,10 @@ const MediaCards = ({ props, type }: MediaCardsProps) => { const WeightsCards = ({ props, type }: MediaCardsProps) => { switch (type) { + case "rvc_v2": + return ; + case "tt2": + return ; default: return
Unsupported media type
; } diff --git a/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx b/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx new file mode 100644 index 0000000000..cc8f31cd6f --- /dev/null +++ b/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import moment from "moment"; +import { MakeRatingsProps } from "hooks/useRatings"; +import WeightCoverImage from "components/common/WeightCoverImage"; +import CardBadge from "../CardBadge"; +import CardFooter from "../CardFooter"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; + +interface Props { + data: any, + makeRatingsProps?: MakeRatingsProps, + showCover?: boolean + showCreator?: boolean +} + +export default function WeightCard({ data, makeRatingsProps, showCover = true, showCreator }: Props) { + const { cover_image, created_at, details, maybe_creator, title, token, weight_type } = data || {} + const timeCreated = moment( created_at || "").fromNow(); + const path = cover_image.maybe_cover_image_public_bucket_path || details?.maybe_weight_data?.maybe_cover_image_public_bucket_path; + const bucketConfig = new BucketConfig(); + const coverImage = bucketConfig.getCdnUrl(path, 110, 100); + + return <> +
+ {showCover && ( + + )} + +
+ + +
+
+
+ { title || details.maybe_weight_data.title} +
+

{ timeCreated }

+
+
+
+
+ + ; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/entities/WeightCard/index.tsx b/packages/fakeyou.com/src/components/entities/WeightCard/index.tsx new file mode 100644 index 0000000000..51be8d0bee --- /dev/null +++ b/packages/fakeyou.com/src/components/entities/WeightCard/index.tsx @@ -0,0 +1 @@ +export { default } from "./WeightCard"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/entities/index.tsx b/packages/fakeyou.com/src/components/entities/index.tsx index dc973c453e..043d89b296 100644 --- a/packages/fakeyou.com/src/components/entities/index.tsx +++ b/packages/fakeyou.com/src/components/entities/index.tsx @@ -3,5 +3,6 @@ import CardWrapper from "./CardWrapper"; import EntityInput from "./EntityInput"; import MediaList from "./MediaList"; import OverlayCard from "./OverlayCard"; +import WeightCard from "./WeightCard"; -export { AudioCard, CardWrapper, EntityInput, MediaList, OverlayCard }; \ No newline at end of file +export { AudioCard, CardWrapper, EntityInput, MediaList, OverlayCard, WeightCard }; \ 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 4c6eeb3ba8..37400276ae 100644 --- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx +++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx @@ -20,12 +20,12 @@ interface Props { handleClose: any, mediaToken: string, onSelect?: any, + owner?: string, filterType?: MediaFilterProp | WeightFilterProp, username: string, } -export default function MediaBrowser({ entityType, filterType: inputFilter, mediaToken, handleClose = () => {}, onSelect, username }: Props) { - console.log("😎",entityType); +export default function MediaBrowser({ entityType, filterType: inputFilter, mediaToken, handleClose = () => {}, onSelect, owner, username }: Props) { const ratings = useRatings(); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [filterType, filterTypeSet] = useState(inputFilter || "all"); @@ -46,7 +46,7 @@ export default function MediaBrowser({ entityType, filterType: inputFilter, medi setShowMasonryGrid(true); }, requestList: true, - urlParam: "echelon", + urlParam: owner || username, urlUpdate: false }); @@ -74,7 +74,7 @@ export default function MediaBrowser({ entityType, filterType: inputFilter, medi return <>
-

{ ["","Media","Weights"][entityType] }

+

{ ["",`${ owner ? owner + "'s " : "" }Media`,"Weights"][entityType] }

handleClose() }}/>
diff --git a/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx b/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx index 4ad7b68506..e003c45a34 100644 --- a/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx +++ b/packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx @@ -13,10 +13,7 @@ interface ModalConfig { export default function ModalProvider({ children }: Props) { const [modalState,modalStateSet] = useState(null); - const open = (cfg: ModalConfig) => { - console.log("🪬",cfg); - modalStateSet(cfg); - }; + const open = (cfg: ModalConfig) => modalStateSet(cfg); const close = () => modalStateSet(null); return diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index ec88d331fd..59f7369eaf 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -33,7 +33,6 @@ 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/EngineCompositor/EngineCompositor.scss b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss index d5cddc989a..c10af58fbc 100644 --- a/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss +++ b/packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss @@ -1,12 +1,10 @@ .fy-engine-compositor { - // margin: 1rem; padding: 1rem; .engine-compositor-container { padding: 1rem; header { - // background: blue; margin-bottom: 1.5rem; display: flex; align-items: center; @@ -14,16 +12,12 @@ width: 100%; } - h2 { margin-bottom: 0; } + h2, .fy-temp-select, .fy-input { margin-bottom: 0; } } .compositor-content { display: flex; gap: 1rem; - // padding: 1rem; - > * { - width: 100%; - // background: red; - } + > * { width: 100%; } } } \ No newline at end of file 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 2d970a6a6d..4a079ab0de 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,11 +1,7 @@ import React, { useState } from "react"; 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"; -// import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -// import { v4 as uuidv4 } from "uuid"; +import { EntityFilterOptions, EntityType, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes"; +import { Button, SegmentButtons, TempInput, TempSelect } from "components/common"; interface Props { value?: any; @@ -13,34 +9,34 @@ interface Props { export default function DevMediaInput({ value }: Props) { const [mediaToken,mediaTokenSet] = useState(); + const [mediaType,mediaTypeSet] = useState("all"); + const [weightType,weightTypeSet] = useState("all"); + const [entityType,entityTypeSet] = useState(EntityType.media); + const [owner,ownerSet] = useState(""); const onChange = ({ target }: any) => mediaTokenSet(target.value); - // const inferenceJobs = useInferenceJobs(FrontendInferenceJobType.EngineComposition); - // const failures = (fail = "") => { - // switch (fail) { - // default: - // return "Uknown failure"; - // } - // }; + const options = [{ label: "Media", value: EntityType.media },{ label: "Weights", value: EntityType.weights }]; + const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value); return

{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }

+ entityTypeSet(target.value), options, value: entityType }}/> + ownerSet(target.value), placeholder: "User" }}/> +
- +
{ mediaToken }
- { - // - }
; }; \ No newline at end of file