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>
|
</MudStack>
|
||||||
|
|
||||||
<div class="deepdrft-track-detail-cover">
|
<div class="deepdrft-track-detail-cover">
|
||||||
|
@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">
|
<MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
|
||||||
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
<MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
|
||||||
</MudPaper>
|
</MudPaper>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (hasMeta)
|
@if (hasMeta)
|
||||||
|
|||||||
@@ -317,6 +317,14 @@ h2, h3, h4, h5, h6,
|
|||||||
font-size: 72px;
|
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 {
|
.deepdrft-track-detail-masthead {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user