media image fix and weights renamed to singular weight

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

@@ -50,7 +50,7 @@ export default function AudioCard({
 
   const { label: weightBadgeLabel, color: weightBadgeColor } =
     useWeightTypeInfo(
-      data.weight_type || data.details?.maybe_weights_data?.weight_type
+      data.weight_type || data.details?.maybe_weight_data?.weight_type
     );
 
   const bucketConfig = new BucketConfig();
@@ -66,11 +66,9 @@ export default function AudioCard({
         100
       );
     }
-    if (
-      data.details?.maybe_weights_data?.maybe_cover_image_public_bucket_path
-    ) {
+    if (data.details?.maybe_weight_data?.maybe_cover_image_public_bucket_path) {
       coverImage = bucketConfig.getCdnUrl(
-        data.details?.maybe_weights_data?.maybe_cover_image_public_bucket_path,
+        data.details?.maybe_weight_data?.maybe_cover_image_public_bucket_path,
         100,
         100
       );
@@ -157,7 +155,7 @@ export default function AudioCard({
                 <div className="d-flex align-items-center mt-3">
                   <div className="flex-grow-1">
                     <h6 className="fw-semibold text-white mb-1">
-                      {data.title || data.details.maybe_weights_data.title}
+                      {data.title || data.details.maybe_weight_data.title}
                     </h6>
                     <p className="fs-7 opacity-75">{timeAgo}</p>
                   </div>

packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx

@@ -46,7 +46,7 @@ export default function ImageCard({
 
   const { label: weightBadgeLabel, color: weightBadgeColor } =
     useWeightTypeInfo(
-      data.weight_type || data.details?.maybe_weights_data?.weight_type
+      data.weight_type || data.details?.maybe_weight_data?.weight_type
     );
 
   console.log("🌇", origin);
@@ -64,11 +64,9 @@ export default function ImageCard({
         100
       );
     }
-    if (
-      data.details?.maybe_weights_data?.maybe_cover_image_public_bucket_path
-    ) {
+    if (data.details?.maybe_weight_data?.maybe_cover_image_public_bucket_path) {
       coverImage = bucketConfig.getCdnUrl(
-        data.details?.maybe_weights_data?.maybe_cover_image_public_bucket_path,
+        data.details?.maybe_weight_data?.maybe_cover_image_public_bucket_path,
         400,
         100
       );
@@ -161,7 +159,7 @@ export default function ImageCard({
                 <div className="d-flex align-items-center mt-3">
                   <div className="flex-grow-1">
                     <h6 className="fw-semibold text-white mb-1">
-                      {data.title || data.details?.maybe_weights_data?.title}
+                      {data.title || data.details?.maybe_weight_data?.title}
                     </h6>
                     <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
                   </div>

packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx

@@ -9,6 +9,8 @@ import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"
 import { useBookmarks, useLazyLists } from "hooks";
 import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
 import SkeletonCard from "components/common/Card/SkeletonCard";
+import ImageCard from "components/common/Card/ImageCard";
+import VideoCard from "components/common/Card/VideoCard";
 
 export default function FeaturedTab() {
   const bookmarks = useBookmarks();
@@ -23,7 +25,7 @@ export default function FeaturedTab() {
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
-    addQueries: { page_size: 12 },
+    debug: "featured media",
   });
 
   return (
@@ -55,22 +57,52 @@ export default function FeaturedTab() {
                   gridRef={gridContainerRef}
                   onLayoutComplete={() => console.log("Layout complete!")}
                 >
-                  {media.list.map((data, index) => {
-                    let card = (
-                      <AudioCard
-                        {...{
-                          bookmarks,
-                          data,
-                          type: "media",
-                          showCreator: true,
-                          showCover: true,
-                        }}
-                      />
-                    );
+                  {media.list.map((data: any, index: number) => {
+                    let card;
+                    switch (data.media_type) {
+                      case "audio":
+                        card = (
+                          <AudioCard
+                            {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true,
+                            }}
+                          />
+                        );
+                        break;
+                      case "image":
+                        card = (
+                          <ImageCard
+                            {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true,
+                            }}
+                          />
+                        );
+                        break;
+                      case "video":
+                        card = (
+                          <VideoCard
+                            {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true,
+                            }}
+                          />
+                        );
+                        break;
+                      default:
+                        card = <div>Unsupported media type</div>;
+                    }
                     return (
                       <div
                         key={index}
-                        className="col-12 col-lg-6 col-xxl-4 grid-item"
+                        className="col-12 col-sm-6 col-xl-4 grid-item"
                       >
                         {card}
                       </div>

packages/fakeyou.com/src/v2/view/pages/media/MediaImageComponent.tsx

@@ -9,17 +9,10 @@ interface MediaImageComponentProps {
 export default function MediaImageComponent({
   mediaFile,
 }: MediaImageComponentProps) {
-  const imagePath = new BucketConfig().getGcsUrl(
-    mediaFile.public_bucket_path
-  );
+  const imagePath = new BucketConfig().getGcsUrl(mediaFile.public_bucket_path);
   return (
     <div>
-      <img
-        src={imagePath}
-        alt="test"
-        width="400"
-        height="300"
-      />
+      <img src={imagePath} alt="test" />
     </div>
   );
 }

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import MediaAudioComponent from "./MediaAudioComponent";
 import MediaVideoComponent from "./MediaVideoComponent";
-import MediaImageComponent from "./MediaImageComponent";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import {
   GetMediaFile,
@@ -37,6 +36,7 @@ import LikeButton from "components/common/LikeButton";
 import Badge from "components/common/Badge";
 import useMediaFileTypeInfo from "hooks/useMediaFileTypeInfo";
 import { useBookmarks } from "hooks";
+import SdCoverImagePanel from "../weight/cover_image_panels/SdCoverImagePanel";
 
 interface MediaPageProps {
   sessionWrapper: SessionWrapper;
@@ -111,7 +111,18 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
         );
 
       case MediaFileType.Image:
-        return <MediaImageComponent mediaFile={mediaFile} />;
+        let sdMediaImage = "/images/avatars/default-pfp.png";
+        if (
+          mediaFile.maybe_model_weight_info &&
+          mediaFile.maybe_model_weight_info
+            .maybe_cover_image_public_bucket_path !== null
+        ) {
+          sdMediaImage = bucketConfig.getGcsUrl(
+            mediaFile.maybe_model_weight_info
+              .maybe_cover_image_public_bucket_path
+          );
+        }
+        return <SdCoverImagePanel src={sdMediaImage} />;
       default:
         return <div>Unsupported media type</div>;
     }

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx

@@ -189,7 +189,7 @@ export default function BookmarksTab({ username }: { username: string }) {
                     >
                       <WeightsCards
                         {...{
-                          type: data.details.maybe_weights_data.weight_category,
+                          type: data.details.maybe_weight_data.weight_category,
                           props: weightProps,
                         }}
                       />