[frontend/components] Use a placeholder element for "blurred" sensitive media
This commit is contained in:
parent
0e4fc7e3bb
commit
81fc32cfe1
2 changed files with 22 additions and 14 deletions
|
@ -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))
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue