daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

refactor(player): move TimestampLabel from PlayerTransportZone to PlayerSeekZone so volume centers against buttons row height

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-05 14:38:38 -04:00
parent 31d2c2ee7e
commit 87f722fa58
6 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
-2
View File
@@ -18,8 +18,6 @@ else
IsLoading="IsLoading" IsLoading="IsLoading"
IsStreaming="IsStreaming" IsStreaming="IsStreaming"
LoadProgress="LoadProgress" LoadProgress="LoadProgress"
DisplayTime="DisplayTime"
Duration="Duration"
TogglePlayPause="@TogglePlayPause" TogglePlayPause="@TogglePlayPause"
Stop="@Stop" Stop="@Stop"
Class="transport-zone"/> Class="transport-zone"/>
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+1 -1
View File
@@ -89,7 +89,7 @@
@media (min-width: 600px) { @media (min-width: 600px) {
::deep .transport-zone { order: 1; } ::deep .transport-zone { order: 1; }
::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; } ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
::deep .volume-controls { order: 3; align-self: flex-start; } ::deep .volume-controls { order: 3; }
} }
/* Narrow (< 600px): transport + volume on top row, seek full-width below */ /* Narrow (< 600px): transport + volume on top row, seek full-width below */
DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerSeekZone.razor
+1
View File
@@ -15,4 +15,5 @@
Immediate="true" Immediate="true"
Disabled="@(!CanSeek)"/> Disabled="@(!CanSeek)"/>
</div> </div>
<TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
</MudStack> </MudStack>
DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
+13 -16
View File
@@ -1,19 +1,16 @@
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
<MudStack Row="false" AlignItems="AlignItems.Center" Spacing="2" Class="@Class"> <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="@Class">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1"> <PlayerControls IsPlaying="IsPlaying"
<PlayerControls IsPlaying="IsPlaying" IsLoaded="IsLoaded"
IsLoaded="IsLoaded" TogglePlayPause="TogglePlayPause"
TogglePlayPause="TogglePlayPause" Stop="Stop"/>
Stop="Stop"/> @if (IsLoading && !IsStreaming)
@if (IsLoading && !IsStreaming) {
{ <MudProgressCircular Color="Color.Tertiary"
<MudProgressCircular Color="Color.Tertiary" Size="Size.Small"
Size="Size.Small" Max="1D"
Max="1D" Value="@LoadProgress"
Value="@LoadProgress" Indeterminate="@(LoadProgress == 0)"/>
Indeterminate="@(LoadProgress == 0)"/> }
}
</MudStack>
<TimestampLabel CurrentTime="DisplayTime" Duration="Duration"/>
</MudStack> </MudStack>
DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs
-2
View File
@@ -9,8 +9,6 @@ public partial class PlayerTransportZone : ComponentBase
[Parameter] public bool IsLoading { get; set; } [Parameter] public bool IsLoading { get; set; }
[Parameter] public bool IsStreaming { get; set; } [Parameter] public bool IsStreaming { get; set; }
[Parameter] public double LoadProgress { get; set; } [Parameter] public double LoadProgress { get; set; }
[Parameter] public double DisplayTime { get; set; }
[Parameter] public double? Duration { get; set; }
[Parameter] public EventCallback TogglePlayPause { get; set; } [Parameter] public EventCallback TogglePlayPause { get; set; }
[Parameter] public EventCallback Stop { get; set; } [Parameter] public EventCallback Stop { get; set; }
[Parameter] public string? Class { get; set; } [Parameter] public string? Class { get; set; }
DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.css
-10
View File
@@ -2,13 +2,3 @@
.transport-zone { .transport-zone {
min-width: 180px; min-width: 180px;
} }
/* Narrow (< 600px): lay the transport root horizontally (controls beside
timestamp) so it fits on one line next to VolumeControls. Scoped to the
root .transport-zone stack so the nested controls stack is untouched. */
@media (max-width: 599.98px) {
.transport-zone {
flex-direction: row !important;
align-items: center;
}
}