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

DiscordChatExporter.Domain/Discord/Models/Attachment.cs

@@ -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)
         {

DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css

@@ -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,7 +86,7 @@ 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);
 }
 
@@ -97,7 +99,11 @@ 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;

DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml

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