added featured weights to voice selection modal (#644)

* added featured weights, button commented out for now

* weight page title

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
-};
+  ListWeights,
+  ListFeaturedWeights,
+};

src/website/packages/components/src/api/weights/GetWeight.ts

@@ -25,6 +25,7 @@ export interface Weight {
     };
   };
   version: number;
+  is_featured: boolean;
 }
 
 export interface GetWeightRequest {}

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

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 };
+export { ListWeights, ListFeaturedWeights };

src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -140,8 +140,8 @@ export default function AudioCard({
             {showCover && (
               <WeightCoverImage
                 src={coverImage}
-                height={96}
-                width={96}
+                height={100}
+                width={100}
                 coverIndex={data?.cover_image?.default_cover?.image_index}
               />
             )}

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 && (
           <WeightCoverImage
             src={coverImage}
-            height={96}
-            width={96}
-            coverIndex={cover_image?.default_cover?.image_index}
+            height={100}
+            width={100}
+            coverIndex={data?.cover_image?.default_cover?.image_index}
           />
         )}
 

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;
 

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 (
     <header {...{ className: "fy-media-browser-header" }}>
       <div {...{ className: "fy-media-browser-tools" }}>
         {search !== undefined ? (
-          <Input
-            autoFocus
-            {...{
-              onChange: onSearchChange,
-              value: search,
-              placeholder: "Search...",
-            }}
-          />
+          <div className="position-relative w-100">
+            <Input
+              autoFocus
+              {...{
+                onChange: handleInputChange,
+                value: search,
+                placeholder: "Search...",
+                icon: faSearch,
+              }}
+            />
+            {search && (
+              <FontAwesomeIcon
+                icon={faXmark}
+                className="position-absolute opacity-75 fs-5"
+                style={{
+                  right: "1rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  cursor: "pointer",
+                }}
+                onClick={clearSearch}
+              />
+            )}
+          </div>
         ) : (
           title && <h3 className="fw-semibold">{title}</h3>
         )}

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 &&

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<HTMLDivElement | null>(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.
             </div>
           ) : (
-            <>
-              <h4 className="fw-bold">Newest Community Voices</h4>
-              <MasonryGrid
-                gridRef={gridContainerRef}
-                onLayoutComplete={() => console.log("Layout complete!")}
+            <div className="overflow-hidden h-100">
+              <h4 className="fw-bold pt-1 pb-2">Featured Community Voices</h4>
+              <div
+                style={{
+                  overflowX: "hidden",
+                  overflowY: "auto",
+                  height: "calc(100% - 50px)",
+                }}
               >
-                {weights.list.map((data: any, key: number) => {
-                  let props = {
-                    data,
-                    type: "weights",
-                  };
+                <MasonryGrid
+                  gridRef={gridContainerRef}
+                  onLayoutComplete={() => console.log("Layout complete!")}
+                >
+                  {weights.list.map((data: any, key: number) => {
+                    let props = {
+                      data,
+                      type: "weights",
+                    };
 
-                  return (
-                    <div
-                      {...{
-                        className:
-                          "col-12 col-sm-6 col-lg-6 col-xl-4 grid-item",
-                        key,
-                      }}
-                    >
-                      <WeightsCards
+                    return (
+                      <div
                         {...{
-                          type: data.weight_category,
-                          props,
-                          inSelectModal: true,
-                          onResultSelect: onResultSelect,
+                          className:
+                            "col-12 col-sm-6 col-lg-6 col-xl-4 grid-item",
+                          key,
                         }}
-                      />
-                    </div>
-                  );
-                })}
-              </MasonryGrid>
-            </>
+                      >
+                        <WeightsCards
+                          {...{
+                            type: data.weight_category,
+                            props,
+                            inSelectModal: true,
+                            onResultSelect: onResultSelect,
+                          }}
+                        />
+                      </div>
+                    );
+                  })}
+                </MasonryGrid>
+              </div>
+            </div>
           )}
         </>
       )}

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 (
     <div>
       <Container type="panel" className="mb-5">
@@ -584,6 +632,22 @@ export default function WeightPage({
                   />
                 </div>
               )}
+
+              {/* {viewerCanMakeFeatured && (
+                <>
+                  <div className="d-flex gap-2">
+                    <Button
+                      full={true}
+                      variant="secondary"
+                      icon={faStarShooting}
+                      label={
+                        weight?.is_featured ? "Remove Featured" : "Set Featured"
+                      }
+                      onClick={handleFeatureWeight}
+                    />
+                  </div>
+                </>
+              )} */}
             </div>
           </div>
         </div>