Улучшен плеер

PlaylistShared.Pwa/Pages/Home.razor

@@ -6,7 +6,7 @@
     <MudCard>
         <MudCardHeader>
             <CardHeaderContent>
-                <MudText Typo="Typo.h4" GutterBottom>🎵 PlaylistShared</MudText>
+                <MudText Typo="Typo.h4" GutterBottom>🎵 Playlist share</MudText>
                 <MudText Typo="Typo.body1">Делитесь плейлистами Яндекс.Музыки с друзьями и управляйте треками вместе!</MudText>
             </CardHeaderContent>
         </MudCardHeader>
@@ -20,7 +20,7 @@
                         <MudText Typo="Typo.h6" GutterBottom>1️⃣ Регистрация и вход</MudText>
                         <MudText Typo="Typo.body2" Class="mb-2">
                             • Нажмите <MudLink Href="/register" Style="font-weight:bold;">«Регистрация»</MudLink> и создайте аккаунт.<br />
-                            • Или войдите через <MudLink Href="/login" Style="font-weight:bold;">вход</MudLink>, если уже зарегистрированы.
+                            • Или <MudLink Href="/login" Style="font-weight:bold;">войдите</MudLink> в систему, если уже зарегистрированы.
                         </MudText>
                     </MudPaper>
                 </MudItem>

PlaylistShared.Pwa/Pages/MyPlaylists.razor

@@ -29,7 +29,7 @@
             }
             else
             {
-                <MudTable Items="@FilteredPlaylists" Hover="true" Breakpoint="Breakpoint.Sm">
+                <MudTable Items="@FilteredPlaylists">
                     <HeaderContent>
                         <MudTh>Название</MudTh>
                         <MudTh>Треков</MudTh>
@@ -37,9 +37,9 @@
                         <MudTh></MudTh>
                     </HeaderContent>
                     <RowTemplate>
-                        <MudTd><MudText>@context.Title</MudText></MudTd>
-                        <MudTd>@context.TrackCount</MudTd>
-                        <MudTd>
+                        <MudTd DataLabel="Название"><MudText>@context.Title</MudText></MudTd>
+                        <MudTd DataLabel="Треков">@context.TrackCount</MudTd>
+                        <MudTd DataLabel="Статус">
                             <!-- Явно указываем T="string" для MudChip -->
                             @if (context.IsShared)
                             {

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -112,10 +112,11 @@
                 }
 
                 <!-- Список треков -->
-                <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <MudText Typo="Typo.h6" GutterBottom>Треки</MudText>
-                    <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="_tracksLoading" Size="Size.Small" />
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                    <MudText Typo="Typo.h6">Треки</MudText>
+                    <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="_tracksLoading" Size="Size.Medium" />
                 </div>
+
                 @if (_tracksLoading)
                 {
                     <MudProgressCircular Indeterminate />
@@ -126,7 +127,7 @@
                 }
                 else
                 {
-                    <MudTable Items="@_tracks" Hover="true" Breakpoint="Breakpoint.Sm">
+                    <MudTable Items="@_tracks">
                         <HeaderContent>
                             <MudTh>#</MudTh>
                             <MudTh>Обложка</MudTh>
@@ -139,50 +140,52 @@
                             }
                         </HeaderContent>
                         <RowTemplate>
-                            <MudTd>@context.Index</MudTd>
-                            <MudTd>
+                            <MudTd DataLabel="#" Style="font-weight: normal;">@context.Index</MudTd>
+                            <MudTd DataLabel="Обложка">
                                 @if (!string.IsNullOrEmpty(context.CoverUri))
                                 {
                                     <TrackCoverWithPlay CoverUrl="@context.CoverUri"
                                                         TrackId="@context.Id"
-                                                        Width="50"
-                                                        Height="50"
+                                                        Width="50" Height="50"
                                                         IsPlaying="@(_currentTrackId == context.Id && _isPlaying)"
                                                         OnPlay="PlayTrack" />
                                 }
                             </MudTd>
-                            <MudTd>
-                                <MudLink Href="@($"https://music.yandex.ru/track/{context.Id}")"
-                                         Target="_blank"
-                                         Underline="Underline.Hover"
-                                         Style="cursor: pointer; display: inline-flex; align-items: center;">
+                            <MudTd DataLabel="Название">
+                                <MudLink Href="@($"https://music.yandex.ru/track/{context.Id}")" Target="_blank" Underline="Underline.Hover">
                                     @context.Title
                                     <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
                                 </MudLink>
                             </MudTd>
-                            <MudTd>@string.Join(", ", context.Artists)</MudTd>
-                            <MudTd>@FormatDuration(context.DurationMs)</MudTd>
+                            <MudTd DataLabel="Исполнитель">@string.Join(", ", context.Artists)</MudTd>
+                            <MudTd DataLabel="Длительность">@FormatDuration(context.DurationMs)</MudTd>
                             @if (_canRemove)
                             {
-                                <MudTd>
+                                <MudTd DataLabel="">
                                     <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => RemoveTrack(context)" />
                                 </MudTd>
                             }
                         </RowTemplate>
                     </MudTable>
-                    <AudioPlayer @ref="_audioPlayer" OnTrackEnded="OnTrackEnded" />
                 }
             </MudCardContent>
         </MudCard>
     }
+
+    <!-- Фиксированный плеер внизу -->
+    <div class="fixed-player" style="display: @(_isPlayerVisible ? "block" : "none");">
+        <AudioPlayer @ref="_audioPlayer" OnTrackEnded="OnTrackEnded" />
+    </div>
 </MudContainer>
 
-    @code {
+
+@code {
     [Parameter] public string Token { get; set; }
 
     private AudioPlayer? _audioPlayer;
     private string? _currentTrackId { get; set; }
     private bool _isPlaying = false;
+    private bool _isPlayerVisible = false;
 
     private SharedPlaylistDto? _playlist;
     private bool _loading = true;
@@ -436,6 +439,8 @@
             await _audioPlayer.LoadAndPlayAsync(trackId);
             _isPlaying = true;
         }
+
+        _isPlayerVisible = true;
     }
 
     private async Task OnTrackEnded()

PlaylistShared.Pwa/wwwroot/css/app.css

@@ -122,4 +122,28 @@ code {
 .play-overlay {
     transition: opacity 0.2s ease;
     cursor: pointer;
+}
+
+/* Фиксированный плеер внизу */
+.fixed-player {
+    position: sticky;
+    display: flex;
+    bottom: 0;
+    width: 100%;
+    right: 0;
+    justify-content: center;
+    background-color: var(--mud-palette-background);
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Отступ снизу, когда плеер виден */
+.page-with-player {
+    padding-bottom: 80px; /* Высота плеера (подберите под свою тему) */
+}
+
+/* На мобильных устройствах можно уменьшить отступ */
+@media (max-width: 600px) {
+    .page-with-player {
+        padding-bottom: 100px; /* если плеер выше на мобильных */
+    }
 }

PlaylistShared.Pwa/wwwroot/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlaylistShared.Pwa</title>
+    <title>Playlist Share</title>
     <base href="/" />
     <link rel="preload" id="webassembly" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />

PlaylistShared.Pwa/wwwroot/manifest.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "Playlist Shared",
+  "name": "Playlist Share",
   "short_name": "PlaylistShare",
   "id": "./",
   "start_url": "./",