diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 4ead99ec..cde48ffe 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -49,9 +49,9 @@ const Board = () => { const { subplebbitAddress } = useParams(); const handleClickForm = useClickForm(); - useEffect(() => { - console.log(selectedFeed); - }, [selectedFeed]); + // useEffect(() => { + // console.log(selectedFeed); + // }, [selectedFeed]); // temporary title from JSON, gets subplebbitAddress from URL @@ -520,6 +520,8 @@ const Board = () => { ) : null} {renderedComments.map((reply) => { + const replyMediaInfo = getCommentMediaInfo(reply); + const fallbackImgUrl = "/assets/filedeleted-res.gif"; return (
{'>>'}
@@ -572,6 +574,51 @@ const Board = () => { }
+ {replyMediaInfo?.url ? ( +
+
+ Link:  + { + replyMediaInfo?.url.length > 30 ? + replyMediaInfo?.url.slice(0, 30) + "(...)" : + replyMediaInfo?.url + } ({replyMediaInfo?.type}) +
+ {replyMediaInfo?.type === "webpage" ? ( + + thumbnail e.target.src = fallbackImgUrl} /> + + ) : null} + {replyMediaInfo?.type === "image" ? ( + + {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> + + ) : null} + {replyMediaInfo?.type === "video" ? ( + + + ) : null} + {replyMediaInfo?.type === "audio" ? ( + + + ) : null} +
+ ) : null} {reply.content ? ( reply.content.length > 500 ? diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index cf233fca..5e67808d 100644 --- a/src/components/views/Thread.jsx +++ b/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 (
{'>>'}
@@ -558,6 +560,51 @@ const Thread = () => { }
+ {replyMediaInfo?.url ? ( +
+
+ Link:  + { + replyMediaInfo?.url.length > 30 ? + replyMediaInfo?.url.slice(0, 30) + "(...)" : + replyMediaInfo?.url + } ({replyMediaInfo?.type}) +
+ {replyMediaInfo?.type === "webpage" ? ( + + thumbnail e.target.src = fallbackImgUrl} /> + + ) : null} + {replyMediaInfo?.type === "image" ? ( + + {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> + + ) : null} + {replyMediaInfo?.type === "video" ? ( + + + ) : null} + {replyMediaInfo?.type === "audio" ? ( + + + ) : null} +
+ ) : null}
handleQuoteClick(reply, event)}> diff --git a/src/components/views/styles/Board.styled.jsx b/src/components/views/styles/Board.styled.jsx index 241984d1..95a2bca8 100644 --- a/src/components/views/styles/Board.styled.jsx +++ b/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%; } @@ -2297,12 +2297,33 @@ export const BoardForm = styled.div` float: left; 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 {