Новый плеер
This commit is contained in:
@@ -7,20 +7,21 @@
|
||||
@inject ISnackbar Snackbar
|
||||
@inject HttpClient Http
|
||||
|
||||
<MudPaper Class="pa-2" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
|
||||
<MudPaper Class="pa-2 rounded" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05);">
|
||||
<MudStack Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
|
||||
<!-- Кнопки управления -->
|
||||
<MudItem @onmouseenter="() => { _isPlayHovered = true; }"
|
||||
@onmouseleave="() => { _isPlayHovered = false; }"
|
||||
style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden; width: 50px; height: 50px;">
|
||||
Class="relative d-inline-block rounded-sm overflow-hidden"
|
||||
style="cursor: pointer; width: 50px; height: 50px;">
|
||||
|
||||
@if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrackCoverUrl))
|
||||
@if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrack?.CoverUri))
|
||||
{
|
||||
<MudImage Src="@AudioPlayerService.CurrentTrackCoverUrl.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded" Style="display: block;" />
|
||||
<MudImage Src="@AudioPlayerService.CurrentTrack.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded d-block" />
|
||||
}
|
||||
|
||||
<MudItem class="play-overlay"
|
||||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
|
||||
<MudItem class="absolute d-flex align-center justify-center rounded"
|
||||
style="top: 0; left: 0; right: 0; bottom: 0; background: transparent;">
|
||||
<MudToggleIconButton Toggled="@AudioPlayerService.IsPlaying"
|
||||
Icon="@Icons.Material.Filled.PlayArrow"
|
||||
Color="@Color.Primary"
|
||||
@@ -32,11 +33,11 @@
|
||||
|
||||
<!-- Название и прогресс -->
|
||||
<MudStack AlignItems="AlignItems.Stretch" Class="d-flex flex-grow-1 relative overflow-hidden align-center rounded-sm" Style="height: 50px;">
|
||||
<MudItem Class="absolute " style="top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
|
||||
<TrackProgress Value="@AudioPlayerService.CurrentProgress"
|
||||
Min="0" Max="100"
|
||||
<MudItem Class="absolute" style="top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
|
||||
<TrackProgress Value="@AudioPlayerService.CurrentTime"
|
||||
Min="0" Max="@AudioPlayerService.TotalTime"
|
||||
Height="50"
|
||||
BufferValue="@_bufferValue"
|
||||
BufferValue="@_bufferSecond"
|
||||
Color="Color.Primary"
|
||||
Icon=""
|
||||
Step="0.1"
|
||||
@@ -45,11 +46,19 @@
|
||||
ValueChanged="SeekTo" />
|
||||
</MudItem>
|
||||
|
||||
<MudStack Row AlignItems="AlignItems.Center" Class="px-3 relative pointer-events-none" Style="z-index: 2; width: 100%;">
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600; text-shadow: 0px 0px 4px rgba(255,255,255,0.8);">
|
||||
@AudioPlayerService.CurrentTrackTitle
|
||||
</MudText>
|
||||
<MudStack Row AlignItems="AlignItems.Center" Class="px-3 relative pointer-events-none" Style="z-index: 2; width: 100%; height: 100%;">
|
||||
<MudStack AlignItems="AlignItems.Start" Spacing="0">
|
||||
<MudText Typo="Typo.body2" Color="Color.Default" Style="font-weight: 600;">
|
||||
@AudioPlayerService.CurrentTrack?.Title
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600;">
|
||||
@if (AudioPlayerService.CurrentTrack != null) @string.Join(", ", AudioPlayerService.CurrentTrack.Artists)
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudSpacer />
|
||||
|
||||
<MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
|
||||
@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
|
||||
</MudText>
|
||||
@@ -93,7 +102,7 @@
|
||||
// Громкость
|
||||
private bool _volumeIsOpen;
|
||||
private double _volumeBeforeMute;
|
||||
private double _bufferValue;
|
||||
private double _bufferSecond;
|
||||
|
||||
private bool _isPlayHovered;
|
||||
|
||||
@@ -123,6 +132,7 @@
|
||||
_audioElement = await _audioModule.InvokeAsync<IJSObjectReference>("init", _audioId, DotNetObjectReference.Create(this));
|
||||
}
|
||||
|
||||
#region Обработка JS
|
||||
[JSInvokable]
|
||||
public async Task OnAudioEnded()
|
||||
{
|
||||
@@ -141,19 +151,9 @@
|
||||
[JSInvokable]
|
||||
public async Task OnDownloadProgress(double second)
|
||||
{
|
||||
_bufferValue = second / AudioPlayerService.TotalTime * 100;
|
||||
}
|
||||
|
||||
private async Task<bool> CheckAuthAsync()
|
||||
{
|
||||
var authState = await AuthProvider.GetAuthenticationStateAsync();
|
||||
if (!authState.User.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
Snackbar.Add("Воспроизведение доступно только авторизованным пользователям", Severity.Warning);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
_bufferSecond = second;
|
||||
}
|
||||
#endregion
|
||||
|
||||
#region Обработка сервиса
|
||||
private async Task OnServiceLoadAndPlay(string trackId, string? accessToken, string? sharedPlaylistId)
|
||||
@@ -222,6 +222,17 @@
|
||||
}
|
||||
#endregion
|
||||
|
||||
private async Task<bool> CheckAuthAsync()
|
||||
{
|
||||
var authState = await AuthProvider.GetAuthenticationStateAsync();
|
||||
if (!authState.User.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
Snackbar.Add("Воспроизведение доступно только авторизованным пользователям", Severity.Warning);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
private async Task OnVolumeHandleWheel(WheelEventArgs e)
|
||||
{
|
||||
// Изменяем громкость на 5 единиц за один тик колесика
|
||||
|
||||
Reference in New Issue
Block a user