mirrors/DiscordChatExporter
1
0
Fork 0
mirror of https://github.com/Tyrrrz/DiscordChatExporter.git synced 2025-05-31 06:48:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[HTML] Rich rendering support for audio and video embeds (#432)

Browse source
This commit is contained in:
sas41 2020-11-16 13:49:57 +00:00 • committed by GitHub
parent dca8b8ceb2
commit cb47902d10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

11
DiscordChatExporter.Domain/Discord/Models/Attachment.cs
View file

@ -23,8 +23,13 @@ namespace DiscordChatExporter.Domain.Discord.Models
public bool IsImage => public bool IsImage =>
ImageFileExtensions.Contains(Path.GetExtension(FileName), StringComparer.OrdinalIgnoreCase); ImageFileExtensions.Contains(Path.GetExtension(FileName), StringComparer.OrdinalIgnoreCase);
public bool IsVideo =>
WebSafeVideoFileExtensions.Contains(Path.GetExtension(FileName), StringComparer.OrdinalIgnoreCase);
public bool IsAudio =>
WebSafeAudioFileExtensions.Contains(Path.GetExtension(FileName), StringComparer.OrdinalIgnoreCase);
public bool IsSpoiler => public bool IsSpoiler =>
IsImage && FileName.StartsWith("SPOILER_", StringComparison.Ordinal); (IsImage || IsVideo || IsAudio) && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
public FileSize FileSize { get; } public FileSize FileSize { get; }
@ -43,7 +48,9 @@ namespace DiscordChatExporter.Domain.Discord.Models
public partial class Attachment public partial class Attachment
{ {
private static readonly string[] ImageFileExtensions = {".jpg", ".jpeg", ".png", ".gif", ".bmp"}; private static readonly string[] ImageFileExtensions = {".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"};
private static readonly string[] WebSafeVideoFileExtensions = { ".mp4", ".webm" };
private static readonly string[] WebSafeAudioFileExtensions = { ".mp3", ".wav", ".ogg", ".flac", ".m4a" };
public static Attachment Parse(JsonElement json) public static Attachment Parse(JsonElement json)
{ {

38
DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css
View file

@ -55,7 +55,9 @@ img {
} }
.spoiler { .spoiler {
width: fit-content; /* width: fit-content; */
display: inline-block;
/* This is more consistent across browsers, the old attribute worked well under Chrome but not FireFox. */
} }
.spoiler--hidden { .spoiler--hidden {
@ -84,24 +86,28 @@ img {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
} }
.spoiler--hidden .spoiler-image img { .spoiler--hidden .spoiler-image * {
filter: blur(44px); filter: blur(44px);
} }
.spoiler--hidden .spoiler-image:after { .spoiler--hidden .spoiler-image:after {
content: "SPOILER"; content: "SPOILER";
color: #dcddde; color: #dcddde;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-weight: 600; font-weight: 600;
padding: 0.5em 0.7em; /* padding: 0.5em 0.7em; */
border-radius: 20px; padding: 100%;
letter-spacing: 0.05em; /* This ruins those beutifully rounded buttons, but it's needed to prevent a FireFox bug with video and audio elemnts. */
font-size: 0.9em; /* The bug is that you can click trough the spoiler layer and play the video or audio, I could not identify the cause. */
} /* I leave this here, in case someone is brave enough to venture in to madness that is undocumented browser behaviour. */
border-radius: 20px;
letter-spacing: 0.05em;
font-size: 0.9em;
}
.spoiler--hidden:hover .spoiler-image:after { .spoiler--hidden:hover .spoiler-image:after {
color: #fff; color: #fff;

81
DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml
View file

@ -41,35 +41,52 @@
<div class="chatlog__message @isPinnedStyle" data-message-id="@message.Id" id="message-@message.Id"> <div class="chatlog__message @isPinnedStyle" data-message-id="@message.Id" id="message-@message.Id">
<div class="chatlog__content"> <div class="chatlog__content">
<div class="markdown">@Raw(FormatMarkdown(message.Content)) @if (message.EditedTimestamp != null) {<span class="chatlog__edited-timestamp" title="@FormatDate(message.EditedTimestamp.Value)">(edited)</span>}</div> <div class="markdown">@Raw(FormatMarkdown(message.Content)) @if (message.EditedTimestamp != null)
{<span class="chatlog__edited-timestamp" title="@FormatDate(message.EditedTimestamp.Value)">(edited)</span>}</div>
</div> </div>
@foreach (var attachment in message.Attachments) @foreach (var attachment in message.Attachments)
{ {
<div class="chatlog__attachment"> <div class="chatlog__attachment">
@if (attachment.IsSpoiler) <div class="@((attachment.IsSpoiler ? "spoiler spoiler--hidden" : ""))" onclick="@((attachment.IsSpoiler ? "showSpoiler(event, this)" : ""))">
{ <div class="@((attachment.IsSpoiler ? "spoiler-image" : ""))">
<div class="spoiler spoiler--hidden" onclick="showSpoiler(event, this)">
<div class="spoiler-image">
<a href="@await ResolveUrlAsync(attachment.Url)">
<img class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Attachment">
</a>
</div>
</div>
}
else
{
<a href="@await ResolveUrlAsync(attachment.Url)">
@if (attachment.IsImage) @if (attachment.IsImage)
{ {
<img class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Attachment"> <a href="@await ResolveUrlAsync(attachment.Url)">
@($"Image: {attachment.FileName} ({attachment.FileSize})")
<br />
<img class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Attachment">
</a>
}
else if (attachment.IsVideo)
{
<a href="@await ResolveUrlAsync(attachment.Url)">
@($"Video: {attachment.FileName} ({attachment.FileSize})")
</a>
<br />
<video controls class="chatlog__attachment-thumbnail">
<source src="@await ResolveUrlAsync(attachment.Url)" alt="Video Attachment">
</video>
}
else if (attachment.IsAudio)
{
<a href="@await ResolveUrlAsync(attachment.Url)">
@($"Audio: {attachment.FileName} ({attachment.FileSize})")
</a>
<br />
<audio controls class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Audio Attachment" />
} }
else else
{ {
@($"Attachment: {attachment.FileName} ({attachment.FileSize})") <a href="@await ResolveUrlAsync(attachment.Url)">
@($"Attachment: {attachment.FileName} ({attachment.FileSize})")
</a>
} }
</a>
} </div>
</div>
</div> </div>
} }
@ -190,22 +207,22 @@
<img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconUrl)" alt="Footer icon"> <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconUrl)" alt="Footer icon">
} }
<span class="chatlog__embed-footer-text"> <span class="chatlog__embed-footer-text">
@if (!string.IsNullOrWhiteSpace(embed.Footer?.Text)) @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
{ {
@embed.Footer.Text @embed.Footer.Text
} }
@if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp != null) @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp != null)
{ {
@(" • ") @(" • ")
} }
@if (embed.Timestamp != null) @if (embed.Timestamp != null)
{ {
@FormatDate(embed.Timestamp.Value) @FormatDate(embed.Timestamp.Value)
} }
</span> </span>
</div> </div>
} }
</div> </div>