Merge branch 'playerbar-timestamp-move' into dev
This commit is contained in:
@@ -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"/>
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
@@ -15,4 +15,5 @@
|
|||||||
Immediate="true"
|
Immediate="true"
|
||||||
Disabled="@(!CanSeek)"/>
|
Disabled="@(!CanSeek)"/>
|
||||||
</div>
|
</div>
|
||||||
|
<TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
|
||||||
</MudStack>
|
</MudStack>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user