summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLeah (ctucx) <leah@ctu.cx>2021-03-07 15:01:24 +0100
committerLeah (ctucx) <leah@ctu.cx>2021-03-07 15:01:24 +0100
commit9a76452dd0f5b52ba0ced927068432fee42f3283 (patch)
treee41eda79aed23bfc28cc8572035faa2d5f3ef1fe
parente90cb8b005badd455ea2262a960e1068798a7542 (diff)
downloadwebmusic-nginx-9a76452dd0f5b52ba0ced927068432fee42f3283.tar.gz
webmusic-nginx-9a76452dd0f5b52ba0ced927068432fee42f3283.tar.bz2
webmusic-nginx-9a76452dd0f5b52ba0ced927068432fee42f3283.zip
webmusic.js: refactor continuous- and repeat-button handling
-rw-r--r--webmusic.js53
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;