Добавлена подсветка воспроизводимой песни

2026-05-22 00:07:26 +03:00
parent 9139d8ecfe
commit efe1c3c2dd
23 changed files with 362 additions and 57 deletions
--- a/PlaylistShared.Api/Controllers/OgController.cs
+++ b/PlaylistShared.Api/Controllers/OgController.cs
@@ -0,0 +1,67 @@
+using Microsoft.AspNetCore.Mvc;
+using PlaylistShared.Api.Services;
+
+namespace PlaylistShared.Api.Controllers;
+
+[ApiController]
+[Route("shared")]
+public class OgController : ControllerBase
+{
+    private readonly SharedPlaylistService _sharedService;
+    private readonly string _clientBaseUrl;
+
+    public OgController(SharedPlaylistService sharedService, IConfiguration configuration)
+    {
+        _sharedService = sharedService;
+        _clientBaseUrl = configuration["Client:BaseUrl"]?.TrimEnd('/') ?? "";
+    }
+
+    [HttpGet("{token}")]
+    [Produces("text/html")]
+    public async Task<ContentResult> GetOgPage(string token)
+    {
+        var entity = await _sharedService.GetEntityByTokenAsync(token);
+        var pwaUrl = $"{_clientBaseUrl}/shared/{token}";
+
+        string title = entity?.Title ?? "Playlist Share";
+        string description = entity != null
+            ? $"Слушайте плейлист «{entity.Title}» на Playlist Share"
+            : "Совместные плейлисты Яндекс.Музыки";
+        string imageUrl = !string.IsNullOrEmpty(entity?.CoverUrl) ? entity.CoverUrl : "";
+
+        var html = $"""
+            <!DOCTYPE html>
+            <html lang="ru">
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{HtmlEncode(title)}</title>
+
+                <meta property="og:type"        content="music.playlist" />
+                <meta property="og:title"       content="{HtmlEncode(title)}" />
+                <meta property="og:description" content="{HtmlEncode(description)}" />
+                <meta property="og:url"         content="{HtmlEncode(pwaUrl)}" />
+                {(string.IsNullOrEmpty(imageUrl) ? "" : $"""<meta property="og:image" content="{HtmlEncode(imageUrl)}" />""")}
+                <meta name="twitter:card"        content="summary_large_image" />
+                <meta name="twitter:title"       content="{HtmlEncode(title)}" />
+                <meta name="twitter:description" content="{HtmlEncode(description)}" />
+                {(string.IsNullOrEmpty(imageUrl) ? "" : $"""<meta name="twitter:image" content="{HtmlEncode(imageUrl)}" />""")}
+
+                <meta http-equiv="refresh" content="0;url={HtmlEncode(pwaUrl)}" />
+                <script>window.location.replace("{JsEncode(pwaUrl)}");</script>
+            </head>
+            <body>
+                <p>Перенаправление на <a href="{HtmlEncode(pwaUrl)}">{HtmlEncode(title)}</a>…</p>
+            </body>
+            </html>
+            """;
+
+        return Content(html, "text/html; charset=utf-8");
+    }
+
+    private static string HtmlEncode(string s) =>
+        System.Web.HttpUtility.HtmlAttributeEncode(s);
+
+    private static string JsEncode(string s) =>
+        s.Replace("\\", "\\\\").Replace("'", "\\'").Replace("\"", "\\\"");
+}
--- a/PlaylistShared.Api/Program.cs
+++ b/PlaylistShared.Api/Program.cs
@@ -1,6 +1,7 @@

 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.AspNetCore.DataProtection;
+using Microsoft.AspNetCore.HttpOverrides;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
@@ -51,6 +52,14 @@ public class Program
            options.Cookie.HttpOnly = true;
            options.Cookie.IsEssential = true;
            options.Cookie.SameSite = SameSiteMode.Lax;
+            options.Cookie.MaxAge = TimeSpan.FromDays(30); // persistent across browser restarts
+        });
+
+        builder.Services.Configure<ForwardedHeadersOptions>(options =>
+        {
+            options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+            options.KnownNetworks.Clear();  // trust all proxies in Docker network
+            options.KnownProxies.Clear();
        });

        // JWT
@@ -129,6 +138,7 @@ public class Program

        app.MapOpenApi();

