markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-13 12:01:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(np): layout

Browse Source
This commit is contained in:
Markury
2025-10-04 15:29:30 -04:00
parent 9333e55095
commit a602ee4bbd
2 changed files with 46 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/lib/components/NowPlayingPanel.svelte
View File

@@ -84,12 +84,23 @@
</div>
<div class="track-info">
{#if hasTrack && $playback.currentTrack}
<div class="track-title">{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}</div>
<div class="track-artist">{$playback.currentTrack.metadata.artist || 'Unknown Artist'}</div>
{:else}
<div class="track-title">No track playing</div>
{/if}
<div class="track-title-row">
<img src="/icons/play.svg" alt="" class="track-icon" />
<div class="track-text-content">
<div class="track-title">
{#if hasTrack && $playback.currentTrack}
{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
{:else}
No track playing
{/if}
</div>
<div class="track-artist">
{#if hasTrack && $playback.currentTrack}
{$playback.currentTrack.metadata.artist || 'Unknown Artist'}
{/if}
</div>
</div>
</div>
<div class="progress-section">
<span class="time-display">{formatTime($playback.currentTime)}</span>
@@ -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 {