summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLeah (ctucx) <leah@ctu.cx>2021-03-07 14:10:10 +0100
committerLeah (ctucx) <leah@ctu.cx>2021-03-07 14:10:10 +0100
commite90cb8b005badd455ea2262a960e1068798a7542 (patch)
tree0b3ad76221c714fa39cdfe567fba3e242a3e5dba
parent197584b7f9477155b278b7bfe8f4a0ad2db38d3c (diff)
downloadwebmusic-nginx-e90cb8b005badd455ea2262a960e1068798a7542.tar.gz
webmusic-nginx-e90cb8b005badd455ea2262a960e1068798a7542.tar.bz2
webmusic-nginx-e90cb8b005badd455ea2262a960e1068798a7542.zip
webmusic.js: general code improvements
-rw-r--r--webmusic.js99
1 files 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;
+
+ 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>';
-function playSong(id) {
+ 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);