feat(web): full-screen NowPlaying view
test-web / test (push) Failing after 30s

Mirrors Android's NowPlayingScreen. New /now-playing route renders
outside the Shell (no top bar, no PlayerBar) so it's a focused full
viewport: large square cover, title + linked artist/album, full-width
scrubber with timestamps, prominent transport (prev / play-pause /
next, with a 56dp circular play button), shuffle + repeat toggles,
like button, volume slider, and a queue button that opens the
existing queue drawer.

Tapping the cover or title area in PlayerBar (compact + desktop)
now navigates to /now-playing instead of the album page. Pattern
matches Spotify / YouTube Music. The album link stays reachable via
the album-name link inside NowPlaying itself, so no nav is lost.

Back button in the NowPlaying header uses history.back() with a
fallback to /. Empty state when no track is loaded points the user
at Home or the Library.

Scribe 528, local task #62.
This commit is contained in:
2026-06-01 11:30:07 -04:00
parent 5393174a27
commit a2466b7d9a
3 changed files with 249 additions and 6 deletions
+7 -5
View File
@@ -77,10 +77,12 @@
{:else}
<!-- Top row: 3 columns -->
<div class="flex items-stretch gap-3">
<!-- Column 1: art + title + artist -->
<!-- Column 1: art + title + artist. Tap target opens the
full-screen NowPlaying view (Spotify/YouTube Music pattern).
Album reachable via the album-name link inside NowPlaying. -->
<a
href={`/albums/${current.album_id}`}
aria-label="Open album"
href="/now-playing"
aria-label="Open now playing"
class="flex min-w-0 items-center gap-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
style="flex: 1 1 35%;"
>
@@ -229,8 +231,8 @@
<!-- Left: cover + title + artist + like + menu -->
<div class="flex w-72 min-w-0 items-center gap-3">
<a
href={`/albums/${current.album_id}`}
aria-label="Open album"
href="/now-playing"
aria-label="Open now playing"
class="shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
>
<img