From 81fc32cfe18c2629308448c0ed61ef508f113566 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Fri, 31 Jan 2025 21:34:42 +1000
Subject: [PATCH] [frontend/components] Use a placeholder element for "blurred"
 sensitive media

---
 .../Components/AttachmentComponent.razor      | 26 ++++++++++++-------
 .../Components/AttachmentComponent.razor.css  | 10 ++++---
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/AttachmentComponent.razor b/Iceshrimp.Frontend/Components/AttachmentComponent.razor
index 0d9712ef..cc2f8a0f 100644
--- a/Iceshrimp.Frontend/Components/AttachmentComponent.razor
+++ b/Iceshrimp.Frontend/Components/AttachmentComponent.razor
@@ -11,29 +11,35 @@
         <img class="attachment @(BlurImage ? "blur-image" : "")" src="@Attachment.Url" alt="@Attachment.AltText"
              fetchpriority="low"/>
     }
+    else if (BlurImage)
+    {
+        <div class="attachment contents">
+            <Icon Name="Icons.Warning" Size="3em"/>
+            <span>@Loc["Sensitive media"]</span>
+            <span>@Loc["Click to reveal"]</span>
+        </div>
+    }
     //  else if (Attachment.ContentType == "audio/x-mod")
     //  {
     //      TODO: Module player
-    //  }                
+    //  }
     else if (Attachment.ContentType.StartsWith("audio"))
     {
-        <audio controls class="attachment @(BlurImage ? "blur-image" : "")" src="@Attachment.Url"></audio>
+        <audio controls class="attachment" src="@Attachment.Url"></audio>
     }
     else if (Attachment.ContentType.StartsWith("video"))
     {
-        <video controls class="attachment @(BlurImage ? "blur-image" : "")">
+        <video controls class="attachment">
             <source src="@Attachment.Url"/>
         </video>
     }
     else
     {
-        <div class="attachment file @(BlurImage ? "blur-image" : "")">
-            <div class="contents">
-                <Icon Name="Icons.FileArrowDown" Size="3em"/>
-                <a href="@Attachment.Url" target="_blank">
-                    @Attachment.Url.Split("/").Last()
-                </a>
-            </div>
+        <div class="attachment contents">
+            <Icon Name="Icons.FileArrowDown" Size="3em"/>
+            <a href="@Attachment.Url" target="_blank">
+                @Attachment.Url.Split("/").Last()
+            </a>
         </div>
     }
 
diff --git a/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css b/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
index cae5fff0..0976a383 100644
--- a/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
@@ -25,22 +25,24 @@ audio.attachment {
     width: 100%;
 }
 
-.file {
+.contents {
     display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
     padding: 1rem;
     white-space: normal;
+    word-break: break-word;
+    word-wrap: break-word;
 
     a {
         text-decoration: none;
         color: var(--notice-color);
-        word-break: break-word;
-        word-wrap: break-word;
     }
 }
 
 ::deep {
-    .attachment.file .ph {
+    .attachment.contents .ph {
         display: block;
         margin-bottom: 0.5rem;
         vertical-align: middle;