diff --git a/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx index 206b841044..f44214a189 100644 --- a/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx +++ b/packages/fakeyou.com/src/components/common/Accordion/Accordion.tsx @@ -11,6 +11,7 @@ import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; import { animated, useSpring } from "@react-spring/web"; interface AccordionProps { + className?: string; children: React.ReactNode; } @@ -96,7 +97,7 @@ function AccordionItem({ ); } -function Accordion({ children }: AccordionProps) { +function Accordion({ children, className }: AccordionProps) { // Extract titles of items that should be initially open const defaultOpenTitles = React.Children.toArray(children) .filter((child: any) => child.props.defaultOpen) @@ -115,7 +116,9 @@ function Accordion({ children }: AccordionProps) { return ( -
{children}
+
+ {children} +
); } diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index 85adf2974a..4b00df8773 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -12,7 +12,7 @@ import Button from "components/common/Button"; import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import WeightCoverImage from "components/common/WeightCoverImage"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import useToken from "hooks/useToken"; +// import useToken from "hooks/useToken"; import getCardUrl from "../getCardUrl"; interface AudioCardProps { @@ -24,7 +24,7 @@ interface AudioCardProps { source?: string; type: "media" | "weights"; inSelectModal?: boolean; - onResultSelect?: () => void; + onResultSelect?: (data:{token: string, title:string}) => void; } export default function AudioCard({ @@ -38,7 +38,7 @@ export default function AudioCard({ inSelectModal = false, onResultSelect, }: AudioCardProps) { - const { setToken, setWeightTitle } = useToken(); + // const { setToken, setWeightTitle } = useToken(); const linkUrl = getCardUrl(data,source,type); const history = useHistory(); @@ -47,10 +47,13 @@ export default function AudioCard({ }; const handleSelectModalResultSelect = () => { - if (inSelectModal) { - setToken(data.weight_token); - setWeightTitle && setWeightTitle(data.title); - onResultSelect && onResultSelect(); + console.log(`inSelectModal : ${inSelectModal}`); + console.log(`onResultSelect : ${onResultSelect}`); + if (inSelectModal && onResultSelect) { + onResultSelect({ + token: data.weight_token, + title: data.title + }); } }; diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index 6fb9d1cdee..2e42cb8cfb 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -10,7 +10,7 @@ import Button from "components/common/Button"; import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import useToken from "hooks/useToken"; +// import useToken from "hooks/useToken"; import getCardUrl from "../getCardUrl"; interface ImageCardProps { @@ -21,7 +21,7 @@ interface ImageCardProps { source?: string; type: "media" | "weights"; inSelectModal?: boolean; - onResultSelect?: () => void; + onResultSelect?: (data:{token: string, title:string}) => void; } export default function ImageCard({ @@ -35,18 +35,22 @@ export default function ImageCard({ onResultSelect, }: ImageCardProps) { const history = useHistory(); - const { setToken, setWeightTitle } = useToken(); + // const { setToken, setWeightTitle } = useToken(); const linkUrl = getCardUrl(data,source,type); const handleInnerClick = (event: any) => { + console.log("handleInnderClick") event.stopPropagation(); }; const handleSelectModalResultSelect = () => { + console.log("handleSelectModalResultSelect") if (inSelectModal) { - setToken(data.weight_token); - setWeightTitle && setWeightTitle(data.title); - onResultSelect && onResultSelect(); + + onResultSelect && onResultSelect({ + token: data.weight_token, + title: data.title + }); } }; diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx index d30bac3723..ea1858410a 100644 --- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx @@ -9,7 +9,6 @@ import Button from "components/common/Button"; import CreatorName from "../CreatorName"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import { Link } from "react-router-dom"; -import useToken from "hooks/useToken"; import getCardUrl from "../getCardUrl"; interface VideoCardProps { @@ -19,7 +18,7 @@ interface VideoCardProps { source?: string; type: "media" | "weights"; inSelectModal?: boolean; - onResultSelect?: () => void; + onResultSelect?: (data:{token: string, title:string}) => void; } export default function VideoCard({ @@ -31,7 +30,6 @@ export default function VideoCard({ inSelectModal = false, onResultSelect, }: VideoCardProps) { - const { setToken, setWeightTitle } = useToken(); const linkUrl = getCardUrl(data,source,type); const handleInnerClick = (event: any) => { @@ -39,10 +37,8 @@ export default function VideoCard({ }; const handleSelectModalResultSelect = () => { - if (inSelectModal) { - setToken(data.weight_token || data.token); - setWeightTitle && setWeightTitle(data.title); - onResultSelect && onResultSelect(); + if (inSelectModal && onResultSelect) { + onResultSelect(data); } }; @@ -137,55 +133,6 @@ export default function VideoCard({ )} - - {/* {type === "weights" && ( - <> - {data.weight_name} -
-
- -
-
- -
-
- -
-
-
- {data.weight_name} -
-

{timeAgo}

-
- -
-
-
-
- - )} */} ); diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx index 6c84003cfd..840dfcc60b 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx @@ -10,7 +10,7 @@ import { ListMediaFiles } from "@storyteller/components/src/api/media_files/List interface SelectMediaListProps { mediaType: string; listKey: string; - onResultSelect?: () => void; + onResultSelect?: (data:{token:string, title:string}) => void; } export default function SelectMediaList({ diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx index b4e6e8dba1..d30c4c57c3 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx @@ -4,7 +4,6 @@ import Modal from "../Modal"; import NonRouteTabs from "../Tabs/NonRouteTabs"; import Input from "../Input"; import Button from "../Button"; -import useToken from "hooks/useToken"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import SelectMediaList from "./SelectMediaList"; import SelectWeightsList from "./SelectWeightsList"; @@ -21,7 +20,10 @@ interface SelectModalProps { label?: string; tabs: TabConfig[]; modalTitle?: string; - onSelect?: (token: string) => void; + onSelect?: (data:{ + token: string, + title: string, + }) => void; required?: boolean; } @@ -34,8 +36,8 @@ const SelectModal = memo( required, }: SelectModalProps) => { const [isModalOpen, setIsModalOpen] = useState(false); - const { token, setToken, weightTitle, setWeightTitle } = useToken(); - const [selectedValue, setSelectedValue] = useState(""); + const initialValue = {token:"", title:""}; + const [selectedValue, setSelectedValue] = useState(initialValue); const [activeTab, setActiveTab] = useState(tabs[0].tabKey); const [mediaType, setMediaType] = useState( tabs[0].mediaTypeFilter || "all" @@ -51,19 +53,6 @@ const SelectModal = memo( setWeightType(currentTab?.weightTypeFilter || "all"); }, [activeTab, tabs]); - useEffect(() => { - if (token && token !== selectedValue && onSelect) { - setSelectedValue(token); - onSelect(token); - } else if (weightTitle && weightTitle !== selectedValue && onSelect) { - setSelectedValue(weightTitle); - onSelect(weightTitle); - } - - console.log("token", token, "weightTitle", weightTitle); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [token, weightTitle]); - const openModal = () => { setIsModalOpen(true); }; @@ -73,10 +62,18 @@ const SelectModal = memo( }; const handleRemove = () => { - setWeightTitle && setWeightTitle(""); - setToken(""); + setSelectedValue(initialValue); }; + const handleOnSelect = (data:{token:string, title:string}) => { + console.log("selct modal handleOnSelect") + console.log(data); + console.log(data.title); + setSelectedValue({token: data.token, title: data.title || ""}); + if (onSelect) onSelect(data); + closeModal(); + } + const searchTabs = tabs.map(tab => ({ label: tab.label, content: tab.searcher ? ( @@ -92,14 +89,14 @@ const SelectModal = memo( )} {tab.type === "weights" && ( )} @@ -122,10 +119,12 @@ const SelectModal = memo( disabled={true} className="w-100" placeholder="None selected" - value={weightTitle ? weightTitle : token || ""} + value={selectedValue.title !=="" + ? selectedValue.title + : selectedValue.token || ""} /> -
); + }else if (pageState.status === FILE_UPLOADED){ + return( + + ) } return ; } diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx index bdfd91ceb4..5d8bd7713c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx @@ -20,8 +20,8 @@ export default function TabContentLibrary({ payload: { mediaFileToken: token }, }); }; - const handleOnSelect = (token: string) => { - setToken(token); + const handleOnSelect = (data:{token:string,title:string}) => { + setToken(data.token); }; return ( diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx index 05218c3a0a..3e629a9655 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx @@ -1,16 +1,17 @@ import React, { useRef, useState, memo } from "react"; import { + Accordion, Button, Input, Label, NumberSlider, Panel, SegmentButtons, + SelectModal, TempSelect, TempTextArea, } from "components/common"; import { onChanger } from "resources"; -import Accordion from "components/common/Accordion"; import { faRectangleLandscape, faRectanglePortrait, @@ -23,7 +24,6 @@ import { EnqueueImageGenIsError, } from "@storyteller/components/src/api/image_generation/EnqueueImageGen"; import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -import SelectModal from "components/common/SelectModal/SelectModal"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import PremiumLock from "components/PremiumLock"; @@ -46,12 +46,11 @@ function SdInferencePanel({ const [loraToken, setLoraToken] = useState(null); const [weightToken, setWeightToken] = useState(sd_model_token); - const handleOnWeightSelect = (token: string) => { - setWeightToken(token); + const handleOnWeightSelect = (data:{token:string,title:string}) => { + setLoraToken(data.token); }; - - const handleOnSelect = (token: string) => { - setLoraToken(token); + const handleOnSelect = (data:{token:string,title:string}) => { + setLoraToken(data.token); }; const [isEnqueuing, setIsEnqueuing] = useState(false);