feat: hide media of removed posts and replies, blur title and media i…

…n feed for mods
plebbit · Feb 9, 2024 · dbbe9b0 · dbbe9b0
1 parent 72d0947
commit dbbe9b0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx
@@ -11,11 +11,12 @@ interface ExpandoProps {
   expanded: boolean;
   link: string;
   reason?: string;
+  removed?: boolean;
   showContent: boolean;
   toggleExpanded?: () => void;
 }
 
-const Expando = ({ commentMediaInfo, content, expanded, link, reason, showContent, toggleExpanded }: ExpandoProps) => {
+const Expando = ({ commentMediaInfo, content, expanded, link, reason, removed, showContent, toggleExpanded }: ExpandoProps) => {
   const { t } = useTranslation();
 
   let mediaComponent = null;
@@ -37,7 +38,7 @@ const Expando = ({ commentMediaInfo, content, expanded, link, reason, showConten
 
   return (
     <div className={expanded ? styles.expando : styles.expandoHidden}>
-      {link && (
+      {link && !removed && (
         <div className={styles.mediaPreview}>
           <Link
             to={link}

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
@@ -68,6 +68,14 @@
   overflow: hidden;
 }
 
+.removedTitle {
+  filter: blur(4px);
+}
+
+.removedThumbnail {
+  filter: blur(4px);
+}
+
 .link {
   text-decoration: none;
   color: var(--link);

diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
@@ -170,20 +170,22 @@ const Post = ({ index, post = {} }: PostProps) => {
               </div>
             </div>
             {hasThumbnail && !isInPostView && (
-              <Thumbnail
-                cid={cid}
-                commentMediaInfo={commentMediaInfo}
-                isReply={false}
-                link={link}
-                linkHeight={linkHeight}
-                linkWidth={linkWidth}
-                subplebbitAddress={subplebbitAddress}
-              />
+              <span className={removed ? styles.removedThumbnail : ''}>
+                <Thumbnail
+                  cid={cid}
+                  commentMediaInfo={commentMediaInfo}
+                  isReply={false}
+                  link={link}
+                  linkHeight={linkHeight}
+                  linkWidth={linkWidth}
+                  subplebbitAddress={subplebbitAddress}
+                />
+              </span>
             )}
           </div>
           <div className={styles.entry}>
             <div className={styles.topMatter}>
-              <p className={styles.title} onClick={handlePostClick}>
+              <p className={`${styles.title} ${removed && !isInPostView ? styles.removedTitle : ''}`} onClick={handlePostClick}>
                 {isInPostView && link ? (
                   <a href={link} className={linkClass} target='_blank' rel='noopener noreferrer'>
                     {postTitle}
@@ -257,7 +259,7 @@ const Post = ({ index, post = {} }: PostProps) => {
             </div>
           </div>
         </div>
-        <Expando commentMediaInfo={commentMediaInfo} content={content} expanded={isExpanded} link={link} reason={reason} showContent={true} />
+        <Expando commentMediaInfo={commentMediaInfo} content={content} expanded={isExpanded} link={link} reason={reason} removed={removed} showContent={true} />
       </div>
     </div>
   );

diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
@@ -336,7 +336,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
             )}
             {!collapsed && (
               <div className={`${styles.usertext} ${cid && commentMediaInfo && (isSingleComment || cidOfReplyWithContext === cid) ? styles.highlightMedia : ''}`}>
-                {commentMediaInfo && (
+                {commentMediaInfo && !removed && (
                   <ReplyMedia
                     commentMediaInfo={commentMediaInfo}
                     content={content}