+        app.UseForwardedHeaders();
        app.UseCors("Production");

        if (!app.Environment.IsDevelopment())
--- a/PlaylistShared.Api/Services/Yandex/YandexAuthService.cs
+++ b/PlaylistShared.Api/Services/Yandex/YandexAuthService.cs
@@ -44,10 +44,10 @@ public class YandexAuthService
    internal async Task<YandexAuthQr> GenerateQrAsync(ApplicationUser user)
    {
        var qr = await Api.Passport.GetAuthQRLinkAsync();
-        var trackId = Service.Client.AuthStorage.AuthToken.TrackId;
-        var csrfToken = Service.Client.AuthStorage.AuthToken.CsfrToken;
-        var headerProcessUuid = Service.Client.AuthStorage.HeaderToken.ProcessUuid;
-        var headerCsrfToken = Service.Client.AuthStorage.HeaderToken.CsfrToken;
+        var trackId = Service.Client.AuthStorage.AuthToken?.TrackId;
+        var csrfToken = Service.Client.AuthStorage.AuthToken?.CsfrToken;
+        var headerProcessUuid = Service.Client.AuthStorage.HeaderToken?.ProcessUuid;
+        var headerCsrfToken = Service.Client.AuthStorage.HeaderToken?.CsfrToken;

        if (string.IsNullOrEmpty(qr))
            throw new Exception("Не удалось получить QR-ссылку");
@@ -93,6 +93,8 @@ public class YandexAuthService

        Service.Client.AuthStorage.AuthToken.CsfrToken = session.CsrfToken ?? "";
        Service.Client.AuthStorage.AuthToken.TrackId = session.TrackId ?? "";
+        if (Service.Client.AuthStorage.HeaderToken is null)
+            Service.Client.AuthStorage.HeaderToken = new();
        Service.Client.AuthStorage.HeaderToken.CsfrToken = session.HeaderCsrfToken ?? "";
        Service.Client.AuthStorage.HeaderToken.ProcessUuid = session.HeaderProcessId ?? "";

@@ -131,15 +133,16 @@ public class YandexAuthService
    private void RestoreCookies(CookieContainer container, string serializedCookies)
    {
        var cookies = JsonSerializer.Deserialize<List<CookieData>>(serializedCookies);
+        if (cookies == null) return;
        foreach (var c in cookies)
            container.Add(new Cookie(c.Name, c.Value, c.Path, c.Domain));
    }

    private class CookieData
    {
-        public string Name { get; set; }
-        public string Value { get; set; }
-        public string Domain { get; set; }
-        public string Path { get; set; }
+        public string Name { get; set; } = string.Empty;
+        public string Value { get; set; } = string.Empty;
+        public string Domain { get; set; } = string.Empty;
+        public string Path { get; set; } = string.Empty;
    }
 }
--- a/PlaylistShared.Api/ruvector.db
+++ b/PlaylistShared.Api/ruvector.db
--- a/PlaylistShared.Pwa/Components/Common/ShareButton.razor
+++ b/PlaylistShared.Pwa/Components/Common/ShareButton.razor
@@ -14,7 +14,7 @@
            Paper="true">
    <MudPaper Class="pa-4">
        <MudText Typo="Typo.body2" Class="mb-2">Ссылка для приглашения:</MudText>
-        <MudStack Row Gap="2" AlignItems="AlignItems.Center">
+        <MudStack Row Spacing="2" AlignItems="AlignItems.Center">
            <MudTextField @bind-Value="_shareUrl"
                          ReadOnly="true"
                          Variant="Variant.Outlined"
--- a/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
+++ b/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
@@ -6,18 +6,17 @@
 <MudItem @onmouseenter="HandleMouseEnter"
          @onmouseleave="HandleMouseLeave"
          style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden;">
-    
+
    <MudImage Src="@Track?.CoverUri.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
-    
-    @if (CanPlay && (_isHovered || IsCurrentTrackPlaying))
+
+    @if (CanPlay)
    {
-        <MudItem 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; transition: opacity 0.2s ease; cursor: pointer;">
-            <MudIconButton Icon="@(IsCurrentTrackPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
+        <div class="play-overlay @(_isHovered || IsCurrentTrackPlaying ? "play-overlay--visible" : "")">
+            <MudIconButton Icon="@(IsCurrentTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                           Color="Color.Inherit"
                           Size="Size.Large"
                           OnClick="OnPlayClick" />
-        </MudItem>
+        </div>
    }
 </MudItem>

