open-source-mirrors
/
DiscordChatExporter
mirror of https://github.com/Tyrrrz/DiscordChatExporter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
pull/448/head
sas41 4 years ago 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
Show Stats Download Patch File Download Diff File

11
DiscordChatExporter.Domain/Discord/Models/Attachment.cs
Unescape View File

@ -23,8 +23,13 @@ namespace DiscordChatExporter.Domain.Discord.Models
public bool IsImage =>
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 =>
IsImage && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
(IsImage || IsVideo || IsAudio) && FileName.StartsWith("SPOILER_", StringComparison.Ordinal);
public FileSize FileSize { get; }
@ -43,7 +48,9 @@ namespace DiscordChatExporter.Domain.Discord.Models
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)
{

16
DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css
Unescape View File

@ -55,7 +55,9 @@ img {
}
.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 {
@ -84,11 +86,11 @@ img {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}
.spoiler--hidden .spoiler-image img {
.spoiler--hidden .spoiler-image * {
filter: blur(44px);
}
.spoiler--hidden .spoiler-image:after {
.spoiler--hidden .spoiler-image:after {
content: "SPOILER";
color: #dcddde;
background-color: rgba(0, 0, 0, 0.6);
@ -97,11 +99,15 @@ img {
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
padding: 0.5em 0.7em;
/* padding: 0.5em 0.7em; */
padding: 100%;
/* This ruins those beutifully rounded buttons, but it's needed to prevent a FireFox bug with video and audio elemnts. */
/* 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 {
color: #fff;

37
DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml
Unescape View File

@ -41,35 +41,52 @@
<div class="chatlog__message @isPinnedStyle" data-message-id="@message.Id" id="message-@message.Id">
<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>
@foreach (var attachment in message.Attachments)
{
<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" : ""))">
@if (attachment.IsImage)
{
<div class="spoiler spoiler--hidden" onclick="showSpoiler(event, this)">
<div class="spoiler-image">
<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>
</div>
</div>
}
else
else if (attachment.IsVideo)
{
<a href="@await ResolveUrlAsync(attachment.Url)">
@if (attachment.IsImage)
@($"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)
{
<img class="chatlog__attachment-thumbnail" src="@await ResolveUrlAsync(attachment.Url)" alt="Attachment">
<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
{
<a href="@await ResolveUrlAsync(attachment.Url)">
@($"Attachment: {attachment.FileName} ({attachment.FileSize})")
}
</a>
}
</div>
</div>
</div>
}

Write Preview
Loading…
Cancel
Save