From dd96e7b2eddf3b60bab62658b561a9c2bcda2601 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 17 Mar 2025 21:59:31 +0100 Subject: [PATCH] fix nsfw/spoiler replies --- .../post/comment-tools/comment-tools.tsx | 5 +++ .../comment-tools/edit-menu/edit-menu.tsx | 5 ++- .../post/comment-tools/mod-menu/mod-menu.tsx | 25 ++++++++------- .../post/expando/expando.module.css | 4 +++ src/components/post/expando/expando.tsx | 4 ++- src/components/post/thumbnail/thumbnail.tsx | 1 + src/components/reply/reply.tsx | 32 ++++++++++--------- 7 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx index 41427475..3b13ea10 100644 --- a/src/components/post/comment-tools/comment-tools.tsx +++ b/src/components/post/comment-tools/comment-tools.tsx @@ -18,6 +18,7 @@ interface CommentToolsProps { failed?: boolean; editState?: string; hasLabel?: boolean; + hasThumbnail?: boolean; index?: number; isAuthor?: boolean; isAccountMod?: boolean; @@ -253,6 +254,7 @@ const CommentTools = ({ failed, editState, hasLabel = false, + hasThumbnail = false, index, isReply, isSingleReply, @@ -285,6 +287,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} @@ -301,6 +304,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} @@ -328,6 +332,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} diff --git a/src/components/post/comment-tools/edit-menu/edit-menu.tsx b/src/components/post/comment-tools/edit-menu/edit-menu.tsx index fb4257e9..008099eb 100644 --- a/src/components/post/comment-tools/edit-menu/edit-menu.tsx +++ b/src/components/post/comment-tools/edit-menu/edit-menu.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { PublishCommentEditOptions, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; -import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; +import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; import styles from './edit-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../../lib/utils/challenge-utils'; import challengesStore from '../../../../stores/use-challenges-store'; @@ -17,7 +16,7 @@ const EditMenu = ({ commentCid, showCommentEditForm }: EditMenuProps) => { const { t } = useTranslation(); let post: any; - const comment = useSubplebbitsPagesStore((state) => state.comments[commentCid]); + const comment = useComment({ commentCid }); const { editedComment } = useEditedComment({ comment }); if (editedComment) { post = editedComment; diff --git a/src/components/post/comment-tools/mod-menu/mod-menu.tsx b/src/components/post/comment-tools/mod-menu/mod-menu.tsx index ad9715f8..2c97ff1e 100644 --- a/src/components/post/comment-tools/mod-menu/mod-menu.tsx +++ b/src/components/post/comment-tools/mod-menu/mod-menu.tsx @@ -1,8 +1,7 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Trans, useTranslation } from 'react-i18next'; -import { PublishCommentModerationOptions, useEditedComment, usePublishCommentModeration } from '@plebbit/plebbit-react-hooks'; -import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; +import { PublishCommentModerationOptions, useComment, useEditedComment, usePublishCommentModeration } from '@plebbit/plebbit-react-hooks'; import styles from './mod-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../../lib/utils/challenge-utils'; import challengesStore from '../../../../stores/use-challenges-store'; @@ -17,7 +16,7 @@ type ModMenuProps = { const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const { t } = useTranslation(); let post: any; - const comment = useSubplebbitsPagesStore((state) => state.comments[cid]); + const comment = useComment({ commentCid: cid }); const { editedComment } = useEditedComment({ comment }); if (editedComment) { post = editedComment; @@ -27,16 +26,18 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const isReply = post?.parentCid; const [isModMenuOpen, setIsModMenuOpen] = useState(false); + const { removed, locked, spoiler, nsfw, pinned, banExpiresAt, subplebbitAddress } = post || {}; + const defaultPublishOptions: PublishCommentModerationOptions = { - commentCid: post?.cid, - subplebbitAddress: post?.subplebbitAddress, + commentCid: cid, + subplebbitAddress, commentModeration: { - removed: post?.removed ?? false, - locked: post?.locked ?? false, - spoiler: post?.spoiler ?? false, - nsfw: post?.nsfw ?? false, - pinned: post?.pinned ?? false, - banExpiresAt: post?.banExpiresAt, + removed: removed ?? false, + locked: locked ?? false, + spoiler: spoiler ?? false, + nsfw: nsfw ?? false, + pinned: pinned ?? false, + banExpiresAt, }, onChallenge: (...args: any) => addChallenge([...args, post]), onChallengeVerification: alertChallengeVerificationFailed, diff --git a/src/components/post/expando/expando.module.css b/src/components/post/expando/expando.module.css index 6ee3c218..f0b36c77 100644 --- a/src/components/post/expando/expando.module.css +++ b/src/components/post/expando/expando.module.css @@ -214,6 +214,10 @@ background-color: #4980ae; } +.mediaPreviewReply { + width: 100%; +} + @media (max-width: 770px) { .mediaPreview { width: 100%; diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx index 9af6e073..2c42978c 100644 --- a/src/components/post/expando/expando.tsx +++ b/src/components/post/expando/expando.tsx @@ -15,6 +15,7 @@ interface ExpandoProps { content?: string; deleted?: boolean; expanded: boolean; + isReply?: boolean; link?: string; modEditReason?: string; nsfw?: boolean; @@ -30,6 +31,7 @@ const Expando = ({ content, deleted, expanded, + isReply, link, modEditReason, nsfw, @@ -81,7 +83,7 @@ const Expando = ({ return (
{link && !removed && commentMediaInfo?.type !== 'webpage' && ( -
setHideContent(false)}> +
setHideContent(false)}> {((nsfw && blurNsfwThumbnails && !isNsfwSubplebbit) || spoiler) && hideContent && link && commentMediaInfo?.type !== 'webpage' && !(deleted || removed) && ( <>
diff --git a/src/components/post/thumbnail/thumbnail.tsx b/src/components/post/thumbnail/thumbnail.tsx index 3d7c649c..be27d857 100644 --- a/src/components/post/thumbnail/thumbnail.tsx +++ b/src/components/post/thumbnail/thumbnail.tsx @@ -5,6 +5,7 @@ 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'; +import { useTranslation } from 'react-i18next'; interface ThumbnailProps { cid?: string; diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx index 3c9a4ca7..07c5d2bf 100644 --- a/src/components/reply/reply.tsx +++ b/src/components/reply/reply.tsx @@ -120,11 +120,12 @@ interface ReplyMediaProps { link: string; linkHeight: number; linkWidth: number; + nsfw: boolean; spoiler: boolean; toggleExpanded: () => void; } -const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, linkHeight, linkWidth, spoiler, toggleExpanded }: ReplyMediaProps) => { +const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, linkHeight, linkWidth, nsfw, spoiler, toggleExpanded }: ReplyMediaProps) => { const { type } = commentMediaInfo || {}; return ( <> @@ -135,6 +136,7 @@ const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, l isLink={!hasThumbnail && link} isReply={true} isSpoiler={spoiler} + isNsfw={nsfw} isText={!hasThumbnail && content?.trim().length > 0} link={link} linkHeight={linkHeight} @@ -163,7 +165,15 @@ const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, l )} {expanded && link && ( - + )} ); @@ -301,6 +311,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl reason, removed, spoiler, + nsfw, state, subplebbitAddress, timestamp, @@ -308,8 +319,6 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl } = reply || {}; const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]); - const [showSpoiler, setShowSpoiler] = useState(false); - const pendingReply = useAccountComment({ commentIndex: reply?.index }); const parentOfPendingReply = useSubplebbitsPagesStore((state) => state.comments[pendingReply?.parentCid]); @@ -374,6 +383,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl {editState === 'failed' &&