notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Iceshrimp.Frontend/Components/AttachmentComponent.razor
View file

@ -11,30 +11,36 @@
<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">
<div class="attachment contents">
<Icon Name="Icons.FileArrowDown" Size="3em"/>
<a href="@Attachment.Url" target="_blank">
@Attachment.Url.Split("/").Last()
</a>
</div>
</div>
}
@if (!string.IsNullOrWhiteSpace(Attachment.AltText))

10
Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
View file

@ -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;