Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

feat: synced lyrics view in Now Playing overlay

Browse Source 
Adds a Lyrics tab to the NP overlay using Navidrome's getLyricsBySongId
endpoint. Synced lyrics auto-scroll and highlight the current line as
the track plays; tapping a line seeks to that position. Falls back to
plain text for unsynced lyrics.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-26 18:42:45 +02:00
1 parent 93b859bf0e
commit fbabdf8269
6 files changed
+99 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

styles.css
+7
View File
@@ -615,6 +615,13 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
#np-queue-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding-top:8px}
.np-overlay.queue-mode #np-player-view{display:none}
.np-overlay.queue-mode #np-queue-view{display:flex}
#np-lyrics-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding:16px 28px 48px;scroll-behavior:smooth}
.np-overlay.lyrics-mode #np-player-view{display:none}
.np-overlay.lyrics-mode #np-lyrics-view{display:flex}
.lyrics-line{font-size:16px;line-height:1.75;color:rgba(255,255,255,.22);transition:color .35s,font-size .35s,font-weight .2s;padding:2px 0;cursor:pointer;text-align:center}
.lyrics-line.past{color:rgba(255,255,255,.45)}
.lyrics-line.active{color:#fff;font-size:21px;font-weight:600}
.lyrics-plain{font-size:15px;line-height:1.9;color:rgba(255,255,255,.65);white-space:pre-wrap;text-align:center}
.np-queue-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;cursor:pointer;transition:background .15s}
.np-queue-item:hover{background:rgba(255,255,255,.06)}
.np-queue-item.nq-active .nqi-title{color:var(--accent)}