Refactor YouTube embeds

DiscordChatExporter.Core/Discord/Data/Embed.cs

@@ -55,6 +55,8 @@ namespace DiscordChatExporter.Core.Discord.Data
             Footer = footer;
         }
 
+        public YouTubeVideoEmbedProjection? TryGetYouTubeVideo() => YouTubeVideoEmbedProjection.TryResolve(this);
+
         public override string ToString() => Title ?? "<untitled embed>";
     }
 

DiscordChatExporter.Core/Discord/Data/YouTubeVideoEmbedProjection.cs

@@ -0,0 +1,61 @@
+using System.Text.RegularExpressions;
+
+namespace DiscordChatExporter.Core.Discord.Data
+{
+    public partial class YouTubeVideoEmbedProjection
+    {
+        public string VideoId { get; }
+
+        public string Url { get; }
+
+        public YouTubeVideoEmbedProjection(string videoId, string url)
+        {
+            VideoId = videoId;
+            Url = url;
+        }
+
+        public override string ToString() => Url;
+    }
+
+    public partial class YouTubeVideoEmbedProjection
+    {
+        // Adapted from YoutubeExplode
+        // https://github.com/Tyrrrz/YoutubeExplode/blob/5be164be20019783913f76fcc98f18c65aebe9f0/YoutubeExplode/Videos/VideoId.cs#L34-L64
+        private static string? TryParseVideoId(string embedUrl)
+        {
+            // Regular URL
+            // https://www.youtube.com/watch?v=yIVRs6YSbOM
+            var regularMatch = Regex.Match(embedUrl, @"youtube\..+?/watch.*?v=(.*?)(?:&|/|$)").Groups[1].Value;
+            if (!string.IsNullOrWhiteSpace(regularMatch))
+                return regularMatch;
+
+            // Short URL
+            // https://youtu.be/yIVRs6YSbOM
+            var shortMatch = Regex.Match(embedUrl, @"youtu\.be/(.*?)(?:\?|&|/|$)").Groups[1].Value;
+            if (!string.IsNullOrWhiteSpace(shortMatch))
+                return shortMatch;
+
+            // Embed URL
+            // https://www.youtube.com/embed/yIVRs6YSbOM
+            var embedMatch = Regex.Match(embedUrl, @"youtube\..+?/embed/(.*?)(?:\?|&|/|$)").Groups[1].Value;
+            if (!string.IsNullOrWhiteSpace(embedMatch))
+                return embedMatch;
+
+            return null;
+        }
+
+        public static YouTubeVideoEmbedProjection? TryResolve(Embed embed)
+        {
+            if (string.IsNullOrWhiteSpace(embed.Url))
+                return null;
+
+            var videoId = TryParseVideoId(embed.Url);
+            if (string.IsNullOrWhiteSpace(videoId))
+                return null;
+
+            var url = $"https://www.youtube.com/embed/{videoId}";
+
+            return new YouTubeVideoEmbedProjection(videoId, url);
+        }
+    }
+}

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

@@ -458,10 +458,6 @@ img {
     border-radius: 3px;
 }
 
-.chatlog__embed-youtube-container {
-    margin-top: 0.6em;
-}
-
 .chatlog__embed-image-container {
     margin-top: 0.6em;
 }
@@ -490,6 +486,15 @@ img {
     font-weight: 500;
 }
 
+.chatlog__embed-youtube-container {
+    margin-top: 0.6em;
+}
+
+.chatlog__embed-youtube {
+    border: 0;
+    border-radius: 3px;
+}
+
 .chatlog__reactions {
     display: flex;
 }

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

@@ -161,6 +161,8 @@
 
                 @foreach (var embed in message.Embeds)
                 {
+                    var youTubeVideo = embed.TryGetYouTubeVideo();
+
                     <div class="chatlog__embed">
                         @if (embed.Color is not null)
                         {
@@ -214,17 +216,12 @@
                                             }
                                         </div>
                                     }
-                                    @if (!string.IsNullOrWhiteSpace(embed.Url) && embed.Url.IndexOf("youtube.com/watch?v=") != -1)
-                                    {
 
-                                        if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url))
-                                        {
-                                            <div class="chatlog__embed-youtube-container">
-                                                <iframe class="chatlog__embed-youtube" width="400" height="225" frameBorder="0" style="border-radius: 5px"
-                                                        src="@embed.Url.Replace("/watch?v=", "/embed/")">
-                                                </iframe>
-                                            </div>
-                                        }
+                                    @if (youTubeVideo is not null)
+                                    {
+                                        <div class="chatlog__embed-youtube-container">
+                                            <iframe class="chatlog__embed-youtube" src="@youTubeVideo.Url" width="400" height="225"></iframe>
+                                        </div>
                                     }
                                     else if (!string.IsNullOrWhiteSpace(embed.Description))
                                     {
@@ -260,16 +257,13 @@
                                     }
                                 </div>
 
-                                @if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url))
+                                @if (embed.Thumbnail is not null && !string.IsNullOrWhiteSpace(embed.Thumbnail.Url) && youTubeVideo is null)
                                 {
-                                    if (string.IsNullOrWhiteSpace(embed.Url) || embed.Url.IndexOf("youtube.com/watch?v=") == -1)
-                                    {
-                                        <div class="chatlog__embed-thumbnail-container">
-                                            <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
-                                                <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail">
-                                            </a>
-                                        </div>
-                                    }
+                                    <div class="chatlog__embed-thumbnail-container">
+                                        <a class="chatlog__embed-thumbnail-link" href="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)">
+                                            <img class="chatlog__embed-thumbnail" src="@await ResolveUrlAsync(embed.Thumbnail.ProxyUrl ?? embed.Thumbnail.Url)" alt="Thumbnail">
+                                        </a>
+                                    </div>
                                 }
                             </div>