From 6159b6a5b2126c614d8b45e1685a295ea7520bc5 Mon Sep 17 00:00:00 2001
From: Jason Dove <1695733+jasongdove@users.noreply.github.com>
Date: Mon, 4 Aug 2025 23:17:16 +0000
Subject: [PATCH] support more music video thumbnail filenames (#2258)

---
 CHANGELOG.md                                  |  2 +
 .../Core/Metadata/MusicVideoFolderScanner.cs  | 10 ++++-
 ErsatzTV/Pages/Artist.razor                   | 41 ++++++++++++-------
 ErsatzTV/wwwroot/css/site.css                 |  9 ++++
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e6124d2d..0904085f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,6 +51,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add channel `Idle Behavior` setting to control the transcoding behavior after all clients have disconnected
   - `Stop On Disconnect` - stops the transcoder after all clients have disconnected + the global idle timeout
   - `Keep Running` - transcoder will run until manually stopped
+- Add support for music video thumbnails that end in `-thumb`
+  - For example `Music Video.mkv` could have a corresponding thumbnail `Music Video-thumb.jpg`
 
 ### Fixed
 - Fix app startup with MySql/MariaDB
diff --git a/ErsatzTV.Scanner/Core/Metadata/MusicVideoFolderScanner.cs b/ErsatzTV.Scanner/Core/Metadata/MusicVideoFolderScanner.cs
index 80f1d76e3..a837cf555 100644
--- a/ErsatzTV.Scanner/Core/Metadata/MusicVideoFolderScanner.cs
+++ b/ErsatzTV.Scanner/Core/Metadata/MusicVideoFolderScanner.cs
@@ -546,8 +546,16 @@ public class MusicVideoFolderScanner : LocalFolderScanner, IMusicVideoFolderScan
     private Option<string> LocateThumbnail(MusicVideo musicVideo)
     {
         string path = musicVideo.MediaVersions.Head().MediaFiles.Head().Path;
+
+        string directory = Path.GetDirectoryName(path) ?? string.Empty;
+        string filenameWithoutExtension = Path.GetFileNameWithoutExtension(path);
+        string extension = Path.GetExtension(path);
+
+        string thumbFilename = filenameWithoutExtension + "-thumb" + extension;
+        string thumbPath = Path.Combine(directory, thumbFilename);
+
         return ImageFileExtensions
-            .Map(ext => Path.ChangeExtension(path, ext))
+            .SelectMany(ext => new[] { Path.ChangeExtension(path, ext), Path.ChangeExtension(thumbPath, ext) })
             .Filter(f => _localFileSystem.FileExists(f))
             .HeadOrNone();
     }
diff --git a/ErsatzTV/Pages/Artist.razor b/ErsatzTV/Pages/Artist.razor
index a3b79f220..682dcf2a7 100644
--- a/ErsatzTV/Pages/Artist.razor
+++ b/ErsatzTV/Pages/Artist.razor
@@ -18,6 +18,10 @@
     {
         <img src="@($"artwork/fanart/{_artist.FanArt}")" alt="fan art"/>
     }
+    else
+    {
+        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.False" />
+    }
 </MudContainer>
 <MudContainer MaxWidth="MaxWidth.Large" Style="margin-top: 100px" Class="z-10">
     <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Spacing="6">
@@ -25,7 +29,11 @@
         {
             <MudImage Elevation="2" Src="@($"artwork/thumbnails/{_artist.Thumbnail}")" Class="rounded-lg z-10" Style="height: 220px; width: 220px; margin-left: auto; margin-right: auto;" />
         }
-        <div style="display: flex; flex-direction: column; height: 100%" class="z-10">
+        else
+        {
+            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Class="rounded-lg z-10" Animation="Animation.False" Height="220px" Width="220px" Style="margin-left: auto; margin-right: auto" />
+        }
+        <div style="display: flex; flex-direction: column; height: 100%; width: 100%" class="z-10">
             <MudStack Row="false">
                 <MudHidden Invert="true" Breakpoint="Breakpoint.SmAndDown">
                     <MudText Typo="Typo.h4" Class="media-item-title">@_artist?.Name</MudText>
@@ -35,23 +43,28 @@
                 </MudHidden>
                 <MudText Typo="Typo.subtitle1" Class="media-item-subtitle mb-6 mud-text-secondary">@_artist.Disambiguation</MudText>
             </MudStack>
-            @if (!string.IsNullOrWhiteSpace(_artist.Biography))
-            {
                 <MudCard Elevation="2" Class="mb-6">
                     <MudCardContent Class="mx-3 my-3" Style="height: 100%">
-                        <MudText Style="flex-grow: 1">
-                            @if (_artist.Biography.Length > 400)
-                            {
-                                @(_artist.Biography.Substring(0, 400) + "...")
-                            }
-                            else
-                            {
-                                @_artist.Biography
-                            }
-                        </MudText>
+                        @if (!string.IsNullOrWhiteSpace(_artist.Biography))
+                        {
+                            <MudText Style="flex-grow: 1">
+                                @if (_artist.Biography.Length > 400)
+                                {
+                                    @(_artist.Biography.Substring(0, 400) + "...")
+                                }
+                                else
+                                {
+                                    @_artist.Biography
+                                }
+                            </MudText>
+                        }
+                        else
+                        {
+                            <div style="height: 130px; flex-grow: 1">
+                            </div>
+                        }
                     </MudCardContent>
                 </MudCard>
-            }
             <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="mb-6">
                 <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
diff --git a/ErsatzTV/wwwroot/css/site.css b/ErsatzTV/wwwroot/css/site.css
index ae6838c9b..4e42809d1 100644
--- a/ErsatzTV/wwwroot/css/site.css
+++ b/ErsatzTV/wwwroot/css/site.css
@@ -96,6 +96,15 @@ div.ersatztv-light {
     width: 100%;
 }
 
+.fanart-container .mud-skeleton {
+    -o-object-fit: cover;
+    height: 400px;
+    object-fit: cover;
+    position: absolute;
+    transition: opacity 5s ease;
+    width: 100%;
+}
+
 .fanart-container > .fanart-tint {
     background: linear-gradient(rgba(var(--fanart-background-rgb), 0.47) 0%, rgb(var(--fanart-background-rgb)) 100%);
     height: 400px;