fix board logo in description

This commit is contained in:
Tom (plebeius.eth)
2024-11-29 21:53:53 +01:00
parent a9b4c16f28
commit f7da51259e
3 changed files with 28 additions and 5 deletions
@@ -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>
)
+8 -1
View File
@@ -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>
+12 -2
View File
@@ -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) => {