kyuno/watchparty
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Rework the music UI: circles/squares instead of movie posters, a real now-playing screen #11

Merged
kyuno merged 2 commits from feature/music-ui into master 2026-09-16 15:59:34 +02:00
Conversation 0 Commits 2 Files changed 13 +700 -82
kyuno commented 2026-09-16 15:44:44 +02:00
Owner
Copy link

Summary

  • tiles.ts's tileHtml() now dispatches on Emby type: MusicArtist gets a circular tile (no hover overlay - there's only ever one action, open the artist page), MusicAlbum gets a square tile. Zero changes needed at any of the three call sites (home carousels, library grid, artist page) since the dispatch lives inside the one shared function.
  • views/artist gets a real hero header (circular photo, album count, a pill-shaped play button) - new Artist.css, this page had none before.
  • views/album keeps its existing header shape (already square/flex-row) but gains the same pill play button, a heroKicker ("Album · 2023"), and each track row's wide text button becomes a small icon that swaps play/plus with the same two states as before.
  • musicBar/MusicBar gains a real mobile "now playing" full-screen view - tap the new collapsed #mobileMiniBar to expand #musicBarPanel into a full-screen overlay, close via a new chevron. Desktop keeps the bar always visible, restyled as a centered 3-column layout. None of the existing cast/HLS/seek/vote logic was touched - only the DOM/CSS around it.

Context

Follows a round of mockups explicitly inspired by mainstream music apps, confirmed before implementation. Deliberately invents nothing without a real data source behind it - no "popular tracks" (no listening-stats endpoint), no previous-track (no playback history, just the shared queue), no favorites (no such concept server-side).

Worth calling out: the two hero play buttons stay icon+label, not icon-only - this app already standardizes on icon-only for pure transport controls but explicit text for request/action-shaped ones (see docs/architecture.md's player-rework section), and starting/queueing a whole discography reads as the latter. The per-track buttons are the one deliberate exception, since a whole album's worth of them just repeats the same action as the hero button one row up.

Verification

  • Full typecheck/build (client only).
  • Real compiled app.css + the real Shell.html/MusicBar.html markup, driven with fake artist/album/track data (no Emby login reachable from this sandbox): circular vs. square tiles confirmed via getComputedStyle (border-radius/aspect-ratio), the per-track play/plus icon swap confirmed per row, #mobileMiniBar's open/close and its guard against the play-button tap driven end to end via real click events.
  • Caught and fixed a real bug this way: .musicBarPlayBig was silently losing its background/border-radius to .iconBtn's own rule at equal selector specificity (outcome depended on esbuild's bundle order). Fixed with the more specific .iconBtn.musicBarPlayBig selector. Full writeup in docs/architecture.md.
  • Not verified: any of this against a real Emby server's actual images/names, or on a real phone - this sandbox's browser tool's viewport emulation was unreliable for the rest of the session, so mobile-width checks used an injected CSS override instead of a genuinely narrow viewport.

Test plan

  • Open the Musique library, confirm artists render as circles
  • Open an artist, confirm the hero header and square album grid
  • Open an album, confirm the hero header and that track rows' icon buttons work (play when idle, plus once a party's active)
  • Start a listen party on a phone, confirm tapping the mini bar opens a full-screen "now playing" view with working controls, and that it collapses back correctly
  • Confirm the play/pause button renders as a filled circle (not a plain 6px-radius box) on both desktop and mobile

🤖 Generated with Claude Code

