summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLeah (ctucx) <leah@ctu.cx>2021-03-07 16:38:28 +0100
committerLeah (ctucx) <leah@ctu.cx>2021-03-07 16:38:28 +0100
commit067eab0d226a5050d4e6205ec2d8c5f60498a08b (patch)
tree748638ab8761a23b983016690efe3af27545ee05
parenta40d6abb35e143dd2e13900a2e65a056379f8f9e (diff)
downloadwebmusic-nginx-067eab0d226a5050d4e6205ec2d8c5f60498a08b.tar.gz
webmusic-nginx-067eab0d226a5050d4e6205ec2d8c5f60498a08b.tar.bz2
webmusic-nginx-067eab0d226a5050d4e6205ec2d8c5f60498a08b.zip
webmusic.js: navigating through files/folders with arrowkeys/enter
-rw-r--r--webmusic.js47
1 files 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) => {