мелкие улучшенния
This commit is contained in:
@@ -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
30
PlaylistShared.Pwa/Components/Global/ContextualBarContent.cs
Normal 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();
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user