webmusic.js: refactor continuous- and repeat-button handling

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;