list weights

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 {}

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<string, GetMediaRequest, GetMediaResponse, {}>({
-//   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}`,
+});

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`,
+});

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<HTMLDivElement | null>(null);
@@ -59,7 +58,7 @@ export default function FeaturedTab() {
           </MasonryGrid>
         )}
       </div>
-      <div>
+      {/* <div>
         <div className="d-flex align-items-center mb-3">
           <h3 className="fw-semibold mb-0 flex-grow-1">
             Featured Image Weights
@@ -98,7 +97,7 @@ export default function FeaturedTab() {
             })}
           </MasonryGrid>
         )}
-      </div>
+      </div> */}
     </div>
   );
 }

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<HTMLDivElement | null>(null);
-  const [data] = useState(mockWeightsData);
   const [isLoading] = useState(false);
-  const [selectedFilter, setSelectedFilter] = useState("all");
+
+  const [list, listSet] = useState<Weight[]>([]);
+  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 (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
         <div className="d-flex gap-2 flex-grow-1">
-          <Select
-            icon={faArrowDownWideShort}
-            options={sortOptions}
-            defaultValue={sortOptions[0]}
-            isSearchable={false}
+          <TempSelect
+            {...{
+              icon: faArrowDownWideShort,
+              options: sortOptions,
+              name: "sort",
+              onChange: weights.onChange,
+              value: weights.sort,
+            }}
           />
-
-          <Select
-            icon={faFilter}
-            options={filterOptions}
-            defaultValue={filterOptions[0]}
-            isSearchable={false}
-            onChange={handleFilterChange}
+          <TempSelect
+            {...{
+              icon: faFilter,
+              options: filterOptions,
+              name: "filter",
+              onChange: weights.onChange,
+              value: weights.filter,
+            }}
           />
-
-          {selectedFilter === "tts" && (
-            <Select
-              options={modelTtsOptions}
-              defaultValue={modelTtsOptions[0]}
-              isSearchable={false}
-            />
-          )}
-          {selectedFilter === "sd" && (
-            <Select
-              options={modelSdOptions}
-              defaultValue={modelSdOptions[0]}
-              isSearchable={false}
-            />
-          )}
-          {selectedFilter === "vc" && (
-            <Select
-              options={modelVcOptions}
-              defaultValue={modelVcOptions[0]}
-              isSearchable={false}
-            />
-          )}
         </div>
       </div>
-      {isLoading ? (
-        <div className="row gx-3 gy-3">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <SkeletonCard key={index} />
-          ))}
-        </div>
-      ) : (
-        <MasonryGrid
-          gridRef={gridContainerRef}
-          onLayoutComplete={() => console.log("Layout complete!")}
-        >
-          {data.map((data, index) => {
-            let card;
-            switch (data.media_type) {
-              case "audio":
-                card = (
-                  <AudioCard
-                    key={index}
-                    data={data}
-                    type="weights"
-                    showCreator={true}
-                    showCover={true}
-                  />
-                );
-                break;
-              case "image":
-                card = (
-                  <ImageCard
-                    key={index}
-                    data={data}
-                    type="weights"
-                    showCreator={true}
-                  />
-                );
-                break;
-              case "video":
-                card = <VideoCard key={index} data={data} type="weights" />;
-                break;
-              default:
-                card = <div key={index}>Unsupported media type</div>;
-            }
-            return (
-              <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
-                {card}
+      <AudioPlayerProvider>
+        {isLoading ? (
+          <div className="row gx-3 gy-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <InfiniteScroll
+            dataLength={weights.list.length}
+            next={weights.getMore}
+            hasMore={!weights.list.length || !!weights.next}
+            loader={
+              <div className="mt-4 d-flex justify-content-center">
+                <div className="spinner-border text-light" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
               </div>
-            );
-          })}
-        </MasonryGrid>
-      )}
+            }
+            endMessage={
+              <p className="text-center mt-4 opacity-75">No more results.</p>
+            }
+            className="overflow-hidden"
+          >
+            <MasonryGrid
+              gridRef={gridContainerRef}
+              onLayoutComplete={() => console.log("Layout complete!")}
+            >
+              {weights.list.map((data: any, index: number) => {
+                let card;
+                switch (data.media_type) {
+                  case "audio":
+                    card = (
+                      <AudioCard
+                        key={index}
+                        data={data}
+                        type="weights"
+                        showCreator={true}
+                      />
+                    );
+                    break;
+                  case "image":
+                    card = (
+                      <ImageCard
+                        key={index}
+                        data={data}
+                        type="weights"
+                        showCreator={true}
+                      />
+                    );
+                    break;
+                  case "video":
+                    card = (
+                      <VideoCard
+                        key={index}
+                        data={data}
+                        type="weights"
+                        showCreator={true}
+                      />
+                    );
+                    break;
+                  default:
+                    card = <div>Unsupported media type</div>;
+                }
+                return (
+                  <div
+                    key={index}
+                    className="col-12 col-sm-6 col-xl-4 grid-item"
+                  >
+                    {card}
+                  </div>
+                );
+              })}
+            </MasonryGrid>
+          </InfiniteScroll>
+        )}
+      </AudioPlayerProvider>
     </>
   );
 }