From e19f06a9d0421daba77ea654541af27a8331774b Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sat, 6 Mar 2021 20:31:24 +0100
Subject: [PATCH 01/30] webmusic.js: replace ifs with switch

---
 webmusic.js | 72 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 2864bcd..2b9323d 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -21,37 +21,47 @@ window.onload = function () {
 };
 
 window.onkeyup = function (event) {
-    if (event.key === " " || event.key === "p") {
-        if (gstate !== "idle") {
-            togglePlayback();
-        } else {
-            playSong(queue[0])
-        }
-    }
-    else if (event.key === "r") {
-        toggleRepeat();
-    }
-    else if (event.key === "c") {
-        toggleContinue();
-    }
-    else if (event.key === "ArrowUp") {
-        previousTrack();
-    }
-    else if (event.key === "ArrowDown") {
-        nextTrack();
-    }
-    else if (event.key === "ArrowLeft") {
-        if (sound.seek() < 10) {
-            sound.seek(0);
-        } else {
-            sound.seek(sound.seek()-10);
-        }
-    }
-    else if (event.key === "ArrowRight") {
-        sound.seek(sound.seek()+10);
-    }
-    else if (event.key === "Escape") {
-        document.getElementById("back").click();
+    switch (event.key) {
+        case " ":
+        case "p":
+            if (gstate == "idle" && total !== 0) {
+                playSong(queue[0])
+            } else {
+                togglePlayback();
+            }
+            break;
+
+        case "r":
+            toggleRepeat();
+            break;
+
+        case "c":
+            toggleContinue();
+            break;
+
+        case "ArrowUp":
+            previousTrack();
+            break;
+
+        case "ArrowDown":
+            nextTrack();
+            break;
+
+        case "ArrowLeft":
+            if (sound.seek() < 10) {
+                sound.seek(0);
+            } else {
+                sound.seek(sound.seek()-10);
+            }
+            break;
+
+        case "ArrowRight":
+            sound.seek(sound.seek()+10);
+            break;
+
+        case "Escape":
+            document.getElementById("back").click();
+            break;
     }
 };
 
-- 
2.45.0


From 81b67db9a1c30d8c3400df88e80d46fe34444246 Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sat, 6 Mar 2021 20:32:48 +0100
Subject: [PATCH 02/30] webmusic.js: replace spaces with tabs

---
 webmusic.js | 234 ++++++++++++++++++++++++++--------------------------
 1 file changed, 117 insertions(+), 117 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 2b9323d..a113a9e 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -6,174 +6,174 @@ let total = 0;
 let index = 0;
 
 let sound = new Howl({
-    src: [''],
-    format: "mp3",
-    html5: true
+	src: [''],
+	format: "mp3",
+	html5: true
 });
 
 setInterval(function () {
-    updateState();
+	updateState();
 }, 1000);
 
 window.onload = function () {
-    initState();
-    updateState()
+	initState();
+	updateState()
 };
 
 window.onkeyup = function (event) {
-    switch (event.key) {
-        case " ":
-        case "p":
-            if (gstate == "idle" && total !== 0) {
-                playSong(queue[0])
-            } else {
-                togglePlayback();
-            }
-            break;
+	switch (event.key) {
+		case " ":
+		case "p":
+			if (gstate == "idle" && total !== 0) {
+				playSong(queue[0])
+			} else {
+				togglePlayback();
+			}
+			break;
 
-        case "r":
-            toggleRepeat();
-            break;
+		case "r":
+			toggleRepeat();
+			break;
 
-        case "c":
-            toggleContinue();
-            break;
+		case "c":
+			toggleContinue();
+			break;
 
-        case "ArrowUp":
-            previousTrack();
-            break;
+		case "ArrowUp":
+			previousTrack();
+			break;
 
-        case "ArrowDown":
-            nextTrack();
-            break;
+		case "ArrowDown":
+			nextTrack();
+			break;
 
-        case "ArrowLeft":
-            if (sound.seek() < 10) {
-                sound.seek(0);
-            } else {
-                sound.seek(sound.seek()-10);
-            }
-            break;
+		case "ArrowLeft":
+			if (sound.seek() < 10) {
+				sound.seek(0);
+			} else {
+				sound.seek(sound.seek()-10);
+			}
+			break;
 
-        case "ArrowRight":
-            sound.seek(sound.seek()+10);
-            break;
+		case "ArrowRight":
+			sound.seek(sound.seek()+10);
+			break;
 
-        case "Escape":
-            document.getElementById("back").click();
-            break;
-    }
+		case "Escape":
+			document.getElementById("back").click();
+			break;
+	}
 };
 
 
 function togglePlayback() {
-    if (sound.playing())
-        sound.pause();
-    else
-        sound.play();
+	if (sound.playing())
+		sound.pause();
+	else
+		sound.play();
 }
 
 function setState(state) {
-    gstate = state;
-    console.log("now in state: " + state);
-    updateState();
+	gstate = state;
+	console.log("now in state: " + state);
+	updateState();
 }
 
 
 function playSong(url) {
-    if (document.getElementsByClassName("playing").length > 0)
-        document.getElementsByClassName("playing")[0].classList.remove("playing");
-    index = queue.indexOf(url);
-    sound.stop();
-    sound.unload();
-    sound = null;
-    delete sound;
+	if (document.getElementsByClassName("playing").length > 0)
+		document.getElementsByClassName("playing")[0].classList.remove("playing");
+	index = queue.indexOf(url);
+	sound.stop();
+	sound.unload();
+	sound = null;
+	delete sound;
 
-    sound = new Howl({
-        src: [url],
-        html5: true
-    });
+	sound = new Howl({
+		src: [url],
+		html5: true
+	});
 
-    setState("loading");
-    sound.play();
-    sound.loop(repeat);
-    
-    document.querySelectorAll('[onclick="playSong(\''+url+'\')"]')[0].classList.add("playing");
+	setState("loading");
+	sound.play();
+	sound.loop(repeat);
+	
+	document.querySelectorAll('[onclick="playSong(\''+url+'\')"]')[0].classList.add("playing");
 
-    sound.on("play", function () {
-        setState("playing");
-    });
-    sound.on("loaderror", function () {
-        setState("error loading track")
-    });
-    sound.on("playerror", function () {
-        setState("error opening audio device")
-    });
-    sound.on("end", function () {
-        setState("idle");
-        nextTrack()
-    });
-    sound.on("pause", function () {
-        setState("paused")
-    });
+	sound.on("play", function () {
+		setState("playing");
+	});
+	sound.on("loaderror", function () {
+		setState("error loading track")
+	});
+	sound.on("playerror", function () {
+		setState("error opening audio device")
+	});
+	sound.on("end", function () {
+		setState("idle");
+		nextTrack()
+	});
+	sound.on("pause", function () {
+		setState("paused")
+	});
 }
 
 function toggleRepeat() {
-    repeat = !repeat;
-    continuelist = !repeat;
-    sound.loop(repeat);
-    updateState();
+	repeat = !repeat;
+	continuelist = !repeat;
+	sound.loop(repeat);
+	updateState();
 }
 
 function toggleContinue() {
-    continuelist = !continuelist;
-    updateState();
+	continuelist = !continuelist;
+	updateState();
 }
 
 function updateState() {
-    document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
-    let statestr = "[";
-    statestr += gstate;
-    if (sound.playing())
-        statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
+	document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
+	let statestr = "[";
+	statestr += gstate;
+	if (sound.playing())
+		statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.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>';
+	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 + "]";
+	document.getElementById("flags").innerHTML = flags + "]";
 }
 
 function initState() {
-    total = queue.length;
+	total = queue.length;
 }
 
 function previousTrack() {
-    if (index-- === 0)
-        index = total-1;
-    if (continuelist) {
-        playSong(queue[index])
-    }
+	if (index-- === 0)
+		index = total-1;
+	if (continuelist) {
+		playSong(queue[index])
+	}
 }
 
 function nextTrack() {
-    if (++index === total)
-        index = 0;
-    if (continuelist) {
-        playSong(queue[index])
-    }
+	if (++index === total)
+		index = 0;
+	if (continuelist) {
+		playSong(queue[index])
+	}
 }
 
 function formatTime(secs) {
-    const minutes = Math.floor(secs / 60) || 0;
-    const seconds = (secs - minutes * 60) || 0;
-    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+	const minutes = Math.floor(secs / 60) || 0;
+	const seconds = (secs - minutes * 60) || 0;
+	return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 }
-- 
2.45.0


From 822996211f4f48e0eb49b6cd6575db9a0dc7803d Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sat, 6 Mar 2021 20:36:43 +0100
Subject: [PATCH 03/30] webmusic.js: code improovements

---
 webmusic.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index a113a9e..a939cb5 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -67,22 +67,26 @@ window.onkeyup = function (event) {
 
 
 function togglePlayback() {
-	if (sound.playing())
+	if (sound.playing()) {
 		sound.pause();
-	else
+	} else {
 		sound.play();
+	}
 }
 
 function setState(state) {
 	gstate = state;
+
 	console.log("now in state: " + state);
 	updateState();
 }
 
 
 function playSong(url) {
-	if (document.getElementsByClassName("playing").length > 0)
+	if (document.getElementsByClassName("playing").length > 0) {
 		document.getElementsByClassName("playing")[0].classList.remove("playing");
+	}
+
 	index = queue.indexOf(url);
 	sound.stop();
 	sound.unload();
@@ -134,8 +138,9 @@ function updateState() {
 	document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
 	let statestr = "[";
 	statestr += gstate;
-	if (sound.playing())
+	if (sound.playing()) {
 		statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
+	}
 
 	statestr += "]";
 	document.getElementById("state").innerHTML = statestr;
@@ -157,16 +162,16 @@ function initState() {
 }
 
 function previousTrack() {
-	if (index-- === 0)
-		index = total-1;
+	if (index-- === 0) index = total-1;
+
 	if (continuelist) {
 		playSong(queue[index])
 	}
 }
 
 function nextTrack() {
-	if (++index === total)
-		index = 0;
+	if (++index === total) index = 0;
+
 	if (continuelist) {
 		playSong(queue[index])
 	}
-- 
2.45.0


From 9f90eed214208a797afb47f3573dc96ee1e59e59 Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sat, 6 Mar 2021 22:52:55 +0100
Subject: [PATCH 04/30] webmusic.js: navigate through files more smartly

---
 webmusic.js | 47 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index a939cb5..74ca6cb 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,7 +1,6 @@
 let gstate = "idle";
 let repeat = false;
 let continuelist = true;
-let queue = [];
 let total = 0;
 let index = 0;
 
@@ -25,7 +24,7 @@ window.onkeyup = function (event) {
 		case " ":
 		case "p":
 			if (gstate == "idle" && total !== 0) {
-				playSong(queue[0])
+				playSong(index)
 			} else {
 				togglePlayback();
 			}
@@ -65,6 +64,28 @@ window.onkeyup = function (event) {
 	}
 };
 
+function initState() {
+	const dirElements  = document.querySelectorAll(".dir");
+	const fileElements = document.querySelectorAll(".file");
+
+	let id = 0;
+
+	dirElements.forEach(function(element){
+		element.id = id++;
+	});
+
+	fileElements.forEach(function(element){
+		element.id = id++;
+
+		element.addEventListener("click", function(event) {
+			event.preventDefault();
+			event.stopPropagation();
+			playSong(event.target.id);
+		});
+	});
+
+	total = id;
+}
 
 function togglePlayback() {
 	if (sound.playing()) {
@@ -82,19 +103,25 @@ function setState(state) {
 }
 
 
-function playSong(url) {
+function playSong(id) {
+	let element = document.getElementById(id);
+
+	if (element === null) return;
+	if (element.classList.contains('dir')) return;
+
 	if (document.getElementsByClassName("playing").length > 0) {
 		document.getElementsByClassName("playing")[0].classList.remove("playing");
 	}
 
-	index = queue.indexOf(url);
+	index = element.id;
+
 	sound.stop();
 	sound.unload();
 	sound = null;
 	delete sound;
 
 	sound = new Howl({
-		src: [url],
+		src: [element.href],
 		html5: true
 	});
 
@@ -102,7 +129,7 @@ function playSong(url) {
 	sound.play();
 	sound.loop(repeat);
 	
-	document.querySelectorAll('[onclick="playSong(\''+url+'\')"]')[0].classList.add("playing");
+	element.classList.add("playing");
 
 	sound.on("play", function () {
 		setState("playing");
@@ -157,15 +184,11 @@ function updateState() {
 	document.getElementById("flags").innerHTML = flags + "]";
 }
 
-function initState() {
-	total = queue.length;
-}
-
 function previousTrack() {
 	if (index-- === 0) index = total-1;
 
 	if (continuelist) {
-		playSong(queue[index])
+		playSong(index)
 	}
 }
 
@@ -173,7 +196,7 @@ function nextTrack() {
 	if (++index === total) index = 0;
 
 	if (continuelist) {
-		playSong(queue[index])
+		playSong(index)
 	}
 }
 
-- 
2.45.0


From 39f8df6ae9419b46b1459053ccb5f2357af4ae4b Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sat, 6 Mar 2021 23:30:42 +0100
Subject: [PATCH 05/30] needed changes on template to make previous commit work

---
 Pages/Index.cshtml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
index f57e79e..6c3fefe 100644
--- a/Pages/Index.cshtml
+++ b/Pages/Index.cshtml
@@ -25,7 +25,7 @@ else {
 	@foreach (var dir in Model.Dirs) {
 		<li>
 		<a class="action" href="#">[--]</a>
-		<a href="?@Model.Path/@dir"> @dir</a>
+		<a class="dir" href="?@Model.Path/@dir"> @dir</a>
 		</li>
 	}
 	@foreach (var file in Model.Files) {
@@ -36,7 +36,6 @@ else {
 		var lrcpath = System.IO.Path.Combine(Model.Fullpath, lrcfile);
 
 		<li>
-		<script>queue.push('@Html.Raw(jsfile)')</script>
 		<a class="action" href="@Html.Raw(IndexModel.Encode(Model.Fullpath + "/" + file))" download>[DL]</a>
 		@if (System.IO.File.Exists(lrcpath)) {
 			<a class="action" href="?@Model.Path/@lrcfile" target="_blank">[LRC]</a>
@@ -44,7 +43,7 @@ else {
 		else if(Directory.GetFiles(@Model.Fullpath, "*.lrc").Length != 0) {
 			<a class="action">[---]</a>
 		}
-		<a href="#" onclick="playSong('@Html.Raw(jsfile)')"> @file</a>
+		<a class="file" href="@Html.Raw(IndexModel.Encode(Model.Fullpath + "/" + file))"> @file</a>
 		</li>
 	}
 }
-- 
2.45.0


From 4db20d159ab8b8d6d055405a933ca159a5bb5088 Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sun, 7 Mar 2021 01:13:22 +0100
Subject: [PATCH 06/30] webmusic.js: skip folders

---
 webmusic.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/webmusic.js b/webmusic.js
index 74ca6cb..e4f2c6c 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -24,6 +24,10 @@ window.onkeyup = function (event) {
 		case " ":
 		case "p":
 			if (gstate == "idle" && total !== 0) {
+				if (document.getElementById(index).classList.contains('dir')) {
+					return nextTrack();
+				}
+
 				playSong(index)
 			} else {
 				togglePlayback();
@@ -187,6 +191,10 @@ function updateState() {
 function previousTrack() {
 	if (index-- === 0) index = total-1;
 
+	if (document.getElementById(index).classList.contains('dir')) {
+		return previousTrack();
+	}
+
 	if (continuelist) {
 		playSong(index)
 	}
@@ -195,6 +203,10 @@ function previousTrack() {
 function nextTrack() {
 	if (++index === total) index = 0;
 
+	if (document.getElementById(index).classList.contains('dir')) {
+		return nextTrack();
+	}
+
 	if (continuelist) {
 		playSong(index)
 	}
-- 
2.45.0


From 5b9d62eac2da4235d949a9446d913a2f56dc8b82 Mon Sep 17 00:00:00 2001
From: ctucx <c@ctu.cx>
Date: Sun, 7 Mar 2021 01:24:44 +0100
Subject: [PATCH 07/30] webmusic.js: set onclick-event on state element just
 once

---
 webmusic.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index e4f2c6c..6f9e166 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -71,8 +71,9 @@ window.onkeyup = function (event) {
 function initState() {
 	const dirElements  = document.querySelectorAll(".dir");
 	const fileElements = document.querySelectorAll(".file");
+	let   id           = 0;
 
-	let id = 0;
+	document.getElementById("state").addEventListener("click", togglePlayback)
 
 	dirElements.forEach(function(element){
 		element.id = id++;
@@ -166,7 +167,6 @@ function toggleContinue() {
 }
 
 function updateState() {
-	document.getElementById("state").setAttribute('onclick', 'togglePlayback()');
 	let statestr = "[";
 	statestr += gstate;
 	if (sound.playing()) {
-- 
2.45.0


From 7a20b78450dc00af83422ac53f19de18a1806a5d Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 13:36:43 +0100
Subject: [PATCH 08/30] webmusic.js: replace howler with the native Audio()
 element

---
 webmusic.js | 73 +++++++++++++++++++++++++----------------------------
 1 file changed, 34 insertions(+), 39 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 6f9e166..242c8a4 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -4,15 +4,7 @@ let continuelist = true;
 let total = 0;
 let index = 0;
 
-let sound = new Howl({
-	src: [''],
-	format: "mp3",
-	html5: true
-});
-
-setInterval(function () {
-	updateState();
-}, 1000);
+let sound = new Audio();
 
 window.onload = function () {
 	initState();
@@ -51,15 +43,15 @@ window.onkeyup = function (event) {
 			break;
 
 		case "ArrowLeft":
-			if (sound.seek() < 10) {
-				sound.seek(0);
+			if (sound.currentTime < 10) {
+				sound.currentTime = 0;
 			} else {
-				sound.seek(sound.seek()-10);
+				sound.currentTime = sound.currentTime-10;
 			}
 			break;
 
 		case "ArrowRight":
-			sound.seek(sound.seek()+10);
+			sound.currentTime = sound.currentTime+10;
 			break;
 
 		case "Escape":
@@ -93,10 +85,10 @@ function initState() {
 }
 
 function togglePlayback() {
-	if (sound.playing()) {
-		sound.pause();
-	} else {
+	if (sound.paused) {
 		sound.play();
+	} else {
+		sound.pause();
 	}
 }
 
@@ -120,44 +112,46 @@ function playSong(id) {
 
 	index = element.id;
 
-	sound.stop();
-	sound.unload();
-	sound = null;
-	delete sound;
-
-	sound = new Howl({
-		src: [element.href],
-		html5: true
-	});
+	sound.pause()
+	sound.src = element.href;
 
 	setState("loading");
-	sound.play();
-	sound.loop(repeat);
+	sound.load();
+
+	sound.loop = repeat;
 	
 	element.classList.add("playing");
 
-	sound.on("play", function () {
+	sound.addEventListener("canplay", function () {
+		sound.play();
+	});
+
+	sound.addEventListener("play", function () {
 		setState("playing");
 	});
-	sound.on("loaderror", function () {
-		setState("error loading track")
+
+	sound.addEventListener("pause", function () {
+		setState("paused");
 	});
-	sound.on("playerror", function () {
-		setState("error opening audio device")
+
+	sound.addEventListener("error", function () {
+		setState("error loading track");
 	});
-	sound.on("end", function () {
+
+	sound.addEventListener("ended", function () {
 		setState("idle");
-		nextTrack()
+		nextTrack();
 	});
-	sound.on("pause", function () {
-		setState("paused")
+
+	sound.addEventListener("timeupdate", function () {
+		updateState();
 	});
 }
 
 function toggleRepeat() {
 	repeat = !repeat;
 	continuelist = !repeat;
-	sound.loop(repeat);
+	sound.loop = repeat;
 	updateState();
 }
 
@@ -169,8 +163,9 @@ function toggleContinue() {
 function updateState() {
 	let statestr = "[";
 	statestr += gstate;
-	if (sound.playing()) {
-		statestr += " " + formatTime(Math.round(sound.seek())) + "/" + formatTime(Math.round(sound.duration()));
+
+	if (!sound.paused) {
+		statestr += " " + formatTime(Math.round(sound.currentTime)) + "/" + formatTime(Math.round(sound.duration));
 	}
 
 	statestr += "]";
-- 
2.45.0


From 599b1ef413f57f87911249b4c523d988d75ab0af Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 13:42:15 +0100
Subject: [PATCH 09/30] remove howler.core.js

---
 Pages/Shared/_Layout.cshtml |   1 -
 howler.core.js              | 162 ------------------------------------
 2 files changed, 163 deletions(-)
 delete mode 100644 howler.core.js

diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
index 46eadea..e8d7507 100644
--- a/Pages/Shared/_Layout.cshtml
+++ b/Pages/Shared/_Layout.cshtml
@@ -8,7 +8,6 @@
 	<title>@ViewData["Title"]</title>
 	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
-	<script src="/howler.core.js"></script>
 	<script src="/webmusic.js"></script>
 	<link href="/webmusic.css" rel="stylesheet"/>
 	<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
diff --git a/howler.core.js b/howler.core.js
deleted file mode 100644
index 1b78473..0000000
--- a/howler.core.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/*!
-* howler.js v2.1.2
-* howlerjs.com
-*
-* (c) 2013-2019, James Simpson of GoldFire Studios
-* goldfirestudios.com
-*
-* MIT License
-*/(function(){'use strict';var HowlerGlobal=function(){this.init();};HowlerGlobal.prototype={init:function(){var self=this||Howler;self._counter=1000;self._html5AudioPool=[];self.html5PoolSize=10;self._codecs={};self._howls=[];self._muted=false;self._volume=1;self._canPlayEvent='canplaythrough';self._navigator=(typeof window!=='undefined'&&window.navigator)?window.navigator:null;self.masterGain=null;self.noAudio=false;self.usingWebAudio=true;self.autoSuspend=true;self.ctx=null;self.autoUnlock=true;self._setup();return self;},volume:function(vol){var self=this||Howler;vol=parseFloat(vol);if(!self.ctx){setupAudioContext();}
-if(typeof vol!=='undefined'&&vol>=0&&vol<=1){self._volume=vol;if(self._muted){return self;}
-if(self.usingWebAudio){self.masterGain.gain.setValueAtTime(vol,Howler.ctx.currentTime);}
-for(var i=0;i<self._howls.length;i++){if(!self._howls[i]._webAudio){var ids=self._howls[i]._getSoundIds();for(var j=0;j<ids.length;j++){var sound=self._howls[i]._soundById(ids[j]);if(sound&&sound._node){sound._node.volume=sound._volume*vol;}}}}
-return self;}
-return self._volume;},mute:function(muted){var self=this||Howler;if(!self.ctx){setupAudioContext();}
-self._muted=muted;if(self.usingWebAudio){self.masterGain.gain.setValueAtTime(muted?0:self._volume,Howler.ctx.currentTime);}
-for(var i=0;i<self._howls.length;i++){if(!self._howls[i]._webAudio){var ids=self._howls[i]._getSoundIds();for(var j=0;j<ids.length;j++){var sound=self._howls[i]._soundById(ids[j]);if(sound&&sound._node){sound._node.muted=(muted)?true:sound._muted;}}}}
-return self;},unload:function(){var self=this||Howler;for(var i=self._howls.length-1;i>=0;i--){self._howls[i].unload();}
-if(self.usingWebAudio&&self.ctx&&typeof self.ctx.close!=='undefined'){self.ctx.close();self.ctx=null;setupAudioContext();}
-return self;},codecs:function(ext){return(this||Howler)._codecs[ext.replace(/^x-/,'')];},_setup:function(){var self=this||Howler;self.state=self.ctx?self.ctx.state||'suspended':'suspended';self._autoSuspend();if(!self.usingWebAudio){if(typeof Audio!=='undefined'){try{var test=new Audio();if(typeof test.oncanplaythrough==='undefined'){self._canPlayEvent='canplay';}}catch(e){self.noAudio=true;}}else{self.noAudio=true;}}
-try{var test=new Audio();if(test.muted){self.noAudio=true;}}catch(e){}
-if(!self.noAudio){self._setupCodecs();}
-return self;},_setupCodecs:function(){var self=this||Howler;var audioTest=null;try{audioTest=(typeof Audio!=='undefined')?new Audio():null;}catch(err){return self;}
-if(!audioTest||typeof audioTest.canPlayType!=='function'){return self;}
-var mpegTest=audioTest.canPlayType('audio/mpeg;').replace(/^no$/,'');var checkOpera=self._navigator&&self._navigator.userAgent.match(/OPR\/([0-6].)/g);var isOldOpera=(checkOpera&&parseInt(checkOpera[0].split('/')[1],10)<33);self._codecs={mp3:!!(!isOldOpera&&(mpegTest||audioTest.canPlayType('audio/mp3;').replace(/^no$/,''))),mpeg:!!mpegTest,opus:!!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/,''),ogg:!!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,''),oga:!!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,''),wav:!!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/,''),aac:!!audioTest.canPlayType('audio/aac;').replace(/^no$/,''),caf:!!audioTest.canPlayType('audio/x-caf;').replace(/^no$/,''),m4a:!!(audioTest.canPlayType('audio/x-m4a;')||audioTest.canPlayType('audio/m4a;')||audioTest.canPlayType('audio/aac;')).replace(/^no$/,''),mp4:!!(audioTest.canPlayType('audio/x-mp4;')||audioTest.canPlayType('audio/mp4;')||audioTest.canPlayType('audio/aac;')).replace(/^no$/,''),weba:!!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,''),webm:!!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,''),dolby:!!audioTest.canPlayType('audio/mp4; codecs="ec-3"').replace(/^no$/,''),flac:!!(audioTest.canPlayType('audio/x-flac;')||audioTest.canPlayType('audio/flac;')).replace(/^no$/,'')};return self;},_unlockAudio:function(){var self=this||Howler;if(self._audioUnlocked||!self.ctx){return;}
-self._audioUnlocked=false;self.autoUnlock=false;if(!self._mobileUnloaded&&self.ctx.sampleRate!==44100){self._mobileUnloaded=true;self.unload();}
-self._scratchBuffer=self.ctx.createBuffer(1,1,22050);var unlock=function(e){for(var i=0;i<self.html5PoolSize;i++){try{var audioNode=new Audio();audioNode._unlocked=true;self._releaseHtml5Audio(audioNode);}catch(e){self.noAudio=true;}}
-for(var i=0;i<self._howls.length;i++){if(!self._howls[i]._webAudio){var ids=self._howls[i]._getSoundIds();for(var j=0;j<ids.length;j++){var sound=self._howls[i]._soundById(ids[j]);if(sound&&sound._node&&!sound._node._unlocked){sound._node._unlocked=true;sound._node.load();}}}}
-self._autoResume();var source=self.ctx.createBufferSource();source.buffer=self._scratchBuffer;source.connect(self.ctx.destination);if(typeof source.start==='undefined'){source.noteOn(0);}else{source.start(0);}
-if(typeof self.ctx.resume==='function'){self.ctx.resume();}
-source.onended=function(){source.disconnect(0);self._audioUnlocked=true;document.removeEventListener('touchstart',unlock,true);document.removeEventListener('touchend',unlock,true);document.removeEventListener('click',unlock,true);for(var i=0;i<self._howls.length;i++){self._howls[i]._emit('unlock');}};};document.addEventListener('touchstart',unlock,true);document.addEventListener('touchend',unlock,true);document.addEventListener('click',unlock,true);return self;},_obtainHtml5Audio:function(){var self=this||Howler;if(self._html5AudioPool.length){return self._html5AudioPool.pop();}
-var testPlay=new Audio().play();if(testPlay&&typeof Promise!=='undefined'&&(testPlay instanceof Promise||typeof testPlay.then==='function')){testPlay.catch(function(){console.warn('HTML5 Audio pool exhausted, returning potentially locked audio object.');});}
-return new Audio();},_releaseHtml5Audio:function(audio){var self=this||Howler;if(audio._unlocked){self._html5AudioPool.push(audio);}
-return self;},_autoSuspend:function(){var self=this;if(!self.autoSuspend||!self.ctx||typeof self.ctx.suspend==='undefined'||!Howler.usingWebAudio){return;}
-for(var i=0;i<self._howls.length;i++){if(self._howls[i]._webAudio){for(var j=0;j<self._howls[i]._sounds.length;j++){if(!self._howls[i]._sounds[j]._paused){return self;}}}}
-if(self._suspendTimer){clearTimeout(self._suspendTimer);}
-self._suspendTimer=setTimeout(function(){if(!self.autoSuspend){return;}
-self._suspendTimer=null;self.state='suspending';self.ctx.suspend().then(function(){self.state='suspended';if(self._resumeAfterSuspend){delete self._resumeAfterSuspend;self._autoResume();}});},30000);return self;},_autoResume:function(){var self=this;if(!self.ctx||typeof self.ctx.resume==='undefined'||!Howler.usingWebAudio){return;}
-if(self.state==='running'&&self._suspendTimer){clearTimeout(self._suspendTimer);self._suspendTimer=null;}else if(self.state==='suspended'){self.ctx.resume().then(function(){self.state='running';for(var i=0;i<self._howls.length;i++){self._howls[i]._emit('resume');}});if(self._suspendTimer){clearTimeout(self._suspendTimer);self._suspendTimer=null;}}else if(self.state==='suspending'){self._resumeAfterSuspend=true;}
-return self;}};var Howler=new HowlerGlobal();var Howl=function(o){var self=this;if(!o.src||o.src.length===0){console.error('An array of source files must be passed with any new Howl.');return;}
-self.init(o);};Howl.prototype={init:function(o){var self=this;if(!Howler.ctx){setupAudioContext();}
-self._autoplay=o.autoplay||false;self._format=(typeof o.format!=='string')?o.format:[o.format];self._html5=o.html5||false;self._muted=o.mute||false;self._loop=o.loop||false;self._pool=o.pool||5;self._preload=(typeof o.preload==='boolean')?o.preload:true;self._rate=o.rate||1;self._sprite=o.sprite||{};self._src=(typeof o.src!=='string')?o.src:[o.src];self._volume=o.volume!==undefined?o.volume:1;self._xhrWithCredentials=o.xhrWithCredentials||false;self._duration=0;self._state='unloaded';self._sounds=[];self._endTimers={};self._queue=[];self._playLock=false;self._onend=o.onend?[{fn:o.onend}]:[];self._onfade=o.onfade?[{fn:o.onfade}]:[];self._onload=o.onload?[{fn:o.onload}]:[];self._onloaderror=o.onloaderror?[{fn:o.onloaderror}]:[];self._onplayerror=o.onplayerror?[{fn:o.onplayerror}]:[];self._onpause=o.onpause?[{fn:o.onpause}]:[];self._onplay=o.onplay?[{fn:o.onplay}]:[];self._onstop=o.onstop?[{fn:o.onstop}]:[];self._onmute=o.onmute?[{fn:o.onmute}]:[];self._onvolume=o.onvolume?[{fn:o.onvolume}]:[];self._onrate=o.onrate?[{fn:o.onrate}]:[];self._onseek=o.onseek?[{fn:o.onseek}]:[];self._onunlock=o.onunlock?[{fn:o.onunlock}]:[];self._onresume=[];self._webAudio=Howler.usingWebAudio&&!self._html5;if(typeof Howler.ctx!=='undefined'&&Howler.ctx&&Howler.autoUnlock){Howler._unlockAudio();}
-Howler._howls.push(self);if(self._autoplay){self._queue.push({event:'play',action:function(){self.play();}});}
-if(self._preload){self.load();}
-return self;},load:function(){var self=this;var url=null;if(Howler.noAudio){self._emit('loaderror',null,'No audio support.');return;}
-if(typeof self._src==='string'){self._src=[self._src];}
-for(var i=0;i<self._src.length;i++){var ext,str;if(self._format&&self._format[i]){ext=self._format[i];}else{str=self._src[i];if(typeof str!=='string'){self._emit('loaderror',null,'Non-string found in selected audio sources - ignoring.');continue;}
-ext=/^data:audio\/([^;,]+);/i.exec(str);if(!ext){ext=/\.([^.]+)$/.exec(str.split('?',1)[0]);}
-if(ext){ext=ext[1].toLowerCase();}}
-if(!ext){console.warn('No file extension was found. Consider using the "format" property or specify an extension.');}
-if(ext&&Howler.codecs(ext)){url=self._src[i];break;}}
-if(!url){self._emit('loaderror',null,'No codec support for selected audio sources.');return;}
-self._src=url;self._state='loading';if(window.location.protocol==='https:'&&url.slice(0,5)==='http:'){self._html5=true;self._webAudio=false;}
-new Sound(self);if(self._webAudio){loadBuffer(self);}
-return self;},play:function(sprite,internal){var self=this;var id=null;if(typeof sprite==='number'){id=sprite;sprite=null;}else if(typeof sprite==='string'&&self._state==='loaded'&&!self._sprite[sprite]){return null;}else if(typeof sprite==='undefined'){sprite='__default';if(!self._playLock){var num=0;for(var i=0;i<self._sounds.length;i++){if(self._sounds[i]._paused&&!self._sounds[i]._ended){num++;id=self._sounds[i]._id;}}
-if(num===1){sprite=null;}else{id=null;}}}
-var sound=id?self._soundById(id):self._inactiveSound();if(!sound){return null;}
-if(id&&!sprite){sprite=sound._sprite||'__default';}
-if(self._state!=='loaded'){sound._sprite=sprite;sound._ended=false;var soundId=sound._id;self._queue.push({event:'play',action:function(){self.play(soundId);}});return soundId;}
-if(id&&!sound._paused){if(!internal){self._loadQueue('play');}
-return sound._id;}
-if(self._webAudio){Howler._autoResume();}
-var seek=Math.max(0,sound._seek>0?sound._seek:self._sprite[sprite][0]/1000);var duration=Math.max(0,((self._sprite[sprite][0]+self._sprite[sprite][1])/1000)-seek);var timeout=(duration*1000)/Math.abs(sound._rate);var start=self._sprite[sprite][0]/1000;var stop=(self._sprite[sprite][0]+self._sprite[sprite][1])/1000;var loop=!!(sound._loop||self._sprite[sprite][2]);sound._sprite=sprite;sound._ended=false;var setParams=function(){sound._paused=false;sound._seek=seek;sound._start=start;sound._stop=stop;sound._loop=loop;};if(seek>=stop){self._ended(sound);return;}
-var node=sound._node;if(self._webAudio){var playWebAudio=function(){self._playLock=false;setParams();self._refreshBuffer(sound);var vol=(sound._muted||self._muted)?0:sound._volume;node.gain.setValueAtTime(vol,Howler.ctx.currentTime);sound._playStart=Howler.ctx.currentTime;if(typeof node.bufferSource.start==='undefined'){sound._loop?node.bufferSource.noteGrainOn(0,seek,86400):node.bufferSource.noteGrainOn(0,seek,duration);}else{sound._loop?node.bufferSource.start(0,seek,86400):node.bufferSource.start(0,seek,duration);}
-if(timeout!==Infinity){self._endTimers[sound._id]=setTimeout(self._ended.bind(self,sound),timeout);}
-if(!internal){setTimeout(function(){self._emit('play',sound._id);self._loadQueue();},0);}};if(Howler.state==='running'){playWebAudio();}else{self._playLock=true;self.once('resume',playWebAudio);self._clearTimer(sound._id);}}else{var playHtml5=function(){node.currentTime=seek;node.muted=sound._muted||self._muted||Howler._muted||node.muted;node.volume=sound._volume*Howler.volume();node.playbackRate=sound._rate;try{var play=node.play();if(play&&typeof Promise!=='undefined'&&(play instanceof Promise||typeof play.then==='function')){self._playLock=true;setParams();play.then(function(){self._playLock=false;node._unlocked=true;if(!internal){self._emit('play',sound._id);self._loadQueue();}}).catch(function(){self._playLock=false;self._emit('playerror',sound._id,'Playback was unable to start. This is most commonly an issue '+
-'on mobile devices and Chrome where playback was not within a user interaction.');sound._ended=true;sound._paused=true;});}else if(!internal){self._playLock=false;setParams();self._emit('play',sound._id);self._loadQueue();}
-node.playbackRate=sound._rate;if(node.paused){self._emit('playerror',sound._id,'Playback was unable to start. This is most commonly an issue '+
-'on mobile devices and Chrome where playback was not within a user interaction.');return;}
-if(sprite!=='__default'||sound._loop){self._endTimers[sound._id]=setTimeout(self._ended.bind(self,sound),timeout);}else{self._endTimers[sound._id]=function(){self._ended(sound);node.removeEventListener('ended',self._endTimers[sound._id],false);};node.addEventListener('ended',self._endTimers[sound._id],false);}}catch(err){self._emit('playerror',sound._id,err);}};if(node.src==='data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA'){node.src=self._src;node.load();}
-var loadedNoReadyState=(window&&window.ejecta)||(!node.readyState&&Howler._navigator.isCocoonJS);if(node.readyState>=3||loadedNoReadyState){playHtml5();}else{self._playLock=true;var listener=function(){playHtml5();node.removeEventListener(Howler._canPlayEvent,listener,false);};node.addEventListener(Howler._canPlayEvent,listener,false);self._clearTimer(sound._id);}}
-return sound._id;},pause:function(id){var self=this;if(self._state!=='loaded'||self._playLock){self._queue.push({event:'pause',action:function(){self.pause(id);}});return self;}
-var ids=self._getSoundIds(id);for(var i=0;i<ids.length;i++){self._clearTimer(ids[i]);var sound=self._soundById(ids[i]);if(sound&&!sound._paused){sound._seek=self.seek(ids[i]);sound._rateSeek=0;sound._paused=true;self._stopFade(ids[i]);if(sound._node){if(self._webAudio){if(!sound._node.bufferSource){continue;}
-if(typeof sound._node.bufferSource.stop==='undefined'){sound._node.bufferSource.noteOff(0);}else{sound._node.bufferSource.stop(0);}
-self._cleanBuffer(sound._node);}else if(!isNaN(sound._node.duration)||sound._node.duration===Infinity){sound._node.pause();}}}
-if(!arguments[1]){self._emit('pause',sound?sound._id:null);}}
-return self;},stop:function(id,internal){var self=this;if(self._state!=='loaded'||self._playLock){self._queue.push({event:'stop',action:function(){self.stop(id);}});return self;}
-var ids=self._getSoundIds(id);for(var i=0;i<ids.length;i++){self._clearTimer(ids[i]);var sound=self._soundById(ids[i]);if(sound){sound._seek=sound._start||0;sound._rateSeek=0;sound._paused=true;sound._ended=true;self._stopFade(ids[i]);if(sound._node){if(self._webAudio){if(sound._node.bufferSource){if(typeof sound._node.bufferSource.stop==='undefined'){sound._node.bufferSource.noteOff(0);}else{sound._node.bufferSource.stop(0);}
-self._cleanBuffer(sound._node);}}else if(!isNaN(sound._node.duration)||sound._node.duration===Infinity){sound._node.currentTime=sound._start||0;sound._node.pause();if(sound._node.duration===Infinity){self._clearSound(sound._node);}}}
-if(!internal){self._emit('stop',sound._id);}}}
-return self;},mute:function(muted,id){var self=this;if(self._state!=='loaded'||self._playLock){self._queue.push({event:'mute',action:function(){self.mute(muted,id);}});return self;}
-if(typeof id==='undefined'){if(typeof muted==='boolean'){self._muted=muted;}else{return self._muted;}}
-var ids=self._getSoundIds(id);for(var i=0;i<ids.length;i++){var sound=self._soundById(ids[i]);if(sound){sound._muted=muted;if(sound._interval){self._stopFade(sound._id);}
-if(self._webAudio&&sound._node){sound._node.gain.setValueAtTime(muted?0:sound._volume,Howler.ctx.currentTime);}else if(sound._node){sound._node.muted=Howler._muted?true:muted;}
-self._emit('mute',sound._id);}}
-return self;},volume:function(){var self=this;var args=arguments;var vol,id;if(args.length===0){return self._volume;}else if(args.length===1||args.length===2&&typeof args[1]==='undefined'){var ids=self._getSoundIds();var index=ids.indexOf(args[0]);if(index>=0){id=parseInt(args[0],10);}else{vol=parseFloat(args[0]);}}else if(args.length>=2){vol=parseFloat(args[0]);id=parseInt(args[1],10);}
-var sound;if(typeof vol!=='undefined'&&vol>=0&&vol<=1){if(self._state!=='loaded'||self._playLock){self._queue.push({event:'volume',action:function(){self.volume.apply(self,args);}});return self;}
-if(typeof id==='undefined'){self._volume=vol;}
-id=self._getSoundIds(id);for(var i=0;i<id.length;i++){sound=self._soundById(id[i]);if(sound){sound._volume=vol;if(!args[2]){self._stopFade(id[i]);}
-if(self._webAudio&&sound._node&&!sound._muted){sound._node.gain.setValueAtTime(vol,Howler.ctx.currentTime);}else if(sound._node&&!sound._muted){sound._node.volume=vol*Howler.volume();}
-self._emit('volume',sound._id);}}}else{sound=id?self._soundById(id):self._sounds[0];return sound?sound._volume:0;}
-return self;},fade:function(from,to,len,id){var self=this;if(self._state!=='loaded'||self._playLock){self._queue.push({event:'fade',action:function(){self.fade(from,to,len,id);}});return self;}
-from=parseFloat(from);to=parseFloat(to);len=parseFloat(len);self.volume(from,id);var ids=self._getSoundIds(id);for(var i=0;i<ids.length;i++){var sound=self._soundById(ids[i]);if(sound){if(!id){self._stopFade(ids[i]);}
-if(self._webAudio&&!sound._muted){var currentTime=Howler.ctx.currentTime;var end=currentTime+(len/1000);sound._volume=from;sound._node.gain.setValueAtTime(from,currentTime);sound._node.gain.linearRampToValueAtTime(to,end);}
-self._startFadeInterval(sound,from,to,len,ids[i],typeof id==='undefined');}}
-return self;},_startFadeInterval:function(sound,from,to,len,id,isGroup){var self=this;var vol=from;var diff=to-from;var steps=Math.abs(diff/0.01);var stepLen=Math.max(4,(steps>0)?len/steps:len);var lastTick=Date.now();sound._fadeTo=to;sound._interval=setInterval(function(){var tick=(Date.now()-lastTick)/len;lastTick=Date.now();vol+=diff*tick;vol=Math.max(0,vol);vol=Math.min(1,vol);vol=Math.round(vol*100)/100;if(self._webAudio){sound._volume=vol;}else{self.volume(vol,sound._id,true);}
-if(isGroup){self._volume=vol;}
-if((to<from&&vol<=to)||(to>from&&vol>=to)){clearInterval(sound._interval);sound._interval=null;sound._fadeTo=null;self.volume(to,sound._id);self._emit('fade',sound._id);}},stepLen);},_stopFade:function(id){var self=this;var sound=self._soundById(id);if(sound&&sound._interval){if(self._webAudio){sound._node.gain.cancelScheduledValues(Howler.ctx.currentTime);}
-clearInterval(sound._interval);sound._interval=null;self.volume(sound._fadeTo,id);sound._fadeTo=null;self._emit('fade',id);}
-return self;},loop:function(){var self=this;var args=arguments;var loop,id,sound;if(args.length===0){return self._loop;}else if(args.length===1){if(typeof args[0]==='boolean'){loop=args[0];self._loop=loop;}else{sound=self._soundById(parseInt(args[0],10));return sound?sound._loop:false;}}else if(args.length===2){loop=args[0];id=parseInt(args[1],10);}
-var ids=self._getSoundIds(id);for(var i=0;i<ids.length;i++){sound=self._soundById(ids[i]);if(sound){sound._loop=loop;if(self._webAudio&&sound._node&&sound._node.bufferSource){sound._node.bufferSource.loop=loop;if(loop){sound._node.bufferSource.loopStart=sound._start||0;sound._node.bufferSource.loopEnd=sound._stop;}}}}
-return self;},rate:function(){var self=this;var args=arguments;var rate,id;if(args.length===0){id=self._sounds[0]._id;}else if(args.length===1){var ids=self._getSoundIds();var index=ids.indexOf(args[0]);if(index>=0){id=parseInt(args[0],10);}else{rate=parseFloat(args[0]);}}else if(args.length===2){rate=parseFloat(args[0]);id=parseInt(args[1],10);}
-var sound;if(typeof rate==='number'){if(self._state!=='loaded'||self._playLock){self._queue.push({event:'rate',action:function(){self.rate.apply(self,args);}});return self;}
-if(typeof id==='undefined'){self._rate=rate;}
-id=self._getSoundIds(id);for(var i=0;i<id.length;i++){sound=self._soundById(id[i]);if(sound){if(self.playing(id[i])){sound._rateSeek=self.seek(id[i]);sound._playStart=self._webAudio?Howler.ctx.currentTime:sound._playStart;}
-sound._rate=rate;if(self._webAudio&&sound._node&&sound._node.bufferSource){sound._node.bufferSource.playbackRate.setValueAtTime(rate,Howler.ctx.currentTime);}else if(sound._node){sound._node.playbackRate=rate;}
-var seek=self.seek(id[i]);var duration=((self._sprite[sound._sprite][0]+self._sprite[sound._sprite][1])/1000)-seek;var timeout=(duration*1000)/Math.abs(sound._rate);if(self._endTimers[id[i]]||!sound._paused){self._clearTimer(id[i]);self._endTimers[id[i]]=setTimeout(self._ended.bind(self,sound),timeout);}
-self._emit('rate',sound._id);}}}else{sound=self._soundById(id);return sound?sound._rate:self._rate;}
-return self;},seek:function(){var self=this;var args=arguments;var seek,id;if(args.length===0){id=self._sounds[0]._id;}else if(args.length===1){var ids=self._getSoundIds();var index=ids.indexOf(args[0]);if(index>=0){id=parseInt(args[0],10);}else if(self._sounds.length){id=self._sounds[0]._id;seek=parseFloat(args[0]);}}else if(args.length===2){seek=parseFloat(args[0]);id=parseInt(args[1],10);}
-if(typeof id==='undefined'){return self;}
-if(self._state!=='loaded'||self._playLock){self._queue.push({event:'seek',action:function(){self.seek.apply(self,args);}});return self;}
-var sound=self._soundById(id);if(sound){if(typeof seek==='number'&&seek>=0){var playing=self.playing(id);if(playing){self.pause(id,true);}
-sound._seek=seek;sound._ended=false;self._clearTimer(id);if(!self._webAudio&&sound._node&&!isNaN(sound._node.duration)){sound._node.currentTime=seek;}
-var seekAndEmit=function(){self._emit('seek',id);if(playing){self.play(id,true);}};if(playing&&!self._webAudio){var emitSeek=function(){if(!self._playLock){seekAndEmit();}else{setTimeout(emitSeek,0);}};setTimeout(emitSeek,0);}else{seekAndEmit();}}else{if(self._webAudio){var realTime=self.playing(id)?Howler.ctx.currentTime-sound._playStart:0;var rateSeek=sound._rateSeek?sound._rateSeek-sound._seek:0;return sound._seek+(rateSeek+realTime*Math.abs(sound._rate));}else{return sound._node.currentTime;}}}
-return self;},playing:function(id){var self=this;if(typeof id==='number'){var sound=self._soundById(id);return sound?!sound._paused:false;}
-for(var i=0;i<self._sounds.length;i++){if(!self._sounds[i]._paused){return true;}}
-return false;},duration:function(id){var self=this;var duration=self._duration;var sound=self._soundById(id);if(sound){duration=self._sprite[sound._sprite][1]/1000;}
-return duration;},state:function(){return this._state;},unload:function(){var self=this;var sounds=self._sounds;for(var i=0;i<sounds.length;i++){if(!sounds[i]._paused){self.stop(sounds[i]._id);}
-if(!self._webAudio){self._clearSound(sounds[i]._node);sounds[i]._node.removeEventListener('error',sounds[i]._errorFn,false);sounds[i]._node.removeEventListener(Howler._canPlayEvent,sounds[i]._loadFn,false);Howler._releaseHtml5Audio(sounds[i]._node);}
-delete sounds[i]._node;self._clearTimer(sounds[i]._id);}
-var index=Howler._howls.indexOf(self);if(index>=0){Howler._howls.splice(index,1);}
-var remCache=true;for(i=0;i<Howler._howls.length;i++){if(Howler._howls[i]._src===self._src||self._src.indexOf(Howler._howls[i]._src)>=0){remCache=false;break;}}
-if(cache&&remCache){delete cache[self._src];}
-Howler.noAudio=false;self._state='unloaded';self._sounds=[];self=null;return null;},on:function(event,fn,id,once){var self=this;var events=self['_on'+event];if(typeof fn==='function'){events.push(once?{id:id,fn:fn,once:once}:{id:id,fn:fn});}
-return self;},off:function(event,fn,id){var self=this;var events=self['_on'+event];var i=0;if(typeof fn==='number'){id=fn;fn=null;}
-if(fn||id){for(i=0;i<events.length;i++){var isId=(id===events[i].id);if(fn===events[i].fn&&isId||!fn&&isId){events.splice(i,1);break;}}}else if(event){self['_on'+event]=[];}else{var keys=Object.keys(self);for(i=0;i<keys.length;i++){if((keys[i].indexOf('_on')===0)&&Array.isArray(self[keys[i]])){self[keys[i]]=[];}}}
-return self;},once:function(event,fn,id){var self=this;self.on(event,fn,id,1);return self;},_emit:function(event,id,msg){var self=this;var events=self['_on'+event];for(var i=events.length-1;i>=0;i--){if(!events[i].id||events[i].id===id||event==='load'){setTimeout(function(fn){fn.call(this,id,msg);}.bind(self,events[i].fn),0);if(events[i].once){self.off(event,events[i].fn,events[i].id);}}}
-self._loadQueue(event);return self;},_loadQueue:function(event){var self=this;if(self._queue.length>0){var task=self._queue[0];if(task.event===event){self._queue.shift();self._loadQueue();}
-if(!event){task.action();}}
-return self;},_ended:function(sound){var self=this;var sprite=sound._sprite;if(!self._webAudio&&sound._node&&!sound._node.paused&&!sound._node.ended&&sound._node.currentTime<sound._stop){setTimeout(self._ended.bind(self,sound),100);return self;}
-var loop=!!(sound._loop||self._sprite[sprite][2]);self._emit('end',sound._id);if(!self._webAudio&&loop){self.stop(sound._id,true).play(sound._id);}
-if(self._webAudio&&loop){self._emit('play',sound._id);sound._seek=sound._start||0;sound._rateSeek=0;sound._playStart=Howler.ctx.currentTime;var timeout=((sound._stop-sound._start)*1000)/Math.abs(sound._rate);self._endTimers[sound._id]=setTimeout(self._ended.bind(self,sound),timeout);}
-if(self._webAudio&&!loop){sound._paused=true;sound._ended=true;sound._seek=sound._start||0;sound._rateSeek=0;self._clearTimer(sound._id);self._cleanBuffer(sound._node);Howler._autoSuspend();}
-if(!self._webAudio&&!loop){self.stop(sound._id,true);}
-return self;},_clearTimer:function(id){var self=this;if(self._endTimers[id]){if(typeof self._endTimers[id]!=='function'){clearTimeout(self._endTimers[id]);}else{var sound=self._soundById(id);if(sound&&sound._node){sound._node.removeEventListener('ended',self._endTimers[id],false);}}
-delete self._endTimers[id];}
-return self;},_soundById:function(id){var self=this;for(var i=0;i<self._sounds.length;i++){if(id===self._sounds[i]._id){return self._sounds[i];}}
-return null;},_inactiveSound:function(){var self=this;self._drain();for(var i=0;i<self._sounds.length;i++){if(self._sounds[i]._ended){return self._sounds[i].reset();}}
-return new Sound(self);},_drain:function(){var self=this;var limit=self._pool;var cnt=0;var i=0;if(self._sounds.length<limit){return;}
-for(i=0;i<self._sounds.length;i++){if(self._sounds[i]._ended){cnt++;}}
-for(i=self._sounds.length-1;i>=0;i--){if(cnt<=limit){return;}
-if(self._sounds[i]._ended){if(self._webAudio&&self._sounds[i]._node){self._sounds[i]._node.disconnect(0);}
-self._sounds.splice(i,1);cnt--;}}},_getSoundIds:function(id){var self=this;if(typeof id==='undefined'){var ids=[];for(var i=0;i<self._sounds.length;i++){ids.push(self._sounds[i]._id);}
-return ids;}else{return[id];}},_refreshBuffer:function(sound){var self=this;sound._node.bufferSource=Howler.ctx.createBufferSource();sound._node.bufferSource.buffer=cache[self._src];if(sound._panner){sound._node.bufferSource.connect(sound._panner);}else{sound._node.bufferSource.connect(sound._node);}
-sound._node.bufferSource.loop=sound._loop;if(sound._loop){sound._node.bufferSource.loopStart=sound._start||0;sound._node.bufferSource.loopEnd=sound._stop||0;}
-sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate,Howler.ctx.currentTime);return self;},_cleanBuffer:function(node){var self=this;var isIOS=Howler._navigator&&Howler._navigator.vendor.indexOf('Apple')>=0;if(Howler._scratchBuffer&&node.bufferSource){node.bufferSource.onended=null;node.bufferSource.disconnect(0);if(isIOS){try{node.bufferSource.buffer=Howler._scratchBuffer;}catch(e){}}}
-node.bufferSource=null;return self;},_clearSound:function(node){var checkIE=/MSIE |Trident\//.test(Howler._navigator&&Howler._navigator.userAgent);if(!checkIE){node.src='data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA';}}};var Sound=function(howl){this._parent=howl;this.init();};Sound.prototype={init:function(){var self=this;var parent=self._parent;self._muted=parent._muted;self._loop=parent._loop;self._volume=parent._volume;self._rate=parent._rate;self._seek=0;self._paused=true;self._ended=true;self._sprite='__default';self._id=++Howler._counter;parent._sounds.push(self);self.create();return self;},create:function(){var self=this;var parent=self._parent;var volume=(Howler._muted||self._muted||self._parent._muted)?0:self._volume;if(parent._webAudio){self._node=(typeof Howler.ctx.createGain==='undefined')?Howler.ctx.createGainNode():Howler.ctx.createGain();self._node.gain.setValueAtTime(volume,Howler.ctx.currentTime);self._node.paused=true;self._node.connect(Howler.masterGain);}else{self._node=Howler._obtainHtml5Audio();self._errorFn=self._errorListener.bind(self);self._node.addEventListener('error',self._errorFn,false);self._loadFn=self._loadListener.bind(self);self._node.addEventListener(Howler._canPlayEvent,self._loadFn,false);self._node.src=parent._src;self._node.preload='auto';self._node.volume=volume*Howler.volume();self._node.load();}
-return self;},reset:function(){var self=this;var parent=self._parent;self._muted=parent._muted;self._loop=parent._loop;self._volume=parent._volume;self._rate=parent._rate;self._seek=0;self._rateSeek=0;self._paused=true;self._ended=true;self._sprite='__default';self._id=++Howler._counter;return self;},_errorListener:function(){var self=this;self._parent._emit('loaderror',self._id,self._node.error?self._node.error.code:0);self._node.removeEventListener('error',self._errorFn,false);},_loadListener:function(){var self=this;var parent=self._parent;parent._duration=Math.ceil(self._node.duration*10)/10;if(Object.keys(parent._sprite).length===0){parent._sprite={__default:[0,parent._duration*1000]};}
-if(parent._state!=='loaded'){parent._state='loaded';parent._emit('load');parent._loadQueue();}
-self._node.removeEventListener(Howler._canPlayEvent,self._loadFn,false);}};var cache={};var loadBuffer=function(self){var url=self._src;if(cache[url]){self._duration=cache[url].duration;loadSound(self);return;}
-if(/^data:[^;]+;base64,/.test(url)){var data=atob(url.split(',')[1]);var dataView=new Uint8Array(data.length);for(var i=0;i<data.length;++i){dataView[i]=data.charCodeAt(i);}
-decodeAudioData(dataView.buffer,self);}else{var xhr=new XMLHttpRequest();xhr.open('GET',url,true);xhr.withCredentials=self._xhrWithCredentials;xhr.responseType='arraybuffer';xhr.onload=function(){var code=(xhr.status+'')[0];if(code!=='0'&&code!=='2'&&code!=='3'){self._emit('loaderror',null,'Failed loading audio file with status: '+xhr.status+'.');return;}
-decodeAudioData(xhr.response,self);};xhr.onerror=function(){if(self._webAudio){self._html5=true;self._webAudio=false;self._sounds=[];delete cache[url];self.load();}};safeXhrSend(xhr);}};var safeXhrSend=function(xhr){try{xhr.send();}catch(e){xhr.onerror();}};var decodeAudioData=function(arraybuffer,self){var error=function(){self._emit('loaderror',null,'Decoding audio data failed.');};var success=function(buffer){if(buffer&&self._sounds.length>0){cache[self._src]=buffer;loadSound(self,buffer);}else{error();}};if(typeof Promise!=='undefined'&&Howler.ctx.decodeAudioData.length===1){Howler.ctx.decodeAudioData(arraybuffer).then(success).catch(error);}else{Howler.ctx.decodeAudioData(arraybuffer,success,error);}}
-var loadSound=function(self,buffer){if(buffer&&!self._duration){self._duration=buffer.duration;}
-if(Object.keys(self._sprite).length===0){self._sprite={__default:[0,self._duration*1000]};}
-if(self._state!=='loaded'){self._state='loaded';self._emit('load');self._loadQueue();}};var setupAudioContext=function(){if(!Howler.usingWebAudio){return;}
-try{if(typeof AudioContext!=='undefined'){Howler.ctx=new AudioContext();}else if(typeof webkitAudioContext!=='undefined'){Howler.ctx=new webkitAudioContext();}else{Howler.usingWebAudio=false;}}catch(e){Howler.usingWebAudio=false;}
-if(!Howler.ctx){Howler.usingWebAudio=false;}
-var iOS=(/iP(hone|od|ad)/.test(Howler._navigator&&Howler._navigator.platform));var appVersion=Howler._navigator&&Howler._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);var version=appVersion?parseInt(appVersion[1],10):null;if(iOS&&version&&version<9){var safari=/safari/.test(Howler._navigator&&Howler._navigator.userAgent.toLowerCase());if(Howler._navigator&&Howler._navigator.standalone&&!safari||Howler._navigator&&!Howler._navigator.standalone&&!safari){Howler.usingWebAudio=false;}}
-if(Howler.usingWebAudio){Howler.masterGain=(typeof Howler.ctx.createGain==='undefined')?Howler.ctx.createGainNode():Howler.ctx.createGain();Howler.masterGain.gain.setValueAtTime(Howler._muted?0:1,Howler.ctx.currentTime);Howler.masterGain.connect(Howler.ctx.destination);}
-Howler._setup();};if(typeof define==='function'&&define.amd){define([],function(){return{Howler:Howler,Howl:Howl};});}
-if(typeof exports!=='undefined'){exports.Howler=Howler;exports.Howl=Howl;}
-if(typeof window!=='undefined'){window.HowlerGlobal=HowlerGlobal;window.Howler=Howler;window.Howl=Howl;window.Sound=Sound;}else if(typeof global!=='undefined'){global.HowlerGlobal=HowlerGlobal;global.Howler=Howler;global.Howl=Howl;global.Sound=Sound;}})();
\ No newline at end of file
-- 
2.45.0


From 6a9dd5b051ddc2bb9e26b307421bc9f919c9e501 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 13:38:29 +0100
Subject: [PATCH 10/30] webmusic.js: rename variable 'sound' to 'audioPlayer'

---
 webmusic.js | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 242c8a4..024a4d9 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -4,7 +4,7 @@ let continuelist = true;
 let total = 0;
 let index = 0;
 
-let sound = new Audio();
+let audioPlayer = new Audio();
 
 window.onload = function () {
 	initState();
@@ -43,15 +43,15 @@ window.onkeyup = function (event) {
 			break;
 
 		case "ArrowLeft":
-			if (sound.currentTime < 10) {
-				sound.currentTime = 0;
+			if (audioPlayer.currentTime < 10) {
+				audioPlayer.currentTime = 0;
 			} else {
-				sound.currentTime = sound.currentTime-10;
+				audioPlayer.currentTime = audioPlayer.currentTime-10;
 			}
 			break;
 
 		case "ArrowRight":
-			sound.currentTime = sound.currentTime+10;
+			audioPlayer.currentTime = audioPlayer.currentTime+10;
 			break;
 
 		case "Escape":
@@ -85,10 +85,10 @@ function initState() {
 }
 
 function togglePlayback() {
-	if (sound.paused) {
-		sound.play();
+	if (audioPlayer.paused) {
+		audioPlayer.play();
 	} else {
-		sound.pause();
+		audioPlayer.pause();
 	}
 }
 
@@ -112,38 +112,38 @@ function playSong(id) {
 
 	index = element.id;
 
-	sound.pause()
-	sound.src = element.href;
+	audioPlayer.pause()
+	audioPlayer.src = element.href;
 
 	setState("loading");
-	sound.load();
+	audioPlayer.load();
 
-	sound.loop = repeat;
+	audioPlayer.loop = repeat;
 	
 	element.classList.add("playing");
 
-	sound.addEventListener("canplay", function () {
-		sound.play();
+	audioPlayer.addEventListener("canplay", function () {
+		audioPlayer.play();
 	});
 
-	sound.addEventListener("play", function () {
+	audioPlayer.addEventListener("play", function () {
 		setState("playing");
 	});
 
-	sound.addEventListener("pause", function () {
+	audioPlayer.addEventListener("pause", function () {
 		setState("paused");
 	});
 
-	sound.addEventListener("error", function () {
+	audioPlayer.addEventListener("error", function () {
 		setState("error loading track");
 	});
 
-	sound.addEventListener("ended", function () {
+	audioPlayer.addEventListener("ended", function () {
 		setState("idle");
 		nextTrack();
 	});
 
-	sound.addEventListener("timeupdate", function () {
+	audioPlayer.addEventListener("timeupdate", function () {
 		updateState();
 	});
 }
@@ -151,7 +151,7 @@ function playSong(id) {
 function toggleRepeat() {
 	repeat = !repeat;
 	continuelist = !repeat;
-	sound.loop = repeat;
+	audioPlayer.loop = repeat;
 	updateState();
 }
 
@@ -164,8 +164,8 @@ function updateState() {
 	let statestr = "[";
 	statestr += gstate;
 
-	if (!sound.paused) {
-		statestr += " " + formatTime(Math.round(sound.currentTime)) + "/" + formatTime(Math.round(sound.duration));
+	if (!audioPlayer.paused) {
+		statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(audioPlayer.duration));
 	}
 
 	statestr += "]";
-- 
2.45.0


From 1cf5c13e2b330f2bb934422d09bd187fe5f190d3 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 14:10:10 +0100
Subject: [PATCH 11/30] webmusic.js: general code improvements

---
 webmusic.js | 99 ++++++++++++++++++++++++++---------------------------
 1 file changed, 48 insertions(+), 51 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 024a4d9..8f5124f 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,17 +1,11 @@
-let gstate = "idle";
-let repeat = false;
+let audioPlayer  = new Audio();
 let continuelist = true;
-let total = 0;
-let index = 0;
+let gstate       = "idle";
+let repeat       = false;
+let total        = 0;
+let index        = 0;
 
-let audioPlayer = new Audio();
-
-window.onload = function () {
-	initState();
-	updateState()
-};
-
-window.onkeyup = function (event) {
+const handleKeyEvent = (event) => {
 	switch (event.key) {
 		case " ":
 		case "p":
@@ -60,7 +54,7 @@ window.onkeyup = function (event) {
 	}
 };
 
-function initState() {
+const initState = () => {
 	const dirElements  = document.querySelectorAll(".dir");
 	const fileElements = document.querySelectorAll(".file");
 	let   id           = 0;
@@ -82,25 +76,40 @@ function initState() {
 	});
 
 	total = id;
+	updateState()
 }
 
-function togglePlayback() {
-	if (audioPlayer.paused) {
-		audioPlayer.play();
-	} else {
-		audioPlayer.pause();
-	}
-}
-
-function setState(state) {
+const setState = (state) => {
 	gstate = state;
 
 	console.log("now in state: " + state);
 	updateState();
 }
 
+const updateState = () => {
+	let statestr = "[";
+	statestr += gstate;
 
-function playSong(id) {
+	if (!audioPlayer.paused) {
+		statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(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 playSong = (id) => {
 	let element = document.getElementById(id);
 
 	if (element === null) return;
@@ -148,42 +157,27 @@ function playSong(id) {
 	});
 }
 
-function toggleRepeat() {
+const togglePlayback = () => {
+	if (audioPlayer.paused) {
+		audioPlayer.play();
+	} else {
+		audioPlayer.pause();
+	}
+}
+
+const toggleRepeat = () => {
 	repeat = !repeat;
 	continuelist = !repeat;
 	audioPlayer.loop = repeat;
 	updateState();
 }
 
-function toggleContinue() {
+const toggleContinue = () => {
 	continuelist = !continuelist;
 	updateState();
 }
 
-function updateState() {
-	let statestr = "[";
-	statestr += gstate;
-
-	if (!audioPlayer.paused) {
-		statestr += " " + formatTime(Math.round(audioPlayer.currentTime)) + "/" + formatTime(Math.round(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 + "]";
-}
-
-function previousTrack() {
+const previousTrack = () => {
 	if (index-- === 0) index = total-1;
 
 	if (document.getElementById(index).classList.contains('dir')) {
@@ -195,7 +189,7 @@ function previousTrack() {
 	}
 }
 
-function nextTrack() {
+const nextTrack = () => {
 	if (++index === total) index = 0;
 
 	if (document.getElementById(index).classList.contains('dir')) {
@@ -207,8 +201,11 @@ function nextTrack() {
 	}
 }
 
-function formatTime(secs) {
+const formatTime = (secs) => {
 	const minutes = Math.floor(secs / 60) || 0;
 	const seconds = (secs - minutes * 60) || 0;
 	return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 }
+
+document.addEventListener('DOMContentLoaded', initState);
+document.addEventListener('keydown', handleKeyEvent);
-- 
2.45.0


From 94ed0d208d93b5e76097ef261f119295421ba974 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:01:24 +0100
Subject: [PATCH 12/30] webmusic.js: refactor continuous- and repeat-button
 handling

---
 webmusic.js | 53 ++++++++++++++++++++++++++++++-----------------------
 1 file 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;
-- 
2.45.0


From 05ff2feabfb411544ebb44fa88b1ca71fe80b478 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:06:56 +0100
Subject: [PATCH 13/30] needed changes on template and css to make previous
 commit work

---
 Pages/Index.cshtml | 2 +-
 webmusic.css       | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
index 6c3fefe..8ab2249 100644
--- a/Pages/Index.cshtml
+++ b/Pages/Index.cshtml
@@ -13,7 +13,7 @@
 }
 else {
 	<h2>
-		@Model.Displaypath <span id="state"></span> <span id="flags"></span>
+		@Model.Displaypath <span id="state"></span> <span id="flags">[<span id="repeatButton">R</span><span id="continuousButton">C</span>]</span>
 	</h2>
 	<a class="action-muted">[..]</a>
 	<a href="?@Model.PathOneup" id="back" class="entry-muted cfont"> Go back</a>
diff --git a/webmusic.css b/webmusic.css
index 4b63880..9694d2b 100644
--- a/webmusic.css
+++ b/webmusic.css
@@ -45,3 +45,7 @@ h2, h2 a {
 li {
     list-style: none;
 }
+
+#state, #repeatButton, #continuousButton {
+  cursor: pointer;
+}
\ No newline at end of file
-- 
2.45.0


From b76f8c4af3ab1f07bbd11907a2ce56b6946c4689 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:08:00 +0100
Subject: [PATCH 14/30] webmusic.css: replaced spaces with tabs

---
 webmusic.css | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/webmusic.css b/webmusic.css
index 9694d2b..28627a9 100644
--- a/webmusic.css
+++ b/webmusic.css
@@ -1,51 +1,51 @@
 body {
-    background-color: #161616;
+	background-color: #161616;
 }
 
 h2, h2 a {
-    font-family: 'Inconsolata', 'monospace';
-    font-size: 11pt;
-    color: #afafaf;
-    margin-top: 6px;
-    margin-bottom: 2px;
+	font-family: 'Inconsolata', 'monospace';
+	font-size: 11pt;
+	color: #afafaf;
+	margin-top: 6px;
+	margin-bottom: 2px;
 }
 
 #container, a {
-    font-family: 'Ubuntu Mono', 'monospace';
-    font-size: 11pt;
-    color: #d8c18c;
-    text-decoration: none;
-    margin-top: 3px;
-    margin-bottom: 3px;
+	font-family: 'Ubuntu Mono', 'monospace';
+	font-size: 11pt;
+	color: #d8c18c;
+	text-decoration: none;
+	margin-top: 3px;
+	margin-bottom: 3px;
 }
 
 .playing {
-    color: #6b9969;
+	color: #6b9969;
 }
 
 .entry-muted {
-    color: #d88777;
+	color: #d88777;
 }
 
 .action {
-    font-size: 10pt;
-    color: #cc7851;
+	font-size: 10pt;
+	color: #cc7851;
 }
 
 .action-muted {
-    font-size: 10pt;
-    color: #e5e5e5;
+	font-size: 10pt;
+	color: #e5e5e5;
 }
 
 #container {
-    margin-left: 10%;
-    margin-right: 10%;
+	margin-left: 10%;
+	margin-right: 10%;
 }
 
 li {
-    list-style: none;
+	list-style: none;
 }
 
 #state, #repeatButton, #continuousButton {
-  cursor: pointer;
+	cursor: pointer;
 }
\ No newline at end of file
-- 
2.45.0


From edd16ecb2481201a1299bd0caa71e26bb099ff43 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:16:55 +0100
Subject: [PATCH 15/30] webmusic.js: renamed setState to setPlayerState and
 updateState to updatePlayerState

---
 webmusic.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index c6d572e..7f95891 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -78,18 +78,18 @@ const initState = () => {
 	});
 
 	total = id;
-	updateState();
+	updatePlayerState();
 	updateButtonState();
 }
 
-const setState = (state) => {
+const setPlayerState = (state) => {
 	gstate = state;
 
 	console.log("now in state: " + state);
-	updateState();
+	updatePlayerState();
 }
 
-const updateState = () => {
+const updatePlayerState = () => {
 	let statestr = "[" + gstate;
 
 	if (!audioPlayer.paused) {
@@ -130,7 +130,7 @@ const playSong = (id) => {
 	audioPlayer.pause()
 	audioPlayer.src = element.href;
 
-	setState("loading");
+	setPlayerState("loading");
 	audioPlayer.load();
 
 	audioPlayer.loop = repeat;
@@ -142,24 +142,24 @@ const playSong = (id) => {
 	});
 
 	audioPlayer.addEventListener("play", function () {
-		setState("playing");
+		setPlayerState("playing");
 	});
 
 	audioPlayer.addEventListener("pause", function () {
-		setState("paused");
+		setPlayerState("paused");
 	});
 
 	audioPlayer.addEventListener("error", function () {
-		setState("error loading track");
+		setPlayerState("error loading track");
 	});
 
 	audioPlayer.addEventListener("ended", function () {
-		setState("idle");
+		setPlayerState("idle");
 		nextTrack();
 	});
 
 	audioPlayer.addEventListener("timeupdate", function () {
-		updateState();
+		updatePlayerState();
 	});
 }
 
-- 
2.45.0


From cef0e6b6256cb397e951c7b6a763ab48cc66f6d7 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:22:50 +0100
Subject: [PATCH 16/30] webmusic.js: renamed gstate to playerState

---
 webmusic.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 7f95891..87fe032 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,7 +1,7 @@
 let audioPlayer  = new Audio();
+let playerState  = "idle";
 let continuous   = true;
 let repeat       = false;
-let gstate       = "idle";
 let total        = 0;
 let index        = 0;
 
@@ -9,7 +9,7 @@ const handleKeyEvent = (event) => {
 	switch (event.key) {
 		case " ":
 		case "p":
-			if (gstate == "idle" && total !== 0) {
+			if (playerState == "idle" && total !== 0) {
 				if (document.getElementById(index).classList.contains('dir')) {
 					return nextTrack();
 				}
@@ -83,14 +83,14 @@ const initState = () => {
 }
 
 const setPlayerState = (state) => {
-	gstate = state;
+	playerState = state;
 
 	console.log("now in state: " + state);
 	updatePlayerState();
 }
 
 const updatePlayerState = () => {
-	let statestr = "[" + gstate;
+	let statestr = "[" + playerState;
 
 	if (!audioPlayer.paused) {
 		statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration);
-- 
2.45.0


From 4b6e69d4c128337f834003187753ed2dd6cd7811 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 15:47:48 +0100
Subject: [PATCH 17/30] webmusic.js: bind to audioplayer-events just once

---
 webmusic.js | 53 +++++++++++++++++++++++++++--------------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 87fe032..5e8f819 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -63,6 +63,32 @@ const initState = () => {
 	document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
 	document.getElementById("continuousButton").addEventListener("click", toggleContinue)
 
+	audioPlayer.addEventListener("canplay", function () {
+		audioPlayer.play();
+	});
+
+	audioPlayer.addEventListener("play", function () {
+		setPlayerState("playing");
+	});
+
+	audioPlayer.addEventListener("pause", function () {
+		setPlayerState("paused");
+	});
+
+	audioPlayer.addEventListener("error", function () {
+		setPlayerState("error loading track");
+	});
+
+	audioPlayer.addEventListener("ended", function () {
+		console.log("end track: " + index);
+		setPlayerState("idle");
+		nextTrack();
+	});
+
+	audioPlayer.addEventListener("timeupdate", function () {
+		updatePlayerState();
+	});
+
 	dirElements.forEach(function(element){
 		element.id = id++;
 	});
@@ -116,6 +142,7 @@ const updateButtonState = () => {
 
 
 const playSong = (id) => {
+	console.log("track id:" +id)
 	let element = document.getElementById(id);
 
 	if (element === null) return;
@@ -131,36 +158,10 @@ const playSong = (id) => {
 	audioPlayer.src = element.href;
 
 	setPlayerState("loading");
-	audioPlayer.load();
 
 	audioPlayer.loop = repeat;
 	
 	element.classList.add("playing");
-
-	audioPlayer.addEventListener("canplay", function () {
-		audioPlayer.play();
-	});
-
-	audioPlayer.addEventListener("play", function () {
-		setPlayerState("playing");
-	});
-
-	audioPlayer.addEventListener("pause", function () {
-		setPlayerState("paused");
-	});
-
-	audioPlayer.addEventListener("error", function () {
-		setPlayerState("error loading track");
-	});
-
-	audioPlayer.addEventListener("ended", function () {
-		setPlayerState("idle");
-		nextTrack();
-	});
-
-	audioPlayer.addEventListener("timeupdate", function () {
-		updatePlayerState();
-	});
 }
 
 const togglePlayback = () => {
-- 
2.45.0


From 155e7c1bbba673260be1007c215e72d98c8f4e5c Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 16:10:01 +0100
Subject: [PATCH 18/30] webmusic.js: removed debug prints, better player
 handling

---
 webmusic.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 5e8f819..ef1ab48 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -80,7 +80,6 @@ const initState = () => {
 	});
 
 	audioPlayer.addEventListener("ended", function () {
-		console.log("end track: " + index);
 		setPlayerState("idle");
 		nextTrack();
 	});
@@ -142,7 +141,6 @@ const updateButtonState = () => {
 
 
 const playSong = (id) => {
-	console.log("track id:" +id)
 	let element = document.getElementById(id);
 
 	if (element === null) return;
@@ -155,11 +153,11 @@ const playSong = (id) => {
 	index = element.id;
 
 	audioPlayer.pause()
+
 	audioPlayer.src = element.href;
 
 	setPlayerState("loading");
-
-	audioPlayer.loop = repeat;
+	audioPlayer.load();
 	
 	element.classList.add("playing");
 }
@@ -185,27 +183,25 @@ const toggleContinue = () => {
 }
 
 const previousTrack = () => {
+	if (!continuous) return;
 	if (index-- === 0) index = total-1;
 
 	if (document.getElementById(index).classList.contains('dir')) {
 		return previousTrack();
 	}
 
-	if (continuous) {
-		playSong(index)
-	}
+	playSong(index);
 }
 
 const nextTrack = () => {
+	if (!continuous) return;
 	if (++index === total) index = 0;
 
 	if (document.getElementById(index).classList.contains('dir')) {
 		return nextTrack();
 	}
 
-	if (continuous) {
-		playSong(index)
-	}
+	playSong(index);
 }
 
 const formatTime = (secs) => {
-- 
2.45.0


From 6d0e9c999d6881183019f2b9a3ef2b22674d09a2 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 16:38:28 +0100
Subject: [PATCH 19/30] webmusic.js: navigating through files/folders with
 arrowkeys/enter

---
 webmusic.js | 47 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index ef1ab48..877e3d2 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,20 +1,21 @@
 let audioPlayer  = new Audio();
+let selectedItem = 0;
+let playingItem  = 0;
 let playerState  = "idle";
 let continuous   = true;
 let repeat       = false;
 let total        = 0;
-let index        = 0;
 
 const handleKeyEvent = (event) => {
 	switch (event.key) {
 		case " ":
 		case "p":
 			if (playerState == "idle" && total !== 0) {
-				if (document.getElementById(index).classList.contains('dir')) {
+				if (document.getElementById(playingItem).classList.contains('dir')) {
 					return nextTrack();
 				}
 
-				playSong(index)
+				playSong(playingItem)
 			} else {
 				togglePlayback();
 			}
@@ -29,11 +30,11 @@ const handleKeyEvent = (event) => {
 			break;
 
 		case "ArrowUp":
-			previousTrack();
+			selectPreviousItem();
 			break;
 
 		case "ArrowDown":
-			nextTrack();
+			selectNextItem();
 			break;
 
 		case "ArrowLeft":
@@ -48,6 +49,10 @@ const handleKeyEvent = (event) => {
 			audioPlayer.currentTime = audioPlayer.currentTime+10;
 			break;
 
+		case "Enter":
+			document.getElementById(selectedItem).click()
+			break;
+
 		case "Escape":
 			document.getElementById("back").click();
 			break;
@@ -150,7 +155,7 @@ const playSong = (id) => {
 		document.getElementsByClassName("playing")[0].classList.remove("playing");
 	}
 
-	index = element.id;
+	playingItem = element.id;
 
 	audioPlayer.pause()
 
@@ -184,24 +189,42 @@ const toggleContinue = () => {
 
 const previousTrack = () => {
 	if (!continuous) return;
-	if (index-- === 0) index = total-1;
+	if (playingItem-- === 0) playingItem = total-1;
 
-	if (document.getElementById(index).classList.contains('dir')) {
+	if (document.getElementById(playingItem).classList.contains('dir')) {
 		return previousTrack();
 	}
 
-	playSong(index);
+	playSong(playingItem);
 }
 
 const nextTrack = () => {
 	if (!continuous) return;
-	if (++index === total) index = 0;
+	if (++playingItem === total) playingItem = 0;
 
-	if (document.getElementById(index).classList.contains('dir')) {
+	if (document.getElementById(playingItem).classList.contains('dir')) {
 		return nextTrack();
 	}
 
-	playSong(index);
+	playSong(playingItem);
+}
+
+const selectPreviousItem = () => {
+	if (selectedItem-- === 0) selectedItem = total-1;
+	updateSelectedItem();
+}
+
+const selectNextItem = () => {
+	if (++selectedItem === total) selectedItem = 0;
+	updateSelectedItem();
+}
+
+const updateSelectedItem = () => {
+	if (document.getElementsByClassName("selected").length > 0) {
+		document.getElementsByClassName("selected")[0].classList.remove("selected");
+	}
+
+	document.getElementById(selectedItem).classList.add('selected');
 }
 
 const formatTime = (secs) => {
-- 
2.45.0


From e5ea274135aaf77897bfe85d2465d5762cfdf32c Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 16:44:27 +0100
Subject: [PATCH 20/30] webmusic.js: use classes for buttons

---
 webmusic.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 877e3d2..0507a4d 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -132,15 +132,15 @@ const updatePlayerState = () => {
 
 const updateButtonState = () => {
 	if (repeat !== false) {
-		document.getElementById('repeatButton').style.color = '#6b9969';
+		document.getElementById('repeatButton').classList.add('active');
 	} else {
-		document.getElementById('repeatButton').style.color = null;
+		document.getElementById('repeatButton').classList.remove('active');
 	}
 
 	if (continuous !== false) {
-		document.getElementById('continuousButton').style.color = '#6b9969';
+		document.getElementById('continuousButton').classList.add('active');
 	} else {
-		document.getElementById('continuousButton').style.color = null;
+		document.getElementById('continuousButton').classList.remove('active');
 	}
 }
 
-- 
2.45.0


From 0d789a5e11a9a614c8b1209df0006b02e45bf024 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 16:48:09 +0100
Subject: [PATCH 21/30] webmusic.js: add classes needed for previous 2 commits

---
 webmusic.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webmusic.css b/webmusic.css
index 28627a9..652b821 100644
--- a/webmusic.css
+++ b/webmusic.css
@@ -19,7 +19,7 @@ h2, h2 a {
 	margin-bottom: 3px;
 }
 
-.playing {
+.playing, .active {
 	color: #6b9969;
 }
 
@@ -48,4 +48,8 @@ li {
 
 #state, #repeatButton, #continuousButton {
 	cursor: pointer;
-}
\ No newline at end of file
+}
+
+.selected {
+	color: #8cd8cd;
+}
-- 
2.45.0


From faeb30325ff559761570608ed78682f85ad2edcb Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 16:57:36 +0100
Subject: [PATCH 22/30] webmusic.js: use strict mode

---
 webmusic.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webmusic.js b/webmusic.js
index 0507a4d..e290c80 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,3 +1,5 @@
+'use strict';
+
 let audioPlayer  = new Audio();
 let selectedItem = 0;
 let playingItem  = 0;
-- 
2.45.0


From b59a5633f0155c89db06684b79475d4dfc992057 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 17:03:52 +0100
Subject: [PATCH 23/30] webmusic.js: use const for audioplayer and variable
 element in function playSong

---
 webmusic.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index e290c80..165dbdc 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -1,12 +1,12 @@
 'use strict';
 
-let audioPlayer  = new Audio();
-let selectedItem = 0;
-let playingItem  = 0;
-let playerState  = "idle";
-let continuous   = true;
-let repeat       = false;
-let total        = 0;
+const audioPlayer  = new Audio();
+let   selectedItem = 0;
+let   playingItem  = 0;
+let   playerState  = "idle";
+let   continuous   = true;
+let   repeat       = false;
+let   total        = 0;
 
 const handleKeyEvent = (event) => {
 	switch (event.key) {
@@ -148,7 +148,7 @@ const updateButtonState = () => {
 
 
 const playSong = (id) => {
-	let element = document.getElementById(id);
+	const element = document.getElementById(id);
 
 	if (element === null) return;
 	if (element.classList.contains('dir')) return;
-- 
2.45.0


From db8b55cadc667d5f73f356a9076b8da923bc716a Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 17:06:50 +0100
Subject: [PATCH 24/30] webmusic.js: use arrow functions everywhere

---
 webmusic.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 165dbdc..3da097c 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -70,39 +70,39 @@ const initState = () => {
 	document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
 	document.getElementById("continuousButton").addEventListener("click", toggleContinue)
 
-	audioPlayer.addEventListener("canplay", function () {
+	audioPlayer.addEventListener("canplay", () => {
 		audioPlayer.play();
 	});
 
-	audioPlayer.addEventListener("play", function () {
+	audioPlayer.addEventListener("play", () => {
 		setPlayerState("playing");
 	});
 
-	audioPlayer.addEventListener("pause", function () {
+	audioPlayer.addEventListener("pause", () => {
 		setPlayerState("paused");
 	});
 
-	audioPlayer.addEventListener("error", function () {
+	audioPlayer.addEventListener("error", () => {
 		setPlayerState("error loading track");
 	});
 
-	audioPlayer.addEventListener("ended", function () {
+	audioPlayer.addEventListener("ended", () => {
 		setPlayerState("idle");
 		nextTrack();
 	});
 
-	audioPlayer.addEventListener("timeupdate", function () {
+	audioPlayer.addEventListener("timeupdate", () => {
 		updatePlayerState();
 	});
 
-	dirElements.forEach(function(element){
+	dirElements.forEach((element) => {
 		element.id = id++;
 	});
 
-	fileElements.forEach(function(element){
+	fileElements.forEach((element) => {
 		element.id = id++;
 
-		element.addEventListener("click", function(event) {
+		element.addEventListener("click", (event) => {
 			event.preventDefault();
 			event.stopPropagation();
 			playSong(event.target.id);
-- 
2.45.0


From d9bed3ac47d83678b1e40ecb5ab42a07d76586fe Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sun, 7 Mar 2021 17:10:18 +0100
Subject: [PATCH 25/30] webmusic.js: use single quotes everywhere

---
 webmusic.js | 80 ++++++++++++++++++++++++++---------------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index 3da097c..ba6bff6 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -3,16 +3,16 @@
 const audioPlayer  = new Audio();
 let   selectedItem = 0;
 let   playingItem  = 0;
-let   playerState  = "idle";
+let   playerState  = 'idle';
 let   continuous   = true;
 let   repeat       = false;
 let   total        = 0;
 
 const handleKeyEvent = (event) => {
 	switch (event.key) {
-		case " ":
-		case "p":
-			if (playerState == "idle" && total !== 0) {
+		case ' ':
+		case 'p':
+			if (playerState == 'idle' && total !== 0) {
 				if (document.getElementById(playingItem).classList.contains('dir')) {
 					return nextTrack();
 				}
@@ -23,23 +23,23 @@ const handleKeyEvent = (event) => {
 			}
 			break;
 
-		case "r":
+		case 'r':
 			toggleRepeat();
 			break;
 
-		case "c":
+		case 'c':
 			toggleContinue();
 			break;
 
-		case "ArrowUp":
+		case 'ArrowUp':
 			selectPreviousItem();
 			break;
 
-		case "ArrowDown":
+		case 'ArrowDown':
 			selectNextItem();
 			break;
 
-		case "ArrowLeft":
+		case 'ArrowLeft':
 			if (audioPlayer.currentTime < 10) {
 				audioPlayer.currentTime = 0;
 			} else {
@@ -47,51 +47,51 @@ const handleKeyEvent = (event) => {
 			}
 			break;
 
-		case "ArrowRight":
+		case 'ArrowRight':
 			audioPlayer.currentTime = audioPlayer.currentTime+10;
 			break;
 
-		case "Enter":
+		case 'Enter':
 			document.getElementById(selectedItem).click()
 			break;
 
-		case "Escape":
-			document.getElementById("back").click();
+		case 'Escape':
+			document.getElementById('back').click();
 			break;
 	}
 };
 
 const initState = () => {
-	const dirElements  = document.querySelectorAll(".dir");
-	const fileElements = document.querySelectorAll(".file");
+	const dirElements  = document.querySelectorAll('.dir');
+	const fileElements = document.querySelectorAll('.file');
 	let   id           = 0;
 
-	document.getElementById("state").addEventListener("click", togglePlayback)
-	document.getElementById("repeatButton").addEventListener("click", toggleRepeat)
-	document.getElementById("continuousButton").addEventListener("click", toggleContinue)
+	document.getElementById('state').addEventListener('click', togglePlayback)
+	document.getElementById('repeatButton').addEventListener('click', toggleRepeat)
+	document.getElementById('continuousButton').addEventListener('click', toggleContinue)
 
-	audioPlayer.addEventListener("canplay", () => {
+	audioPlayer.addEventListener('canplay', () => {
 		audioPlayer.play();
 	});
 
-	audioPlayer.addEventListener("play", () => {
-		setPlayerState("playing");
+	audioPlayer.addEventListener('play', () => {
+		setPlayerState('playing');
 	});
 
-	audioPlayer.addEventListener("pause", () => {
-		setPlayerState("paused");
+	audioPlayer.addEventListener('pause', () => {
+		setPlayerState('paused');
 	});
 
-	audioPlayer.addEventListener("error", () => {
-		setPlayerState("error loading track");
+	audioPlayer.addEventListener('error', () => {
+		setPlayerState('error loading track');
 	});
 
-	audioPlayer.addEventListener("ended", () => {
-		setPlayerState("idle");
+	audioPlayer.addEventListener('ended', () => {
+		setPlayerState('idle');
 		nextTrack();
 	});
 
-	audioPlayer.addEventListener("timeupdate", () => {
+	audioPlayer.addEventListener('timeupdate', () => {
 		updatePlayerState();
 	});
 
@@ -102,7 +102,7 @@ const initState = () => {
 	fileElements.forEach((element) => {
 		element.id = id++;
 
-		element.addEventListener("click", (event) => {
+		element.addEventListener('click', (event) => {
 			event.preventDefault();
 			event.stopPropagation();
 			playSong(event.target.id);
@@ -117,19 +117,19 @@ const initState = () => {
 const setPlayerState = (state) => {
 	playerState = state;
 
-	console.log("now in state: " + state);
+	console.log('now in state: ' + state);
 	updatePlayerState();
 }
 
 const updatePlayerState = () => {
-	let statestr = "[" + playerState;
+	let statestr = '[' + playerState;
 
 	if (!audioPlayer.paused) {
-		statestr += " " + formatTime(audioPlayer.currentTime) + "/" + formatTime(audioPlayer.duration);
+		statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration);
 	}
 
-	statestr += "]";
-	document.getElementById("state").innerHTML = statestr;
+	statestr += ']';
+	document.getElementById('state').innerHTML = statestr;
 }
 
 const updateButtonState = () => {
@@ -153,8 +153,8 @@ const playSong = (id) => {
 	if (element === null) return;
 	if (element.classList.contains('dir')) return;
 
-	if (document.getElementsByClassName("playing").length > 0) {
-		document.getElementsByClassName("playing")[0].classList.remove("playing");
+	if (document.getElementsByClassName('playing').length > 0) {
+		document.getElementsByClassName('playing')[0].classList.remove('playing');
 	}
 
 	playingItem = element.id;
@@ -163,10 +163,10 @@ const playSong = (id) => {
 
 	audioPlayer.src = element.href;
 
-	setPlayerState("loading");
+	setPlayerState('loading');
 	audioPlayer.load();
 	
-	element.classList.add("playing");
+	element.classList.add('playing');
 }
 
 const togglePlayback = () => {
@@ -222,8 +222,8 @@ const selectNextItem = () => {
 }
 
 const updateSelectedItem = () => {
-	if (document.getElementsByClassName("selected").length > 0) {
-		document.getElementsByClassName("selected")[0].classList.remove("selected");
+	if (document.getElementsByClassName('selected').length > 0) {
+		document.getElementsByClassName('selected')[0].classList.remove('selected');
 	}
 
 	document.getElementById(selectedItem).classList.add('selected');
-- 
2.45.0


From acac39a90c4a9978176d1356489efd07dc412dc3 Mon Sep 17 00:00:00 2001
From: Isabelle <hi@f2k1.de>
Date: Sun, 7 Mar 2021 17:44:27 +0100
Subject: [PATCH 26/30] webmusic.js: seeking in track with number keys

---
 webmusic.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/webmusic.js b/webmusic.js
index ba6bff6..931fbc5 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -58,6 +58,20 @@ const handleKeyEvent = (event) => {
 		case 'Escape':
 			document.getElementById('back').click();
 			break;
+
+		case '0':
+		case '1':
+		case '2':
+		case '3':
+		case '4':
+		case '5':
+		case '6':
+		case '7':
+		case '8':
+		case '9':
+			audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
+			break;
+
 	}
 };
 
-- 
2.45.0


From 6a8708bcf8b8e26849e67cd42c5b3f61f35e85ce Mon Sep 17 00:00:00 2001
From: Isabelle <hi@f2k1.de>
Date: Sun, 7 Mar 2021 17:51:43 +0100
Subject: [PATCH 27/30] webmusic.js: ignore keyboard controls if ctrl or alt is
 pressed

---
 webmusic.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webmusic.js b/webmusic.js
index 931fbc5..ab1cce6 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -9,6 +9,7 @@ let   repeat       = false;
 let   total        = 0;
 
 const handleKeyEvent = (event) => {
+	if (event.ctrlKey === true || event.altKey === true) return;
 	switch (event.key) {
 		case ' ':
 		case 'p':
-- 
2.45.0


From bb01d955aff666c4efcfe1650e33b2d624e9a46a Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Mon, 8 Mar 2021 13:35:03 +0100
Subject: [PATCH 28/30] webmusic.js: hide selector when track selected

---
 webmusic.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/webmusic.js b/webmusic.js
index ab1cce6..4a6b356 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -161,7 +161,6 @@ const updateButtonState = () => {
 	}
 }
 
-
 const playSong = (id) => {
 	const element = document.getElementById(id);
 
@@ -172,16 +171,19 @@ const playSong = (id) => {
 		document.getElementsByClassName('playing')[0].classList.remove('playing');
 	}
 
-	playingItem = element.id;
+	if (document.getElementsByClassName('selected').length > 0) {
+		document.getElementsByClassName('selected')[0].classList.remove('selected');
+	}
 
 	audioPlayer.pause()
 
+	playingItem = element.id;
+	element.classList.add('playing');
+
 	audioPlayer.src = element.href;
 
 	setPlayerState('loading');
 	audioPlayer.load();
-	
-	element.classList.add('playing');
 }
 
 const togglePlayback = () => {
-- 
2.45.0


From 7d750777eceff1fc01cc2d25df89af3f07cdd4aa Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Mon, 8 Mar 2021 14:05:17 +0100
Subject: [PATCH 29/30] webmusic.js: check for playable content

---
 webmusic.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webmusic.js b/webmusic.js
index 4a6b356..05f4d57 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -7,12 +7,14 @@ let   playerState  = 'idle';
 let   continuous   = true;
 let   repeat       = false;
 let   total        = 0;
+let   onlyDirs     = true;
 
 const handleKeyEvent = (event) => {
 	if (event.ctrlKey === true || event.altKey === true) return;
 	switch (event.key) {
 		case ' ':
 		case 'p':
+			if (onlyDirs !== false) return;
 			if (playerState == 'idle' && total !== 0) {
 				if (document.getElementById(playingItem).classList.contains('dir')) {
 					return nextTrack();
@@ -72,7 +74,6 @@ const handleKeyEvent = (event) => {
 		case '9':
 			audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
 			break;
-
 	}
 };
 
@@ -116,6 +117,7 @@ const initState = () => {
 
 	fileElements.forEach((element) => {
 		element.id = id++;
+		onlyDirs   = false;
 
 		element.addEventListener('click', (event) => {
 			event.preventDefault();
-- 
2.45.0


From ab04b91bff22f9e206e91bf574ec87842c0b0e2c Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Sat, 13 Mar 2021 02:07:57 +0100
Subject: [PATCH 30/30] webmusic.js: prevent default action for keydown events

---
 webmusic.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webmusic.js b/webmusic.js
index 05f4d57..2d8a203 100644
--- a/webmusic.js
+++ b/webmusic.js
@@ -11,6 +11,9 @@ let   onlyDirs     = true;
 
 const handleKeyEvent = (event) => {
 	if (event.ctrlKey === true || event.altKey === true) return;
+	event.preventDefault();
+	event.stopPropagation();
+
 	switch (event.key) {
 		case ' ':
 		case 'p':
-- 
2.45.0