From cb47902d108a7223cfc629718597d6888c5b5519 Mon Sep 17 00:00:00 2001
From: sas41 <sas41@users.noreply.github.com>
Date: Mon, 16 Nov 2020 13:49:57 +0000
Subject: [PATCH] [HTML] Rich rendering support for audio and video embeds
 (#432)

---
 .../Discord/Models/Attachment.cs              | 11 ++-
 .../Exporting/Writers/Html/Core.css           | 38 +++++----
 .../Writers/Html/MessageGroupTemplate.cshtml  | 81 +++++++++++--------
 3 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/DiscordChatExporter.Domain/Discord/Models/Attachment.cs b/DiscordChatExporter.Domain/Discord/Models/Attachment.cs
index 3e9af87..a7dddf6 100644
--- a/DiscordChatExporter.Domain/Discord/Models/Attachment.cs
+++ b/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)
         {
diff --git a/DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css b/DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css
index 21e96db..f407a81 100644
--- a/DiscordChatExporter.Domain/Exporting/Writers/Html/Core.css
+++ b/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,24 +86,28 @@ 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 {
-    content: "SPOILER";
-    color: #dcddde;
-    background-color: rgba(0, 0, 0, 0.6);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: 600;
-    padding: 0.5em 0.7em;
-    border-radius: 20px;
-    letter-spacing: 0.05em;
-    font-size: 0.9em;
-}
+    .spoiler--hidden .spoiler-image:after {
+        content: "SPOILER";
+        color: #dcddde;
+        background-color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-weight: 600;
+        /* 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;
diff --git a/DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml b/DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml
index 27d5c7f..01c1af7 100644
--- a/DiscordChatExporter.Domain/Exporting/Writers/Html/MessageGroupTemplate.cshtml
+++ b/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="spoiler spoiler--hidden" onclick="showSpoiler(event, this)">
-                                <div class="spoiler-image">
+                        <div class="@((attachment.IsSpoiler ? "spoiler spoiler--hidden" : ""))" onclick="@((attachment.IsSpoiler ? "showSpoiler(event, this)" : ""))">
+                            <div class="@((attachment.IsSpoiler ? "spoiler-image" : ""))">
+
+                                @if (attachment.IsImage)
+                                {
                                     <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
-                        {
-                            <a href="@await ResolveUrlAsync(attachment.Url)">
-                                @if (attachment.IsImage)
+                                }
+                                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)
                                 {
-                                    <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
                                 {
-                                    @($"Attachment: {attachment.FileName} ({attachment.FileSize})")
+                                    <a href="@await ResolveUrlAsync(attachment.Url)">
+                                        @($"Attachment: {attachment.FileName} ({attachment.FileSize})")
+                                    </a>
                                 }
-                            </a>
-                        }
+
+                            </div>
+                        </div>
                     </div>
                 }
 
@@ -190,22 +207,22 @@
                                         <img class="chatlog__embed-footer-icon" src="@await ResolveUrlAsync(embed.Footer.IconUrl)" alt="Footer icon">
                                     }
 
-                                        <span class="chatlog__embed-footer-text">
-                                            @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
-                                            {
-                                                @embed.Footer.Text
-                                            }
-
-                                            @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp != null)
-                                            {
-                                                @(" • ")
-                                            }
-
-                                            @if (embed.Timestamp != null)
-                                            {
-                                                @FormatDate(embed.Timestamp.Value)
-                                            }
-                                        </span>
+                                    <span class="chatlog__embed-footer-text">
+                                        @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text))
+                                        {
+                                            @embed.Footer.Text
+                                        }
+
+                                        @if (!string.IsNullOrWhiteSpace(embed.Footer?.Text) && embed.Timestamp != null)
+                                        {
+                                            @(" • ")
+                                        }
+
+                                        @if (embed.Timestamp != null)
+                                        {
+                                            @FormatDate(embed.Timestamp.Value)
+                                        }
+                                    </span>
                                 </div>
                             }
                         </div>