diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 0ecfdf5d..ed6bcf31 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -10,10 +10,11 @@ import SettingsModal from '../SettingsModal'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; +import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; +import getDate from '../../utils/getDate'; import handleStyleChange from '../../utils/handleStyleChange'; import onError from '../../utils/onError'; import onSuccess from '../../utils/onSuccess'; -import getDate from '../../utils/getDate'; import renderComments from '../../utils/renderComments'; import useClickForm from '../../hooks/useClickForm'; @@ -49,6 +50,7 @@ const Board = () => { const handleClickForm = useClickForm(); + // temporary title from JSON, gets subplebbitAddress from URL useEffect(() => { setSelectedAddress(subplebbitAddress); @@ -393,6 +395,8 @@ const Board = () => { {renderedFeed.map(thread => { const { replies: { pages: { topAll: { comments } } } } = thread; const { renderedComments, omittedCount } = renderComments(comments); + const commentMediaInfo = getCommentMediaInfo(thread); + const fallbackImgUrl = "/assets/filedeleted-res.gif"; return (
@@ -400,15 +404,38 @@ const Board = () => {

-
+ {commentMediaInfo?.url ? ( +
- - filename.something - + {commentMediaInfo?.type === "webpage" ? ( + + thumbnail e.target.src = fallbackImgUrl} /> + + ) : null} + {commentMediaInfo?.type === "image" ? ( + + {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> + + ) : null} + {commentMediaInfo?.type === "video" ? ( + + + ) : null} + {commentMediaInfo?.type === "audio" ? ( + + + ) : null}
+ ) : null} {thread.title ? ( thread.title.length > 75 ? diff --git a/src/utils/getCommentMediaInfo.js b/src/utils/getCommentMediaInfo.js new file mode 100644 index 00000000..27a33a5b --- /dev/null +++ b/src/utils/getCommentMediaInfo.js @@ -0,0 +1,38 @@ +import extName from 'ext-name'; + +const getCommentMediaInfo = (comment) => { + if (!comment?.thumbnailUrl && !comment?.link) { + return; + } + if (comment?.thumbnailUrl) { + return { + url: comment.link, + type: 'webpage' + }; + } + if (comment?.link) { + const mime = extName(new URL(comment?.link).pathname.replace('/', ''))[0]?.mime + if (mime?.startsWith('image')) { + return { + url: comment.link, + type: 'image' + }; + } + + if (mime?.startsWith('video')) { + return { + url: comment.link, + type: 'video' + }; + } + + if (mime?.startsWith('audio')) { + return { + url: comment.link, + type: 'audio' + }; + } + } +}; + +export default getCommentMediaInfo; \ No newline at end of file