diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor index 02067ad..c77169a 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor @@ -21,6 +21,7 @@ else LoadProgress="LoadProgress" DisplayTime="DisplayTime" Duration="Duration" + Fixed="Fixed" TogglePlayPause="@TogglePlayPause" Stop="@Stop" Class="transport-zone"/> diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css index fd919cb..1cced0f 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css @@ -95,7 +95,7 @@ grid-template-columns: auto minmax(360px, 1fr) auto; grid-template-areas: "transport waveform volume" - "transport meta volume"; + "transport meta ."; } } diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor index 8accea0..d252d47 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor @@ -6,9 +6,12 @@ Color="Color.Primary" Disabled="!CanPlay" OnToggle="@TogglePlayPause"/> - + @if (!Fixed) + { + + } diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs index 4dad8d3..fb03e44 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor.cs @@ -1,4 +1,4 @@ -using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components; namespace DeepDrftPublic.Client.Controls.AudioPlayerBar; @@ -12,6 +12,8 @@ public partial class PlayerControls : ComponentBase /// gated on . /// [Parameter] public bool CanPlay { get; set; } + + [Parameter] public bool Fixed { get; set; } = false; [Parameter] public required EventCallback TogglePlayPause { get; set; } [Parameter] public required EventCallback Stop { get; set; } } diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor index 9d295f2..e11206f 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor @@ -4,6 +4,7 @@ @if (IsLoading && !IsStreaming) diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs index 0b11ace..85841cd 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor.cs @@ -11,6 +11,7 @@ public partial class PlayerTransportZone : ComponentBase [Parameter] public double LoadProgress { get; set; } [Parameter] public double DisplayTime { get; set; } [Parameter] public double? Duration { get; set; } + [Parameter] public bool Fixed { get; set; } = false; [Parameter] public EventCallback TogglePlayPause { get; set; } [Parameter] public EventCallback Stop { get; set; } [Parameter] public string? Class { get; set; } diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor index a4909d9..c3784cb 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor @@ -1,12 +1,16 @@ @namespace DeepDrftPublic.Client.Controls.AudioPlayerBar + + @if (Track is not null) {
- - @Track.TrackName - + + + @Track.TrackName + + - @Track.Artist diff --git a/DeepDrftPublic.Client/Pages/TrackDetail.razor b/DeepDrftPublic.Client/Pages/TrackDetail.razor index 33c0d14..03b274f 100644 --- a/DeepDrftPublic.Client/Pages/TrackDetail.razor +++ b/DeepDrftPublic.Client/Pages/TrackDetail.razor @@ -50,23 +50,27 @@ else if (ViewModel.Track is not null) ← All tracks + +
+ @track.TrackName + @track.Artist +
+ +
+ +
+
+
- -
- @track.TrackName - @track.Artist -
- -
- -
+ + @if (hasMeta) { @@ -83,12 +87,14 @@ else if (ViewModel.Track is not null) @if (track.Genre is not null) { - - @track.Genre - +
+ + @track.Genre + +
} @if (track.ReleaseDate is not null) diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index 733d61f..aeb5efe 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -298,7 +298,7 @@ h2, h3, h4, h5, h6, .deepdrft-track-detail-cover { aspect-ratio: 1 / 1; max-width: 360px; - margin: 0 auto; + margin: 0 auto 2rem; overflow: hidden; box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent); } @@ -321,13 +321,14 @@ h2, h3, h4, h5, h6, display: flex; flex-direction: column; gap: 0.5rem; - margin: 2rem 0 1.5rem; } .deepdrft-track-detail-meta { display: flex; - flex-direction: column; - gap: 1rem; + flex-direction: row; + align-items: center; + justify-content: space-around; + gap: 2rem; margin-top: 1.5rem; } @@ -347,3 +348,8 @@ h2, h3, h4, h5, h6, color: inherit; } +@media (max-width: 419.98px) { + .deepdrft-track-detail-meta { + flex-direction: column; + } +}