--- a/PlaylistShared.Pwa/Components/Common/TrackItem.razor
+++ b/PlaylistShared.Pwa/Components/Common/TrackItem.razor
@@ -3,7 +3,7 @@
@using PlaylistShared.Pwa.Extensions
@using PlaylistShared.Shared.Yandex

-<MudStack Row AlignItems="AlignItems.Center">
+<MudStack Row AlignItems="AlignItems.Center" Class="@(IsCurrentTrack ? "current-track" : "")">
    <!-- Обложка с фиксированной шириной -->
    <MudItem>
        <TrackCoverWithPlay TrackId="@Track.TrackId"
@@ -31,13 +31,26 @@

    <!-- Длительность (фиксированная ширина по содержимому) -->
    <MudItem>
-        <MudText Typo="Typo.body2">@Track.DurationMs.FormatDuration()</MudText>
+        @if (IsCurrentTrack)
+        {
+            <MudIcon Icon="@Icons.Material.Filled.GraphicEq" Color="Color.Primary" Size="Size.Small" Class="mr-1 eq-animate" Style="vertical-align: middle;" />
+        }
+        <MudText Typo="Typo.body2" Inline Color="@(IsCurrentTrack ? Color.Primary : Color.Default)">@Track.DurationMs.FormatDuration()</MudText>
    </MudItem>
 </MudStack>

+<style>
+    .current-track {
+        background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
+        border-radius: 6px;
+        box-shadow: inset 2px 0 0 var(--mud-palette-primary);
+    }
+</style>
+
@code {
    [Parameter] public YandexTrack Track { get; set; } = null!;
    [Parameter] public string PlaylistShareToken { get; set; } = string.Empty;
    [Parameter] public bool CanPlay { get; set; } = true;
    [Parameter] public string? AddedByName { get; set; }
+    [Parameter] public bool IsCurrentTrack { get; set; }
 }
--- a/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
+++ b/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
@@ -9,7 +9,7 @@
@implements IDisposable
@implements IAsyncDisposable

-    <MudStack Spacing="1" Row AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap">
+    <MudStack Spacing="1" Row AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap" Class="player-enter">
        <!-- Кнопки управления -->
        <MudIconButton Icon="@Icons.Material.Filled.SkipPrevious"
                       Size="Size.Small"
@@ -17,9 +17,7 @@
                       Disabled="@(!AudioPlayerService.HasPrevious)"
                       OnClick="() => AudioPlayerService.PlayPreviousAsync()" />

-        <MudItem @onmouseenter="() => { _isPlayHovered = true; }"
-                 @onmouseleave="() => { _isPlayHovered = false; }"
-                 Class="relative d-inline-block rounded overflow-hidden cursor-pointer"
+        <MudItem Class="relative d-inline-block rounded overflow-hidden cursor-pointer"
                 Style="width: 50px; height: 50px;">
    
            @if (!string.IsNullOrEmpty(AudioPlayerService.CurrentTrack?.CoverUri))
@@ -125,7 +123,6 @@
    private double _volumeBeforeMute;
    private double _bufferSecond;

