50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
@using Microsoft.AspNetCore.Components.Web
|
|
|
|
<div class="track-cover-container"
|
|
@onmouseenter="HandleMouseEnter"
|
|
@onmouseleave="HandleMouseLeave"
|
|
style="position: relative; display: inline-block; cursor: pointer;">
|
|
|
|
<MudImage Src="@FormatCoverUrl(CoverUrl)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
|
|
|
|
@if (_isHovered || IsPlaying)
|
|
{
|
|
<div class="play-overlay"
|
|
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;">
|
|
<MudIconButton Icon="@(IsPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
|
|
Color="Color.Inherit"
|
|
Size="Size.Large"
|
|
OnClick="OnPlayClick" />
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public string CoverUrl { get; set; } = string.Empty;
|
|
[Parameter] public string TrackId { get; set; } = string.Empty;
|
|
[Parameter] public bool IsPlaying { get; set; } = false;
|
|
[Parameter] public EventCallback<string> OnPlay { get; set; }
|
|
[Parameter] public int Height { get; set; } = 50;
|
|
[Parameter] public int Width { get; set; } = 50;
|
|
|
|
private bool _isHovered;
|
|
|
|
private void HandleMouseEnter() => _isHovered = true;
|
|
private void HandleMouseLeave() => _isHovered = false;
|
|
|
|
private async Task OnPlayClick()
|
|
{
|
|
await OnPlay.InvokeAsync(TrackId);
|
|
}
|
|
|
|
private string FormatCoverUrl(string? url)
|
|
{
|
|
if (string.IsNullOrEmpty(url)) return "";
|
|
return "https://" + url.Replace("%%", $"{Width}x{Height}");
|
|
}
|
|
} |