daniel-c-harvey
110 lines
3.5 KiB
Plaintext
110 lines
3.5 KiB
Plaintext
@{
|
|
var hasLink = !string.IsNullOrEmpty(TrackModel?.EntryKey);
|
|
var trackHref = hasLink ? $"/track/{TrackModel!.EntryKey}" : null;
|
|
}
|
|
|
|
<div class="deepdrft-track-card-container">
|
|
|
|
@* Cover and title/artist link to the detail page; the play button (below, outside any
|
|
anchor) stays the sole playback entry point. display:contents keeps the grid intact. *@
|
|
@if (hasLink)
|
|
{
|
|
<a href="@trackHref" class="deepdrft-track-card-link">
|
|
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
|
{
|
|
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="deepdrft-track-card-fallback"></div>
|
|
}
|
|
</a>
|
|
}
|
|
else if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
|
{
|
|
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="deepdrft-track-card-fallback"></div>
|
|
}
|
|
|
|
<div class="deepdrft-track-card-content">
|
|
|
|
@if (hasLink)
|
|
{
|
|
<a href="@trackHref" class="deepdrft-track-card-link">
|
|
<div class="deepdrft-track-info-top">
|
|
<MudText Typo="Typo.subtitle1"
|
|
Class="deepdrft-track-title text-truncate mb-1">
|
|
@TrackModel?.TrackName
|
|
</MudText>
|
|
|
|
<MudText Typo="Typo.caption"
|
|
Class="deepdrft-track-artist text-truncate mb-2">
|
|
@TrackModel?.Artist
|
|
</MudText>
|
|
</div>
|
|
</a>
|
|
}
|
|
else
|
|
{
|
|
<div class="deepdrft-track-info-top">
|
|
<MudText Typo="Typo.subtitle1"
|
|
Class="deepdrft-track-title text-truncate mb-1">
|
|
@TrackModel?.TrackName
|
|
</MudText>
|
|
|
|
<MudText Typo="Typo.caption"
|
|
Class="deepdrft-track-artist text-truncate mb-2">
|
|
@TrackModel?.Artist
|
|
</MudText>
|
|
</div>
|
|
}
|
|
|
|
<div class="deepdrft-track-info-middle">
|
|
@if (!string.IsNullOrEmpty(TrackModel?.Album))
|
|
{
|
|
<MudText Typo="Typo.caption"
|
|
Class="deepdrft-track-meta text-truncate">
|
|
@TrackModel.Album
|
|
</MudText>
|
|
}
|
|
|
|
@if (!string.IsNullOrEmpty(TrackModel?.Genre))
|
|
{
|
|
<MudChip T="string"
|
|
Size="Size.Small"
|
|
Variant="Variant.Outlined"
|
|
Color="Color.Tertiary"
|
|
Class="deepdrft-genre-chip">
|
|
@TrackModel.Genre
|
|
</MudChip>
|
|
}
|
|
</div>
|
|
|
|
<div class="deepdrft-track-info-bottom">
|
|
@if (TrackModel?.ReleaseDate.HasValue == true)
|
|
{
|
|
<MudText Typo="Typo.caption"
|
|
Class="deepdrft-track-meta">
|
|
@TrackModel.ReleaseDate.Value.Year
|
|
</MudText>
|
|
}
|
|
else
|
|
{
|
|
<div></div>
|
|
}
|
|
|
|
<MudFab Color="Color.Tertiary"
|
|
Size="Size.Medium"
|
|
StartIcon="@PlayPauseIcon"
|
|
OnClick="@PlayClick"/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|