-    private bool _isPlayHovered;

    protected override async Task OnInitializedAsync()
    {
@@ -179,6 +176,29 @@
    {
        _bufferSecond = second;
    }
+
+    [JSInvokable]
+    public async Task OnKeyboardTogglePlay()
+    {
+        if (AudioPlayerService.IsPlaying)
+            await AudioPlayerService.PauseAsync();
+        else
+            await AudioPlayerService.PlayAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnKeyboardSeek(double delta)
+    {
+        var newTime = Math.Max(0, AudioPlayerService.CurrentTime + delta);
+        await AudioPlayerService.SeekToAsync(newTime);
+    }
+
+    [JSInvokable]
+    public async Task OnKeyboardVolumeChange(double delta)
+    {
+        var newVol = Math.Clamp(AudioPlayerService.CurrentVolume + delta, 0, 100);
+        await AudioPlayerService.SetVolumeAsync(newVol);
+    }
    #endregion

    #region Обработка сервиса
@@ -307,7 +327,10 @@
            AudioPlayerService.OnStateChanged -= OnServiceStateChanged;

            if (_audioElement != null)
+            {
+                try { await _audioElement.InvokeVoidAsync("destroy"); } catch { }
                await _audioElement.DisposeAsync();
+            }
            if (_audioModule != null)
                await _audioModule.DisposeAsync();
        }
--- a/PlaylistShared.Pwa/DarkModeToggle())`
+++ b/PlaylistShared.Pwa/DarkModeToggle())`
--- a/PlaylistShared.Pwa/Layout/MainLayout.razor
+++ b/PlaylistShared.Pwa/Layout/MainLayout.razor
@@ -3,9 +3,11 @@
@inherits LayoutComponentBase
@inject PwaUpdateService PwaUpdateService
@inject IJSRuntime JSRuntime
+@inject NavigationManager NavigationManager
@inject ContextualActionBarService ContextualActionBarService
@inject IBrowserViewportService BrowserViewportService
@implements IBrowserViewportObserver
+@implements IDisposable

 <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
@@ -23,7 +25,7 @@
        {
            <MudSpacer />
            <LoginDisplay />
-            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" Class="ml-2" />
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@(() => DarkModeToggle())" Class="ml-2" />
            <MudLink Href="https://git.frigat.duckdns.org/FrigaT/PlaylistShared" Target="_blank" Color="Color.Inherit" Underline="Underline.None" Class="ml-4">
                <MudIcon Icon="@Icons.Custom.Brands.GitHub" Size="Size.Small" Class="mr-1" /> Git
            </MudLink>
@@ -68,6 +70,22 @@
        };

        ContextualActionBarService.OnChanged += OnContextualChangedHandler;
+        NavigationManager.LocationChanged += OnLocationChanged;
+    }
+
+    private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
+    {
+        if (_isMobile)
+        {
+            _drawerOpen = false;
+            InvokeAsync(StateHasChanged);
+        }
+    }
+
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+        ContextualActionBarService.OnChanged -= OnContextualChangedHandler;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -77,6 +95,13 @@
            _dotNetRef = DotNetObjectReference.Create(PwaUpdateService);
            await JSRuntime.InvokeVoidAsync("registerSWMessageHandler", _dotNetRef);
            await BrowserViewportService.SubscribeAsync(this, fireImmediately: true);
+
+            var savedTheme = await JSRuntime.InvokeAsync<string?>("localStorage.getItem", "theme");
+            if (savedTheme != null)
+            {
+                _isDarkMode = savedTheme != "light";
+                StateHasChanged();
+            }
        }
    }

@@ -92,9 +117,10 @@
        _drawerOpen = !_drawerOpen;
    }

-    private void DarkModeToggle()
+    private async Task DarkModeToggle()
    {
        _isDarkMode = !_isDarkMode;
+        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "theme", _isDarkMode ? "dark" : "light");
    }

    private readonly PaletteLight _lightPalette = new()
@@ -154,8 +180,14 @@

    Task IBrowserViewportObserver.NotifyBrowserViewportChangeAsync(BrowserViewportEventArgs browserViewportEventArgs)
    {
+        var wasMobile = _isMobile;
        _isMobile = browserViewportEventArgs.Breakpoint <= Breakpoint.Sm;

+        if (!wasMobile && _isMobile)
+            _drawerOpen = false;
+        else if (wasMobile && !_isMobile)
+            _drawerOpen = true;
+
        return InvokeAsync(StateHasChanged);
    }
 }
--- a/PlaylistShared.Pwa/Pages/Favorites.razor
+++ b/PlaylistShared.Pwa/Pages/Favorites.razor
@@ -47,8 +47,7 @@
                        <MudTd DataLabel="">
                            <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                           Color="Color.Error"
-                                           OnClick="() => RemoveFromFavorites(context)"
-                                           Title="Удалить из избранного" />
+                                           OnClick="() => RemoveFromFavorites(context)" />
                        </MudTd>
                    </RowTemplate>
                </MudTable>
--- a/PlaylistShared.Pwa/Pages/Home.razor
+++ b/PlaylistShared.Pwa/Pages/Home.razor
@@ -3,7 +3,7 @@
@inject NavigationManager Navigation
@inject AuthenticationStateProvider AuthProvider

