FrigaT/PlaylistShared
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

появляющийся плеер

Browse Source
This commit is contained in:
FrigaT
2026-04-23 09:11:43 +03:00
parent b3f19045fa
commit 7c05940dbf
5 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
View File

@@ -7,20 +7,19 @@
@inject ISnackbar Snackbar
@inject HttpClient Http
<MudPaper Class="pa-2 rounded" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05);">
<MudStack Spacing="1" Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
<MudStack Spacing="1" Row AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap">
<!-- Кнопки управления -->
<MudItem @onmouseenter="() => { _isPlayHovered = true; }"
@onmouseleave="() => { _isPlayHovered = false; }"
Class="relative d-inline-block rounded-sm overflow-hidden cursor-pointer"
Class="relative d-inline-block rounded overflow-hidden cursor-pointer"
Style="width: 50px; height: 50px;">
@if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrack?.CoverUri))
{
<MudImage Src="@AudioPlayerService.CurrentTrack.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded-l-sm d-block" />
<MudImage Src="@AudioPlayerService.CurrentTrack.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded d-block" />
}
<MudItem Class="absolute d-flex align-center justify-center rounded-sm"
<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"
@@ -35,7 +34,7 @@
<!-- Название и прогресс -->
@if (AudioPlayerService.CurrentTrack != null)
{
<MudStack Spacing="0" AlignItems="AlignItems.Stretch" Class="d-flex flex-grow-1 relative overflow-hidden align-center rounded-sm" Style="height: 50px;">
<MudStack Spacing="0" AlignItems="AlignItems.Stretch" Class="d-flex flex-grow-1 relative overflow-hidden align-center rounded" Style="height: 50px;">
<MudItem Class="absolute" style="top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
<TrackProgress Value="@AudioPlayerService.CurrentTime"
Min="0" Max="@AudioPlayerService.TotalTime"
@@ -49,12 +48,12 @@
ValueChanged="SeekTo" />
</MudItem>
<MudStack Spacing="0" 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;">
<MudStack AlignItems="AlignItems.Start" Spacing="0" Style="min-width: 0; width: 100%;">
<MudText Typo="Typo.body2" Inline Color="Color.Default" Style="font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
@AudioPlayerService.CurrentTrack.Title
</MudText>
<MudText Typo="Typo.body2" Style="font-weight: 600;">
<MudText Typo="Typo.body2" Inline Color="Color.Default" Style="font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
@string.Join(", ", AudioPlayerService.CurrentTrack.Artists.Select(a => a.Name))
</MudText>
</MudStack>
@@ -96,7 +95,6 @@
</MudItem>
</MudHidden>
</MudStack>
</MudPaper>
<audio id="@_audioId" style="display: none;"></audio>

1
PlaylistShared.Pwa/Components/Global/TrackProgress.razor
View File

@@ -82,7 +82,6 @@
width: 100%;
height: var(--track-height);
background-color: var(--mud-palette-action-disabled-background, rgba(0,0,0,0.1));
border-radius: 4px;
overflow: hidden;
}

21
PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
View File

@@ -15,8 +15,10 @@
@inject NavigationManager Navigation
@inject AuthenticationStateProvider AuthProvider
@inject IDialogService DialogService
@inject IAudioPlayerService AudioPlayerService
@implements IDisposable
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-1" Style="height: 100%;">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-1 px-1" Style="height: 100%;">
<MudStack Style="height: 100%;" StretchItems="StretchItems.Start" Spacing="0">
@*Первый элемент растянется на всю высоту*@
<MudItem Style="min-height: 0; height: 100%;">
@@ -128,9 +130,9 @@
</MudItem>
@*Второй элемент - плеер. Привязан к нижней части контейнера*@
<MudItem>
<MudCollapse Expanded="@(AudioPlayerService.CurrentTrackId != null)" >
<AudioPlayer />
</MudItem>
</MudCollapse>
</MudStack>
</MudContainer>
@@ -411,6 +413,13 @@
_currentUserId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
await LoadPlaylist();
await LoadTracks();
AudioPlayerService.OnStartedTrack += OnPlayerStateChanged;
AudioPlayerService.OnEndedTrack += OnPlayerStateChanged;
}
private void OnPlayerStateChanged()
{
InvokeAsync(StateHasChanged);
}
/// <summary>Установка разрешений.</summary>
@@ -793,4 +802,10 @@
var result = await dialog.Result;
}
#endregion
public void Dispose()
{
AudioPlayerService.OnStartedTrack -= OnPlayerStateChanged;
AudioPlayerService.OnEndedTrack -= OnPlayerStateChanged;
}
}

5
PlaylistShared.Pwa/Services/AudioPlayerService.cs
View File

@@ -41,6 +41,8 @@ public class AudioPlayerService : IAudioPlayerService
public string TotalTimeString => _totalTimeString;
public event Action? OnStateChanged;
public event Action? OnStartedTrack;
public event Action? OnEndedTrack;
public AudioPlayerService(TokenStorage tokenStorage, ISnackbar snackbar, HttpClient httpClient, PlayerStorage playerStorage)
{
@@ -105,6 +107,7 @@ public class AudioPlayerService : IAudioPlayerService
_isPlaying = true;
OnStateChanged?.Invoke();
OnLoadAndPlayRequested?.Invoke(trackId, accessToken, playlistShareToken);
OnStartedTrack?.Invoke();
}
public async Task PlayAsync()
@@ -112,6 +115,7 @@ public class AudioPlayerService : IAudioPlayerService
_isPlaying = true;
OnStateChanged?.Invoke();
OnPlayRequested?.Invoke();
OnStartedTrack?.Invoke();
}
public async Task PauseAsync()
@@ -175,6 +179,7 @@ public class AudioPlayerService : IAudioPlayerService
_totalTime = 0;
_currentTimeString = "0:00";
OnStateChanged?.Invoke();
OnEndedTrack?.Invoke();
}
/// <summary>

4
PlaylistShared.Pwa/Services/IAudioPlayerService.cs
View File

@@ -66,6 +66,10 @@ public interface IAudioPlayerService
/// Подписывайтесь на него, чтобы перерисовывать UI (например, иконку "пауза/плей").
/// </summary>
event Action? OnStateChanged;
event Action? OnStartedTrack;
event Action? OnEndedTrack;
#endregion
#region События для связи с реальным компонентом AudioPlayer (Эти события вызываются сервисом)