diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index cdfd5e55..604c4910 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -109,6 +109,29 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; const linkWithoutThumbnail = url && new URL(url); + const fallbackLinkLabel = url ? getHostname(url) || (url.length > 30 ? `${url.slice(0, 30)}...` : url) : ''; + const noThumbnailLink = + !hasThumbnail && linkWithoutThumbnail ? ( + canEmbed(linkWithoutThumbnail) ? ( + { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setShowThumbnail(false); + } + }} + onClick={() => setShowThumbnail(false)} + > + {fallbackLinkLabel} + + ) : ( + + {fallbackLinkLabel} + + ) + ) : null; return deleted || removed ? ( File deleted @@ -132,32 +155,12 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF ) : isMobile || isReply ? ( {thumbnailComponent} - {isMobile && - !hasThumbnail && - linkWithoutThumbnail && - (canEmbed(linkWithoutThumbnail) ? ( - { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - setShowThumbnail(false); - } - }} - onClick={() => setShowThumbnail(false)} - > - {getHostname(url)} - - ) : ( - - {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)} - - ))} + {noThumbnailLink} ) : ( {thumbnailComponent} + {noThumbnailLink} ); }; diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 5ddcf24e..8d81ecd6 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -619,7 +619,7 @@ const PostMedia = ({ )} - {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler) && ( + {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler || Boolean(commentMediaInfo?.url)) && (
{ const [showThumbnail, setShowThumbnail] = useState(true); const { thumbnailUrl, linkWidth, linkHeight, spoiler, deleted, removed, parentCid } = post || {}; const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight); - const hasThumbnail = getHasThumbnail(commentMediaInfo, link); return ( - hasThumbnail && ( + commentMediaInfo && (