Files
PlaylistShared/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor

65 lines
2.2 KiB
Plaintext

@using Microsoft.AspNetCore.Components.Web
@inject IAudioPlayerService AudioPlayerService
<div class="track-cover-container"
@onmouseenter="HandleMouseEnter"
@onmouseleave="HandleMouseLeave"
style="position: relative; display: inline-block; cursor: pointer;">
<MudImage Src="@CoverUrl.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
@if (_isHovered || IsCurrentTrackPlaying)
{
<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="@(IsCurrentTrackPlaying? 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 int Height { get; set; } = 50;
[Parameter] public int Width { get; set; } = 50;
[Parameter] public string SharedPlaylistId { get; set; } = string.Empty;
private bool IsCurrentTrackPlaying => AudioPlayerService.IsPlaying && AudioPlayerService.CurrentTrackId == TrackId;
private bool _isHovered;
private void HandleMouseEnter() => _isHovered = true;
private void HandleMouseLeave() => _isHovered = false;
protected override void OnInitialized()
{
AudioPlayerService.OnStateChanged += OnPlayerStateChanged;
}
private async Task OnPlayClick()
{
var sharedPlaylistId = string.IsNullOrWhiteSpace(SharedPlaylistId) ? null : SharedPlaylistId;
if (IsCurrentTrackPlaying)
{
await AudioPlayerService.PauseAsync();
}
else
{
await AudioPlayerService.LoadAndPlayAsync(TrackId, sharedPlaylistId: SharedPlaylistId);
}
}
private void OnPlayerStateChanged()
{
InvokeAsync(StateHasChanged);
}
}