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-22 21:13:50 +03:00
parent b1febfc9dc
commit b3f19045fa
8 changed files with 83 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,20 +8,20 @@
@inject HttpClient Http
<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">
<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"
style="cursor: pointer; width: 50px; height: 50px;">
Class="relative d-inline-block rounded-sm 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 d-block" />
<MudImage Src="@AudioPlayerService.CurrentTrack.CoverUri.FormatCoverUrl(50, 50)" Height="50" Width="50" Class="rounded-l-sm d-block" />
}
<MudItem class="absolute d-flex align-center justify-center rounded"
style="top: 0; left: 0; right: 0; bottom: 0; background: transparent;">
<MudItem Class="absolute d-flex align-center justify-center rounded-sm"
Style="top: 0; left: 0; right: 0; bottom: 0; background: transparent;">
<MudToggleIconButton Toggled="@AudioPlayerService.IsPlaying"
Icon="@Icons.Material.Filled.PlayArrow"
Color="@Color.Primary"
@@ -35,7 +35,7 @@
<!-- Название и прогресс -->
@if (AudioPlayerService.CurrentTrack != null)
{
<MudStack 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-sm" 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"
@@ -48,7 +48,7 @@
Buffer
ValueChanged="SeekTo" />
</MudItem>
<MudStack Row AlignItems="AlignItems.Center" Class="px-3 relative pointer-events-none" Style="z-index: 2; width: 100%; height: 100%;">
<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;">
@AudioPlayerService.CurrentTrack.Title
@@ -61,8 +61,8 @@
<MudSpacer />
<MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
<MudText Typo="Typo.body2">
@AudioPlayerService.CurrentTimeString
</MudText>
</MudStack>
</MudStack>
@@ -71,28 +71,30 @@
{
<MudSpacer />
}
<!-- Громкость -->
<MudItem @onmouseenter="() => _volumeIsOpen = true"
@onmouseleave="() => _volumeIsOpen = false"
@onwheel="OnVolumeHandleWheel"
Style="position: relative; display: flex; align-items: center;">
<MudHidden Breakpoint="Breakpoint.SmAndDown">
<!-- Громкость -->
<MudItem @onmouseenter="() => _volumeIsOpen = true"
@onmouseleave="() => _volumeIsOpen = false"
@onwheel="OnVolumeHandleWheel"
Style="position: relative; display: flex; align-items: center;">
<MudIconButton Icon="@(AudioPlayerService.CurrentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)"
Size="Size.Small"
Color="Color.Default"
OnClick="ToggleMute" />
<MudIconButton Icon="@(AudioPlayerService.CurrentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)"
Size="Size.Small"
Color="Color.Default"
OnClick="ToggleMute" />
<MudPopover Open="@_volumeIsOpen"
AnchorOrigin="Origin.TopCenter"
TransformOrigin="Origin.BottomCenter"
Fixed
Class="pa-0 mt-n5"
Style="height:120px; width: 10px; background-color: transparent !important; overflow: visible !important;">
<MudProgressLinear Vertical Color="Color.Primary" Size="Size.Medium" Value="@AudioPlayerService.CurrentVolume" />
<MudPopover Open="@_volumeIsOpen"
AnchorOrigin="Origin.TopCenter"
TransformOrigin="Origin.BottomCenter"
Fixed
Class="pa-0 mt-n5"
Style="height:120px; width: 10px; background-color: transparent !important; overflow: visible !important;">
<MudProgressLinear Vertical Color="Color.Primary" Size="Size.Medium" Value="@AudioPlayerService.CurrentVolume" />
</MudPopover>
</MudItem>
</MudPopover>
</MudItem>
</MudHidden>
</MudStack>
</MudPaper>
@@ -123,6 +125,11 @@
AudioPlayerService.OnStateChanged += OnServiceStateChanged;
}
protected override void OnParametersSet()
{
StateHasChanged();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)

30
PlaylistShared.Pwa/Components/Global/ContextualBarContent.cs Normal file
View File