-<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
+<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4 mt-sm-8">
    <MudCard>
        <MudCardHeader>
            <CardHeaderContent>
@@ -26,7 +26,7 @@
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                    <MudIcon Icon="@Icons.Material.Filled.Share" Size="Size.Medium" />
                    <div style="flex: 1;">
-                        <MudText Typo="Typo.body1" FontWeight="FontWeight.Bold">
+                        <MudText Typo="Typo.body1" Style="font-weight: bold;">
                            Чтобы расшаривать плейлисты, необходимо зарегистрироваться
                        </MudText>
                        <MudText Typo="Typo.body2">
@@ -45,19 +45,19 @@
            <!-- Краткие преимущества -->
            <MudGrid>
                <MudItem xs="12" sm="4">
-                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                    <MudPaper Class="pa-3 text-center feature-card" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.Link" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Создавайте ссылки-приглашения</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="4">
-                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                    <MudPaper Class="pa-3 text-center feature-card" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.People" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Совместное управление треками</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="4">
-                    <MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                    <MudPaper Class="pa-3 text-center feature-card" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
                        <MudIcon Icon="@Icons.Material.Filled.Security" Size="Size.Medium" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mt-2">Гибкие настройки доступа</MudText>
                    </MudPaper>
--- a/PlaylistShared.Pwa/Pages/MyPlaylists.razor
+++ b/PlaylistShared.Pwa/Pages/MyPlaylists.razor
@@ -17,7 +17,7 @@
            </CardHeaderContent>
            <CardHeaderActions>
                <!-- Явно указываем T="bool" для MudSwitch -->
-                <MudSwitch T="bool" @bind-Checked="_showOnlyShared" Color="Color.Primary" Label="Только расшаренные" />
+                <MudSwitch T="bool" @bind-Value="_showOnlyShared" Color="Color.Primary" Label="Только расшаренные" />
                <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadPlaylists" />
            </CardHeaderActions>
        </MudCardHeader>
@@ -71,11 +71,11 @@
 </MudContainer>

