diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index e8519459..899ca88f 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -89,15 +89,16 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid return isMobile || isReply ? ( {thumbnailComponent} - {isMobile && !hasThumbnail && linkWithoutThumbnail ? ( - canEmbed(linkWithoutThumbnail) ? ( + {isMobile && + !hasThumbnail && + linkWithoutThumbnail && + (canEmbed(linkWithoutThumbnail) ? ( setShowThumbnail(false)}>{getHostname(url)} ) : ( - {getHostname(url)} + {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)} - ) - ) : null} + ))} ) : ( {thumbnailComponent} @@ -144,19 +145,22 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => { const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => { const isMobile = useWindowWidth() < 640; + const { type, url } = commentMediaInfo || {}; return ( - - {isMobile && commentMediaInfo?.type &&
{commentMediaInfo.type}
} + {url && ( + + )} + {isMobile && type &&
{type}
}
{!showThumbnail && }
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 1cac57a9..56f9e714 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -12,6 +12,7 @@ import useWindowWidth from '../../hooks/use-window-width'; import styles from './post.module.css'; import Markdown from '../markdown'; import CommentMedia from '../comment-media'; +import { canEmbed } from '../embed'; interface PostProps { index?: number; @@ -35,6 +36,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const commentMediaInfo = getCommentMediaInfo(post); + const { type, url } = commentMediaInfo || {}; const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); @@ -56,15 +58,15 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { )} - {commentMediaInfo?.url && ( + {url && (
{t('link')}:{' '} - - {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url} + + {url.length > 30 ? url.slice(0, 30) + '...' : url} {' '} - ({commentMediaInfo?.type}) - {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && ( + ({type}) + {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( {' '} [ @@ -191,6 +193,8 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { const authorRole = roles?.[address]?.role; const commentMediaInfo = getCommentMediaInfo(reply); + const { type, url } = commentMediaInfo || {}; + const embedUrl = url && new URL(url); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); @@ -240,14 +244,14 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
- {link && ( + {url && (
{t('link')}:{' '} {link.length > 30 ? link?.slice(0, 30) + '...' : link} - {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && ( + {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( {' '} [ @@ -257,7 +261,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { ] )} - {showThumbnail && !hasThumbnail && ( + {showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && ( {' '} [