+
+
Challenge for {publicationType}
-
+
{title && (
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 899ca88f..55ec8e76 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -1,11 +1,11 @@
import React from 'react';
-import styles from './comment-media.module.css';
-import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
-import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
-import Embed, { canEmbed } from '../embed';
import { useTranslation } from 'react-i18next';
-import useWindowWidth from '../../hooks/use-window-width';
+import styles from './comment-media.module.css';
+import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
import { getHostname } from '../../lib/utils/url-utils';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
+import useWindowWidth from '../../hooks/use-window-width';
+import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
@@ -129,7 +129,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
{' '}
- ({type})
+ ({getDisplayMediaInfoType(type, t)})
)}
{isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && (
@@ -144,8 +144,10 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
};
const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+ const { t } = useTranslation();
const isMobile = useWindowWidth() < 640;
const { type, url } = commentMediaInfo || {};
+
return (
@@ -160,7 +162,7 @@ const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, link
setShowThumbnail={setShowThumbnail}
/>
)}
- {isMobile && type && {type}
}
+ {isMobile && type && {getDisplayMediaInfoType(type, t)}
}
{!showThumbnail &&
@@ -70,7 +77,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
{url.length > 30 ? url.slice(0, 30) + '...' : url}
{' '}
- ({type})
+ ({type && getDisplayMediaInfoType(type, t)})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
{' '}
@@ -112,10 +119,10 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
{title && {displayTitle} }
- {displayName || 'Anonymous'}
+ {displayName || _.capitalize(t('anonymous'))}
{authorRole && ` ## Board ${authorRole}`}{' '}
- {!(isDescription || isRules) && (u/{shortAddress}) }
+ {!(isDescription || isRules) && (u/{shortAddress || accountShortAddress}) }
{getFormattedDate(timestamp)}
@@ -124,13 +131,13 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
{!(isDescription || isRules) && (
- !cid && e.preventDefault()}>
+ !cid && e.preventDefault()}>
c/
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -168,7 +175,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
{content.length > 1000 && !isInPostPage && (
- Comment too long. Click here to view the full text. +
{loadingString} @@ -326,7 +344,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { ); }; -const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { +const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -338,7 +356,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const location = useLocation(); const isInPostPage = isPostPageView(location.pathname, params); - const linkCount = useCountLinksInReplies(post); + const linksCount = useCountLinksInReplies(post); const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; @@ -348,6 +366,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const replies = useReplies(post); + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + return (
- Comment too long. Click here to view the full text. +
-
);
};
-const ReplyDesktop = ({ reply, roles }: PostProps) => {
+const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {};
const { address, displayName, shortAddress } = author || {};
@@ -216,6 +229,10 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
+
))}
{stateString !== 'Failed' ?
);
+ // pending reply by account is not yet published
+ const account = useAccount();
+ const accountShortAddress = account?.author?.shortAddress;
+
return (
{'>>'}
@@ -226,21 +243,21 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
- {displayName || 'Anonymous'}
+ {displayName || _.capitalize(t('anonymous'))}
{authorRole && ` ## Board ${authorRole}`}{' '}
- (u/{shortAddress})
+ (u/{shortAddress || accountShortAddress})
{getFormattedDate(timestamp)}
- !cid && e.preventDefault()}>
+ !cid && e.preventDefault()}>
c/
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -268,7 +285,8 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
{t('link')}:{' '}
{link.length > 30 ? link?.slice(0, 30) + '...' : link}
-
+ {' '}
+ ({type && getDisplayMediaInfoType(type, t)})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
{' '}
@@ -313,7 +331,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
)}
{loadingString} @@ -326,7 +344,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { ); }; -const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { +const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -338,7 +356,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const location = useLocation(); const isInPostPage = isPostPageView(location.pathname, params); - const linkCount = useCountLinksInReplies(post); + const linksCount = useCountLinksInReplies(post); const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; @@ -348,6 +366,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const replies = useReplies(post); + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + return (
@@ -362,10 +384,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
- {displayName || 'Anonymous'}
+ {displayName || _.capitalize(t('anonymous'))}
{authorRole && ` ## Board ${authorRole}`}{' '}
- {!(isDescription || isRules) && (u/{shortAddress || address?.slice(0, 12) + '...'})}
+ {!(isDescription || isRules) && (u/{shortAddress || accountShortAddress})}
{pinned && (
@@ -393,7 +415,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -418,7 +440,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{content.length > 1000 && !isInPostPage && (
- Comment too long. Click here to view the full text. +(null);
+ const urlRef = useRef(null);
+
+ const onPublishReply = () => {
+ const currentContent = textRef.current?.value || '';
+ const currentUrl = urlRef.current?.value || '';
+
+ if (!currentContent.trim() && !currentUrl) {
+ alert(`Cannot post empty comment`);
+ return;
+ }
+
+ if (currentUrl && !isValidURL(currentUrl)) {
+ alert('The provided link is not a valid URL.');
+ return;
+ }
+ publishReply();
+ };
+
+ useEffect(() => {
+ if (typeof replyIndex === 'number') {
+ closeModal();
+ resetContent();
+ }
+ }, [replyIndex, resetContent, closeModal]);
+
+ // react-draggable requires a ref to the modal node
+ const nodeRef = useRef(null);
+
+ return (
+
+
@@ -393,7 +415,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -418,7 +440,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{content.length > 1000 && !isInPostPage && (
- Comment too long. Click here to view the full text. +
{replyCount > 0 && `${replyCount} Replies`}
- {linkCount > 0 && ` / ${linkCount} Links`}
+ {linksCount > 0 && ` / ${linksCount} Links`}
{t('view_thread')}
@@ -440,7 +462,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
replies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
@@ -448,7 +470,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
);
};
-const ReplyMobile = ({ reply, roles }: PostProps) => {
+const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
const { t } = useTranslation();
const { author, content, cid, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {};
const { address, displayName, shortAddress } = author || {};
@@ -460,6 +482,15 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
const isReplyingToReply = postCid !== parentCid;
+ // pending reply by account is not yet published
+ const account = useAccount();
+ const accountShortAddress = account?.author?.shortAddress;
+
+ const stateString = useStateString(reply);
+ const loadingString = stateString && (
+
-
))}
{stateString !== 'Failed' ?
+ );
+
return (
@@ -468,10 +499,10 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
...
- {displayName || 'Anonymous'}
+ {displayName || _.capitalize(t('anonymous'))}
{authorRole && ` ## Board ${authorRole}`}{' '}
- (u/{shortAddress})
+ (u/{shortAddress || accountShortAddress})
{pinned && (
@@ -488,7 +519,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -515,6 +546,12 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
)}
+ {loadingString} + + )} )}
@@ -523,16 +560,17 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
);
};
-const Post = ({ post, showAllReplies = false }: PostProps) => {
+const Post = ({ post, showAllReplies = false, openReplyModal }: PostProps) => {
const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
const isMobile = useWindowWidth() < 640;
+
return (
@@ -488,7 +519,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
{!cid ? (
{state === 'failed' ? 'Failed' : 'Pending'}
) : (
-
+ openReplyModal && openReplyModal(cid)}>
{shortCid}
)}
@@ -515,6 +546,12 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
)}
+ {loadingString} + + )} )}
{isMobile ? (
-
+
+ Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
+
+
+
+
+
+
+
+ setContent.link(e.target.value)} />
+
+
+