## Summary - `tiles.ts`'s `tileHtml()` now dispatches on Emby type: `MusicArtist` gets a circular tile (no hover overlay - there's only ever one action, open the artist page), `MusicAlbum` gets a square tile. Zero changes needed at any of the three call sites (home carousels, library grid, artist page) since the dispatch lives inside the one shared function. - `views/artist` gets a real hero header (circular photo, album count, a pill-shaped play button) - new `Artist.css`, this page had none before. - `views/album` keeps its existing header shape (already square/flex-row) but gains the same pill play button, a `heroKicker` ("Album · 2023"), and each track row's wide text button becomes a small icon that swaps play/plus with the same two states as before. - `musicBar/MusicBar` gains a real mobile "now playing" full-screen view - tap the new collapsed `#mobileMiniBar` to expand `#musicBarPanel` into a full-screen overlay, close via a new chevron. Desktop keeps the bar always visible, restyled as a centered 3-column layout. None of the existing cast/HLS/seek/vote logic was touched - only the DOM/CSS around it. ## Context Follows a round of mockups explicitly inspired by mainstream music apps, confirmed before implementation. Deliberately invents nothing without a real data source behind it - no "popular tracks" (no listening-stats endpoint), no previous-track (no playback history, just the shared queue), no favorites (no such concept server-side). **Worth calling out**: the two hero play buttons stay icon+label, not icon-only - this app already standardizes on icon-only for pure transport controls but explicit text for request/action-shaped ones (see docs/architecture.md's player-rework section), and starting/queueing a whole discography reads as the latter. The per-track buttons are the one deliberate exception, since a whole album's worth of them just repeats the same action as the hero button one row up. ## Verification - Full `typecheck`/`build` (client only). - Real compiled `app.css` + the real `Shell.html`/`MusicBar.html` markup, driven with fake artist/album/track data (no Emby login reachable from this sandbox): circular vs. square tiles confirmed via `getComputedStyle` (border-radius/aspect-ratio), the per-track play/plus icon swap confirmed per row, `#mobileMiniBar`'s open/close and its guard against the play-button tap driven end to end via real click events. - **Caught and fixed a real bug this way**: `.musicBarPlayBig` was silently losing its background/border-radius to `.iconBtn`'s own rule at equal selector specificity (outcome depended on esbuild's bundle order). Fixed with the more specific `.iconBtn.musicBarPlayBig` selector. Full writeup in docs/architecture.md. - **Not verified**: any of this against a real Emby server's actual images/names, or on a real phone - this sandbox's browser tool's viewport emulation was unreliable for the rest of the session, so mobile-width checks used an injected CSS override instead of a genuinely narrow viewport. ## Test plan - [ ] Open the Musique library, confirm artists render as circles - [ ] Open an artist, confirm the hero header and square album grid - [ ] Open an album, confirm the hero header and that track rows' icon buttons work (play when idle, plus once a party's active) - [ ] Start a listen party on a phone, confirm tapping the mini bar opens a full-screen "now playing" view with working controls, and that it collapses back correctly - [ ] Confirm the play/pause button renders as a filled circle (not a plain 6px-radius box) on both desktop and mobile 🤖 Generated with [Claude Code](https://claude.com/claude-code)
kyuno added 1 commit 2026-09-16 15:44:44 +02:00
Rework the music UI: circles/squares instead of movie posters, a real now-playing screen
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
098f447e57 
The music library reused the movie-poster tile (2:3, hover-revealed
actions) for artists and albums too, since it was already there for
video - functional, but never reads as "this is music" the way real
apps do. Explored as mockups first, then implemented without touching
any of MusicBar's existing sync/cast/HLS logic:

- tiles.ts's tileHtml() now dispatches on Emby type: artists get a
  circle with no hover overlay, albums a square - same "whole tile is
  the one link" idea, since there's only ever one action either way.
- Artist/album pages gain a real hero header (circular/square art, a
  pill-shaped play button) instead of a plain title + text button.
  Album's per-track buttons shrink from a wide text button repeated on
  every row to a small icon that swaps play/plus with the same two
  states as before.
- MusicBar gains a real mobile "now playing" full-screen view (tap the
  collapsed mini bar to expand it) instead of only ever being a thin
  strip - the screen every music app has that this one was missing.
  The existing thin top-edge progress bar didn't change shape at all,
  on either breakpoint.

Nothing here invents a feature without a real data source behind it -
no popular tracks, no previous-track, no favorites, none of that
exists server-side.

Caught and fixed one real bug via computed-style verification, not
just reading the CSS back: the new circular play button was silently
losing to .iconBtn's own background/radius at equal specificity,
outcome depending on esbuild's bundle order rather than either rule's
own declared intent.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
kyuno added 1 commit 2026-09-16 15:59:27 +02:00
Merge remote-tracking branch 'origin/master' into feature/music-ui
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
617a3d0d49 
# Conflicts:
#	README.md
#	docs/architecture.md
kyuno merged commit 2772cc70d6 into master 2026-09-16 15:59:34 +02:00
kyuno deleted branch feature/music-ui 2026-09-16 15:59:35 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/watchparty#11
No description provided.
Delete branch "feature/music-ui"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?