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) && (
{' '}
[