fix(comment media): only show link if valid, show webpage links on mobile

src/components/comment-media/comment-media.tsx

@@ -89,15 +89,16 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
   return isMobile || isReply ? (
     <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
       {thumbnailComponent}
-      {isMobile && !hasThumbnail && linkWithoutThumbnail ? (
+      {isMobile &&
-        canEmbed(linkWithoutThumbnail) ? (
+        !hasThumbnail &&
+        linkWithoutThumbnail &&
+        (canEmbed(linkWithoutThumbnail) ? (
           <span onClick={() => setShowThumbnail(false)}>{getHostname(url)}</span>
         ) : (
           <a href={url} target='_blank' rel='noreferrer'>
-            {getHostname(url)}
+            {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)}
           </a>
-        )
+        ))}
-      ) : null}
     </ThumbnailSmall>
   ) : (
     <ThumbnailBig style={thumbnailDimensions}>{thumbnailComponent}</ThumbnailBig>
@@ -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 (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
-        <Thumbnail
+        {url && (
-          commentMediaInfo={commentMediaInfo}
+          <Thumbnail
-          isOutOfFeed={isOutOfFeed}
+            commentMediaInfo={commentMediaInfo}
-          isReply={isReply}
+            isOutOfFeed={isOutOfFeed}
-          linkHeight={linkHeight}
+            isReply={isReply}
-          linkWidth={linkWidth}
+            linkHeight={linkHeight}
-          showThumbnail={showThumbnail}
+            linkWidth={linkWidth}
-          setShowThumbnail={setShowThumbnail}
+            showThumbnail={showThumbnail}
-        />
+            setShowThumbnail={setShowThumbnail}
-        {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
+          />
+        )}
+        {isMobile && type && <div className={styles.fileInfo}>{type}</div>}
       </span>
       {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={isReply} setShowThumbnail={setShowThumbnail} />}
     </span>

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) => {
           <span className={`${styles.hideButton} ${styles.hideThread}`} />
         </span>
       )}
-      {commentMediaInfo?.url && (
+      {url && (
         <div className={styles.file}>
           <div className={styles.fileText}>
             {t('link')}:{' '}
-            <a href={commentMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
+            <a href={url} target='_blank' rel='noopener noreferrer'>
-              {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url}
+              {url.length > 30 ? url.slice(0, 30) + '...' : url}
             </a>{' '}
-            ({commentMediaInfo?.type})
+            ({type})
-            {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
+            {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
               <span>
                 {' '}
                 [
@@ -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) => {
             </span>
           </span>
         </div>
-        {link && (
+        {url && (
           <div className={styles.file}>
             <div className={styles.fileText}>
               {t('link')}:{' '}
               <a href={link} target='_blank' rel='noopener noreferrer'>
                 {link.length > 30 ? link?.slice(0, 30) + '...' : link}
               </a>
-              {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
+              {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
                 <span>
                   {' '}
                   [
@@ -257,7 +261,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
                   ]
                 </span>
               )}
-              {showThumbnail && !hasThumbnail && (
+              {showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && (
                 <span>
                   {' '}
                   [