@@ -0,0 +1,30 @@
using Microsoft.AspNetCore.Components;
using PlaylistShared.Pwa.Services;
namespace PlaylistShared.Pwa.Components.Global;
public class ContextualBarContent : ComponentBase, IDisposable
{
[Inject]
public ContextualActionBarService ContextualActionBarService { get; set; } = default!;
[Parameter]
public ContextualActionBarPosition Position { get; set; } = ContextualActionBarPosition.Default;
[Parameter]
public RenderFragment? ChildContent { get; set; }
protected override void OnParametersSet()
{
ContextualActionBarService.Content = ChildContent;
ContextualActionBarService.Position = Position;
ContextualActionBarService.ChangeParameters();
}
public void Dispose()
{
ContextualActionBarService.Content = null;
ContextualActionBarService.Position = ContextualActionBarPosition.Default;
ContextualActionBarService.ChangeParameters();
}
}

21
PlaylistShared.Pwa/Components/Global/ContextualBarContent.razor
View File

@@ -1,21 +0,0 @@
@implements IDisposable
@inject ContextualActionBarService ContextualActionBarService
@code {
[Parameter] public ContextualActionBarPosition Position { get; set; } = ContextualActionBarPosition.Default;
[Parameter] public RenderFragment? ChildContent { get; set; }
protected override void OnParametersSet()
{
ContextualActionBarService.Content = ChildContent;
ContextualActionBarService.Position = Position;
ContextualActionBarService.ChangeParameters();
}
public void Dispose()
{
ContextualActionBarService.Content = null;
ContextualActionBarService.Position = ContextualActionBarPosition.Default;
ContextualActionBarService.ChangeParameters();
}
}

165
PlaylistShared.Pwa/Components/SharedPlaylist/PlaylistHeader.razor
View File

@@ -1,165 +0,0 @@
@using PlaylistShared.Pwa.Components.Common
@using PlaylistShared.Shared.Enums
@using System.Security.Claims
@using PlaylistShared.Shared.SharedPlaylist
@inject HttpClient Http
@inject NavigationManager Navigation
@inject AuthenticationStateProvider AuthProvider
@inject ISnackbar Snackbar
@inject IDialogService DialogService
<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
@if (!string.IsNullOrEmpty(Playlist?.CoverUrl))
{
<MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(60, 60)" Height="60" Width="60" Class="rounded shadow-sm" />
}
<MudStack Spacing="0" Class="flex-grow-1">
<MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
Typo="Typo.h6" Target="_blank" Underline="Underline.Hover" Class="d-flex align-center">
@Playlist?.Title
<MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
</MudLink>
</MudStack>
<MudStack Row AlignItems="AlignItems.Center" Spacing="0">
@* ПК ВЕРСИЯ: Показываем все кнопки *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
<MudIconButton Icon="@(_isFavorite? Icons.Material.Filled.Star : Icons.Material.Outlined.StarBorder)"
Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
<ShareButton />
@if (_isCreator && _isAuthenticated)
{
<MudIconButton Icon="@Icons.Material.Filled.Settings" OnClick="OpenPermissionsDialog" Size="Size.Medium" />
}
</MudHidden>
@* МОБИЛЬНАЯ ВЕРСИЯ: Уводим в многоточие *@
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight">
<MudMenuItem>
<MudIconButton Icon="@(_isFavorite? Icons.Material.Filled.Star : Icons.Material.Outlined.StarBorder)"
Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
</MudMenuItem>
<MudMenuItem>
<ShareButton />
</MudMenuItem>
@if (_isCreator && _isAuthenticated)
{
<MudMenuItem Icon="@Icons.Material.Filled.Settings" OnClick="OpenPermissionsDialog">
</MudMenuItem>
}
</MudMenu>
</MudHidden>
</MudStack>
</MudStack>
@code {
[Parameter] public SharedPlaylistDto? Playlist { get; set; }
[Parameter] public EventCallback OnPermissionsChanged { get; set; }
private bool _isAuthenticated;
private bool _isCreator;
private string? _currentUserId;
private bool _isFavorite;
private bool _favoriteLoading;
protected override async Task OnInitializedAsync()
{
var authState = await AuthProvider.GetAuthenticationStateAsync();
_isAuthenticated = authState.User.Identity?.IsAuthenticated == true;
_currentUserId = authState.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
_isCreator = Playlist?.CreatorUserId.ToString() == _currentUserId;
if (_isAuthenticated)
{
await CheckFavoriteStatus();
}
}
private async Task CheckFavoriteStatus()
{
if (Playlist == null) return;
try
{
var response = await Http.GetFromJsonAsync<ApiResponse<bool>>($"/api/favorites/{Playlist.ShareToken}/check");
if (response?.Success == true)
_isFavorite = response.Data;
}
catch { }
}
private async Task ToggleFavorite()
{
if (Playlist == null) return;
if (!_isAuthenticated)
{
Snackbar.Add("Добавление в избранное только авторизованным пользователям", Severity.Warning);
return;
}
_favoriteLoading = true;
try
{
if (_isFavorite)
{
var response = await Http.DeleteAsync($"/api/favorites/{Playlist.ShareToken}");
if (response.IsSuccessStatusCode)
{
_isFavorite = false;
Snackbar.Add("Плейлист удалён из избранного", Severity.Success);
}
else
{
Snackbar.Add("Ошибка удаления из избранного", Severity.Error);
}
}
else
{
var response = await Http.PostAsync($"/api/favorites/{Playlist.ShareToken}", null);
if (response.IsSuccessStatusCode)
{
_isFavorite = true;
Snackbar.Add("Плейлист добавлен в избранное", Severity.Success);
}
else
{
Snackbar.Add("Ошибка добавления в избранное", Severity.Error);
}
}
}
catch (Exception ex)
{
Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
}
finally
{
_favoriteLoading = false;
StateHasChanged();
}
}
private async Task OpenPermissionsDialog()
{
if (Playlist == null) return;
var initialPermissions = new UpdatePermissionsDto
{
ViewPermission = Playlist.ViewPermission,
PlayPermission = Playlist.PlayPermission,
AddPermission = Playlist.AddPermission,
RemovePermission = Playlist.RemovePermission
};
var parameters = new DialogParameters
{
{ nameof(PermissionsDialog.ShareToken), Playlist.ShareToken },
{ nameof(PermissionsDialog.InitialPermissions), initialPermissions }
};
var dialog = await DialogService.ShowAsync<PermissionsDialog>("Настройки доступа", parameters);
var result = await dialog.Result;
if (!result.Canceled)
{
await OnPermissionsChanged.InvokeAsync();
}
}
}

