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

5
index.html
View File

@ -27,7 +27,10 @@
</div> </div>
</div> </div>
<div class="row"> <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"> <div id="score">
<span id="accuracy">96.9</span> <span id="accuracy">96.9</span>
<span id="mistakes">7</span> <span id="mistakes">7</span>

18
index.js
View File

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