webmusic.js: navigating through files/folders with arrowkeys/enter

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) => {