josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show lyrics in place of the video for watch parties and sing-alongs

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-21 21:03:46 +08:00
parent 0aa6c95494
commit 2a4526578f
4 changed files with 168 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/styles.css
View File

@@ -4080,3 +4080,39 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px;
background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px;
}
/* --- Lyrics in place of the video (watch party / sing-along) --------------
The stage keeps its 16/9 box; the lyrics list fills it and the video is
hidden rather than unloaded, so playback (and party sync) never stops. */
.player-stage.lyrics-stage > video,
.player-stage.lyrics-stage > .art-fallback { visibility: hidden; }
.stage-lyrics {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 35%, var(--bg-2), #000 78%);
z-index: 3;
}
.stage-lyrics .sl-list { padding: 0 2%; }
.stage-lyrics-bar {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex;
gap: 8px;
justify-content: center;
padding: 8px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
opacity: 0;
transition: opacity 0.18s var(--ease);
}
.stage-lyrics:hover .stage-lyrics-bar,
.stage-lyrics:focus-within .stage-lyrics-bar,
.stage-lyrics.show-bar .stage-lyrics-bar { opacity: 1; }
.stage-lyrics-bar .np-btn { backdrop-filter: blur(6px); }
.stage-lyrics .sl-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; color: var(--text-dim); font-size: 15px; text-align: center; gap: 6px;
}
/* Touch has no hover, so the bar stays visible on phones. */
@media (hover: none) {
.stage-lyrics-bar { opacity: 1; }
}