pleb/beatsaber-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add song time progress bar

Browse Source
This commit is contained in:
Isaiah Billingsley 2026-03-14 00:15:31 -04:00
parent 8210f1f9a4
commit 9460990e21
3 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.css
View File

@ -64,6 +64,7 @@ span:empty {
#coverImg {
width: 6.8rem;
height: 6.8rem;
margin-bottom: 0.2rem;
border-radius: 0.6rem;
flex-shrink: 0;
}
@ -140,13 +141,23 @@ span:empty {
/* Song time */
#time {
display: flex;
flex-direction: column;
width: 6.8rem;
font-size: 1.35rem;
text-align: right;
line-height: 1.4;
line-height: 1.7;
letter-spacing: -0.05em;
}
#timeBar {
max-width: 100%;
height: 0.2rem;
margin-top: -0.2rem;
background: currentColor;
border-radius: 0.6rem;
}
#time,
#accuracy,
#mistakes {
@ -210,7 +221,7 @@ body.bottom {
}
body.bottom #time {
align-self: flex-end;
flex-direction: column-reverse;
}
#settings {

5
index.html
View File

@ -27,7 +27,10 @@
</div>
</div>
<div class="row">
<div id="time">1:23 / 4:56</div>
<div id="time">
<div id="timeBar" style="width: 28%;"></div>
<div id="timeText">1:23 / 4:56</div>
</div>
<div id="score">
<span id="accuracy">96.9</span>
<span id="mistakes">7</span>

16
index.js
View File

@ -121,7 +121,8 @@ async function updateMapInfo(data) {
// Song time
const timeText = document.getElementById("time");
const timeText = document.getElementById("timeText");
const timeBar = document.getElementById("timeBar");
const intervalMs = 500;
let intervalId = 0;
let currentTime = 0;
@ -129,14 +130,17 @@ let currentTime = 0;
/** @param {number} time @param {boolean} paused */
function updateTime(time, paused) {
if (!settings.time) return;
currentTime = time;
timeText.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
setTime(time);
clearInterval(intervalId);
if (paused) return;
intervalId = window.setInterval(() => {
currentTime += intervalMs * timeMultiplier / 1000;
intervalId = window.setInterval(() => setTime(currentTime + intervalMs * timeMultiplier / 1000), intervalMs);
}
/** @param {number} time */
function setTime(time) {
currentTime = time;
timeText.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
}, intervalMs);
timeBar.style.width = `${currentTime / (duration || Infinity) * 100}%`;
}
/** @param {number} t */