Skip to content

feat(now-playing): add immersive full-screen karaoke overlay - #76

Open
TavoNiievez wants to merge 1 commit into
NUber-dev:mainfrom
TavoNiievez:feat/now-playing
Open

TavoNiievez wants to merge 1 commit into
NUber-dev:mainfrom
TavoNiievez:feat/now-playing

Conversation

@TavoNiievez

Copy link
Copy Markdown

A full-window "Now Playing" screen: full-size album cover on the left, centered full-size synced karaoke lyrics on the right, over a blurred copy of the cover. Opened by an expand button on the player cover (both the right card and the bottom bar), closed with its chevron-down button or Esc.

image

Reuses the existing player stack rather than adding new logic:

  • the playback + scrub stores drive transport and the progress slider;
  • ProgressSlider / VolumeControl / useITunesCover are imported from the player bar; the transport cluster is inlined (the two bars are left untouched so their differing layouts don't regress);
  • the LyricsBody / useLyricsView karaoke engine already highlights the active line, auto-scrolls, and seeks on line click.

Details:

  • New non-persisted store (now-playing.ts) holds the open flag, so it never survives a reload or leaks across windows via the shared layout key.
  • Overlay is portaled to and the app root is marked inert while open (background out of the tab order + a11y tree) - modal focus with focus-in/restore and no focus-trap library. Reused components are forced into a dark token context so they stay legible over the dark backdrop; a ~55% scrim + text-shadow keep lyrics readable over bright covers; reduced-motion is respected on the open animation.
  • Positioned below the 36px title bar so the OS window controls stay usable; auto-closes (and resets the flag) when the queue empties; the expand button is suppressed in the floating window.

A full-window "Now Playing" screen: full-size album cover on the left,
centered full-size synced karaoke lyrics on the right, over a blurred
copy of the cover. Opened by an expand button on the player cover (both
the right card and the bottom bar), closed with its chevron-down button
or Esc.

Reuses the existing player stack rather than adding new logic:
- the playback + scrub stores drive transport and the progress slider;
- ProgressSlider / VolumeControl / useITunesCover are imported from the
  player bar; the transport cluster is inlined (the two bars are left
  untouched so their differing layouts don't regress);
- the LyricsBody / useLyricsView karaoke engine already highlights the
  active line, auto-scrolls, and seeks on line click.

Details:
- New non-persisted store (now-playing.ts) holds the open flag, so it
  never survives a reload or leaks across windows via the shared layout
  key.
- Overlay is portaled to <body> and the app root is marked `inert` while
  open (background out of the tab order + a11y tree) - modal focus with
  focus-in/restore and no focus-trap library. Reused components are
  forced into a `dark` token context so they stay legible over the dark
  backdrop; a ~55% scrim + text-shadow keep lyrics readable over bright
  covers; reduced-motion is respected on the open animation.
- Positioned below the 36px title bar so the OS window controls stay
  usable; auto-closes (and resets the flag) when the queue empties; the
  expand button is suppressed in the floating window.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant