- {isInPostView &&
}
+ {isInPostPageView &&
}
{/* TODO: add .largeButtonDisabled and disabledButtonDescription classnames for subs that don't accept posts */}
@@ -279,7 +287,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit
- {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingView && !isInSubplebbitsView && !isInHomeAboutView && (
+ {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingPostView && !isInSubplebbitsView && !isInHomeAboutView && (
{subplebbit?.address}
@@ -312,9 +320,22 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit
{`u/${creatorAddress}`}
{createdAt &&
{t('community_for', { date: getFormattedTimeDuration(createdAt) })}}
-
- {blocked ? t('unblock_community') : t('block_community')}
-
+ {showBlockConfirm ? (
+
+ {t('are_you_sure')}{' '}
+
+ {t('yes')}
+
+ {' / '}
+
+ {t('no')}
+
+
+ ) : (
+
+ {blocked ? t('unblock_community') : t('block_community')}
+
+ )}
diff --git a/src/hooks/use-comment-media-info.ts b/src/hooks/use-comment-media-info.ts
index 711fa75e..1d2600c0 100644
--- a/src/hooks/use-comment-media-info.ts
+++ b/src/hooks/use-comment-media-info.ts
@@ -1,17 +1,26 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
import { Comment } from '@plebbit/plebbit-react-hooks';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
+import { isPendingPostView, isPostPageView } from '../lib/utils/view-utils';
export const useCommentMediaInfo = (comment: Comment) => {
+ const location = useLocation();
+ const params = useParams();
+ const isInPostPageView = isPostPageView(location.pathname, params);
+ const isInPendingPostView = isPendingPostView(location.pathname, params);
// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(comment), [comment]);
const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
const fetchThumbnail = useCallback(async () => {
+ if (!isInPostPageView && !isInPendingPostView) {
+ return; // don't fetch in feed view, it displaces the posts
+ }
if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
setCommentMediaInfo(newMediaInfo);
}
- }, [initialCommentMediaInfo]);
+ }, [initialCommentMediaInfo, isInPostPageView, isInPendingPostView]);
useEffect(() => {
fetchThumbnail();
}, [fetchThumbnail]);
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 07073e54..898e0605 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -85,11 +85,11 @@ export const isInboxUnreadView = (pathname: string): boolean => {
return pathname === `/inbox/unread`;
};
-export const isPendingView = (pathname: string, params: ParamsType): boolean => {
+export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
return pathname === `/profile/${params.accountCommentIndex}`;
};
-export const isPostView = (pathname: string, params: ParamsType): boolean => {
+export const isPostPageView = (pathname: string, params: ParamsType): boolean => {
// some subs might use emojis in their address, so we need to decode the pathname
const decodedPathname = decodeURIComponent(pathname);
return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
diff --git a/src/themes.css b/src/themes.css
index 701c6e72..7acc7de6 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -53,7 +53,7 @@
--pagination-button-border-hover: 1px solid #5a728a;
--play-button: url("/public/assets/buttons/play-button-dark.png");
--play-button-hover: url("/public/assets/buttons/play-button-hover.png");
- --red: rgb(200, 0, 0);
+ --red: rgb(255, 21, 21);
--removed-reply-backgrouhd-color: rgb(27, 30, 32);
--text: #bfbfbf;
--text-button: url("/public/assets/buttons/text-button-dark.png");
diff --git a/src/views/pending-post/pending-post.module.css b/src/views/pending-post/pending-post.module.css
index 87b36837..9e167eac 100644
--- a/src/views/pending-post/pending-post.module.css
+++ b/src/views/pending-post/pending-post.module.css
@@ -1,5 +1,5 @@
.container {
- padding: 7px 5px 0px 5px;
+ padding: 7px 5px 32px 5px;
}
.stateString {
diff --git a/src/views/post-page/post-page.module.css b/src/views/post-page/post-page.module.css
index 9a9df228..5229e5b8 100644
--- a/src/views/post-page/post-page.module.css
+++ b/src/views/post-page/post-page.module.css
@@ -1,5 +1,5 @@
.content {
- padding: 7px 5px 0px 5px;
+ padding: 7px 5px 32px 5px;
}
.replyArea {
@@ -38,11 +38,6 @@
margin-right: 15px;
}
-.loadingString {
- padding: 5px;
- position: absolute;
-}
-
.dropdown {
display: inline;
position: relative;
@@ -87,12 +82,13 @@
margin-left: 3px;
}
+.loadingString {
+ padding: 5px;
+}
+
.stateString {
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- width: calc(100vw - 28px);
- width: 100vw;
color: var(--text-info);
font-size: x-small;
}
diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx
index 98e38245..f8377629 100644
--- a/src/views/post-page/post-page.tsx
+++ b/src/views/post-page/post-page.tsx
@@ -10,7 +10,7 @@ import PostComponent from '../../components/post';
import Sidebar from '../../components/sidebar';
import useReplies from '../../hooks/use-replies';
import useStateString from '../../hooks/use-state-string';
-import { isPendingView, isPostContextView } from '../../lib/utils/view-utils';
+import { isPendingPostView, isPostContextView } from '../../lib/utils/view-utils';
import findTopParentCidOfReply from '../../lib/utils/cid-utils';
import _ from 'lodash';
@@ -148,7 +148,7 @@ const PostWithContext = ({ post }: { post: Comment }) => {
const PostPage = () => {
const params = useParams();
const location = useLocation();
- const isInPendingView = isPendingView(location.pathname, params);
+ const isInPendingPostView = isPendingPostView(location.pathname, params);
const isInPostContextView = isPostContextView(location.pathname, params, location.search);
const post = useComment({ commentCid: params?.commentCid });
@@ -169,7 +169,7 @@ const PostPage = () => {