diff options
author | Leah (ctucx) <leah@ctu.cx> | 2021-03-07 15:01:24 +0100 |
---|---|---|
committer | Leah (ctucx) <leah@ctu.cx> | 2021-03-07 15:01:24 +0100 |
commit | 9a76452dd0f5b52ba0ced927068432fee42f3283 (patch) | |
tree | e41eda79aed23bfc28cc8572035faa2d5f3ef1fe | |
parent | e90cb8b005badd455ea2262a960e1068798a7542 (diff) |
webmusic.js: refactor continuous- and repeat-button handling
-rw-r--r-- | webmusic.js | 53 |
1 files changed, 30 insertions, 23 deletions
diff --git a/webmusic.js b/webmusic.js index 8f5124f..c6d572e 100644 --- a/webmusic.js +++ b/webmusic.js @@ -1,7 +1,7 @@ let audioPlayer = new Audio(); -let continuelist = true; -let gstate = "idle"; +let continuous = true; let repeat = false; +let gstate = "idle"; let total = 0; let index = 0; @@ -60,6 +60,8 @@ const initState = () => { let id = 0; document.getElementById("state").addEventListener("click", togglePlayback) + document.getElementById("repeatButton").addEventListener("click", toggleRepeat) + document.getElementById("continuousButton").addEventListener("click", toggleContinue) dirElements.forEach(function(element){ element.id = id++; @@ -76,7 +78,8 @@ const initState = () => { }); total = id; - updateState() + updateState(); + updateButtonState(); } const setState = (state) => { @@ -87,28 +90,31 @@ const setState = (state) => { } const updateState = () => { - let statestr = "["; - statestr += gstate; + let statestr = "[" + gstate; if (!audioPlayer.paused) { - statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.duration)); + statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration); } statestr += "]"; document.getElementById("state").innerHTML = statestr; - let flags = "["; - if (repeat) - flags += '<a onclick="toggleRepeat()" href="#" style="color:#6b9969">R</a>'; - else - flags += '<a onclick="toggleRepeat()" href="#">R</a>'; - if (continuelist) - flags += '<a onclick="toggleContinue()" href="#" style="color:#6b9969">C</a>'; - else - flags += '<a onclick="toggleContinue()" href="#">C</a>'; - - document.getElementById("flags").innerHTML = flags + "]"; } +const updateButtonState = () => { + if (repeat !== false) { + document.getElementById('repeatButton').style.color = '#6b9969'; + } else { + document.getElementById('repeatButton').style.color = null; + } + + if (continuous !== false) { + document.getElementById('continuousButton').style.color = '#6b9969'; + } else { + document.getElementById('continuousButton').style.color = null; + } +} + + const playSong = (id) => { let element = document.getElementById(id); @@ -167,14 +173,14 @@ const togglePlayback = () => { const toggleRepeat = () => { repeat = !repeat; - continuelist = !repeat; + continuous = !repeat; audioPlayer.loop = repeat; - updateState(); + updateButtonState(); } const toggleContinue = () => { - continuelist = !continuelist; - updateState(); + continuous = !continuous; + updateButtonState(); } const previousTrack = () => { @@ -184,7 +190,7 @@ const previousTrack = () => { return previousTrack(); } - if (continuelist) { + if (continuous) { playSong(index) } } @@ -196,12 +202,13 @@ const nextTrack = () => { return nextTrack(); } - if (continuelist) { + if (continuous) { playSong(index) } } const formatTime = (secs) => { + secs = Math.round(secs); const minutes = Math.floor(secs / 60) || 0; const seconds = (secs - minutes * 60) || 0; return minutes + ':' + (seconds < 10 ? '0' : '') + seconds; |