diff --git a/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs b/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs index 207e8041..c8ce5183 100644 --- a/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs +++ b/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs @@ -181,8 +181,24 @@ public class HtmlEmbedSpecs ); // Assert - var iframeUrl = message.QuerySelector("iframe")?.GetAttribute("src"); - iframeUrl.Should().StartWith("https://www.youtube.com/embed/qOWW4OlgbvE"); + var youtubeLink = message + .QuerySelectorAll("a") + .FirstOrDefault(e => + e.GetAttribute("href")?.Contains("youtube.com/watch?v=", StringComparison.Ordinal) + == true + ); + + youtubeLink.Should().NotBeNull(); + youtubeLink?.GetAttribute("href").Should().Contain("qOWW4OlgbvE"); + + // Check that the thumbnail image exists + var thumbnail = youtubeLink + ?.QuerySelectorAll("img") + .FirstOrDefault(e => + e.GetAttribute("class")?.Contains("chatlog__embed-youtube-thumbnail") == true + ); + + thumbnail.Should().NotBeNull(); } [Fact] diff --git a/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs b/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs index ce13bdfd..ec39bbb2 100644 --- a/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs +++ b/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs @@ -2,7 +2,9 @@ public partial record YouTubeVideoEmbedProjection(string VideoId) { - public string Url { get; } = $"https://www.youtube.com/embed/{VideoId}"; + public string Url { get; } = $"https://www.youtube.com/watch?v={VideoId}"; + + public string ThumbnailUrl { get; } = $"https://i.ytimg.com/vi/{VideoId}/maxresdefault.jpg"; } public partial record YouTubeVideoEmbedProjection diff --git a/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml index e27fad2b..5e5741b4 100644 --- a/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml +++ b/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml @@ -424,9 +424,14 @@ } - @* Video player *@ + @* Video thumbnail *@
- + + @{ + var thumbnailUrl = embed.Thumbnail?.ProxyUrl ?? embed.Thumbnail?.Url ?? youTubeVideoEmbed.ThumbnailUrl; + } + YouTube video thumbnail +
diff --git a/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml index 9e746e16..792612c7 100644 --- a/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml +++ b/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml @@ -711,9 +711,11 @@ margin-top: 0.6rem; } - .chatlog__embed-youtube { - border: 0; + .chatlog__embed-youtube-thumbnail { + max-width: 400px; + max-height: 225px; border-radius: 3px; + cursor: pointer; } .chatlog__sticker {