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

4
PlaylistShared.Pwa/Components/Common/ShareButton.razor
View File

@@ -15,7 +15,7 @@
Paper="true">
<MudPaper Class="pa-4">
<MudText Typo="Typo.body2" Class="mb-2">Ссылка для приглашения:</MudText>
<div style="display: flex; gap: 8px; align-items: center;">
<MudStack Row Gap="2" AlignItems="AlignItems.Center">
<MudTextField @bind-Value="_shareUrl"
ReadOnly="true"
Variant="Variant.Outlined"
@@ -26,7 +26,7 @@
OnClick="CopyLink"
Icon="@Icons.Material.Filled.ContentCopy">
</MudIconButton>
</div>
</MudStack>
</MudPaper>
</MudPopover>

21
PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
View File

@@ -1,29 +1,24 @@
@using Microsoft.AspNetCore.Components.Web
@inject IAudioPlayerService AudioPlayerService
<div class="track-cover-container"
@onmouseenter="HandleMouseEnter"
@onmouseleave="HandleMouseLeave"
style="position: relative; display: inline-block; cursor: pointer;">
<MudPaper Elevation="0"
@onmouseenter="HandleMouseEnter"
@onmouseleave="HandleMouseLeave"
style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden;">
<MudImage Src="@CoverUrl.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
@if (_isHovered || IsCurrentTrackPlaying)
{
<div class="play-overlay"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;">
<MudPaper class="play-overlay"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; border-radius: 4px;">
<MudIconButton Icon="@(IsCurrentTrackPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
Color="Color.Inherit"
Size="Size.Large"
OnClick="OnPlayClick" />
</div>
</MudPaper>
}
</div>
</MudPaper>
@code {
[Parameter] public string CoverUrl { get; set; } = string.Empty;

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>

47
PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor
View File

@@ -6,32 +6,35 @@
</MudText>
<!-- Вертикальный список шагов -->
<div class="instruction-steps">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<MudStack Class="my-4">
<MudStack AlignItems="AlignItems.Center">
<MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
<MudText>
Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
</MudText>
</MudStack>
<MudStack AlignItems="AlignItems.Center">
<MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
<MudText>
Авторизуйтесь в Яндексе (если ещё не вошли)
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
</MudText>
</MudStack>
<MudStack AlignItems="AlignItems.Center">
<MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
<MudText>
Нажмите «Разрешить»
</div>
</div>
<div class="step-item">
<div class="step-number">4</div>
<div class="step-content">
</MudText>
</MudStack>
<MudStack AlignItems="AlignItems.Center">
<MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
<MudText>
Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
</div>
</div>
</div>
</MudText>
</MudStack>
</MudStack>
<MudAlert Severity="Severity.Info" Class="mt-4">
Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>

1
PlaylistShared.Pwa/Pages/Profile.razor
View File

@@ -1,5 +1,6 @@
@page "/profile"
@using Microsoft.AspNetCore.Authorization
@using PlaylistShared.Pwa.Components.Profile
@using PlaylistShared.Shared.DTO
@attribute [Authorize]
@inject HttpClient Http