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-16 19:27:11 +03:00
parent bb50bcbf22
commit 07a52b12d6
2 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@
<MudToggleIconButton Toggled="@AudioPlayerService.IsPlaying"
Icon="@Icons.Material.Filled.PlayArrow"
Color="@Color.Primary"
Size="Size.Large"
ToggledIcon="@Icons.Material.Filled.Pause"
ToggledColor="@Color.Primary"
ToggledChanged="OnPlayClick" />
@@ -32,53 +33,59 @@
</MudItem>
<!-- Название и прогресс -->
<MudStack 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"
Height="50"
BufferValue="@_bufferSecond"
Color="Color.Primary"
Icon=""
Step="0.1"
Opacity="0.3"
Buffer
ValueChanged="SeekTo" />
</MudItem>
@if (AudioPlayerService.CurrentTrack != null)
{
<MudStack 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"
Height="50"
BufferValue="@_bufferSecond"
Color="Color.Primary"
Icon=""
Step="0.1"
Opacity="0.3"
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 AlignItems="AlignItems.Start" Spacing="0">
<MudText Typo="Typo.body2" Color="Color.Default" Style="font-weight: 600;">
@AudioPlayerService.CurrentTrack.Title
</MudText>
<MudStack 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
</MudText>
<MudText Typo="Typo.body2" Style="font-weight: 600;">
@string.Join(", ", AudioPlayerService.CurrentTrack.Artists.Select(a => a.Name))
</MudText>
</MudStack>
<MudText Typo="Typo.body2" Style="font-weight: 600;">
@if (AudioPlayerService.CurrentTrack != null) @string.Join(", ", AudioPlayerService.CurrentTrack.Artists.Select(a => a.Name))
<MudSpacer />
<MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
</MudText>
</MudStack>
<MudSpacer />
<MudText Typo="Typo.body2" Style="font-family: monospace; font-weight: 600;">
@AudioPlayerService.CurrentTimeString / @AudioPlayerService.TotalTimeString
</MudText>
</MudStack>
</MudStack>
}
else
{
<MudSpacer />
}
<!-- Громкость -->
<MudItem @onmouseenter="() => _volumeIsOpen = true"
@onmouseleave="() => _volumeIsOpen = false"
@onwheel="OnVolumeHandleWheel"
Style="position: relative; display: flex; align-items: center;">
@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" />
Size="Size.Small"
Color="Color.Default"
OnClick="ToggleMute" />
<MudPopover Open="@_volumeIsOpen"
AnchorOrigin="Origin.TopCenter"
TransformOrigin="Origin.BottomCenter"
AnchorOrigin="Origin.TopCenter"
TransformOrigin="Origin.BottomCenter"
Fixed
Class="pa-0 mt-n5"
Style="height:120px; width: 10px; background-color: transparent !important; overflow: visible !important;">