@code {
-    private List<YandexPlaylistShare> _playlists;
+    private List<YandexPlaylistShare> _playlists = new();
    private bool _loading = true;
    private bool _showOnlyShared = false;

-    private List<YandexPlaylistShare> FilteredPlaylists => _showOnlyShared ? _playlists?.Where(p => p.IsShared).ToList() : _playlists;
+    private List<YandexPlaylistShare> FilteredPlaylists => _showOnlyShared ? _playlists.Where(p => p.IsShared).ToList() : _playlists;

    protected override async Task OnInitializedAsync()
    {
@@ -89,7 +89,7 @@
        {
            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexPlaylistShare>>>("/api/playlists");
            if (response?.Success == true)
-                _playlists = response.Data;
+                _playlists = response.Data ?? new();
            else
                Snackbar.Add("Ошибка загрузки плейлистов", Severity.Error);
        }
--- a/PlaylistShared.Pwa/Pages/Profile.razor
+++ b/PlaylistShared.Pwa/Pages/Profile.razor
@@ -48,7 +48,6 @@
 </MudContainer>

@code {
-    private string _email = "user@example.com";
    private string _statusText = "Загрузка...";
    private bool _hasToken;

--- a/PlaylistShared.Pwa/Pages/Register.razor
+++ b/PlaylistShared.Pwa/Pages/Register.razor
@@ -43,7 +43,7 @@
            var result = await response.Content.ReadFromJsonAsync<ApiResponse<LoginResponse>>();
            if (result?.Success == true)
            {
-                await AuthProvider.MarkUserAsAuthenticated(result.Data.Token, result.Data.RefreshToken);
+                await AuthProvider.MarkUserAsAuthenticated(result.Data!.Token, result.Data.RefreshToken);
                Navigation.NavigateTo("/");
            }
            else
@@ -60,9 +60,9 @@

    public class RegisterModel
    {
-        public string Username { get; set; }
-        public string Email { get; set; }
-        public string Password { get; set; }
-        public string ConfirmPassword { get; set; }
+        public string Username { get; set; } = string.Empty;
+        public string Email { get; set; } = string.Empty;
+        public string Password { get; set; } = string.Empty;
+        public string ConfirmPassword { get; set; } = string.Empty;
    }
 }
--- a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
+++ b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
@@ -249,14 +249,16 @@
        }
        else
        {
-            <MudTable Items="@FilteredPlaylistTracks" 
-                        Hover 
-                        Elevation="0" 
-                        Breakpoint="Breakpoint.None" 
+            <MudTable Items="@FilteredPlaylistTracks"
+                        Hover
+                        Elevation="0"
+                        Breakpoint="Breakpoint.None"
+                        Class="content-fade-in"
                        Style="min-height: 0;">
                <RowTemplate>
                    <MudTd Class="py-1 px-0" Style="width: 100%;">
                        <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay"
+                                   IsCurrentTrack="@(AudioPlayerService.CurrentTrackId == context.TrackId)"
                                   AddedByName="@(_trackAdditions.TryGetValue(context.TrackId, out var n) ? n : null)" />
                    </MudTd>
                    @if (_canRemove)
@@ -508,7 +510,7 @@
    /// <summary>Состояние: Происходит поиск.</summary>
    private bool _isSearching = false;
    /// <summary>Ссылка на поле ввода</summary>
-    private MudTextField<string> _searchField;
+    private MudTextField<string> _searchField = null!;
    /// <summary>Результат поиска.</summary>
    private YandexSearchResult? _searchResult = null;
    /// <summary>Текст фильтра для результатов поиска</summary>
--- a/PlaylistShared.Pwa/nginx.conf
+++ b/PlaylistShared.Pwa/nginx.conf
@@ -5,7 +5,7 @@ events {
 http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
-    
+
    # Не раскрывайть версию Nginx в ответах.
    server_tokens off;

@@ -18,6 +18,29 @@ http {
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/wasm application/json;

+    # Бэкенд API (для OG-тегов)
+    upstream api_backend {
+        server playlistshared_api:80;
+    }
+
+    # Определяем, является ли запрос ботом-краулером
+    map $http_user_agent $is_crawler {
+        default                     0;
+        ~*Slackbot                  1;
+        ~*facebookexternalhit       1;
+        ~*Twitterbot                1;
+        ~*TelegramBot               1;
+        ~*WhatsApp                  1;
+        ~*LinkedInBot               1;
+        ~*vkShare                   1;
+        ~*Pinterest                 1;
+        ~*Googlebot                 1;
+        ~*YandexBot                 1;
+        ~*Discordbot                1;
+        ~*Applebot                  1;
+        ~*DuckDuckBot               1;
+    }
+
    server {
        listen 80;
        server_name localhost;
@@ -54,6 +77,18 @@ http {
            try_files $uri =404;
        }

+        # OG-теги: краулеры получают HTML с meta-тегами от API
+        location ~ ^/shared/(.+)$ {
+            if ($is_crawler) {
+                proxy_set_header X-Real-IP         $remote_addr;
+                proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+                proxy_set_header X-Forwarded-Proto $scheme;
+                proxy_set_header Host              $host;
+                proxy_pass http://api_backend;
+            }
+            try_files $uri $uri/ /index.html?$args;
+        }
+
        # Основной SPA fallback: все неизвестные пути отдаём через index.html
        location / {
            try_files $uri $uri/ /index.html?$args;
--- a/PlaylistShared.Pwa/wwwroot/css/app.css
+++ b/PlaylistShared.Pwa/wwwroot/css/app.css
@@ -113,15 +113,108 @@ code {
 .horizontal-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
-    overflow-y: hidden; /* отключаем вертикальный скролл */
+    overflow-y: hidden;
    cursor: grab;
 }

    .horizontal-scroll:active {
        cursor: grabbing;
    }
-/* Для WebKit (Chrome, Edge, Safari) можно включить горизонтальный скролл мышью */
+
 .horizontal-scroll {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
+}
+
+/* ===== Animations ===== */
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes slideUpFade {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes equalizerPulse {
+    0%,  100% { transform: scaleY(0.5) translateY(3px); }
+    50%        { transform: scaleY(1)   translateY(0); }
+}
+
+@keyframes playerSlideUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Fade-in for content that loads */
+.content-fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Track items slide up when list loads */
+.tracks-slide-in {
+    animation: slideUpFade 0.25s ease-out;
+}
+
+/* Equalizer icon bounce */
+.eq-animate {
+    display: inline-block;
+    transform-origin: bottom center;
+    animation: equalizerPulse 0.55s ease-in-out infinite alternate;
+}
+
+/* Feature cards on home page */
+.feature-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+    cursor: default;
+}
+
+.feature-card:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 6px 20px rgba(126, 111, 255, 0.18) !important;
+}
+
+/* Audio player entrance */
+.player-enter {
+    animation: playerSlideUp 0.3s ease-out;
+}
+
+/* Play overlay — opacity-based show/hide */
+.play-overlay {
+    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;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    cursor: pointer;
+}
+
+.play-overlay.play-overlay--visible {
+    opacity: 1;
+}
+
+/* Touch devices: play overlay always visible */
+@media (hover: none) {
+    .play-overlay {
+        opacity: 1;
+    }
+}
+
+/* Current track — smooth highlight transition */
+.current-track {
+    transition: background 0.35s ease;
+}
+
+/* Mobile padding tightening */
+@media (max-width: 599px) {
+    .mud-container {
+        padding-left: 6px !important;
+        padding-right: 6px !important;
+    }
 }
--- a/PlaylistShared.Pwa/wwwroot/js/AudioPlayer.js
+++ b/PlaylistShared.Pwa/wwwroot/js/AudioPlayer.js
@@ -58,6 +58,36 @@
        }
    });

-    // Возвращаем все методы, которые будут вызываться из C#
-    return { loadAndPlay, play, pause, stop, setVolume, setCurrentTime };
+    const handleKeyDown = (e) => {
+        const tag = e.target.tagName.toLowerCase();
+        if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
+
+        switch (e.key) {
+            case ' ':
+                e.preventDefault();
+                dotNetHelper.invokeMethodAsync('OnKeyboardTogglePlay');
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                dotNetHelper.invokeMethodAsync('OnKeyboardSeek', -10);
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                dotNetHelper.invokeMethodAsync('OnKeyboardSeek', 10);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                dotNetHelper.invokeMethodAsync('OnKeyboardVolumeChange', 5);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                dotNetHelper.invokeMethodAsync('OnKeyboardVolumeChange', -5);
+                break;
+        }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    const destroy = () => window.removeEventListener('keydown', handleKeyDown);
+
+    return { loadAndPlay, play, pause, stop, setVolume, setCurrentTime, destroy };
 }
--- a/PlaylistShared.Shared/Profile/SetYandexTokenRequest.cs
+++ b/PlaylistShared.Shared/Profile/SetYandexTokenRequest.cs
@@ -2,5 +2,5 @@

 public class SetYandexTokenRequest
 {
-    public string Token { get; set; }
+    public string Token { get; set; } = string.Empty;
 }
--- a/PlaylistShared.Shared/SharedPlaylist/AddTrackByLinkRequest.cs
+++ b/PlaylistShared.Shared/SharedPlaylist/AddTrackByLinkRequest.cs
@@ -2,5 +2,5 @@

 public class AddTrackByLinkRequest
 {
-    public string Link { get; set; }
+    public string Link { get; set; } = string.Empty;
 }
--- a/PlaylistShared.Shared/SharedPlaylist/SharePlaylistDto.cs
+++ b/PlaylistShared.Shared/SharedPlaylist/SharePlaylistDto.cs
@@ -36,7 +36,7 @@ public class SharePlaylistDto

    /// <summary>Токен для расшаривания плейлиста.</summary>
    [JsonPropertyName("shareToken")]
-    public string ShareToken { get; set; }
+    public string ShareToken { get; set; } = string.Empty;

    /// <summary>Права на просмотр.</summary>
    [JsonPropertyName("viewPermission")]
--- a/PlaylistShared.Shared/SharedPlaylist/SharePlaylistRequest.cs
+++ b/PlaylistShared.Shared/SharedPlaylist/SharePlaylistRequest.cs
@@ -2,6 +2,6 @@

 public class SharePlaylistRequest
 {
-    public string Kind { get; set; }
-    public string OwnerUid { get; set; }
+    public string Kind { get; set; } = string.Empty;
+    public string OwnerUid { get; set; } = string.Empty;
 }