daniel-c-harvey
7f78545a02
Content API: - Enabling CORS for access from Blazor app Web Server: - Content API URL environment config - Web Audio API JS Interop layer in TypeScript - HttpClient configs Web Client: - Audio Tack player controls - Audio Player example page - Audio Interop Service Layer - Named HttpClients
83 lines
2.8 KiB
Plaintext
83 lines
2.8 KiB
Plaintext
<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
|
|
Elevation="4">
|
|
|
|
@if (!string.IsNullOrEmpty(Track?.ImagePath))
|
|
{
|
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-image: url('@Track.ImagePath');
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: brightness(0.7);">
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
|
|
Class="mud-theme-secondary"
|
|
Elevation="0">
|
|
</MudPaper>
|
|
}
|
|
|
|
<MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
|
|
|
|
<div>
|
|
<MudText Typo="Typo.h6"
|
|
Color="Color.Surface"
|
|
Style="margin-bottom: 4px;"
|
|
Class="text-truncate">
|
|
@Track?.TrackName
|
|
</MudText>
|
|
|
|
<MudText Typo="Typo.subtitle1"
|
|
Color="Color.Surface"
|
|
Style="margin-bottom: 8px;"
|
|
Class="text-truncate">
|
|
@Track?.Artist
|
|
</MudText>
|
|
</div>
|
|
|
|
<div Style="margin: 8px 0;">
|
|
@if (!string.IsNullOrEmpty(Track?.Album))
|
|
{
|
|
<MudText Typo="Typo.caption"
|
|
Color="Color.Surface"
|
|
Class="text-truncate">
|
|
@Track.Album
|
|
</MudText>
|
|
}
|
|
|
|
@if (!string.IsNullOrEmpty(Track?.Genre))
|
|
{
|
|
<MudChip T="string"
|
|
Size="Size.Small"
|
|
Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
Style="opacity: 0.9; margin-top: 4px;">
|
|
@Track.Genre
|
|
</MudChip>
|
|
}
|
|
</div>
|
|
|
|
<div Style="display: flex; justify-content: space-between; align-items: center;">
|
|
@if (Track?.ReleaseDate.HasValue == true)
|
|
{
|
|
<MudText Typo="Typo.caption"
|
|
Color="Color.Surface">
|
|
@Track.ReleaseDate.Value.Year
|
|
</MudText>
|
|
}
|
|
else
|
|
{
|
|
<div></div>
|
|
}
|
|
|
|
<MudFab Color="Color.Primary"
|
|
Size="Size.Medium"
|
|
StartIcon="@_playPauseIcon"
|
|
OnClick="@HandlePlayClick"/>
|
|
<audio class="d-none" src="@_audioStream" autoplay></audio>
|
|
</div>
|
|
|
|
</MudCardContent>
|
|
|
|
</MudCard> |