refactor(player): move TimestampLabel from PlayerTransportZone to PlayerSeekZone so volume centers against buttons row height
This commit is contained in:
@@ -18,8 +18,6 @@ else
|
||||
IsLoading="IsLoading"
|
||||
IsStreaming="IsStreaming"
|
||||
LoadProgress="LoadProgress"
|
||||
DisplayTime="DisplayTime"
|
||||
Duration="Duration"
|
||||
TogglePlayPause="@TogglePlayPause"
|
||||
Stop="@Stop"
|
||||
Class="transport-zone"/>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
@media (min-width: 600px) {
|
||||
::deep .transport-zone { order: 1; }
|
||||
::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 */
|
||||
|
||||
@@ -15,4 +15,5 @@
|
||||
Immediate="true"
|
||||
Disabled="@(!CanSeek)"/>
|
||||
</div>
|
||||
<TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
|
||||
</MudStack>
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
|
||||
|
||||
<MudStack Row="false" AlignItems="AlignItems.Center" Spacing="2" Class="@Class">
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
|
||||
<PlayerControls IsPlaying="IsPlaying"
|
||||
IsLoaded="IsLoaded"
|
||||
TogglePlayPause="TogglePlayPause"
|
||||
Stop="Stop"/>
|
||||
@if (IsLoading && !IsStreaming)
|
||||
{
|
||||
<MudProgressCircular Color="Color.Tertiary"
|
||||
Size="Size.Small"
|
||||
Max="1D"
|
||||
Value="@LoadProgress"
|
||||
Indeterminate="@(LoadProgress == 0)"/>
|
||||
}
|
||||
</MudStack>
|
||||
<TimestampLabel CurrentTime="DisplayTime" Duration="Duration"/>
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="@Class">
|
||||
<PlayerControls IsPlaying="IsPlaying"
|
||||
IsLoaded="IsLoaded"
|
||||
TogglePlayPause="TogglePlayPause"
|
||||
Stop="Stop"/>
|
||||
@if (IsLoading && !IsStreaming)
|
||||
{
|
||||
<MudProgressCircular Color="Color.Tertiary"
|
||||
Size="Size.Small"
|
||||
Max="1D"
|
||||
Value="@LoadProgress"
|
||||
Indeterminate="@(LoadProgress == 0)"/>
|
||||
}
|
||||
</MudStack>
|
||||
|
||||
@@ -9,8 +9,6 @@ public partial class PlayerTransportZone : ComponentBase
|
||||
[Parameter] public bool IsLoading { get; set; }
|
||||
[Parameter] public bool IsStreaming { 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 Stop { get; set; }
|
||||
[Parameter] public string? Class { get; set; }
|
||||
|
||||
@@ -2,13 +2,3 @@
|
||||
.transport-zone {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user