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

PlaylistShared.Pwa/Components/Global/AudioPlayer.razor

@@ -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.NoWrap">
-    <MudStack Spacing="1" Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
         <!-- Кнопки управления -->
         <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">
+                    <MudStack AlignItems="AlignItems.Start" Spacing="0" Style="min-width: 0; width: 100%;">
-                        <MudText Typo="Typo.body2" Color="Color.Default" 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%;">
                             @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>
 

PlaylistShared.Pwa/Components/Global/TrackProgress.razor

@@ -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;
     }
 

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -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;
+    }
 }

PlaylistShared.Pwa/Services/AudioPlayerService.cs

@@ -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>

PlaylistShared.Pwa/Services/IAudioPlayerService.cs

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