@@ -378,35 +411,40 @@ const Header = () => {
>
- {isMobile && !isInSubplebbitSubmitView && (
+ {isMobile && !isInSubplebbitSubmitView && !(isBroadlyNsfwSubplebbit && !hasUnhiddenAnyNsfwCommunity) && (
- {(logoIsAvatar || (!isInSubplebbitView && !isInProfileView && !isInAuthorView) || (isInSubplebbitView && !suggested?.avatarUrl)) && (
+ {(logoIsAvatar || (!isInSubplebbitView && !isInProfileView && !isInAuthorView) || !logoIsAvatar) && (
)}
- {((!isInSubplebbitView && !isInProfileView && !isInAuthorView) || (isInSubplebbitView && !suggested?.avatarUrl)) && (
+ {((!isInSubplebbitView && !isInProfileView && !isInAuthorView) || !logoIsAvatar) && (
)}
- {!isInHomeView && !isInHomeAboutView && (
+ {!isInHomeView && !isInHomeAboutView && !isInModView && !isInAllView && (
+
+ )}
+ {isInSubplebbitView && !isInSubplebbitSubmitView && !(isBroadlyNsfwSubplebbit && !hasUnhiddenAnyNsfwCommunity) && (
-
{
- spoiler && !showSpoiler && setShowSpoiler(true);
- }}
- >
- {spoiler && !showSpoiler && !(deleted || removed) && (
- <>
-
- {t('view_spoiler')}
-
- )}
- {link && !removed && commentMediaInfo?.type !== 'webpage' && (
-
);
};
diff --git a/src/components/post/label/label.module.css b/src/components/post/label/label.module.css
index a37b93a0..5b307594 100644
--- a/src/components/post/label/label.module.css
+++ b/src/components/post/label/label.module.css
@@ -5,10 +5,13 @@
font-size: 10px;
line-height: 14px;
padding: 0 4px;
- margin: 0 2px 2px 0;
text-transform: uppercase;
}
+.label {
+ padding-right: 8px;
+}
+
.black {
color: var(--text);
border-color: currentColor;
@@ -27,4 +30,9 @@
.green {
color: var(--green);
border-color: var(--green);
-}
\ No newline at end of file
+}
+
+.nsfw-red {
+ color: var(--red-nsfw);
+ border-color: var(--red-nsfw);
+}
diff --git a/src/components/post/label/label.tsx b/src/components/post/label/label.tsx
index 1578b7dd..8738193c 100644
--- a/src/components/post/label/label.tsx
+++ b/src/components/post/label/label.tsx
@@ -9,7 +9,11 @@ interface LabelProps {
const Label = ({ color, text }: LabelProps) => {
const { t } = useTranslation();
- return {t(text)};
+ return (
+
+ {t(text)}
+
+ );
};
export default Label;
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 6138c29a..f7f678cb 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -3,7 +3,7 @@ import styles from './post.module.css';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAuthorAddress, useBlock, useComment, useEditedComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { useTranslation } from 'react-i18next';
-import { isAllView, isHomeView, isPostPageView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils';
+import { isAllView, isPostPageView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils';
import { getHasThumbnail } from '../../lib/utils/media-utils';
import { getPostScore, formatScore } from '../../lib/utils/post-utils';
import { getHostname } from '../../lib/utils/url-utils';
@@ -20,6 +20,8 @@ import useUpvote from '../../hooks/use-upvote';
import _ from 'lodash';
import useIsMobile from '../../hooks/use-is-mobile';
import { usePinnedPostsStore } from '../../stores/use-pinned-posts-store';
+import useWindowWidth from '../../hooks/use-window-width';
+import { useIsNsfwSubplebbit } from '../../hooks/use-is-nsfw-subplebbit';
interface PostAuthorProps {
authorAddress: string;
@@ -106,6 +108,11 @@ const Post = ({ index, post = {} }: PostProps) => {
title,
upvoteCount,
} = post || {};
+
+ // Check if the subplebbit is NSFW based on its tags
+ const isNsfwSubplebbit = useIsNsfwSubplebbit(subplebbitAddress);
+ const nsfw = post?.nsfw || isNsfwSubplebbit;
+
const { displayName, shortAddress } = author || {};
const { shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment: post });
@@ -121,7 +128,6 @@ const Post = ({ index, post = {} }: PostProps) => {
const isInAllView = isAllView(location.pathname);
const isInPostPageView = isPostPageView(location.pathname, params);
const isInProfileHiddenView = isProfileHiddenView(location.pathname);
- const isInHomeView = isHomeView(location.pathname);
const isInSubplebbitView = isSubplebbitView(location.pathname, params);
const commentMediaInfo = useCommentMediaInfo(post);
@@ -160,9 +166,10 @@ const Post = ({ index, post = {} }: PostProps) => {
};
const isMobile = useIsMobile();
+ const windowWidth = useWindowWidth();
const pinnedPostsCount = usePinnedPostsStore((state) => state.pinnedPostsCount);
let rank = (index ?? 0) + 1;
- if (!isInHomeView) {
+ if (isInSubplebbitView) {
rank = rank - pinnedPostsCount;
}
@@ -177,7 +184,7 @@ const Post = ({ index, post = {} }: PostProps) => {
- {
- if (e.button === 0) {
- e.preventDefault();
- toggleExpanded && toggleExpanded();
- }
- }}
- >
- {mediaComponent}
-
-
- )}
- {content && showContent && (
-
-
+ )}
+ {content && showContent && (
+
-
+ )}
+ {alwaysShowNsfw && (
+ - {t('mod_reason')}: {modEditReason} -
+ {link && !removed && commentMediaInfo?.type !== 'webpage' && ( + setHideContent(false)}>
+ {((nsfw && blurNsfwThumbnails && !isNsfwSubplebbit) || spoiler) && hideContent && link && commentMediaInfo?.type !== 'webpage' && !(deleted || removed) && (
+ <>
+
+ {nsfw && spoiler ? t('see_nsfw_spoiler') : spoiler ? t('view_spoiler') : nsfw ? t('see_nsfw') : ''}
+ {nsfw && (
+
+ {t('always_show_nsfw')}
+
)}
- {authorEditReason && !(removed || deleted) && (
-
+
+ )}
+ {
+ if (e.button === 0) {
+ e.preventDefault();
+ toggleExpanded && toggleExpanded();
+ }
+ }}
+ >
+ {mediaComponent}
+
+ - {t('edit')}: {authorEditReason} -
- )} -
+
+
+
- )}
- {t('always_show_nsfw_notice')}
+
+
+ )}
+
+ + {t('mod_reason')}: {modEditReason} +
+ )} + {authorEditReason && !(removed || deleted) && ( ++ {t('edit')}: {authorEditReason} +
+ )} +
- {!isMobile &&
- {isEditing ? (
-
diff --git a/src/components/post/thumbnail/thumbnail.module.css b/src/components/post/thumbnail/thumbnail.module.css
index 951f8884..c0addbd5 100644
--- a/src/components/post/thumbnail/thumbnail.module.css
+++ b/src/components/post/thumbnail/thumbnail.module.css
@@ -53,4 +53,8 @@
.spoilerIcon {
background-image: var(--thumbnail-icon-spoiler);
-}
\ No newline at end of file
+}
+
+.nsfwIcon {
+ background-image: var(--thumbnail-icon-nsfw);
+}
diff --git a/src/components/post/thumbnail/thumbnail.tsx b/src/components/post/thumbnail/thumbnail.tsx
index 5deb6ef8..49bf7158 100644
--- a/src/components/post/thumbnail/thumbnail.tsx
+++ b/src/components/post/thumbnail/thumbnail.tsx
@@ -1,13 +1,16 @@
import styles from './thumbnail.module.css';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
import { CommentMediaInfo } from '../../../lib/utils/media-utils';
import useFetchGifFirstFrame from '../../../hooks/use-fetch-gif-first-frame';
+import useContentOptionsStore from '../../../stores/use-content-options-store';
+import { useIsNsfwSubplebbit } from '../../../hooks/use-is-nsfw-subplebbit';
interface ThumbnailProps {
cid?: string;
commentMediaInfo?: CommentMediaInfo;
expanded?: boolean;
isLink: boolean;
+ isNsfw?: boolean;
isReply: boolean;
isSpoiler?: boolean;
isText: boolean;
@@ -23,6 +26,7 @@ const Thumbnail = ({
commentMediaInfo,
expanded = false,
isLink = false,
+ isNsfw = false,
isReply = false,
isSpoiler = false,
isText = false,
@@ -36,6 +40,10 @@ const Thumbnail = ({
let displayWidth, displayHeight, hasLinkDimensions;
const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible;
+ const { blurNsfwThumbnails } = useContentOptionsStore();
+ const pageSubplebbitAddress = useParams().subplebbitAddress;
+ const isNsfwSubplebbit = useIsNsfwSubplebbit(pageSubplebbitAddress || '');
+
if (linkWidth && linkHeight) {
let scale = Math.min(1, 70 / Math.max(linkWidth, linkHeight));
displayWidth = `${linkWidth * scale}px`;
@@ -47,7 +55,7 @@ const Thumbnail = ({
hasLinkDimensions = false;
}
- if (isText || isLink || isSpoiler) {
+ if (isText || isLink || isSpoiler || (isNsfw && !isNsfwSubplebbit)) {
displayWidth = '50px';
displayHeight = '50px';
hasLinkDimensions = true;
@@ -82,6 +90,10 @@ const Thumbnail = ({
mediaComponent = ;
}
+ if (isNsfw && blurNsfwThumbnails && !isNsfwSubplebbit) {
+ mediaComponent = ;
+ }
+
return (
diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index 6ab77624..09a0527b 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -369,4 +369,12 @@
font-size: x-small;
line-height: normal;
vertical-align: middle;
+}
+
+.submitter {
+ color: var(--submitter-color);
+}
+
+.submitter:hover {
+ text-decoration: underline;
}
\ No newline at end of file
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 0caa8945..d1d4cbf8 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -37,9 +37,25 @@ interface ReplyAuthorProps {
isAvatarDefined: boolean;
removed: boolean;
shortAuthorAddress: string | undefined;
+ submitterAddress: string;
+ subplebbitAddress: string;
+ postCid: string;
}
-const ReplyAuthor = ({ address, authorRole, cid, deleted, displayName, imageUrl, isAvatarDefined, removed, shortAuthorAddress }: ReplyAuthorProps) => {
+const ReplyAuthor = ({
+ address,
+ authorRole,
+ cid,
+ deleted,
+ displayName,
+ imageUrl,
+ isAvatarDefined,
+ removed,
+ shortAuthorAddress,
+ submitterAddress,
+ subplebbitAddress,
+ postCid,
+}: ReplyAuthorProps) => {
const { t } = useTranslation();
const { hideAvatars } = useAvatarVisibilityStore();
const isAuthorAdmin = authorRole === 'admin';
@@ -48,6 +64,8 @@ const ReplyAuthor = ({ address, authorRole, cid, deleted, displayName, imageUrl,
const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';
const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
const shortDisplayName = displayName?.length > 20 ? displayName?.slice(0, 20) + '...' : displayName;
+ const isAuthorSubmitter = address === submitterAddress;
+
return (
<>
{removed || deleted ? (
@@ -60,20 +78,28 @@ const ReplyAuthor = ({ address, authorRole, cid, deleted, displayName, imageUrl,
)}
{displayName && (
-
+
{shortDisplayName}{' '}
)}
-
+
{displayName ? `u/${shortAuthorAddress}` : shortAuthorAddress}
- {authorRole && (
+ {(authorRole || isAuthorSubmitter) && (
{' '}
[
-
- {authorRoleInitial}
-
+ {isAuthorSubmitter && (
+
+ S
+
+ )}
+ {isAuthorSubmitter && authorRole && ','}
+ {authorRole && (
+
+ {authorRoleInitial}
+
+ )}
]
)}
@@ -348,6 +374,8 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
);
+ const post = useComment({ commentCid: postCid });
+
return (
{pinned ? undefined : rank}
}
+ {!isMobile && !isInPostPageView && {pinned ? undefined : rank}
}
@@ -194,8 +201,9 @@ const Post = ({ index, post = {} }: PostProps) => {
commentMediaInfo={commentMediaInfo}
isReply={false}
isLink={!hasThumbnail && link}
+ isNsfw={nsfw}
isSpoiler={spoiler}
- isText={!hasThumbnail && content?.trim().length > 0}
+ isText={!hasThumbnail && !link}
link={link}
linkHeight={linkHeight}
linkWidth={linkWidth}
@@ -231,16 +239,17 @@ const Post = ({ index, post = {} }: PostProps) => {
)}
- {(!(commentMediaInfo?.type === 'webpage') || (commentMediaInfo?.type === 'webpage' && content?.trim().length > 0)) && (
-
{t('submitted')} {getFormattedTimeAgo(timestamp)}{' '}
{edit && isInPostPageView && {t('last_edited', { timestamp: getFormattedTimeAgo(edit.timestamp) })}}{' '}
@@ -285,6 +294,7 @@ const Post = ({ index, post = {} }: PostProps) => {
failed={state === 'failed'}
editState={editState}
index={post?.index}
+ nsfw={nsfw}
removed={removed}
replyCount={replyCount}
showCommentEditForm={showCommentEditForm}
@@ -292,23 +302,49 @@ const Post = ({ index, post = {} }: PostProps) => {
subplebbitAddress={subplebbitAddress}
/>
+ {!(windowWidth < 770) && (
+ <>
+ {isEditing ? (
+
{isSingleReply && !isInInboxView &&
- {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingPostView && !isInSubplebbitsView && !isInHomeAboutView && (
+ {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInModView && !isInPendingPostView && !isInSubplebbitsView && !isInHomeAboutView && (
{subplebbit?.address}
diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css
index 47d9d175..4ce5a5b8 100644
--- a/src/components/topbar/topbar.module.css
+++ b/src/components/topbar/topbar.module.css
@@ -145,7 +145,7 @@
}
.homeButton {
- padding-left: 5px;
+ margin-left: 5px;
}
.moreLink {
@@ -162,7 +162,7 @@
@media (min-width: 640px) {
.homeButton {
- padding-left: 10px;
+ margin-left: 10px;
}
}
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index d32f5cfe..0fa69f0e 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -1,12 +1,12 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from './topbar.module.css';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import useTimeFilter from '../../hooks/use-time-filter';
-import { isAllView, isHomeView, isSubplebbitView } from '../../lib/utils/view-utils';
+import { isAllView, isHomeView, isModView, isSubplebbitView } from '../../lib/utils/view-utils';
const sortTypes = ['hot', 'new', 'active', 'controversialAll', 'topAll'];
const isElectron = window.isElectron === true;
@@ -20,9 +20,13 @@ const TopBar = () => {
const subscriptions = account?.subscriptions;
const isinAllView = isAllView(location.pathname);
const isInHomeView = isHomeView(location.pathname);
+ const isInModView = isModView(location.pathname);
const isInSubplebbitView = isSubplebbitView(location.pathname, params);
const homeButtonClass = isInHomeView ? styles.selected : styles.choice;
+ const { accountSubplebbits } = useAccountSubplebbits();
+ const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
+
const { timeFilterName, timeFilterNames } = useTimeFilter();
const selectedTimeFilter = timeFilterName || (isInSubplebbitView ? 'all' : timeFilterName);
@@ -52,6 +56,8 @@ const TopBar = () => {
? `/p/${params.subplebbitAddress}/${selectedSortType}/${timeFilterName}`
: isinAllView
? `p/all/${selectedSortType}/${timeFilterName}`
+ : isInModView
+ ? `/p/mod/${selectedSortType}/${timeFilterName}`
: `/${selectedSortType}/${timeFilterName}`;
};
@@ -174,6 +180,14 @@ const TopBar = () => {
{t('all')}
+ {accountSubplebbitAddresses.length > 0 && (
+
+ -
+
+ {t('mod')}
+
+
+ )}
|
{subplebbitAddresses?.map((address, index) => {
const displayAddress = address.endsWith('.eth') ? address.slice(0, -4) : address.endsWith('.sol') ? address.slice(0, -4) : address;
diff --git a/src/hooks/use-comment-media-info.ts b/src/hooks/use-comment-media-info.ts
index 1d2600c0..ca61e531 100644
--- a/src/hooks/use-comment-media-info.ts
+++ b/src/hooks/use-comment-media-info.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Comment } from '@plebbit/plebbit-react-hooks';
import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
@@ -9,21 +9,23 @@ export const useCommentMediaInfo = (comment: Comment) => {
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, isInPostPageView, isInPendingPostView]);
- useEffect(() => {
- fetchThumbnail();
- }, [fetchThumbnail]);
- return commentMediaInfo;
+ // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+ const fetchThumbnail = useCallback(async () => {
+ let commentMediaInfo = getCommentMediaInfo(comment);
+ if (commentMediaInfo?.type === 'webpage' && !commentMediaInfo.thumbnail) {
+ const newMediaInfo = await fetchWebpageThumbnailIfNeeded(commentMediaInfo);
+ commentMediaInfo = newMediaInfo;
+ }
+ return commentMediaInfo;
+ }, [comment]);
+
+ useEffect(() => {
+ // don't fetch in feed view, it displaces the posts
+ if (isInPostPageView || isInPendingPostView) {
+ fetchThumbnail();
+ }
+ }, [fetchThumbnail, isInPostPageView, isInPendingPostView]);
+
+ return getCommentMediaInfo(comment);
};
diff --git a/src/hooks/use-default-subplebbits.ts b/src/hooks/use-default-subplebbits.ts
index 99f27b28..4f2a5b86 100644
--- a/src/hooks/use-default-subplebbits.ts
+++ b/src/hooks/use-default-subplebbits.ts
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import useContentOptionsStore from '../stores/use-content-options-store';
interface Subplebbit {
title?: string;
@@ -28,8 +29,6 @@ export const categorizeSubplebbits = (subplebbits: Subplebbit[]) => {
return { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs };
};
-const nsfwTags = ['gore', 'adult', 'anti'];
-
export const useDefaultSubplebbits = () => {
const [subplebbits, setSubplebbits] = useState([]);
@@ -39,17 +38,9 @@ export const useDefaultSubplebbits = () => {
}
(async () => {
try {
- const multisub = await fetch(
- 'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json',
- // { cache: 'no-cache' }
- ).then((res) => res.json());
-
- const filteredSubplebbits = multisub.subplebbits.filter((subplebbit: Subplebbit) => {
- return !subplebbit.tags?.some((tag) => nsfwTags.includes(tag));
- });
-
- cache = filteredSubplebbits;
- setSubplebbits(filteredSubplebbits);
+ const multisub = await fetch('https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json').then((res) => res.json());
+ cache = multisub.subplebbits;
+ setSubplebbits(multisub.subplebbits);
} catch (e) {
console.warn(e);
}
@@ -61,7 +52,21 @@ export const useDefaultSubplebbits = () => {
export const useDefaultSubplebbitAddresses = () => {
const defaultSubplebbits = useDefaultSubplebbits();
- const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(defaultSubplebbits), [defaultSubplebbits]);
+ const { hideAdultCommunities, hideGoreCommunities, hideAntiCommunities, hideVulgarCommunities } = useContentOptionsStore();
+
+ const filteredSubplebbits = useMemo(() => {
+ return defaultSubplebbits.filter((subplebbit: Subplebbit) => {
+ const tags = subplebbit.tags || [];
+ if (hideAdultCommunities && tags.includes('adult')) return false;
+ if (hideGoreCommunities && tags.includes('gore')) return false;
+ if (hideAntiCommunities && tags.includes('anti')) return false;
+ if (hideVulgarCommunities && tags.includes('vulgar')) return false;
+ return true;
+ });
+ }, [defaultSubplebbits, hideAdultCommunities, hideGoreCommunities, hideAntiCommunities, hideVulgarCommunities]);
+
+ const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(filteredSubplebbits), [filteredSubplebbits]);
+
return useMemo(
() =>
[
diff --git a/src/hooks/use-is-broadly-nsfw-subplebbit.ts b/src/hooks/use-is-broadly-nsfw-subplebbit.ts
new file mode 100644
index 00000000..cbc8c297
--- /dev/null
+++ b/src/hooks/use-is-broadly-nsfw-subplebbit.ts
@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useDefaultSubplebbits } from './use-default-subplebbits';
+
+const SENSITIVE_TAGS = ['adult', 'gore', 'anti', 'vulgar'];
+
+export const useIsBroadlyNsfwSubplebbit = (subplebbitAddress: string) => {
+ const defaultSubplebbits = useDefaultSubplebbits();
+
+ return useMemo(() => {
+ if (!subplebbitAddress || !defaultSubplebbits) return false;
+
+ // Find the subplebbit in the default list
+ const subplebbit = defaultSubplebbits.find((sub) => sub.address === subplebbitAddress);
+
+ // Check if the subplebbit has any of the sensitive tags
+ return Boolean(subplebbit?.tags?.some((tag) => SENSITIVE_TAGS.includes(tag)));
+ }, [subplebbitAddress, defaultSubplebbits]);
+};
diff --git a/src/hooks/use-is-nsfw-subplebbit.ts b/src/hooks/use-is-nsfw-subplebbit.ts
new file mode 100644
index 00000000..b11ddd04
--- /dev/null
+++ b/src/hooks/use-is-nsfw-subplebbit.ts
@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useDefaultSubplebbits } from './use-default-subplebbits';
+
+export const useIsNsfwSubplebbit = (subplebbitAddress: string) => {
+ const defaultSubplebbits = useDefaultSubplebbits();
+
+ return useMemo(() => {
+ if (!subplebbitAddress || !defaultSubplebbits) return false;
+
+ // Find the subplebbit in the default list
+ const subplebbit = defaultSubplebbits.find((sub) => sub.address === subplebbitAddress);
+
+ // Check if the subplebbit has adult or gore tags
+ return Boolean(subplebbit?.tags?.includes('adult') || subplebbit?.tags?.includes('gore'));
+ }, [subplebbitAddress, defaultSubplebbits]);
+};
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 898e0605..07b11eca 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -30,7 +30,7 @@ export const getAboutLink = (pathname: string, params: ParamsType): string => {
};
export const isAllView = (pathname: string): boolean => {
- return pathname.startsWith('/p/all');
+ return pathname === '/p/all' || pathname.startsWith('/p/all/');
};
export const isAllAboutView = (pathname: string): boolean => {
@@ -85,6 +85,10 @@ export const isInboxUnreadView = (pathname: string): boolean => {
return pathname === `/inbox/unread`;
};
+export const isModView = (pathname: string): boolean => {
+ return pathname === `/p/mod` || pathname.startsWith(`/p/mod/`);
+};
+
export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
return pathname === `/profile/${params.accountCommentIndex}`;
};
diff --git a/src/stores/use-content-options-store.ts b/src/stores/use-content-options-store.ts
new file mode 100644
index 00000000..b7787614
--- /dev/null
+++ b/src/stores/use-content-options-store.ts
@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface ContentOptionsState {
+ blurNsfwThumbnails: boolean;
+ hideAdultCommunities: boolean;
+ hideGoreCommunities: boolean;
+ hideAntiCommunities: boolean;
+ hideVulgarCommunities: boolean;
+ setBlurNsfwThumbnails: (blur: boolean) => void;
+ setHideAdultCommunities: (hide: boolean) => void;
+ setHideGoreCommunities: (hide: boolean) => void;
+ setHideAntiCommunities: (hide: boolean) => void;
+ setHideVulgarCommunities: (hide: boolean) => void;
+}
+
+const useContentOptionsStore = create()(
+ persist(
+ (set) => ({
+ blurNsfwThumbnails: true,
+ hideAdultCommunities: true,
+ hideGoreCommunities: true,
+ hideAntiCommunities: true,
+ hideVulgarCommunities: true,
+ setBlurNsfwThumbnails: (blur) => set({ blurNsfwThumbnails: blur }),
+ setHideAdultCommunities: (hide) => set({ hideAdultCommunities: hide }),
+ setHideGoreCommunities: (hide) => set({ hideGoreCommunities: hide }),
+ setHideAntiCommunities: (hide) => set({ hideAntiCommunities: hide }),
+ setHideVulgarCommunities: (hide) => set({ hideVulgarCommunities: hide }),
+ }),
+ {
+ name: 'content-options',
+ },
+ ),
+);
+
+export default useContentOptionsStore;
diff --git a/src/themes.css b/src/themes.css
index 179c8a49..e27eb621 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -48,13 +48,17 @@
--markdown-blockquote-border: rgb(65, 70, 73);
--markdown-link: rgb(74, 183, 255);
--orange: #FF7500;
+ --over18image: url("/public/assets/over18.png");
+ --over18-alert-color: #ffffff;
--pagination-button-background: rgb(29, 31, 34);
--pagination-button-border: 1px solid rgb(55, 59, 62);
--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(255, 21, 21);
+ --red-nsfw: rgb(255, 55, 89);
--removed-reply-backgrouhd-color: rgb(27, 30, 32);
+ --submitter-color: rgb(67, 166, 255);
--text: #bfbfbf;
--text-button: url("/public/assets/buttons/text-button-dark.png");
--text-button-hover: url("/public/assets/buttons/text-button-hover.png");
@@ -62,9 +66,10 @@
--text-info: #757575;
--text-markdown: #f0f0f0;
--text-primary: #c7c7c7;
- --thumbnail-icon-text: url('/public/assets/thumbnail-icon-text-dark.png');
--thumbnail-icon-link: url('/public/assets/thumbnail-icon-link-dark.png');
+ --thumbnail-icon-nsfw: url('/public/assets/thumbnail-icon-nsfw-dark.png');
--thumbnail-icon-spoiler: url('/public/assets/thumbnail-icon-spoiler-dark.png');
+ --thumbnail-icon-text: url('/public/assets/thumbnail-icon-text-dark.png');
--yellow: rgb(200, 171, 0);
--yellow-box-background: rgb(56, 45, 0);
--yellow-box-contrast: rgb(163, 130, 0);
@@ -123,13 +128,17 @@
--markdown-blockquote-border: #c5c1ad;
--markdown-link: #0079d3;
--orange: #FF7500;
+ --over18image: url("/public/assets/over18.png");
+ --over18-alert-color: #ffffff;
--pagination-button-background: #eee;
--pagination-button-border: 1px solid #ddd;
--pagination-button-border-hover: 1px solid #82A6C9;
--play-button: url("/public/assets/buttons/play-button.png");
--play-button-hover: url("/public/assets/buttons/play-button-hover.png");
--red: red;
+ --red-nsfw: #d10023;
--removed-reply-backgrouhd-color: #f0f0f0;
+ --submitter-color: #0055df;
--text: black;
--text-button: url("/public/assets/buttons/text-button.png");
--text-button-hover: url("/public/assets/buttons/text-button-hover.png");
@@ -137,9 +146,10 @@
--text-info: #888;
--text-markdown: #222222;
--text-primary: #369;
- --thumbnail-icon-text: url('/public/assets/thumbnail-icon-text.png');
--thumbnail-icon-link: url('/public/assets/thumbnail-icon-link.png');
+ --thumbnail-icon-nsfw: url('/public/assets/thumbnail-icon-nsfw.png');
--thumbnail-icon-spoiler: url('/public/assets/thumbnail-icon-spoiler.png');
+ --thumbnail-icon-text: url('/public/assets/thumbnail-icon-text.png');
--yellow: goldenrod;
--yellow-box-background: #fff7d7;
--yellow-box-contrast: #ffd634;
diff --git a/src/views/all/all.tsx b/src/views/all/all.tsx
index eb83301d..121b2617 100644
--- a/src/views/all/all.tsx
+++ b/src/views/all/all.tsx
@@ -18,8 +18,7 @@ const All = () => {
const subplebbitAddresses = useDefaultSubplebbitAddresses();
const params = useParams<{ sortType?: string; timeFilterName?: string }>();
const sortType = params?.sortType || 'hot';
- const timeFilterName = params.timeFilterName;
- const { timeFilterSeconds } = useTimeFilter();
+ const { timeFilterName, timeFilterSeconds } = useTimeFilter();
const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed({ subplebbitAddresses, sortType, newerThan: timeFilterSeconds });
const { t } = useTranslation();
@@ -49,7 +48,7 @@ const All = () => {
if (feed.length === 0) {
footerContent = t('no_posts');
}
- if (hasMore || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
+ if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
footerContent = (
<>
{subplebbitAddressesWithNewerPosts.length > 0 ? (
@@ -69,7 +68,7 @@ const All = () => {
i18nKey='more_posts_last_week'
values={{ currentTimeFilterName }}
components={{
- 1: ,
+ 1: ,
}}
/>
@@ -79,7 +78,7 @@ const All = () => {
i18nKey='more_posts_last_month'
values={{ currentTimeFilterName }}
components={{
- 1: ,
+ 1: ,
}}
/>
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css
index 326b14b9..5da22565 100644
--- a/src/views/home/home.module.css
+++ b/src/views/home/home.module.css
@@ -11,6 +11,13 @@
padding-bottom: 15px;
}
+@media (max-width: 640px) {
+ .morePostsSuggestion {
+ font-size: 11px;
+ padding-bottom: 10px;
+ }
+}
+
.morePostsSuggestion a, .link {
color: var(--text-primary);
text-decoration: none;
@@ -32,7 +39,7 @@
position: relative;
}
-@media (max-width: 640px) {
+@media (max-width: 639px) {
.content {
padding: 7px 2px 0px 2px;
}
@@ -50,4 +57,129 @@
.stateString {
max-width: calc(100% - 305px);
}
-}
\ No newline at end of file
+}
+
+.over18 {
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ margin: auto;
+ text-align: center;
+ width: 100%;
+ max-width: 650px;
+ padding: 0 15px;
+ box-sizing: border-box;
+}
+
+.over18 img {
+ margin-bottom: 20px;
+ margin-top: 60px;
+ height: 150px;
+ width: 150px;
+}
+
+@media (max-width: 640px) {
+ .over18 img {
+ height: 100px;
+ width: 100px;
+ margin-top: 30px;
+ }
+
+ .over18 h3 {
+ font-size: 18px;
+ }
+
+ .over18 p {
+ font-size: 16px;
+ line-height: 22px;
+ }
+
+ .over18 .warningButtons {
+ width: 100%;
+ flex-direction: column;
+ }
+
+ .over18 .warningButtons button {
+ width: 100%;
+ margin: 5px 0;
+ }
+}
+
+.over18 h3 {
+ font-size: 24px;
+ font-weight: bold;
+}
+
+.over18 .warning {
+ unicode-bidi: isolate;
+ font-size: 14px;
+ color: var(--text-markdown);
+ max-width: 60em;
+ word-wrap: break-word;
+}
+
+.over18 h3 {
+ font-size: 20px;
+ line-height: 1.25em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.over18 p {
+ font-weight: 300;
+ font-size: 18px;
+ line-height: 25px;
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.over18 .warningButtons {
+ display: flex;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 30px;
+ width: 100%;
+ max-width: 400px;
+ padding: 0 15px;
+ box-sizing: border-box;
+}
+
+.over18 .warningButtons button {
+ color: var(--over18-alert-color);
+ display: inline-block;
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: 500;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 8px 12px;
+ font-size: 12px;
+ line-height: 20px;
+ border-radius: 3px;
+ flex: 1;
+ margin: 3px 5px;
+ background-color: #4f86b5;
+ border-bottom: 2px solid #4270a2;
+ user-select: none;
+}
+
+@media (max-width: 640px) {
+ .over18 .warningButtons {
+ padding: 0;
+ }
+
+ .over18 .warningButtons button {
+ margin: 5px 0;
+ width: 100%;
+ }
+}
+
+.over18 .warningButtons button:hover {
+ background-color: #4980ae;
+}
+
+.over18 .warningButtons button a {
+ color: var(--over18-alert-color);
+ text-decoration: none;
+}
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 3828c5b6..b76815f1 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -48,7 +48,7 @@ const Home = () => {
if (feed.length === 0) {
footerContent = t('no_posts');
}
- if (hasMore || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
+ if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
footerContent = (
<>
{subplebbitAddressesWithNewerPosts.length > 0 ? (
@@ -99,7 +99,7 @@ const Home = () => {
const setLastVirtuosoState = () => {
virtuosoRef.current?.getState((snapshot: StateSnapshot) => {
if (snapshot?.ranges?.length) {
- lastVirtuosoStates[sortType + timeFilterName] = snapshot;
+ lastVirtuosoStates[sortType + timeFilterName + 'home'] = snapshot;
}
});
};
@@ -107,7 +107,7 @@ const Home = () => {
return () => window.removeEventListener('scroll', setLastVirtuosoState);
}, [sortType, timeFilterName]);
- const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterName];
+ const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterName + 'home'];
useEffect(() => {
document.title = `Seedit`;
diff --git a/src/views/mod/index.ts b/src/views/mod/index.ts
new file mode 100644
index 00000000..80452253
--- /dev/null
+++ b/src/views/mod/index.ts
@@ -0,0 +1 @@
+export { default } from './mod';
diff --git a/src/views/mod/mod.tsx b/src/views/mod/mod.tsx
new file mode 100644
index 00000000..d4e0f0d2
--- /dev/null
+++ b/src/views/mod/mod.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useRef } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
+import { useAccountSubplebbits, useFeed } from '@plebbit/plebbit-react-hooks';
+import { Trans, useTranslation } from 'react-i18next';
+import styles from '../home/home.module.css';
+import LoadingEllipsis from '../../components/loading-ellipsis';
+import Post from '../../components/post';
+import Sidebar from '../../components/sidebar';
+import useFeedStateString from '../../hooks/use-feed-state-string';
+import useTimeFilter from '../../hooks/use-time-filter';
+import _ from 'lodash';
+
+const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
+
+const Mod = () => {
+ const { accountSubplebbits } = useAccountSubplebbits();
+ const subplebbitAddresses = Object.keys(accountSubplebbits);
+ const params = useParams<{ sortType?: string; timeFilterName?: string }>();
+ const sortType = params?.sortType || 'hot';
+ const { timeFilterName, timeFilterSeconds } = useTimeFilter();
+ const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed({ subplebbitAddresses, sortType, newerThan: timeFilterSeconds });
+ const { t } = useTranslation();
+
+ // suggest the user to change time filter if there aren't enough posts
+ const { feed: weeklyFeed } = useFeed({ subplebbitAddresses, sortType, newerThan: 60 * 60 * 24 * 7 });
+ const { feed: monthlyFeed } = useFeed({ subplebbitAddresses, sortType, newerThan: 60 * 60 * 24 * 30 });
+
+ const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
+
+ const handleNewerPostsButtonClick = () => {
+ window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+ setTimeout(() => {
+ reset();
+ }, 300);
+ };
+
+ const currentTimeFilterName = params.timeFilterName || timeFilterName;
+
+ const documentTitle = _.capitalize(t('Mod')) + ' - Seedit';
+ useEffect(() => {
+ document.title = documentTitle;
+ }, [documentTitle]);
+
+ const Footer = () => {
+ let footerContent;
+
+ if (feed.length === 0) {
+ footerContent = t('no_posts');
+ }
+ if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
+ footerContent = (
+ <>
+ {subplebbitAddressesWithNewerPosts.length > 0 ? (
+ (null);
+
+ useEffect(() => {
+ const setLastVirtuosoState = () => {
+ virtuosoRef.current?.getState((snapshot: StateSnapshot) => {
+ if (snapshot?.ranges?.length) {
+ lastVirtuosoStates[sortType + timeFilterName + 'mod'] = snapshot;
+ }
+ });
+ };
+ window.addEventListener('scroll', setLastVirtuosoState);
+ return () => window.removeEventListener('scroll', setLastVirtuosoState);
+ }, [sortType, timeFilterName]);
+
+ const lastVirtuosoState = lastVirtuosoStates?.[sortType + timeFilterName + 'mod'];
+
+ return (
+
+
+
+ ) : (
+ monthlyFeed.length > feed.length &&
+ (weeklyFeed.length > feed.length ? (
+
+
+ ) : (
+
+
+ ))
+ )}
+
+ {subplebbitAddresses.length === 0 ? (
+
+
+ );
+ }
+ return
+ https://github.com/plebbit/temporary-default-subplebbits]}
+ />
+
+ {t('connect_community_notice')} +
+ ) : (
+ + {t('connect_community_notice')} +
{footerContent}
;
+ };
+
+ const virtuosoRef = useRef
+
+ );
+};
+
+export default Mod;
diff --git a/src/views/profile/profile.module.css b/src/views/profile/profile.module.css
index 2dbc528d..e67ba68f 100644
--- a/src/views/profile/profile.module.css
+++ b/src/views/profile/profile.module.css
@@ -134,4 +134,11 @@ div[data-viewport-type="window"] {
font-family: verdana, Arial, Helvetica, sans-serif;
margin-top: -2px;
text-transform: lowercase;
+}
+
+.closeButton {
+ cursor: pointer;
+ margin-left: 10px;
+ padding: 0 3px;
+
}
\ No newline at end of file
diff --git a/src/views/profile/profile.tsx b/src/views/profile/profile.tsx
index 3ad0ad24..59702553 100644
--- a/src/views/profile/profile.tsx
+++ b/src/views/profile/profile.tsx
@@ -240,35 +240,45 @@ const Profile = () => {
const { t } = useTranslation();
const account = useAccount();
const isMobile = useWindowWidth() < 640;
- const [showInfobar, setShowInfobar] = useState(false);
+ // Show infobar for first 3 visits if account wasn't imported
+ const [showInfobar, setShowInfobar] = useState(() => {
+ const profileVisits = parseInt(localStorage.getItem('profileVisits') || '0');
+ const importedAccountAddress = localStorage.getItem('importedAccountAddress');
+ const shouldShow = profileVisits < 4 && importedAccountAddress !== account?.author?.address;
+
+ if (shouldShow) {
+ localStorage.setItem('profileVisits', (profileVisits + 1).toString());
+ }
+
+ return shouldShow;
+ });
const profileTitle = account?.author?.displayName ? `${account?.author?.displayName} (u/${account?.author?.shortAddress})` : `u/${account?.author?.shortAddress}`;
useEffect(() => {
document.title = profileTitle + ' - Seedit';
}, [t, profileTitle]);
- // only show infobar on first profile access and if the current account wasn't imported
- useEffect(() => {
- const wasProfileAccessed = localStorage.getItem('wasProfileAccessed');
- const importedAccountAddress = localStorage.getItem('importedAccountAddress');
-
- if (!wasProfileAccessed && importedAccountAddress !== account?.author?.address) {
- setShowInfobar(true);
- localStorage.setItem('wasProfileAccessed', 'true');
- }
- }, [account?.author?.address]);
+ const handleCloseInfobar = useCallback(() => {
+ setShowInfobar(false);
+ localStorage.setItem('profileVisits', '4');
+ }, []);
const infobar = showInfobar && (
+
+
+
+
-
);
diff --git a/src/views/settings/settings.module.css b/src/views/settings/settings.module.css
index ad735c95..a1650964 100644
--- a/src/views/settings/settings.module.css
+++ b/src/views/settings/settings.module.css
@@ -99,12 +99,22 @@
.categoryTitle {
flex: 0 0 65px;
}
-
- .categorySettings input {
- width: 35vw;
- }
}
.highlightedSetting {
background-color: var(--yellow-highlight);
}
+
+.filterSettingTitle {
+ font-style: italic;
+ text-transform: capitalize;
+}
+
+.filters input[type='checkbox'] {
+ margin: 2px 0.5em 0 0;
+}
+
+.filters label {
+ margin-top: 5px;
+ margin-right: 5px;
+}
diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx
index 2b180587..abe2d707 100644
--- a/src/views/settings/settings.tsx
+++ b/src/views/settings/settings.tsx
@@ -1,20 +1,23 @@
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
+import { Capacitor } from '@capacitor/core';
import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
import { isSettingsPlebbitOptionsView } from '../../lib/utils/view-utils';
-import styles from './settings.module.css';
+import useContentOptionsStore from '../../stores/use-content-options-store';
+import useTheme from '../../hooks/use-theme';
import AccountSettings from './account-settings';
import AddressSettings from './address-settings';
import AvatarSettings from './avatar-settings';
import PlebbitOptions from './plebbit-options';
import WalletSettings from './wallet-settings';
-import useTheme from '../../hooks/use-theme';
+import styles from './settings.module.css';
import packageJson from '../../../package.json';
import _ from 'lodash';
const commitRef = process.env.REACT_APP_COMMIT_REF;
const isElectron = window.isElectron === true;
+const isAndroid = Capacitor.getPlatform() === 'android';
const CheckForUpdates = () => {
const { t } = useTranslation();
@@ -31,8 +34,16 @@ const CheckForUpdates = () => {
const newVersionText = t('new_stable_version', { newVersion: packageData.version, oldVersion: packageJson.version });
const updateActionText = isElectron
? t('download_latest_desktop', { link: 'https://github.com/plebbit/seedit/releases/latest', interpolation: { escapeValue: false } })
+ : isAndroid
+ ? t('download_latest_android')
: t('refresh_to_update');
- alert(newVersionText + ' ' + updateActionText);
+ if (isAndroid) {
+ if (window.confirm(newVersionText + ' ' + updateActionText)) {
+ window.open(`https://github.com/plebbit/seedit/releases/download/v${packageData.version}/seedit-${packageData.version}.apk`, '_blank', 'noreferrer');
+ }
+ } else {
+ alert(newVersionText + ' ' + updateActionText);
+ }
updateAvailable = true;
}
@@ -111,6 +122,44 @@ const ThemeSettings = () => {
);
};
+const ContentOptions = () => {
+ const { t } = useTranslation();
+ const {
+ blurNsfwThumbnails,
+ hideAdultCommunities,
+ hideGoreCommunities,
+ hideAntiCommunities,
+ hideVulgarCommunities,
+ setBlurNsfwThumbnails,
+ setHideAdultCommunities,
+ setHideGoreCommunities,
+ setHideAntiCommunities,
+ setHideVulgarCommunities,
+ } = useContentOptionsStore();
+
+ return (
+
+
+
+
+
+ setHideAntiCommunities(e.target.checked)} /> + +
+ setHideGoreCommunities(e.target.checked)} /> + +
+ setHideVulgarCommunities(e.target.checked)} /> + +
+ );
+};
+
const DisplayNameSetting = () => {
const { t } = useTranslation();
const account = useAccount();
@@ -192,6 +241,12 @@ const GeneralSettings = () => {
{t('nsfw_content')}
+ setBlurNsfwThumbnails(e.target.checked)} />
+
+ +
+
{t('communities')}
+ setHideAdultCommunities(e.target.checked)} />
+
+ + setHideAntiCommunities(e.target.checked)} /> + +
+ setHideGoreCommunities(e.target.checked)} /> + +
+ setHideVulgarCommunities(e.target.checked)} /> + +
+ {t('content_options')}
+
+
{t('avatar')}
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index 4349f313..b79c4069 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import { useAccountComments, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
@@ -10,6 +10,8 @@ import Sidebar from '../../components/sidebar';
import useFeedStateString from '../../hooks/use-feed-state-string';
import useTimeFilter from '../../hooks/use-time-filter';
import { usePinnedPostsStore } from '../../stores/use-pinned-posts-store';
+import { useIsBroadlyNsfwSubplebbit } from '../../hooks/use-is-broadly-nsfw-subplebbit';
+import useContentOptionsStore from '../../stores/use-content-options-store';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
@@ -19,6 +21,23 @@ const Subplebbit = () => {
const subplebbitAddress = params.subplebbitAddress;
const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
+ const contentOptionsStore = useContentOptionsStore();
+ const hasUnhiddenAnyNsfwCommunity =
+ !contentOptionsStore.hideAdultCommunities ||
+ !contentOptionsStore.hideGoreCommunities ||
+ !contentOptionsStore.hideAntiCommunities ||
+ !contentOptionsStore.hideVulgarCommunities;
+ const [hasAcceptedWarning, setHasAcceptedWarning] = useState(hasUnhiddenAnyNsfwCommunity);
+ const isBroadlyNsfwSubplebbit = useIsBroadlyNsfwSubplebbit(subplebbitAddress || '');
+
+ const handleAcceptWarning = () => {
+ contentOptionsStore.setHideAdultCommunities(false);
+ contentOptionsStore.setHideGoreCommunities(false);
+ contentOptionsStore.setHideAntiCommunities(false);
+ contentOptionsStore.setHideVulgarCommunities(false);
+ setHasAcceptedWarning(true);
+ };
+
const sortType = params?.sortType || 'hot';
const timeFilterName = params.timeFilterName || 'all';
const { timeFilterSeconds } = useTimeFilter();
@@ -162,7 +181,21 @@ const Subplebbit = () => {
}
}, [feed, setPinnedPostsCount]);
- return (
+ return isBroadlyNsfwSubplebbit && !hasAcceptedWarning ? (
+
- {suggested?.avatarUrl && (
-
+ 
+
+ ) : (
+
+
+ {t('must_be_over_18')}
+{t('must_be_over_18_explanation')}
+
+
+
+
+
-
- 
-
-
- )}
+
+
+ 
+
+