setIsImageExpanded(true)} />
+ + {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) &&+ ); +}; + +export default CommentContent; diff --git a/src/components/comment-content/index.ts b/src/components/comment-content/index.ts new file mode 100644 index 00000000..a6db6043 --- /dev/null +++ b/src/components/comment-content/index.ts @@ -0,0 +1 @@ +export { default } from './comment-content'; diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 78f6fe3c..3b26aa40 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -135,7 +135,7 @@ interface ImageProps { const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, post }: ImageProps) => { const { t } = useTranslation(); - const { parentCid } = post || {}; + const { parentCid, spoiler } = post || {}; const { type, url } = commentMediaInfo || {}; const isReply = parentCid; const isMobile = useIsMobile(); @@ -151,6 +151,15 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, pos const [hasError, setHasError] = useState(false); const handleError = () => setHasError(true); + if (spoiler && !isImageExpanded) { + const spoilerDimensions = { '--width': '150px', '--height': '150px' } as React.CSSProperties; + return ( + +} + {removed ? ( + reason ? ( + <> + ({t('this_post_was_removed')}) +
+
+ {`${_.capitalize(t('reason'))}: "${reason}"`} + + ) : ( + {_.capitalize(t('this_post_was_removed'))}. + ) + ) : deleted ? ( + reason ? ( + <> + {t('user_deleted_this_post')}{' '} + {`${_.capitalize(t('reason'))}: "${reason}"`} + + ) : ( + {t('user_deleted_this_post')} + ) + ) : ( + <> + {!showOriginal &&} + {((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && ( + +
+
+setShowFullComment(true)} /> }} /> + + )} + {edit && original?.content !== content && ( + + {showOriginal &&} +
+
+} /> }} + />{' '} + {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} } + {showOriginal ? ( + + )} + + )} + {/* TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated */} + {/* {banned && ( + +setShowOriginal(!showOriginal)} /> }} + /> + ) : ( + setShowOriginal(!showOriginal)} /> }} + /> + )} +
+
++ + )} */} + {!cid && state === 'pending' && stateString !== 'Failed' && ( + <> +
+
+ {loadingString} + + )} +
setIsImageExpanded(true)} />
+
+ );
+ }
+
return isMobile ? (
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 4f136294..223440fc 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAuthorAvatar, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
@@ -17,11 +17,11 @@ import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useHide from '../../hooks/use-hide';
import useReplies from '../../hooks/use-replies';
import useStateString from '../../hooks/use-state-string';
+import CommentContent from '../comment-content';
import CommentMedia from '../comment-media';
import EditMenu from '../edit-menu/edit-menu';
import { canEmbed } from '../embed';
import LoadingEllipsis from '../loading-ellipsis';
-import Markdown from '../markdown';
import PostMenuDesktop from './post-menu-desktop';
import ReplyQuotePreview from '../reply-quote-preview';
import Tooltip from '../tooltip';
@@ -251,8 +251,7 @@ const PostMediaContent = ({ post, hasThumbnail, spoiler, t }: { post: any; hasTh
{mediaDimensions && `, ${mediaDimensions}`})
{!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
- {' '}
- [
+ -[
setShowThumbnail(true)}>
{t('close')}
@@ -285,120 +284,6 @@ const PostMediaContent = ({ post, hasThumbnail, spoiler, t }: { post: any; hasTh
);
};
-const PostMessage = ({ post }: PostProps) => {
- const { cid, content, deleted, edit, isRules, original, parentCid, postCid, reason, removed, state } = post || {};
- // TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated
- // const banned = !!post?.commentAuthor?.banExpiresAt;
- const { t } = useTranslation();
- const params = useParams();
- const location = useLocation();
- const isInPostView = isPostPageView(location.pathname, params);
- const [showOriginal, setShowOriginal] = useState(false);
-
- const [showFullComment, setShowFullComment] = useState(false);
- const displayContent =
- content &&
- (!isInPostView && content.length > 1000 && !showFullComment
- ? content.slice(0, 1000)
- : isInPostView && content.length > 2000 && !showFullComment
- ? content.slice(0, 2000)
- : content);
-
- const quotelinkReply = useComment({ commentCid: parentCid });
- const isReply = parentCid;
- const isReplyingToReply = (postCid && postCid !== parentCid) || quotelinkReply?.postCid !== parentCid;
-
- const stateString = useStateString(post);
-
- const loadingString = (
- - {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) &&- ); -}; - const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { let post = reply; // handle pending mod or author edit @@ -420,7 +305,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {} - {removed ? ( - reason ? ( - <> - ({t('this_post_was_removed')}) -
-
- {`${_.capitalize(t('reason'))}: "${reason}"`} - - ) : ( - {_.capitalize(t('this_post_was_removed'))}. - ) - ) : deleted ? ( - reason ? ( - <> - {t('user_deleted_this_post')}{' '} - {`${_.capitalize(t('reason'))}: "${reason}"`} - - ) : ( - {t('user_deleted_this_post')} - ) - ) : ( - <> - {!showOriginal &&} - {edit && original?.content !== post?.content && ( - - {showOriginal && } -
-} /> }} - />{' '} - {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} } - {showOriginal ? ( - - )} - - )} - {/* TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated */} - {/* {banned && ( - -setShowOriginal(!showOriginal)} /> }} - /> - ) : ( - setShowOriginal(!showOriginal)} /> }} - /> - )} -
-
-- - )} */} - {((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && ( - -
-setShowFullComment(true)} /> }} /> - - )} - {!cid && state === 'pending' && stateString !== 'Failed' && ( - <> -
- {loadingString} - - )} -
- {isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply &&- ); -}; - const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { let post = reply; // handle pending mod or author edit @@ -351,7 +236,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { data-post-cid={postCid} >} - {removed ? ( - reason ? ( - <> - ({t('this_post_was_removed')}) -
-
- {`${_.capitalize(t('reason'))}: "${reason}"`} - - ) : ( - {_.capitalize(t('this_post_was_removed'))}. - ) - ) : deleted ? ( - reason ? ( - <> - {t('user_deleted_this_post')}{' '} - {`${_.capitalize(t('reason'))}: "${reason}"`} - - ) : ( - {t('user_deleted_this_post')} - ) - ) : ( - <> - {!showOriginal &&} - {edit && original?.content !== post?.content && ( - - {showOriginal && } -
-} /> }} - />{' '} - {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} } - {showOriginal ? ( - - )} - - )} - {/* TODO: commentAuthor is not available outside of editedComment, update when available */} - {/* {banned && ( - -setShowOriginal(!showOriginal)} /> }} - /> - ) : ( - setShowOriginal(!showOriginal)} /> }} - /> - )} -
-
-- - )} */} - {((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && ( - -
-setShowFullComment(true)} /> }} /> - - )} - {!cid && state === 'pending' && stateString !== 'Failed' && ( - <> -
- {loadingString} - - )} -
}
- {showOfflineIcon && }
{displayAddress}
{nsfwTag && ({t(nsfwTag)})}
+ {showOfflineIcon && (
+
+
{title || displayAddress}
+{title}
{stats.hourPostCount ?? '?'}
+{stats.hourPostCount ?? ?}
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 2d54f7a2..5a06baa6 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -29,11 +29,6 @@ border: 1px solid black; } -.boardsBox { - overflow: hidden; - min-height: 150px; -} - .loading { display: flex; justify-content: center; @@ -41,86 +36,6 @@ margin-top: 10px; } -.offlineIcon { - display: inline-block; - vertical-align: text-top; - margin-right: 2px; - width: 13px; - height: 13px; - background-repeat: no-repeat; - background-size: contain; - image-rendering: pixelated; -} - -.boardsBox table { - display: table; - margin-bottom: 10px; - overflow: hidden; - table-layout: fixed; - width: calc(100% + 4px); - margin-left: -2px; - border-collapse: separate; - border-spacing: 2px 0; -} - -.boardsBox table thead th { - background: #fca; - color: #800; - border: 1px solid #800; - padding: 4px 15px 5px 5px; - text-align: left; - white-space: nowrap; - text-transform: capitalize; -} - -.boardsBox table tbody td { - margin: 0; - padding: 4px 15px 4px 4px; - text-align: left; -} - -.boardsBox table tbody tr:nth-of-type( even ) { - background: #ede2d4; -} - -.boardCell { - position: static; - margin: 0; - padding: 0; - box-sizing: border-box; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.boardCell a { - color: inherit; -} - -.loadMoreButton { - text-align: center; - margin-bottom: 14px; - color: var(--topbar-separator-color); -} - -.displayCount { - font-size: 12px; - text-align: center; - margin-bottom: 10px; - text-transform: lowercase; -} - -.loadMoreButton span { - color: var(--topbar-desktop-link-text-color); - text-transform: capitalize; -} - -.loadMoreButton span:hover { - cursor: pointer; - color: var(--button-desktop-text-color-hover); - text-decoration: underline; -} - .boxBar, .infoboxBar { padding-left: 0.5em; line-height: 2em; @@ -245,13 +160,6 @@ content: '✔ '; } -.nsfw { - color: red; - font-weight: 700; - text-transform: uppercase; - font-size: smaller; -} - .footer a { text-transform: capitalize; } @@ -338,10 +246,6 @@ text-transform: capitalize; } -.boardPPH { - width: 33px; -} - @media (max-width: 640px) { .content { min-width: 0; diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 83af6cf3..b76c8dd4 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -9,6 +9,7 @@ import useSubplebbitsStats from '../../hooks/use-subplebbits-stats'; import PopularThreadsBox from './popular-threads-box'; import BoardsList from './boards-list'; import Version from '../../components/version'; +import _ from 'lodash'; // https://github.com/plebbit/temporary-default-subplebbits/blob/master/README.md // plebchan shouldn't consider 'vulgar' or 'anti' as nsfw tags, unlike more sfw-oriented clients @@ -35,7 +36,7 @@ const SearchBar = () => { spellCheck='false' autoCapitalize='off' type='text' - placeholder={`"board.eth/.sol" ${t('or')} "12D3KooW..."`} + placeholder={_.lowerCase(t('enter_board_address'))} ref={searchInputRef} /> diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css index fb931c4b..0bc3987c 100644 --- a/src/views/post/post.module.css +++ b/src/views/post/post.module.css @@ -221,7 +221,6 @@ .stateString { color: var(--post-mobile-abbr-text-color); - padding-left: 20px; } .loadingString {