diff --git a/src/lib/components/NowPlayingPanel.svelte b/src/lib/components/NowPlayingPanel.svelte index ca938fb..7a153d5 100644 --- a/src/lib/components/NowPlayingPanel.svelte +++ b/src/lib/components/NowPlayingPanel.svelte @@ -84,12 +84,23 @@
- {#if hasTrack && $playback.currentTrack} -
{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
-
{$playback.currentTrack.metadata.artist || 'Unknown Artist'}
- {:else} -
No track playing
- {/if} +
+ +
+
+ {#if hasTrack && $playback.currentTrack} + {$playback.currentTrack.metadata.title || $playback.currentTrack.filename} + {:else} + No track playing + {/if} +
+
+ {#if hasTrack && $playback.currentTrack} + {$playback.currentTrack.metadata.artist || 'Unknown Artist'} + {/if} +
+
+
{formatTime($playback.currentTime)} @@ -174,11 +185,35 @@ gap: 4px; } + .track-title-row { + display: flex; + gap: 6px; + min-width: 0; + } + + .track-icon { + width: 16px; + height: 16px; + filter: light-dark(none, invert(1)); + flex-shrink: 0; + } + + .track-text-content { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 2px; + } + .track-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + display: flex; + align-items: center; + min-height: 16px; } .track-artist { diff --git a/static/icons/play.svg b/static/icons/play.svg index d57598c..bab3f2d 100644 --- a/static/icons/play.svg +++ b/static/icons/play.svg @@ -1,3 +1,5 @@ - - - + + + + + \ No newline at end of file