got-feedBack/feedBack
1
0
Fork 0
mirror of https://github.com/got-feedBack/feedBack.git synced 2026-08-10 18:59:56 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add progress bar to v3 "Up Next" pill (#649)

Browse Source 
The persistent top-right "Up Next" pill showed the upcoming section name
and a countdown ("in 12.3s") but no at-a-glance sense of how far through
the current section the song is. Add a thin progress bar directly under
the existing text that fills as the current section elapses toward the
next, reaching full when the section flips.

The text row is wrapped unchanged in a flex row and the pill stacks the
bar beneath it; nothing else about the pill's content or styling changes.
Progress is computed in updateUpNext() as the fraction elapsed between the
previous section boundary (last section at/before now, else song start)
and the next section. The fill uses the same gradient as the section name
for visual cohesion.

Signed-off-by: topkoa <topkoa@gmail.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
K. O. A.
2026-06-29 23:44:09 +02:00
committed by GitHub
co-authored by Claude Opus 4.8
parent a732e1f9d2
commit db81d7dafb
3 changed files with 42 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/v3/v3.css
+23 -2
View File
@@ -340,8 +340,9 @@ input, textarea, select,
/* — Up Next pill (top-right, persistent) — */
#player-hud .v3-upnext {
display: flex;
align-items: center;
gap: .5rem;
flex-direction: column;
align-items: stretch;
gap: .35rem;
padding: .45rem .9rem;
border-radius: .75rem;
background: rgba(15, 23, 42, .7);
@@ -351,6 +352,26 @@ input, textarea, select,
pointer-events: auto;
}
#player-hud .v3-upnext.hidden { display: none; }
/* Text row keeps the original inline layout untouched. */
#player-hud .v3-upnext .v3-upnext-row {
display: flex;
align-items: center;
gap: .5rem;
}
/* Progress bar under the text — fills as the current section elapses. */
#player-hud .v3-upnext .v3-upnext-bar {
height: 4px;
border-radius: 999px;
background: rgba(148, 163, 184, .25);
overflow: hidden;
}
#player-hud .v3-upnext .v3-upnext-bar-fill {
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #22d3ee, #a855f7, #f472b6);
transition: width .12s linear;
}
/* — Live performance HUD (top-right, read-only) — */
.v3-live-performance-hud {