From ee5e26fb14652d8a73f0acb9ec9ead24935909fd Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 22 Dec 2023 14:18:05 +0700 Subject: [PATCH] list weights --- .../src/api/media_files/ListMediaFiles.ts | 1 - .../components/src/api/weights/GetWeight.ts | 42 ++-- .../components/src/api/weights/ListWeights.ts | 25 ++ .../view/pages/explore/tabs/FeaturedTab.tsx | 5 +- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 227 +++++++++--------- 5 files changed, 167 insertions(+), 133 deletions(-) create mode 100644 packages/components/src/api/weights/ListWeights.ts diff --git a/packages/components/src/api/media_files/ListMediaFiles.ts b/packages/components/src/api/media_files/ListMediaFiles.ts index c19d011c4c..c13f626c4e 100644 --- a/packages/components/src/api/media_files/ListMediaFiles.ts +++ b/packages/components/src/api/media_files/ListMediaFiles.ts @@ -1,6 +1,5 @@ import MakeRequest from "../MakeRequest"; import { MediaFile } from "./GetMedia"; -// import { MediaFileType } from "../_common/enums/MediaFileType"; import { LazyPagination } from "../_common/SharedFetchTypes"; export interface ListMediaFilesRequest {} diff --git a/packages/components/src/api/weights/GetWeight.ts b/packages/components/src/api/weights/GetWeight.ts index 2a69f6b291..f517aab6bb 100644 --- a/packages/components/src/api/weights/GetWeight.ts +++ b/packages/components/src/api/weights/GetWeight.ts @@ -1,28 +1,42 @@ -// import MakeRequest from "../MakeRequest"; +import MakeRequest from "../MakeRequest"; import { UserDetailsLight } from "../_common/UserDetailsLight"; import { WeightCategory } from "../_common/enums/WeightCategory"; import { WeightType } from "../_common/enums/WeightType"; export interface Weight { weight_token: string; - weight_type: WeightType; - weight_category: WeightCategory; - maybe_creator_user: UserDetailsLight | null; + weights_type: WeightType; + weights_category: WeightCategory; + title: string; + public_bucket_path: string; creator_set_visibility: string; created_at: Date; updated_at: Date; - title: string; + creator: UserDetailsLight; description_markdown: string; + description_rendered_html: string; + file_checksum_sha2: string; + file_size_bytes: number; + maybe_cached_user_ratings_ratio: number | null; + maybe_cover_image_public_bucket_path: string | null; + version: number; } -// export interface GetMediaRequest {} +export interface GetWeightRequest { + weight_token: "string"; +} -// export interface GetMediaResponse { -// success: boolean, -// media_file?: MediaFile, -// } +export interface GetWeightResponse { + success: boolean; + media_file?: Weight; +} -// export const GetMedia = MakeRequest({ -// method: "GET", -// routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`, -// }); +export const GetWeight = MakeRequest< + string, + GetWeightRequest, + GetWeightResponse, + {} +>({ + method: "GET", + routingFunction: (weightToken: string) => `/v1/weights/weight/${weightToken}`, +}); diff --git a/packages/components/src/api/weights/ListWeights.ts b/packages/components/src/api/weights/ListWeights.ts new file mode 100644 index 0000000000..3c3fca9d9e --- /dev/null +++ b/packages/components/src/api/weights/ListWeights.ts @@ -0,0 +1,25 @@ +import MakeRequest from "../MakeRequest"; +import { Weight } from "./GetWeight"; +import { LazyPagination } from "../_common/SharedFetchTypes"; + +export interface ListWeightsRequest {} + +export interface ListWeightsResponse { + pagination: LazyPagination; + success: boolean; + results: Weight[]; +} + +export interface ListWeightsParams { + page_index: number; +} + +export const ListWeights = MakeRequest< + string, + ListWeightsRequest, + ListWeightsResponse, + ListWeightsParams +>({ + method: "GET", + routingFunction: () => `/v1/weights/list`, +}); diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx index 8fd3efb6e7..91a27c9764 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -6,7 +6,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard"; import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; -import ImageCard from "components/common/Card/ImageCard"; export default function FeaturedTab() { const gridContainerRef = useRef(null); @@ -59,7 +58,7 @@ export default function FeaturedTab() { )} -
+ {/*

Featured Image Weights @@ -98,7 +97,7 @@ export default function FeaturedTab() { })} )} -

+
*/}
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx index 914d3bba73..a7efc73b8e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx @@ -1,149 +1,146 @@ import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; -import mockWeightsData from "./mockWeightsData"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; import VideoCard from "components/common/Card/VideoCard"; -import Select from "components/common/Select"; +import { TempSelect } from "components/common"; import { faArrowDownWideShort, faFilter, } from "@fortawesome/pro-solid-svg-icons"; +import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext"; import SkeletonCard from "components/common/Card/SkeletonCard"; +import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights"; +import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; +import { useLazyLists } from "hooks"; +import InfiniteScroll from "react-infinite-scroll-component"; -export default function WeightsTab() { +export default function MediaTab() { const gridContainerRef = useRef(null); - const [data] = useState(mockWeightsData); const [isLoading] = useState(false); - const [selectedFilter, setSelectedFilter] = useState("all"); + + const [list, listSet] = useState([]); + const weights = useLazyLists({ + fetcher: ListWeights, + list, + listSet, + requestList: true, + }); const filterOptions = [ - { value: "all", label: "All Weights" }, - { value: "tts", label: "Text to Speech" }, - { value: "vc", label: "Voice to Voice" }, - { value: "sd", label: "Image Generation" }, + { value: "all", label: "All Media" }, + { value: "images", label: "Images" }, + { value: "audio", label: "Audio" }, + { value: "video", label: "Video" }, ]; const sortOptions = [ { value: "newest", label: "Newest" }, { value: "oldest", label: "Oldest" }, - { value: "mostliked", label: "Most Bookmarked" }, + { value: "mostliked", label: "Most Liked" }, ]; - const modelTtsOptions = [ - { value: "all", label: "All Types" }, - { value: "tt2", label: "Tacotron 2" }, - ]; - - const modelVcOptions = [ - { value: "all", label: "All Types" }, - { value: "rvc", label: "RVCv2" }, - { value: "svc", label: "SoVitsSvc" }, - ]; - - const modelSdOptions = [ - { value: "all", label: "All Types" }, - { value: "lora", label: "LoRA" }, - { value: "SD15", label: "SD 1.5" }, - { value: "SDXL", label: "SD XL" }, - ]; - - const handleFilterChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - setSelectedFilter(selectedOption.value); - }; - return ( <>
- - - {selectedFilter === "tts" && ( - - )} - {selectedFilter === "vc" && ( -