added media to replies

src/components/views/Board.jsx

@@ -49,9 +49,9 @@ const Board = () => {
   const { subplebbitAddress } = useParams();  
   const handleClickForm = useClickForm();
 
-  useEffect(() => {
+  // useEffect(() => {
-    console.log(selectedFeed);
+  //   console.log(selectedFeed);
-  }, [selectedFeed]);
+  // }, [selectedFeed]);
 
 
   // temporary title from JSON, gets subplebbitAddress from URL
@@ -520,6 +520,8 @@ const Board = () => {
                     </span>) : null}
                   </span>
                   {renderedComments.map((reply) => {
+                    const replyMediaInfo = getCommentMediaInfo(reply);
+                    const fallbackImgUrl = "/assets/filedeleted-res.gif";
                     return (
                       <div key={`rc-${reply.cid}`} className="reply-container">
                         <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -572,6 +574,51 @@ const Board = () => {
                               }
                             </div>
                           </div>
+                          {replyMediaInfo?.url ? (
+                            <div key={`f-${reply.cid}`} className="file" 
+                            style={{marginBottom: "5px"}}>
+                              <div key={`ft-${reply.cid}`} className="reply-file-text">
+                                Link:&nbsp;
+                                <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
+                                replyMediaInfo?.url.length > 30 ?
+                                replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                                replyMediaInfo?.url
+                                }</a>&nbsp;({replyMediaInfo?.type})
+                              </div>
+                              {replyMediaInfo?.type === "webpage" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <img key={`fti-${reply.cid}`}
+                                  src={reply.thumbnailUrl} 
+                                  alt="thumbnail" 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "image" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <img key={`fti-${reply.cid}`}
+                                  src={replyMediaInfo.url} 
+                                  alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "video" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <video controls
+                                  key={`fti-${reply.cid}`} 
+                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "audio" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <audio controls 
+                                  key={`fti-${reply.cid}`}
+                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                            </div>
+                          ) : null}
                           {reply.content ? (
                               reply.content.length > 500 ?
                               <Fragment key={`fragment8-${reply.cid}`}>

src/components/views/Thread.jsx

@@ -506,6 +506,8 @@ const Thread = () => {
               Object.keys(comment.replies.pages.topAll.comments).map(() => {
                 const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
                 return renderedComments.map(reply => {
+                  const replyMediaInfo = getCommentMediaInfo(reply);
+                  const fallbackImgUrl = "/assets/filedeleted-res.gif";
                   return (
                     <div key={`pc-${reply.cid}-${Math.random()}`} className="reply-container">
                       <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -558,6 +560,51 @@ const Thread = () => {
                             }
                           </div>
                         </div>
+                        {replyMediaInfo?.url ? (
+                            <div key={`f-${reply.cid}`} className="file" 
+                            style={{marginBottom: "5px"}}>
+                              <div key={`ft-${reply.cid}`} className="reply-file-text">
+                                Link:&nbsp;
+                                <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
+                                replyMediaInfo?.url.length > 30 ?
+                                replyMediaInfo?.url.slice(0, 30) + "(...)" :
+                                replyMediaInfo?.url
+                                }</a>&nbsp;({replyMediaInfo?.type})
+                              </div>
+                              {replyMediaInfo?.type === "webpage" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <img key={`fti-${reply.cid}`}
+                                  src={reply.thumbnailUrl} 
+                                  alt="thumbnail" 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "image" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <img key={`fti-${reply.cid}`}
+                                  src={replyMediaInfo.url} 
+                                  alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "video" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <video controls
+                                  key={`fti-${reply.cid}`} 
+                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                              {replyMediaInfo?.type === "audio" ? (
+                                <span key={`fta-${reply.cid}`} className="file-thumb-reply">
+                                  <audio controls 
+                                  key={`fti-${reply.cid}`}
+                                  src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                </span>
+                              ) : null}
+                            </div>
+                          ) : null}
                         <blockquote key={`pm-${reply.cid}`} className="post-message">
                           <Link to={handleVoidClick} className="quote-link"
                             onClick={(event) => handleQuoteClick(reply, event)}>

src/components/views/styles/Board.styled.jsx

@@ -1540,7 +1540,7 @@ export const BoardForm = styled.div`
     }
 
     .post-info {
-      margin: 5px;
+      margin: 3px 3px 0 5px;
       display: block;
       width: 100%;
     }
@@ -2298,11 +2298,32 @@ export const BoardForm = styled.div`
       margin: 3px 20px 5px 20px;
     }
 
-    .file-thumb img, video, audio {
+    .reply-file-text {
+      max-width: 600px;
+      white-space: nowrap;
+      margin-left: 5px;
+    }
+
+    .file-thumb-reply {
+      float: left;
+      margin: 3px 20px 5px 20px;
+    }
+    
+    .file-thumb img,
+    .file-thumb video,
+    .file-thumb audio {
       border: none;
       max-width: 250px;
       max-height: 250px;
     }
+
+    .file-thumb-reply img,
+    .file-thumb-reply video,
+    .file-thumb-reply audio {
+      max-width: 125px;
+      max-height: 125px;
+    }
+
   }
 
   .thread-mobile {