Bind all music player GUI

1 files changed, 55 insertions, 2 deletions

diff --git a/static/music_player.js b/static/music_player.js
index 63fa46c..85847a7 100644
--- a/static/music_player.js
+++ b/static/music_player.js
@@ -19,6 +19,10 @@ function mpFormatTime (number) {
 }
 
 function mpTick () {
+    if (audio.currentTime >= audio.duration) {
+        mpNext();
+    }
+
     let seek = document.getElementById("mp_seek_slider");
     let current = document.getElementById("mp_current_time");
     let duration = document.getElementById("mp_total_duration");
@@ -34,6 +38,13 @@ function mpTick () {
     }
 }
 
+function mpSeek () {
+    const seek = document.getElementById("mp_seek_slider");
+    const goal = audio.duration * (seek.value / 100);
+
+    audio.currentTime = goal;
+}
+
 async function mpUpdate () {
     clearInterval(tick);
 
@@ -46,6 +57,9 @@ async function mpUpdate () {
     audio.src = "/audio/get?file=" + trackName;
     audio.currentTime = 0;
 
+    let ppButton = document.getElementById("mp_pp_track");
+    ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";
+
     tick = setInterval(mpTick, 1000);
 }
 
@@ -53,8 +67,42 @@ function mpIsPlaying() {
     return !audio.paused;
 }
 
-function mpPpTrack() {
-    mpIsPlaying() ? audio.pause() : audio.play();
+function mpPpTrack () {
+    let ppButton = document.getElementById("mp_pp_track");
+
+    if (mpIsPlaying()) {
+        audio.pause();
+        ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";
+    } else {
+        audio.play();
+        ppButton.innerHTML = "<img src='/static/get?file=images/pause.svg' alt='Play'>";
+    }
+}
+
+function mpNext () {
+    let trackSelector = document.getElementById("mp_tracks");
+    const index = trackSelector.selectedIndex + 1;
+    if (index >= trackSelector.options.length) {
+        trackSelector.selectedIndex = 0;
+    } else {
+        trackSelector.selectedIndex = index;
+    }
+
+    mpUpdate();
+    mpPpTrack();
+}
+
+function mpPrevious () {
+    let trackSelector = document.getElementById("mp_tracks");
+    const index = trackSelector.selectedIndex - 1;
+    if (index < 0) {
+        trackSelector.selectedIndex = trackSelector.options.length - 1;
+    } else {
+        trackSelector.selectedIndex = index;
+    }
+
+    mpUpdate();
+    mpPpTrack();
 }
 
 const trackList = await mpFetchAsync("/audio");
@@ -68,4 +116,9 @@ trackList.forEach((track) => {
 });
 
 document.getElementById("mp_tracks").addEventListener("change", mpUpdate, false);
+document.getElementById("mp_seek_slider").addEventListener("change", mpSeek, false);
 document.getElementById("mp_pp_track").addEventListener("click", mpPpTrack, false);
+document.getElementById("mp_prev_track").addEventListener("click", mpPrevious, false);
+document.getElementById("mp_next_track").addEventListener("click", mpNext, false);
+
+mpUpdate();