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 14:59:37 +03:00
parent 41a9d27005
commit a634986ac0
2 changed files with 112 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
PlaylistShared.Pwa/Components/Global/TrackProgress.razor
View File

@@ -1,137 +1,127 @@
<div class="track-progress-container @ColorClass" @onwheel="HandleWheel">
@* Фоновая дорожка *@
@using MudBlazor
<div class="track-progress-container @ColorClass"
@onwheel="HandleWheel"
style="--track-height: @(Height)px; height: @(Math.Max(Height, 24))px; --track-opacity: @(Opacity.ToString(System.Globalization.CultureInfo.InvariantCulture));">
<div class="progress-base-track">
@* Буфер *@
<div class="progress-buffer-bar" style="width: @(CalculatePercentage(BufferValue))%"></div>
@* Активная шкала (заполнение) *@
<div class="progress-active-bar" style="width: @(CalculatePercentage(Value))%"></div>
@if (Buffer)
{
<div class="progress-buffer-bar" style="width:@(CalculatePercentage(BufferValue).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;"></div>
}
<div class="progress-active-bar" style="width:@(CalculatePercentage(Value).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;"></div>
</div>
@* Ползунок *@
<input type="range"
min="@Min.ToString(System.Globalization.CultureInfo.InvariantCulture)"
max="@Max.ToString(System.Globalization.CultureInfo.InvariantCulture)"
step="0.01"
value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
@if (!string.IsNullOrEmpty(Icon))
{
<div class="track-icon-thumb" style="left: @(CalculatePercentage(Value).ToString("0.##", System.Globalization.CultureInfo.InvariantCulture))%;">
<MudIcon Icon="@Icon" Size="Size.Small" />
</div>
}
<input type="range"
min="@Min.ToString(System.Globalization.CultureInfo.InvariantCulture)"
max="@Max.ToString(System.Globalization.CultureInfo.InvariantCulture)"
step="@Step.ToString(System.Globalization.CultureInfo.InvariantCulture)"
value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
@oninput="OnInput"
class="progress-input" />
</div>
@code {
[Parameter] public double Value { get; set; }
[Parameter] public double BufferValue { get; set; }
[Parameter] public bool Buffer { get; set; } = true;
[Parameter] public double Min { get; set; } = 0;
[Parameter] public double Max { get; set; } = 100;
[Parameter] public double Step { get; set; } = 1;
[Parameter] public double Opacity { get; set; } = 1.0;
[Parameter] public int Height { get; set; } = 4;
[Parameter] public Color Color { get; set; } = Color.Primary;
[Parameter] public string Icon { get; set; } = "";
[Parameter] public EventCallback<double> ValueChanged { get; set; }
private string ColorClass => $"track-color-{Color.ToString().ToLower()}";
private double CalculatePercentage(double val) => Max <= Min ? 0 : ((Math.Clamp(val, Min, Max) - Min) / (Max - Min)) * 100;
private async Task OnInput(ChangeEventArgs e)
{
if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out var newValue))
await ValueChanged.InvokeAsync(newValue);
}
private async Task HandleWheel(WheelEventArgs e)
{
double range = Max - Min;
double wheelStep = range * 0.02;
var newValue = e.DeltaY < 0 ? Math.Min(Value + wheelStep, Max) : Math.Max(Value - wheelStep, Min);
await ValueChanged.InvokeAsync(newValue);
}
}
<style>
.track-progress-container {
position: relative;
width: 100%;
height: 12px;
display: flex;
align-items: center;
--track-color: var(--mud-palette-primary); /* Дефолт */
--track-color: var(--mud-palette-primary);
}
/* Привязка цветов MudBlazor */
.track-color-primary { --track-color: var(--mud-palette-primary); }
.track-color-secondary { --track-color: var(--mud-palette-secondary); }
.track-color-info { --track-color: var(--mud-palette-info); }
.track-color-success { --track-color: var(--mud-palette-success); }
.track-color-info { --track-color: var(--mud-palette-info); }
.track-color-warning { --track-color: var(--mud-palette-warning); }
.track-color-error { --track-color: var(--mud-palette-error); }
.progress-base-track {
position: absolute;
position: relative;
width: 100%;
height: 4px;
background: var(--mud-palette-action-disabled-background);
height: var(--track-height);
background-color: var(--mud-palette-action-disabled-background, rgba(0,0,0,0.1));
border-radius: 4px;
overflow: hidden;
}
.progress-buffer-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--mud-palette-action-default-hover);
transition: width 0.3s ease;
z-index: 1;
}
.progress-active-bar {
position: absolute;
height: 100%;
left: 0;
top: 0;
background: var(--track-color);
border-radius: 4px;
left: 0; top: 0; bottom: 0;
background-color: var(--track-color);
opacity: var(--track-opacity); /* Применяем opacity */
z-index: 2;
}
.progress-buffer-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
background-color: var(--mud-palette-action-default-hover);
opacity: calc(var(--track-opacity) * 0.5); /* Буфер чуть прозрачнее основного прогресса */
z-index: 1;
}
.track-icon-thumb {
position: absolute;
transform: translateX(-50%);
z-index: 11;
pointer-events: none;
color: var(--track-color);
opacity: 0;
display: flex;
}
.track-progress-container:hover .track-icon-thumb { opacity: 1; }
.progress-input {
position: absolute;
width: 100%;
background: transparent;
-webkit-appearance: none;
z-index: 5;
margin: 0;
}
/* Стили шарика (Thumb) */
.progress-input::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: var(--track-color);
z-index: 10;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
box-shadow: var(--mud-elevation-2);
border: 2px solid var(--mud-palette-surface);
}
.progress-input::-moz-range-thumb {
height: 14px;
width: 14px;
border-radius: 50%;
background: var(--track-color);
cursor: pointer;
opacity: 0;
border: 2px solid var(--mud-palette-surface);
}
.track-progress-container:hover .progress-input::-webkit-slider-thumb { opacity: 1; }
.track-progress-container:hover .progress-input::-moz-range-thumb { opacity: 1; }
.progress-input:focus { outline: none; }
.progress-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; }
.progress-input::-moz-range-thumb { opacity: 0; }
</style>
@code {
[Parameter] public double Value { get; set; }
[Parameter] public double BufferValue { get; set; }
[Parameter] public double Min { get; set; } = 0;
[Parameter] public double Max { get; set; } = 100;
[Parameter] public Color Color { get; set; } = Color.Primary;
[Parameter] public EventCallback<double> ValueChanged { get; set; }
// Генерируем CSS класс на основе перечисления Color
private string ColorClass => $"track-color-{Color.ToString().ToLower()}";
private async Task OnInput(ChangeEventArgs e)
{
if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out var newValue))
{
await ValueChanged.InvokeAsync(newValue);
}
}
private async Task HandleWheel(WheelEventArgs e)
{
double range = Max - Min;
double step = range * 0.02;
var newValue = e.DeltaY < 0 ? Math.Min(Value + step, Max) : Math.Max(Value - step, Min);
await ValueChanged.InvokeAsync(newValue);
}
private double CalculatePercentage(double val)
{
if (Max <= Min) return 0;
return ((Math.Clamp(val, Min, Max) - Min) / (Max - Min)) * 100;
}
}