Skip to content

feat(player): add a karaoke view with a projected window - #559

Open
fvidals wants to merge 7 commits into
henriquesebastiao:mainfrom
fvidals:feature/player-karaoke-mode
Open

fvidals wants to merge 7 commits into
henriquesebastiao:mainfrom
fvidals:feature/player-karaoke-mode

Conversation

@fvidals

@fvidals fvidals commented Nov 9, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a Karaoke tab to Now playing that gives the screen to the lyrics, and a way to show them on a projector while Downtify stays usable on the main screen.

  • Karaoke view: very large centred lines, count-in dots during intros and instrumental gaps, and stage smoke in the album cover's colours behind the words. The cover, title and artist move into the header, and the playback controls shrink while all staying available.
  • Projected window: on wide screens, Open in a new window shows the song and lyrics in a separate window with no playback controls. The main window keeps the audio and drives it over a BroadcastChannel, so pressing play on another song replaces the projected one immediately, and Add to queue lines up the next ones without interrupting.
  • Fix: replaying a song or seeking back into its intro now returns the lyrics to the first line. This also fixes the Lyrics tab.

Screenshots

player-karaoke-mode player-karaoke-mode-fullscreen

Limitations

  • The experience depends on synced lyrics. Following the song needs time-synced lyrics (LRC), and it is only as accurate as their timestamps. Plain lyrics are shown large, but with no timing.
  • The line highlight is estimated. LRC only gives the time each line starts, so the left-to-right fill is estimated from the length of the line and the gap to the next one. It can run slightly ahead of or behind the singer, and it is not word by word.
  • Availability: the tab is hidden for podcasts and streams, and when lyrics are turned off in the settings.
  • Projected window: both windows must be in the same browser on the same computer. Since the audio plays in the main window, closing that window stops the music.

Notes for review

  • Frontend only, with no API or Android changes.
  • The projected window is a second Vite entry (karaoke.html), so it never loads the player: it can't play audio, overwrite the saved session or count plays twice.
  • docs/features/player.md and the README are updated in English. The new UI labels are translated in every app language.

Testing

  • npm --prefix frontend test, with new coverage in karaokeStage.test.js, and make doc-build.
  • Tested manually in Chrome with both windows: following track changes, seeking, pausing, reloading and closing the main window.

Closes #558

@github-actions github-actions Bot added documentation Improvements or additions to documentation frontend translation labels Nov 9, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation frontend translation

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Add a karaoke view to the full-screen player

1 participant