diff --git a/src/website/packages/components/src/api/index.tsx b/src/website/packages/components/src/api/index.tsx index cdfa1d7034..888a89a970 100644 --- a/src/website/packages/components/src/api/index.tsx +++ b/src/website/packages/components/src/api/index.tsx @@ -1,23 +1,13 @@ import { FetchStatus } from "./_common/SharedFetchTypes"; -import { - MediaFileType, - GetMediaByUser -} from "./media_files"; -import { - Weight, - ListWeights -} from "./weights"; -import { - GetBookmarksByUser -} from "./bookmarks/GetBookmarksByUser"; +import { MediaFileType, GetMediaByUser } from "./media_files"; +import { Weight, ListWeights, ListFeaturedWeights } from "./weights"; +import { GetBookmarksByUser } from "./bookmarks/GetBookmarksByUser"; -export type{ - MediaFileType, - Weight -} +export type { MediaFileType, Weight }; export { FetchStatus, GetBookmarksByUser, GetMediaByUser, - ListWeights -}; \ No newline at end of file + ListWeights, + ListFeaturedWeights, +}; diff --git a/src/website/packages/components/src/api/weights/GetWeight.ts b/src/website/packages/components/src/api/weights/GetWeight.ts index fce94a1ab8..43d84836a4 100644 --- a/src/website/packages/components/src/api/weights/GetWeight.ts +++ b/src/website/packages/components/src/api/weights/GetWeight.ts @@ -25,6 +25,7 @@ export interface Weight { }; }; version: number; + is_featured: boolean; } export interface GetWeightRequest {} diff --git a/src/website/packages/components/src/api/weights/ListFeaturedWeights.ts b/src/website/packages/components/src/api/weights/ListFeaturedWeights.ts new file mode 100644 index 0000000000..fd8da39934 --- /dev/null +++ b/src/website/packages/components/src/api/weights/ListFeaturedWeights.ts @@ -0,0 +1,25 @@ +import MakeRequest from "../MakeRequest"; +import { Weight } from "./GetWeight"; +import { LazyPagination } from "../_common/SharedFetchTypes"; + +export interface ListFeaturedWeightsRequest {} + +export interface ListFeaturedWeightsResponse { + pagination: LazyPagination; + success: boolean; + results: Weight[]; +} + +export interface ListFeaturedWeightsParams { + page_index: number; +} + +export const ListFeaturedWeights = MakeRequest< + string, + ListFeaturedWeightsRequest, + ListFeaturedWeightsResponse, + ListFeaturedWeightsParams +>({ + method: "GET", + routingFunction: () => `/v1/weights/list_featured`, +}); diff --git a/src/website/packages/components/src/api/weights/index.tsx b/src/website/packages/components/src/api/weights/index.tsx index 92a219c89c..9ac7337f40 100644 --- a/src/website/packages/components/src/api/weights/index.tsx +++ b/src/website/packages/components/src/api/weights/index.tsx @@ -1,5 +1,6 @@ import { ListWeights } from "./ListWeights"; import { Weight } from "./GetWeight"; +import { ListFeaturedWeights } from "./ListFeaturedWeights"; export type { Weight }; -export { ListWeights }; \ No newline at end of file +export { ListWeights, ListFeaturedWeights }; diff --git a/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index 3bbfd3e230..41babc55ad 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -140,8 +140,8 @@ export default function AudioCard({ {showCover && ( )} diff --git a/src/website/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx b/src/website/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx index 0c2738334e..fc97108867 100644 --- a/src/website/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx +++ b/src/website/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx @@ -32,13 +32,25 @@ export default function WeightCard({ weight_type, } = data || {}; const timeCreated = moment(created_at || "").fromNow(); - const path = - cover_image.maybe_cover_image_public_bucket_path || - details?.cover_image?.maybe_cover_image_public_bucket_path; const bucketConfig = new BucketConfig(); - const coverImage = path - ? bucketConfig.getCdnUrl(path, 110, 100) - : "/images/avatars/default-pfp.png"; + let coverImage = undefined; + if (cover_image) { + if (cover_image?.maybe_cover_image_public_bucket_path) { + coverImage = bucketConfig.getCdnUrl( + data.cover_image.maybe_cover_image_public_bucket_path, + 110, + 100 + ); + } else if ( + details?.maybe_weight_data?.maybe_cover_image_public_bucket_path + ) { + coverImage = bucketConfig.getCdnUrl( + details?.maybe_weight_data?.maybe_cover_image_public_bucket_path, + 110, + 100 + ); + } + } const weightTypeInfo = useWeightTypeInfo(weight_type || WeightType.NONE); const { label: weightType, color: weightTagColor } = weightTypeInfo; @@ -49,9 +61,9 @@ export default function WeightCard({ {showCover && ( )} diff --git a/src/website/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss b/src/website/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss index 7e7fb99217..40737bf923 100644 --- a/src/website/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss +++ b/src/website/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.scss @@ -35,7 +35,7 @@ .fy-media-browser-list { flex-grow: 1; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; height: 70vh; diff --git a/src/website/packages/fakeyou.com/src/components/modals/ModalHeader.tsx b/src/website/packages/fakeyou.com/src/components/modals/ModalHeader.tsx index 5d4ffbcb20..4efcae63fc 100644 --- a/src/website/packages/fakeyou.com/src/components/modals/ModalHeader.tsx +++ b/src/website/packages/fakeyou.com/src/components/modals/ModalHeader.tsx @@ -1,7 +1,10 @@ -import React from "react"; +import React, { useState } from "react"; import { TempInput as Input } from "components/common"; -import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; -import { faXmark } from "@fortawesome/pro-solid-svg-icons"; +import { + FontAwesomeIcon, + FontAwesomeIcon as Icon, +} from "@fortawesome/react-fontawesome"; +import { faSearch, faXmark } from "@fortawesome/pro-solid-svg-icons"; interface Props { children?: any; @@ -15,21 +18,49 @@ export default function ModalHeader({ children, handleClose, onSearchChange = () => {}, - search, + search: initialSearch, title, }: Props) { + const [search, setSearch] = useState(initialSearch); + + const handleInputChange = (e: any) => { + setSearch(e.target.value); + onSearchChange(e); + }; + + const clearSearch = () => { + setSearch(""); + onSearchChange({ target: { value: "" } }); + }; + return (
{search !== undefined ? ( - +
+ + {search && ( + + )} +
) : ( title &&

{title}

)} diff --git a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx index 94616d8758..2a013728cf 100644 --- a/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx +++ b/src/website/packages/fakeyou.com/src/components/providers/ModalProvider/ModalLayer.tsx @@ -39,7 +39,7 @@ export default function ModalLayer({ {...{ className: mainClassName, style: tintStyle, - onClick: ({ target }) => { + onMouseDown: ({ target }) => { if ( !lockTint && target instanceof HTMLElement && diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/ExploreTts.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/ExploreTts.tsx index c80081f2b6..1c6f88628b 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/ExploreTts.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/ExploreTts.tsx @@ -1,7 +1,7 @@ -import { ListWeights, Weight } from "@storyteller/components/src/api"; -import { useLazyLists } from "hooks"; +import { ListFeaturedWeights, Weight } from "@storyteller/components/src/api"; +import { useListContent } from "hooks"; import React, { useRef, useState } from "react"; -import prepFilter from "resources/prepFilter"; +// import prepFilter from "resources/prepFilter"; import { MasonryGrid, WeightsCards } from "components/common"; interface ExploreTtsProps { @@ -13,20 +13,21 @@ const ExploreTts = ({ onResultSelect }: ExploreTtsProps) => { const [showMasonryGrid, setShowMasonryGrid] = useState(false); const gridContainerRef = useRef(null); - const weights = useLazyLists({ + const weights = useListContent({ urlUpdate: false, addQueries: { page_size: "48", - ...prepFilter("text_to_speech", "weight_category"), + // ...prepFilter("text_to_speech", "weight_category"), }, - fetcher: ListWeights, + fetcher: ListFeaturedWeights, list, listSet, onInputChange: () => setShowMasonryGrid(false), - onSuccess: res => { + onSuccess: () => { setShowMasonryGrid(true); }, requestList: true, + urlParam: "", }); return ( @@ -38,39 +39,47 @@ const ExploreTts = ({ onResultSelect }: ExploreTtsProps) => { No weight created yet.
) : ( - <> -

Newest Community Voices

- console.log("Layout complete!")} +
+

Featured Community Voices

+
- {weights.list.map((data: any, key: number) => { - let props = { - data, - type: "weights", - }; + console.log("Layout complete!")} + > + {weights.list.map((data: any, key: number) => { + let props = { + data, + type: "weights", + }; - return ( -
- -
- ); - })} - - + > + +
+ ); + })} + +
+ )} )} diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx index 4b3b34c612..c81c8922ef 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx @@ -12,6 +12,7 @@ import { faImage, faMicrophone, faVolumeHigh, + // faStarShooting, } from "@fortawesome/pro-solid-svg-icons"; import Accordion from "components/common/Accordion"; import DataTable from "components/common/DataTable"; @@ -36,6 +37,9 @@ import WeightCoverImage from "components/common/WeightCoverImage"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import SdInferencePanel from "./inference_panels/SdInferencePanel"; import SdCoverImagePanel from "./cover_image_panels/SdCoverImagePanel"; +import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +// import { CreateFeaturedItem } from "@storyteller/components/src/api/featured_items/CreateFeaturedItem"; +// import { DeleteFeaturedItem } from "@storyteller/components/src/api/featured_items/DeleteFeaturedItem"; //import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; interface WeightProps { @@ -68,6 +72,27 @@ export default function WeightPage({ const dateCreated = moment(weight?.created_at || "").format("LLL"); const [buttonLabel, setButtonLabel] = useState("Copy"); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + // const viewerCanMakeFeatured = canBanUsers() || false; + + let pageTitle; + + switch (weight?.weight_type) { + case WeightType.TT2: + case WeightType.HIFIGAN_TT2: + pageTitle = weight?.title + " AI TTS Model" || "TTS Model Weight"; + break; + case WeightType.RVCv2: + pageTitle = weight?.title + " AI RVC Model" || "V2V Model Weight"; + break; + case WeightType.SVC: + pageTitle = weight?.title + " AI SVC Model" || "V2V Model Weight"; + break; + default: + pageTitle = weight?.title || "Model Weight"; + break; + } + + usePrefixedDocumentTitle(pageTitle); const bucketConfig = new BucketConfig(); @@ -401,6 +426,29 @@ export default function WeightPage({ } }; + // const handleFeatureWeight = async () => { + // setFeatureWeight(!weight?.is_featured); + // }; + + // const setFeatureWeight = async (setFeatured: boolean) => { + // if (weight === undefined) { + // return; + // } + + // const request = { + // entity_type: "model_weight", + // entity_token: weight.weight_token, + // }; + + // if (setFeatured) { + // await CreateFeaturedItem("", request); + // // window.location.reload(); + // } else { + // await DeleteFeaturedItem("", request); + // // window.location.reload(); + // } + // }; + return (
@@ -584,6 +632,22 @@ export default function WeightPage({ />
)} + + {/* {viewerCanMakeFeatured && ( + <> +
+
+ + )} */}