Адаптивность шаринга
This commit is contained in:
FrigaT
@@ -5,7 +5,6 @@
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Share"
|
||||
Color="Color.Default"
|
||||
OnClick="@TogglePopover"
|
||||
Title="Поделиться"
|
||||
Size="Size.Medium" />
|
||||
|
||||
<MudPopover Open="@_popoverOpen"
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
<MudGrid>
|
||||
@foreach (var artist in _searchResult.Artists)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="3" lg="2">
|
||||
<MudItem xs="4" sm="3" md="3" lg="2">
|
||||
<ArtistCard Item="artist" OnClick="() => SearchTracksByEntity(artist.Id, artist.Name, TrackSearchType.Artist)" />
|
||||
</MudItem>
|
||||
}
|
||||
@@ -61,7 +61,7 @@
|
||||
<MudGrid>
|
||||
@foreach (var album in _searchResult.Albums)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="3" lg="2">
|
||||
<MudItem xs="4" sm="3" md="3" lg="2">
|
||||
<AlbumCard Item="album" OnClick="() => SearchTracksByEntity(album.Id, album.Title, TrackSearchType.Album)" />
|
||||
</MudItem>
|
||||
}
|
||||
@@ -76,7 +76,7 @@
|
||||
<MudGrid>
|
||||
@foreach (var playlist in _searchResult.Playlists)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="3" lg="2">
|
||||
<MudItem xs="4" sm="3" md="3" lg="2">
|
||||
<PlaylistCard Item="playlist" OnClick="() => SearchTracksByEntity(playlist.Uuid, playlist.Title, TrackSearchType.Playlist)" />
|
||||
</MudItem>
|
||||
}
|
||||
|
||||
@@ -8,40 +8,52 @@
|
||||
@inject ISnackbar Snackbar
|
||||
@inject IDialogService DialogService
|
||||
|
||||
<MudStack Row AlignItems="AlignItems.Center">
|
||||
<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
|
||||
@if (!string.IsNullOrEmpty(Playlist?.CoverUrl))
|
||||
{
|
||||
<MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(80, 80)" Height="80" Width="80" Class="rounded" />
|
||||
<MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(60, 60)" Height="60" Width="60" Class="rounded shadow-sm" />
|
||||
}
|
||||
<MudStack>
|
||||
<MudStack Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
|
||||
|
||||
<MudStack Spacing="0" Class="flex-grow-1">
|
||||
<MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
|
||||
Typo="Typo.h5"
|
||||
Target="_blank"
|
||||
Underline="Underline.Hover">
|
||||
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>
|
||||
|
||||
<ShareButton />
|
||||
|
||||
<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" />
|
||||
|
||||
Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
|
||||
<ShareButton />
|
||||
@if (_isCreator && _isAuthenticated)
|
||||
{
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Settings"
|
||||
Color="Color.Default"
|
||||
OnClick="OpenPermissionsDialog"
|
||||
Title="Настройки доступа"
|
||||
Size="Size.Medium" />
|
||||
<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>
|
||||
</MudStack>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public SharedPlaylistDto? Playlist { get; set; }
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
@inject AuthenticationStateProvider AuthProvider
|
||||
@inject IDialogService DialogService
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4" Style="height: 100%;">
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
|
||||
@if (_loading)
|
||||
{
|
||||
<MudProgressCircular Indeterminate />
|
||||
@@ -25,28 +25,77 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
|
||||
<FirstPanel>
|
||||
<MudCard Class="d-flex flex-column" Style="height: 100%;">
|
||||
@* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
|
||||
<MudGrid Spacing="2" Class="flex-grow-1" Style="height: 100%;">
|
||||
<MudItem xs="12" md="6" Style="height: 100%;">
|
||||
@PlaylistCardContent
|
||||
</MudItem>
|
||||
|
||||
@if (_canAdd)
|
||||
{
|
||||
<MudItem xs="12" md="6" Style="height: 100%;">
|
||||
@AddTrackCardContent
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
</MudHidden>
|
||||
|
||||
@* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
|
||||
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
|
||||
<div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
|
||||
|
||||
@* Область контента: оба компонента здесь всегда *@
|
||||
<div class="flex-grow-1 relative pa-0" style="min-height: 0;">
|
||||
<div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
|
||||
<div class="flex-grow-1 overflow-auto pb-1">
|
||||
@PlaylistCardContent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
|
||||
<div class="flex-grow-1 overflow-auto pb-1">
|
||||
@AddTrackCardContent
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Кастомная панель навигации внизу *@
|
||||
@if (_canAdd)
|
||||
{
|
||||
<MudPaper Elevation="0" Class="py-1">
|
||||
<MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
|
||||
Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
|
||||
OnClick="() => _activeMobileTab = 0" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"
|
||||
Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
|
||||
OnClick="() => _activeMobileTab = 1" />
|
||||
</MudNavMenu>
|
||||
</MudPaper>
|
||||
}
|
||||
</div>
|
||||
</MudHidden>
|
||||
}
|
||||
</MudContainer>
|
||||
|
||||
@code {
|
||||
[Parameter] public string Token { get; set; }
|
||||
|
||||
private RenderFragment PlaylistCardContent => __builder =>
|
||||
{
|
||||
<MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<PlaylistHeader Playlist="@_playlist" />
|
||||
</CardHeaderContent>
|
||||
<CardHeaderActions>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" />
|
||||
</CardHeaderActions>
|
||||
</MudCardHeader>
|
||||
|
||||
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
|
||||
<MudItem>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
|
||||
</MudItem>
|
||||
|
||||
<MudTable Items="@_tracks"
|
||||
Virtualize
|
||||
Hover
|
||||
Elevation="0"
|
||||
Class="d-flex flex-grow-1 flex-column"
|
||||
Style="min-height: 0;"
|
||||
Breakpoint="Breakpoint.Sm"
|
||||
Loading="@_tracksLoading">
|
||||
<MudCardContent Class="flex-grow-1 overflow-auto flex-column">
|
||||
<MudTable Items="@_tracks" Virtualize Hover Elevation="0" Breakpoint="Breakpoint.None" Class="d-flex flex-grow-1 flex-column" Style="min-height: 0;">
|
||||
<RowTemplate>
|
||||
<MudTd Class="pa-1" Style="width: 100%;">
|
||||
<TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
|
||||
@@ -54,37 +103,26 @@
|
||||
@if (_canRemove)
|
||||
{
|
||||
<MudTd Class="pa-1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => RemoveTrack(context)" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => RemoveTrack(context)" />
|
||||
</MudTd>
|
||||
}
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
</FirstPanel>
|
||||
<SecondPanel>
|
||||
@if (_canAdd)
|
||||
};
|
||||
|
||||
private RenderFragment AddTrackCardContent => __builder =>
|
||||
{
|
||||
<MudCard Class="d-flex flex-column" Style="height: 100%;">
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h5" Color="Color.Primary">Добавление треков</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
|
||||
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
|
||||
<MudPaper Class="pa-4 d-flex flex-column" Elevation="1" Style="height: 100%; overflow: hidden;">
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
|
||||
<MudItem class="flex-grow-1 overflow-auto">
|
||||
<AddTrackSection ShareToken="@Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
}
|
||||
</SecondPanel>
|
||||
</MudSplitPanel>
|
||||
}
|
||||
</MudContainer>
|
||||
</MudItem>
|
||||
</MudPaper>
|
||||
};
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public string Token { get; set; }
|
||||
private int _activeMobileTab = 0;
|
||||
|
||||
private HashSet<string> _existingTrackIds = new();
|
||||
private bool _firstLoadExistingTrackIds;
|
||||
@@ -164,6 +202,7 @@
|
||||
if (response?.Success == true)
|
||||
{
|
||||
_playlist = response.Data;
|
||||
_activeMobileTab = 0;
|
||||
|
||||
await ConfigurePermissions();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user