fix nsfw/spoiler replies

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}

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;

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,

src/components/post/expando/expando.module.css

@@ -214,6 +214,10 @@
   background-color: #4980ae;
 }
 
+.mediaPreviewReply {
+  width: 100%;
+}
+
 @media (max-width: 770px) {
   .mediaPreview {
     width: 100%;

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 (
     <div className={expanded ? styles.expando : styles.expandoHidden}>
       {link && !removed && commentMediaInfo?.type !== 'webpage' && (
-        <div className={styles.mediaPreview} onClick={() => setHideContent(false)}>
+        <div className={`${styles.mediaPreview} ${isReply ? styles.mediaPreviewReply : ''}`} onClick={() => setHideContent(false)}>
           {((nsfw && blurNsfwThumbnails && !isNsfwSubplebbit) || spoiler) && hideContent && link && commentMediaInfo?.type !== 'webpage' && !(deleted || removed) && (
             <>
               <div className={styles.blurContent} />

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;

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 && (
-        <Expando commentMediaInfo={commentMediaInfo} content={content} expanded={expanded} link={link} showContent={false} toggleExpanded={toggleExpanded} />
+        <Expando
+          commentMediaInfo={commentMediaInfo}
+          content={content}
+          expanded={expanded}
+          link={link}
+          showContent={false}
+          toggleExpanded={toggleExpanded}
+          isReply={true}
+        />
       )}
     </>
   );
@@ -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' && <Label color='red' text={t('failed_edit')} />}
       {editState === 'pending' && <Label color='yellow' text={t('pending_edit')} />}
       {spoiler && <Label color='black' text={t('spoiler')} />}
+      {nsfw && <Label color='red' text={t('nsfw')} />}
     </span>
   );
 
@@ -447,16 +457,8 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
               />
             )}
             {!collapsed && (
-              <div
-                className={`${styles.usertext} ${cid && commentMediaInfo && (isSingleComment || cidOfReplyWithContext === cid) ? styles.highlightMedia : ''} ${
-                  spoiler && !showSpoiler ? styles.hideSpoiler : ''
-                }`}
-                onClick={() => {
-                  spoiler && !showSpoiler && setShowSpoiler(true);
-                }}
-              >
-                <div className={spoiler && !showSpoiler ? styles.hideSpoiler : ''} />
-                {commentMediaInfo && !(removed || deleted || (spoiler && !showSpoiler)) && (
+              <div className={`${styles.usertext} ${cid && commentMediaInfo && (isSingleComment || cidOfReplyWithContext === cid) ? styles.highlightMedia : ''}`}>
+                {commentMediaInfo && !(removed || deleted) && (
                   <ReplyMedia
                     commentMediaInfo={commentMediaInfo}
                     content={content}
@@ -465,6 +467,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                     link={link}
                     linkHeight={linkHeight}
                     linkWidth={linkWidth}
+                    nsfw={nsfw}
                     spoiler={spoiler}
                     toggleExpanded={toggleExpanded}
                   />
@@ -477,7 +480,6 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                       removed || deleted ? styles.removedOrDeletedContent : ''
                     }`}
                   >
-                    {spoiler && !showSpoiler && <div className={styles.showSpoilerButton}>{t('view_spoiler')}</div>}
                     {content &&
                       (removed ? (
                         <span className={styles.removedContent}>[{t('removed')}]</span>