From f7da51259e9068d4d84bdae5c92429c9b9b11de2 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 29 Nov 2024 21:53:53 +0100
Subject: [PATCH] fix board logo in description

---
 src/components/comment-media/comment-media.tsx | 10 ++++++++--
 src/components/post-desktop/post-desktop.tsx   |  9 ++++++++-
 src/components/post-mobile/post-mobile.tsx     | 14 ++++++++++++--
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index fde83c4f..b715f114 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -179,7 +179,10 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
       {commentMediaInfo?.type === 'image' ? (
         isMobile ? (
           <span className={styles.thumbnail}>
-            <span className={isImageExpanded ? mediaClass : `${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={isImageExpanded ? {} : thumbnailDimensions}>
+            <span
+              className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
+              style={isImageExpanded ? {} : thumbnailDimensions}
+            >
               <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
             </span>
             {isImageExpanded && type && (
@@ -194,7 +197,10 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
             {type && !isImageExpanded && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
           </span>
         ) : (
-          <span className={isImageExpanded ? mediaClass : `${styles.thumbnailBig}  ${styles.thumbnail}`} style={isImageExpanded ? {} : thumbnailDimensions}>
+          <span
+            className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail}`}
+            style={isImageExpanded ? {} : thumbnailDimensions}
+          >
             <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
           </span>
         )
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 177df99a..b7c41007 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -227,6 +227,7 @@ const PostMedia = ({ post }: PostProps) => {
 const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
   const initialInfo = getCommentMediaInfo(post);
   const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
 
   useEffect(() => {
     // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
@@ -289,7 +290,13 @@ const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string;
       </div>
       {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler) && (
         <div className={styles.fileThumbnail}>
-          <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />
+          <CommentMedia
+            commentMediaInfo={commentMediaInfo}
+            post={post}
+            showThumbnail={showThumbnail}
+            setShowThumbnail={setShowThumbnail}
+            isOutOfFeed={isDescription || isRules}
+          />
         </div>
       )}
     </div>
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 92d42ed4..138d633e 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -195,7 +195,7 @@ const PostMediaContent = ({ post, link, t }: { post: any; link: string; t: any }
   const initialInfo = getCommentMediaInfo(post);
   const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
   const [showThumbnail, setShowThumbnail] = useState(true);
-
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
   useEffect(() => {
     // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
     const loadThumbnail = async () => {
@@ -210,7 +210,17 @@ const PostMediaContent = ({ post, link, t }: { post: any; link: string; t: any }
   const commentMediaInfo = webpageThumbnail || initialInfo;
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
-  return hasThumbnail && <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />;
+  return (
+    hasThumbnail && (
+      <CommentMedia
+        commentMediaInfo={commentMediaInfo}
+        post={post}
+        showThumbnail={showThumbnail}
+        setShowThumbnail={setShowThumbnail}
+        isOutOfFeed={isDescription || isRules}
+      />
+    )
+  );
 };
 
 const ReplyBacklinks = ({ post }: PostProps) => {