diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index afcade8a..fc444f59 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -127,9 +127,66 @@ const PostInfoDesktop = ({ isInPostPage, openReplyModal, post, roles, stateStrin ); }; -const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies, stateString }: PostProps) => { +const PostMediaDesktop = ({ post }: PostProps) => { const { t } = useTranslation(); - const { cid, content, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress } = post || {}; + const { link, linkHeight, linkWidth } = post || {}; + const { isDescription, isRules } = post || {}; // custom properties, not from api + const commentMediaInfo = getCommentMediaInfo(post); + const { type, url } = commentMediaInfo || {}; + const embedUrl = url && new URL(url); + const hasThumbnail = getHasThumbnail(commentMediaInfo, link); + const [showThumbnail, setShowThumbnail] = useState(true); + + const isReply = post?.parentCid; + + return ( + url && ( +
+
+ {t('link')}:{' '} + + {url.length > 30 ? url.slice(0, 30) + '...' : url} + {' '} + ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}) + {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( + + {' '} + [ + setShowThumbnail(true)}> + {t('close')} + + ] + + )} + {showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && ( + + {' '} + [ + setShowThumbnail(false)}> + {t('open')} + + ] + + )} +
+ {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && ( + + )} +
+ ) + ); +}; + +const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies, stateString }: PostProps) => { + const { cid, content, pinned, replyCount, state, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; @@ -138,12 +195,6 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
{stateString !== 'Failed' ? : stateString}
); - const commentMediaInfo = getCommentMediaInfo(post); - const { type, url } = commentMediaInfo || {}; - const embedUrl = url && new URL(url); - const hasThumbnail = getHasThumbnail(commentMediaInfo, link); - const [showThumbnail, setShowThumbnail] = useState(true); - const replies = useReplies(post); const visiblelinksCount = useCountLinksInReplies(post, 5); const totallinksCount = useCountLinksInReplies(post); @@ -160,48 +211,7 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro )} - {url && ( -
-
- {t('link')}:{' '} - - {url.length > 30 ? url.slice(0, 30) + '...' : url} - {' '} - ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}) - {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( - - {' '} - [ - setShowThumbnail(true)}> - {t('close')} - - ] - - )} - {showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && ( - - {' '} - [ - setShowThumbnail(false)}> - {t('open')} - - ] - - )} -
- {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && ( - - )} -
- )} + { - const { t } = useTranslation(); - const { cid, content, link, linkHeight, linkWidth, parentCid, postCid, state, subplebbitAddress } = reply || {}; - - const commentMediaInfo = getCommentMediaInfo(reply); - const { type, url } = commentMediaInfo || {}; - const embedUrl = url && new URL(url); - const hasThumbnail = getHasThumbnail(commentMediaInfo, link); - const [showThumbnail, setShowThumbnail] = useState(true); + const { cid, content, parentCid, postCid, state, subplebbitAddress } = reply || {}; const isReplyingToReply = postCid !== parentCid; @@ -288,47 +291,7 @@ const ReplyDesktop = ({ isInPostPage, isPendingPostPage, reply, roles, openReply roles={roles} stateString={stateString} /> - {url && ( -
-
- {t('link')}:{' '} - - {link.length > 30 ? link?.slice(0, 30) + '...' : link} - {' '} - ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}) - {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( - - {' '} - [ - setShowThumbnail(true)}> - {t('close')} - - ] - - )} - {showThumbnail && !hasThumbnail && embedUrl && canEmbed(embedUrl) && ( - - {' '} - [ - setShowThumbnail(false)}> - {t('open')} - - ] - - )} -
- {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && ( - - )} -
- )} + {content && (
{isReplyingToReply && (