2
PlaylistShared.Pwa/Layout/MainLayout.razor
View File

@@ -30,7 +30,7 @@
}
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
<MudDrawer @bind-Open="_drawerOpen" Class="@(_actionBarBottom ? " pt-0 pb-16" : "")" ClipMode="DrawerClipMode.Always" Elevation="2">
<NavMenu />
</MudDrawer>

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

@@ -16,16 +16,16 @@
@inject AuthenticationStateProvider AuthProvider
@inject IDialogService DialogService
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
<MudStack Style="height: 100%;" StretchItems="StretchItems.Start" Spacing="2">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-1" Style="height: 100%;">
<MudStack Style="height: 100%;" StretchItems="StretchItems.Start" Spacing="0">
@*Первый элемент растянется на всю высоту*@
<MudItem Style="min-height: 0; height: 100%;">
@* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
<MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
<MudGrid Spacing="2" Class="flex-grow-1 pb-2 mb-2" Style="height: 100%;">
<MudItem xs="12" md="6" Style="height: 100%; overflow-y: auto;">
<MudCard Elevation="4" Class="d-flex flex-column" Style="height: 100%;">
<MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
<MudCardHeader Class="pb-0">
<CardHeaderContent>
@PlaylistCardHeaderContent
@@ -147,6 +147,7 @@
scroll-snap-align: start;
flex: 0 0 auto; /* Запрещает карточкам сжиматься */
}
/* Скрываем скроллбар для эстетики */
.horizontal-scroll-container::-webkit-scrollbar { display: none; }
.horizontal-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }

9
PlaylistShared.Pwa/Properties/launchSettings.json
View File

@@ -12,6 +12,15 @@
}
},
"https (silent)": {
"commandName": "Project",
"dotnetRunMessages": true,
"applicationUrl": "https://localhost:7225;http://localhost:5181",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https (prod)": {
"commandName": "Project",
"dotnetRunMessages": true,

4
PlaylistShared.Pwa/wwwroot/manifest.webmanifest
View File

@@ -7,11 +7,11 @@
"handle_links": "preferred",
"display": "standalone",
"background_color": "#1a1a27",
"theme_color": "#7e6fff",
"theme_color": "#1a1a27",
"launch_handler": {
"client_mode": "focus-existing"
},
"prefer_related_applications": false,
"icons": [
{