FrigaT/PlaylistShared
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Замена div на компоненты

Browse Source
This commit is contained in:
FrigaT
2026-04-15 09:52:56 +03:00
parent abf1906173
commit c7bd97462a
5 changed files with 60 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,51 +8,36 @@
@inject HttpClient Http
<MudPaper Class="pa-4" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 12px;">
<MudStack Row Gap="2" AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
<!-- Информация о треке -->
<MudStack Row Gap="2" AlignItems="AlignItems.Center">
@if (!string.IsNullOrEmpty(_currentTrackCoverUrl))
{
<MudImage Src="@_currentTrackCoverUrl" Height="40" Width="40" Class="rounded" />
}
<MudText Typo="Typo.body1" Style="font-weight: 500;">@_currentTrackTitle</MudText>
</div>
</MudStack>
<div style="display: flex; gap: 8px;">
<MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
Size="Size.Medium"
Color="Color.Primary"
OnClick="TogglePlayPause" />
<MudIconButton Icon="@Icons.Material.Filled.Stop"
Size="Size.Medium"
Color="Color.Default"
OnClick="Stop" />
</div>
<!-- Кнопки управления -->
<MudStack Row Gap="1">
<MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)" Size="Size.Medium" Color="Color.Primary" OnClick="TogglePlayPause" />
<MudIconButton Icon="@Icons.Material.Filled.Stop" Size="Size.Medium" Color="Color.Default" OnClick="Stop" />
</MudStack>
<div style="flex-grow: 1; min-width: 150px;">
<MudSlider @bind-Value="_currentProgress"
@bind-Value:event="oninput"
Min="0"
Max="100"
Size="Size.Small"
ValueChanged="@((double newValue) => SeekTo(newValue))" />
</div>
<!-- Ползунок прогресса -->
<MudItem Style="flex-grow: 1; min-width: 150px;">
<MudSlider @bind-Value="_currentProgress" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" />
</MudItem>
<div style="display: flex; align-items: center; gap: 12px;">
<!-- Время и громкость -->
<MudStack Row Gap="2" AlignItems="AlignItems.Center">
<MudText Typo="Typo.body2">@_currentTime / @_totalTime</MudText>
<div style="display: flex; align-items: center; gap: 8px; width: 120px;">
<MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)"
Size="Size.Small"
Color="Color.Default"
OnClick="ToggleMute" />
<MudSlider @bind-Value="_currentVolume"
@bind-Value:event="oninput"
Min="0"
Max="100"
Size="Size.Small"
ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
</div>
</div>
</div>
<MudStack Row Gap="1" AlignItems="AlignItems.Center" Style="width: 120px;">
<MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)" Size="Size.Small" Color="Color.Default" OnClick="ToggleMute" />
<MudSlider @bind-Value="_currentVolume" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
</MudStack>
</MudStack>
</MudStack>
</MudPaper>
<audio id="@_audioId" style="display: none;"></audio>