zotan/webmusic
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Leah 2021-03-07 16:38:28 +01:00
parent 155e7c1bbb
commit 6d0e9c999d
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
webmusic.js
View file

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