[frontend/components] Use a placeholder element for "blurred" sensitive media

This commit is contained in:
pancakes 2025-01-31 21:34:42 +10:00 committed by Laura Hausmann
parent 0e4fc7e3bb
commit 81fc32cfe1
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 22 additions and 14 deletions

View file

@ -11,30 +11,36 @@
<img class="attachment @(BlurImage ? "blur-image" : "")" src="@Attachment.Url" alt="@Attachment.AltText" <img class="attachment @(BlurImage ? "blur-image" : "")" src="@Attachment.Url" alt="@Attachment.AltText"
fetchpriority="low"/> 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") // else if (Attachment.ContentType == "audio/x-mod")
// { // {
// TODO: Module player // TODO: Module player
// } // }
else if (Attachment.ContentType.StartsWith("audio")) 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")) else if (Attachment.ContentType.StartsWith("video"))
{ {
<video controls class="attachment @(BlurImage ? "blur-image" : "")"> <video controls class="attachment">
<source src="@Attachment.Url"/> <source src="@Attachment.Url"/>
</video> </video>
} }
else else
{ {
<div class="attachment file @(BlurImage ? "blur-image" : "")"> <div class="attachment contents">
<div class="contents">
<Icon Name="Icons.FileArrowDown" Size="3em"/> <Icon Name="Icons.FileArrowDown" Size="3em"/>
<a href="@Attachment.Url" target="_blank"> <a href="@Attachment.Url" target="_blank">
@Attachment.Url.Split("/").Last() @Attachment.Url.Split("/").Last()
</a> </a>
</div> </div>
</div>
} }
@if (!string.IsNullOrWhiteSpace(Attachment.AltText)) @if (!string.IsNullOrWhiteSpace(Attachment.AltText))

View file

@ -25,22 +25,24 @@ audio.attachment {
width: 100%; width: 100%;
} }
.file { .contents {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
padding: 1rem; padding: 1rem;
white-space: normal; white-space: normal;
word-break: break-word;
word-wrap: break-word;
a { a {
text-decoration: none; text-decoration: none;
color: var(--notice-color); color: var(--notice-color);
word-break: break-word;
word-wrap: break-word;
} }
} }
::deep { ::deep {
.attachment.file .ph { .attachment.contents .ph {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
vertical-align: middle; vertical-align: middle;