bvandeusen/minstrel
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 40 Wiki Activity

feat(web): PlayerBar reflows to two-row layout below md

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-05-09 20:18:32 -04:00
parent d5983433c5
commit ed6d0936ca
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/PlayerBar.svelte
+9 -7
View File
@@ -15,6 +15,7 @@
import { FALLBACK_COVER, coverUrl } from '$lib/media/covers'; import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
import LikeButton from './LikeButton.svelte'; import LikeButton from './LikeButton.svelte';
import TrackMenu from './TrackMenu.svelte'; import TrackMenu from './TrackMenu.svelte';
import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
const current = $derived(player.current); const current = $derived(player.current);
@@ -48,9 +49,9 @@
</script> </script>
{#if current} {#if current}
<div class="flex min-h-[108px] items-center gap-4 border-t border-border bg-surface px-4 py-1.5"> <div class="flex flex-col md:flex-row md:min-h-[108px] min-h-[88px] md:items-center gap-2 md:gap-4 border-t border-border bg-surface px-3 md:px-4 py-2 md:py-1.5">
<!-- Left: cover + title + artist + like + menu --> <!-- Left: cover + title + artist + like + menu -->
<div class="flex w-72 min-w-0 items-center gap-3"> <div class="flex w-full md:w-72 min-w-0 items-center gap-3">
<a <a
href={`/albums/${current.album_id}`} href={`/albums/${current.album_id}`}
aria-label="Open album" aria-label="Open album"
@@ -59,7 +60,7 @@
<img <img
src={coverUrl(current.album_id)} src={coverUrl(current.album_id)}
alt="" alt=""
class="h-24 w-24 rounded-md object-cover" class="h-10 w-10 md:h-24 md:w-24 rounded-md object-cover"
onerror={onCoverError} onerror={onCoverError}
/> />
</a> </a>
@@ -73,13 +74,14 @@
</a> </a>
{#if player.queue.length > player.index + 1} {#if player.queue.length > player.index + 1}
{@const nextTrack = player.queue[player.index + 1]} {@const nextTrack = player.queue[player.index + 1]}
<span class="text-text-secondary text-xs truncate block"> <span class="text-text-secondary text-xs truncate hidden md:block">
Next · {nextTrack.title} — {nextTrack.artist_name} Next · {nextTrack.title} — {nextTrack.artist_name}
</span> </span>
{/if} {/if}
</div> </div>
<LikeButton entityType="track" entityId={current.id} /> <LikeButton entityType="track" entityId={current.id} />
<TrackMenu track={current} direction="up" hideQueueActions /> <TrackMenu track={current} direction="up" hideQueueActions />
<PlayerOverflowMenu direction="up" />
</div> </div>
<!-- Center: seek row + transport row --> <!-- Center: seek row + transport row -->
@@ -138,7 +140,7 @@
</div> </div>
<!-- Seek row --> <!-- Seek row -->
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary"> <span class="w-10 md:w-12 shrink-0 text-right text-[10px] md:text-xs tabular-nums text-text-secondary">
{formatDuration(player.position)} {formatDuration(player.position)}
</span> </span>
<input <input
@@ -151,7 +153,7 @@
oninput={onSeekInput} oninput={onSeekInput}
class="flex-1 accent-accent" class="flex-1 accent-accent"
/> />
<span class="w-12 shrink-0 text-xs tabular-nums text-text-secondary"> <span class="w-10 md:w-12 shrink-0 text-[10px] md:text-xs tabular-nums text-text-secondary">
{formatDuration(player.duration)} {formatDuration(player.duration)}
</span> </span>
</div> </div>
@@ -159,7 +161,7 @@
{/if} {/if}
<!-- Right: shuffle + repeat + volume --> <!-- Right: shuffle + repeat + volume -->
<div class="flex w-60 items-center justify-end gap-2"> <div class="hidden md:flex w-60 items-center justify-end gap-2">
<button <button
type="button" type="button"
aria-label="Shuffle" aria-label="Shuffle"