feat: render album art in track detail cover slot, falling back to gradient placeholder
This commit is contained in:
@@ -64,9 +64,17 @@ else if (ViewModel.Track is not null)
|
||||
</MudStack>
|
||||
|
||||
<div class="deepdrft-track-detail-cover">
|
||||
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
||||
</MudPaper>
|
||||
@if (!string.IsNullOrEmpty(track.ImagePath))
|
||||
{
|
||||
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
|
||||
Style="@($"background-image: url('api/image/{Uri.EscapeDataString(track.ImagePath)}');")" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
||||
</MudPaper>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (hasMeta)
|
||||
|
||||
@@ -317,6 +317,14 @@ h2, h3, h4, h5, h6,
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
/* Album art fills the square frame; background-size:cover handles any aspect ratio. */
|
||||
.deepdrft-track-detail-cover-art {
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.deepdrft-track-detail-masthead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user