feat: hide media if spoiler

src/components/comment-media/comment-media.module.css

@@ -18,6 +18,17 @@
   display: inline-block;
 }
 
+.spoiler {
+  display: inline-block;
+  margin: 3px 20px 5px 20px;
+  background-color: black;
+  color: white;
+  display: flex;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 640px) {
   .subplebbitAvatar {
     max-width: 125px;
@@ -52,6 +63,10 @@
   float: left;
 }
 
+.thumbnail video {
+  cursor: pointer;
+}
+
 .hide {
   display: none !important;
 }

src/components/comment-media/comment-media.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Comment } from '@plebbit/plebbit-react-hooks';
 import styles from './comment-media.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getHostname } from '../../lib/utils/url-utils';
@@ -9,16 +10,22 @@ import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
-  isDeleted?: boolean;
+  post?: Comment;
-  isOutOfFeed?: boolean; // virtuoso wrapper unneeded
+  isReply?: boolean;
-  isReply: boolean;
   linkHeight?: number;
   linkWidth?: number;
   showThumbnail?: boolean;
   setShowThumbnail: (showThumbnail: boolean) => void;
 }
 
-const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) => {
+  const { t } = useTranslation();
+  const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
+  const isOutOfFeed = isDescription || isRules; // virtuoso wrapper unneeded
+  const isReply = parentCid;
+  const isDeleted = deleted || removed;
+
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
   const [hasError, setHasError] = useState(false);
   const handleError = () => setHasError(true);
@@ -72,6 +79,10 @@ const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeig
 
   return hasError || isDeleted ? (
     <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
+  ) : spoiler ? (
+    <span className={styles.spoiler} style={{ width: maxThumbnailSize, height: maxThumbnailSize }} onClick={() => setShowThumbnail(false)}>
+      <span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
+    </span>
   ) : isOutOfFeed ? (
     <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
   ) : isMobile || isReply ? (
@@ -133,7 +144,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
   );
 };
 
-const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const { type, url } = commentMediaInfo || {};
@@ -141,21 +152,10 @@ const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkH
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
-        {url && (
+        {url && <Thumbnail commentMediaInfo={commentMediaInfo} post={post} setShowThumbnail={setShowThumbnail} />}
-          <Thumbnail
-            commentMediaInfo={commentMediaInfo}
-            isDeleted={isDeleted}
-            isOutOfFeed={isOutOfFeed}
-            isReply={isReply}
-            linkHeight={linkHeight}
-            linkWidth={linkWidth}
-            showThumbnail={showThumbnail}
-            setShowThumbnail={setShowThumbnail}
-          />
-        )}
         {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
       </span>
-      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={isReply} setShowThumbnail={setShowThumbnail} />}
+      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
     </span>
   );
 };

src/components/post/post-desktop/post-desktop.tsx

@@ -19,6 +19,7 @@ import Markdown from '../../markdown';
 import PostMenuDesktop from './post-menu-desktop/';
 import { PostProps } from '../post';
 import _ from 'lodash';
+import ModMenu from '../mod-menu';
 
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
@@ -44,11 +45,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
   return (
     <div className={styles.postInfo}>
-      {!isHidden && (
+      {!isHidden && <ModMenu cid={cid} />}
-        <span className={styles.checkbox}>
-          <input type='checkbox' />
-        </span>
-      )}
       {title && <span className={styles.subject}>{displayTitle} </span>}
       <span className={styles.nameBlock}>
         <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
@@ -111,16 +108,12 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
 const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { deleted, link, linkHeight, linkWidth, parentCid, removed } = post || {};
-  const { isDescription, isRules } = post || {}; // custom properties, not from api
   const commentMediaInfo = getCommentMediaInfo(post);
   const { type, url } = commentMediaInfo || {};
   const embedUrl = url && new URL(url);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, post?.link);
   const [showThumbnail, setShowThumbnail] = useState(true);
 
-  const isReply = parentCid;
-
   return (
     <div className={styles.file}>
       <div className={styles.fileText}>
@@ -152,16 +145,7 @@ const PostMedia = ({ post }: PostProps) => {
       </div>
       {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
         <div className={styles.fileThumbnail}>
-          <CommentMedia
+          <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />
-            commentMediaInfo={commentMediaInfo}
-            isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
-            isDeleted={removed || deleted}
-            isReply={isReply}
-            linkHeight={linkHeight}
-            linkWidth={linkWidth}
-            showThumbnail={showThumbnail}
-            setShowThumbnail={setShowThumbnail}
-          />
         </div>
       )}
     </div>
@@ -169,7 +153,7 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMessage = ({ post }: PostProps) => {
-  const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
+  const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
@@ -201,7 +185,7 @@ const PostMessage = ({ post }: PostProps) => {
       ) : deleted ? (
         <span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
       ) : (
-        <Markdown content={displayContent} />
+        <Markdown content={displayContent} spoiler={spoiler} />
       )}
       {(removed || deleted) && reason && (
         <span>

src/components/post/post-mobile/post-mobile.tsx

@@ -19,7 +19,7 @@ import _ from 'lodash';
 
 const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, removed, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, link, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, displayName, shortAddress } = author || {};
 
@@ -94,18 +94,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
           )}
         </span>
       </div>
-      {(hasThumbnail || link) && (
+      {(hasThumbnail || link) && <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />}
-        <CommentMedia
-          commentMediaInfo={commentMediaInfo}
-          isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
-          isDeleted={removed || deleted}
-          isReply={isReply}
-          linkHeight={linkHeight}
-          linkWidth={linkWidth}
-          showThumbnail={showThumbnail}
-          setShowThumbnail={setShowThumbnail}
-        />
-      )}
     </>
   );
 };