timothy/ersatztv
1
0
Fork 0
Code Issues 51 Pull Requests 5 Actions Packages Projects Releases 9 Wiki Activity

lazy load media card images (#2750)

Browse Source
This commit is contained in:
Jason Dove
2026-01-02 13:40:44 -06:00
committed by GitHub
parent bcd2ea7db3
commit 38343e3ea2
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ErsatzTV/Shared/MediaCard.razor
+25 -8
View File
@@ -10,7 +10,7 @@
{
<div class="@(IsSelected ? DeleteClicked.HasDelegate ? "media-card-selected-delete" : "media-card-selected" : "")"
style="border-radius: 4px; position: relative;">
<MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
<MudPaper Class="@($"media-card {CardClass}")" Style="position: relative; overflow: hidden;">
@if (string.IsNullOrWhiteSpace(Data.Poster))
{
string placeholder = GetPlaceholder(Data.SortTitle);
@@ -24,6 +24,13 @@
@placeholder
</MudText>
}
else
{
<img src="@GetPosterUrl()"
loading="lazy"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;"
alt="@Data.SortTitle"/>
}
</MudPaper>
@if (IsSelected)
{
@@ -100,7 +107,7 @@
}
else
{
<MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
<MudPaper Class="@($"media-card {CardClass}")" Style="position: relative; overflow: hidden;">
@if (string.IsNullOrWhiteSpace(Data.Poster))
{
string placeholder = GetPlaceholder(Data.SortTitle);
@@ -114,6 +121,13 @@
@placeholder
</MudText>
}
else
{
<img src="@GetPosterUrl()"
loading="lazy"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;"
alt="@Data.SortTitle"/>
}
</MudPaper>
}
<MudText Align="Align.Center" Class="media-card-title" UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })">
@@ -190,16 +204,19 @@
return char.IsDigit(first) || !char.IsLetter(first) ? "#" : first.ToString();
}
private string ArtworkForItem()
private string GetPosterUrl()
{
if (IsRemoteArtwork || Data.Poster?.StartsWith("http://") == true || Data.Poster?.StartsWith("https://") == true)
if (string.IsNullOrWhiteSpace(Data.Poster))
{
return $"position: relative; background-image: url({Data.Poster}); background-size: cover; background-position: center";
return null;
}
return string.IsNullOrWhiteSpace(Data.Poster)
? "position: relative"
: $"position: relative; background-image: url(artwork/{PathForArtwork()}/{Data.Poster}); background-size: cover; background-position: center";
if (IsRemoteArtwork || Data.Poster.StartsWith("http://") || Data.Poster.StartsWith("https://"))
{
return Data.Poster;
}
return $"artwork/{PathForArtwork()}/{Data.Poster}";
}
private string PathForArtwork() => ArtworkKind switch