From e957941bdd7f222bc448c4bbe9be2b9204ad2fc2 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 30 Jul 2024 17:35:26 +0700
Subject: [PATCH] cover image sizing fix and show creator name

---
 .../common/Card/AudioCard/AudioCard.tsx       |  8 +-
 .../components/common/Card/CreatorName.tsx    |  7 +-
 .../entities/CardFooter/CardFooter.tsx        | 85 ++++++++++++-------
 .../entities/WeightCard/WeightCard.tsx        |  6 +-
 .../src/v2/view/pages/dev_tts/DevTTS.tsx      | 30 +++----
 5 files changed, 78 insertions(+), 58 deletions(-)

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 06a918432d..3bbfd3e230 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 && (
               <WeightCoverImage
                 src={coverImage}
-                height={90}
-                width={90}
+                height={96}
+                width={96}
                 coverIndex={data?.cover_image?.default_cover?.image_index}
               />
             )}
@@ -179,7 +179,7 @@ export default function AudioCard({
             {inSelectModal && (
               <div
                 className="position-absolute fs-7 fw-medium fy-select-voice"
-                style={{ bottom: "8px", right: "8px" }}
+                style={{ bottom: "14px", right: "14px" }}
               >
                 Use
               </div>
@@ -193,7 +193,7 @@ export default function AudioCard({
               entityType: "model_weight",
               makeBookmarksProps: bookmarks?.makeProps,
               makeRatingsProps: ratings?.makeProps,
-              showCreator,
+              showCreator: true,
             }}
           />
         </>
diff --git a/src/website/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx b/src/website/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
index 9e43afdfa0..3b6ff9c604 100644
--- a/src/website/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx
@@ -19,14 +19,15 @@ export default function CreatorName({
   backgroundIndex,
   username,
   className,
-  noHeight
+  noHeight,
 }: CreatorNameProps) {
   const handleInnerClick = (event: any) => {
-    event.stopPropagation();
+    // event.stopPropagation();
   };
 
   const gravatar = (
-    <Gravatar {...{ noHeight }}
+    <Gravatar
+      {...{ noHeight }}
       size={22}
       email_hash={gravatarHash}
       avatarIndex={avatarIndex || 0}
diff --git a/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx b/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
index 1ef00a96ab..67f9d89ed7 100644
--- a/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
+++ b/src/website/packages/fakeyou.com/src/components/entities/CardFooter/CardFooter.tsx
@@ -5,39 +5,62 @@ import { UserDetailsLight } from "@storyteller/components/src/api/_common/UserDe
 import BookmarkButton from "components/common/BookmarkButton";
 import LikeButton from "components/common/LikeButton";
 import CreatorName from "components/common/Card/CreatorName";
-import "./CardFooter.scss"
+import "./CardFooter.scss";
 
 interface CardFooterProps {
-  creator?: UserDetailsLight,
-  entityToken: string,
-  entityType: string,
-  makeBookmarksProps?: MakeBatchProps,
-  makeRatingsProps?: MakeRatingsProps, // this is MakeBatchProps extended to include likeCount
-  showCreator?: boolean
+  creator?: UserDetailsLight;
+  entityToken: string;
+  entityType: string;
+  makeBookmarksProps?: MakeBatchProps;
+  makeRatingsProps?: MakeRatingsProps; // this is MakeBatchProps extended to include likeCount
+  showCreator?: boolean;
 }
 
-export default function CardFooter({ creator, entityToken, entityType, makeBookmarksProps, makeRatingsProps, showCreator }: CardFooterProps) {
-  const { default_avatar, display_name, gravatar_hash, username = "" } = creator || {};
-  const togglesOn = makeBookmarksProps ||  makeRatingsProps;
+export default function CardFooter({
+  creator,
+  entityToken,
+  entityType,
+  makeBookmarksProps,
+  makeRatingsProps,
+  showCreator,
+}: CardFooterProps) {
+  const {
+    default_avatar,
+    display_name,
+    gravatar_hash,
+    username = "",
+  } = creator || {};
+  const togglesOn = makeBookmarksProps || makeRatingsProps;
   const eitherOn = showCreator || togglesOn;
-  return <>
-    { ( eitherOn ) && <hr className="my-2" /> }
-    <div {...{ className: `fy-card-footer` }}>
-      { showCreator && <CreatorName {...{
-          avatarIndex: default_avatar?.image_index || 0,
-          backgroundIndex: default_avatar?.color_index || 0,
-          displayName: display_name || "Anonymous",
-          gravatarHash: gravatar_hash || "",
-          noHeight: true,
-          username
-        }} />
-      }
-      {
-        togglesOn ? <div {...{ className: "fy-card-footer-toggles" }}>
-          { makeRatingsProps && <LikeButton {...makeRatingsProps({ entityToken, entityType })} /> }
-          { makeBookmarksProps && <BookmarkButton {...makeBookmarksProps({ entityToken, entityType })} /> }
-        </div> : null
-      }
-    </div>
-  </>;
-};
\ No newline at end of file
+  return (
+    <>
+      {eitherOn && <hr className="my-2" />}
+      <div {...{ className: `fy-card-footer` }}>
+        {showCreator && (
+          <CreatorName
+            {...{
+              avatarIndex: default_avatar?.image_index || 0,
+              backgroundIndex: default_avatar?.color_index || 0,
+              displayName: display_name || "Anonymous",
+              gravatarHash: gravatar_hash || "",
+              noHeight: true,
+              username,
+            }}
+          />
+        )}
+        {togglesOn ? (
+          <div {...{ className: "fy-card-footer-toggles" }}>
+            {makeRatingsProps && (
+              <LikeButton {...makeRatingsProps({ entityToken, entityType })} />
+            )}
+            {makeBookmarksProps && (
+              <BookmarkButton
+                {...makeBookmarksProps({ entityToken, entityType })}
+              />
+            )}
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
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 980380dd19..0c2738334e 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
@@ -26,6 +26,7 @@ export default function WeightCard({
     created_at,
     details,
     maybe_creator,
+    creator,
     title,
     token,
     weight_type,
@@ -73,17 +74,18 @@ export default function WeightCard({
         </div>
         <div
           className="position-absolute fs-7 fw-medium fy-select-voice"
-          style={{ bottom: "8px", right: "8px" }}
+          style={{ bottom: "14px", right: "14px" }}
         >
           Use
         </div>
       </div>
       <CardFooter
         {...{
-          creator: maybe_creator,
+          creator: maybe_creator || creator,
           entityToken: token,
           entityType: "media_file",
           makeRatingsProps,
+          showCreator: true,
         }}
       />
     </>
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
index 44adf8929e..0d875d59b8 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
@@ -82,21 +82,23 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
     close();
   };
 
+  const mediaBrowserProps = {
+    onSelect: (weight: any) => setSelectedVoice(weight),
+    inputMode: 3,
+    onSearchChange: searchChange(false),
+    search,
+    emptyContent: <ExploreTts onResultSelect={handleResultSelect} />,
+    showFilters: false,
+    showPagination: false,
+  };
+
   useDebounce({
     blocked: !(updated && !modalState && search),
     onTimeout: () => {
       updatedSet(false);
       open({
         component: MediaBrowser,
-        props: {
-          onSelect: (weight: any) => setSelectedVoice(weight),
-          inputMode: 3,
-          onSearchChange: searchChange(false),
-          search,
-          emptyContent: <div>Helloworld</div>,
-          showFilters: false,
-          showPagination: false,
-        },
+        props: mediaBrowserProps,
       });
     },
   });
@@ -104,15 +106,7 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
   const openModal = () => {
     open({
       component: MediaBrowser,
-      props: {
-        onSelect: (weight: any) => setSelectedVoice(weight),
-        inputMode: 3,
-        onSearchChange: searchChange(false),
-        search,
-        emptyContent: <ExploreTts onResultSelect={handleResultSelect} />,
-        showFilters: false,
-        showPagination: false,
-      },
+      props: mediaBrowserProps,
     });
   };