client: add progress bar

- add favourites buttons
- redirect /folder/ => /folder/home
- minor fixes

src/composables/perks.js

@@ -1,23 +1,38 @@
 import { ref } from "@vue/reactivity";
+import { watch } from "@vue/runtime-core";
 
 const current = ref({
-    title: "Nothing played yet",
-    artists: ["... blah blah blah"],
+  title: "Nothing played yet",
+  artists: ["... blah blah blah"],
+  _id: {
+    $oid: "",
+  },
 });
 
 const next = ref({
-    title: "Next song shows here",
-    artists: ["... blah blah blah"],
+  title: "The next song",
+  artists: ["... blah blah blah"],
+  _id: {
+    $oid: "",
+  },
+});
+
+const prev = ref({
+  title: "The previous song",
+  artists: ["... blah blah blah"],
+  _id: {
+    $oid: "",
+  },
 });
 
 const queue = ref([
-    {
-        title: "Nothing played yet",
-        artists: ["... blah blah blah"],
-        _id: {
-            $oid: ""
-        }
-    }
+  {
+    title: "Nothing played yet",
+    artists: ["... blah blah blah"],
+    _id: {
+      $oid: "",
+    },
+  },
 ]);
 
 const putCommas = (artists) => {
@@ -42,21 +57,40 @@ const doThat = (songs, current) => {
 };
 
 const readQueue = () => {
-    const prev_queue = JSON.parse(localStorage.getItem("queue"));
-    const last_played =  JSON.parse(localStorage.getItem("current"));
-    const next_ = JSON.parse(localStorage.getItem("next"));
+  const prev_queue = JSON.parse(localStorage.getItem("queue"));
+  const last_played = JSON.parse(localStorage.getItem("current"));
+  const next_ = JSON.parse(localStorage.getItem("next"));
 
-    if (last_played){
-        current.value = last_played;
-    }
+  if (last_played) {
+    current.value = last_played;
+  }
 
-    if (prev_queue){
-        queue.value = prev_queue;
-    }
+  if (prev_queue) {
+    queue.value = prev_queue;
+  }
 
-    if (next_){
-        next.value = next_;
-    }
-}
+  if (next_) {
+    next.value = next_;
+  }
+};
 
-export default { putCommas, doThat, readQueue, current, queue, next };
+watch(current, (new_current) => {
+  localStorage.setItem("current", JSON.stringify(new_current));
+
+  const index = queue.value.findIndex(
+    (item) => item._id.$oid === new_current._id.$oid
+  );
+
+  if (index == queue.value.length - 1) {
+    next.value = queue.value[0];
+    prev.value = queue.value[queue.value.length - 2];
+  } else if (index == 0) {
+    next.value = queue.value[1];
+    prev.value = queue.value[queue.value.length - 1];
+  } else {
+    next.value = queue.value[index + 1];
+    prev.value = queue.value[index - 1];
+  }
+});
+
+export default { putCommas, doThat, readQueue, current, queue, next, prev };

src/composables/playAudio.js

@@ -1,14 +1,44 @@
 import { ref } from "@vue/reactivity";
 
+import perks from "./perks";
+
 const audio = ref(new Audio()).value;
+const pos = ref(0);
+
+const url = "http://127.0.0.1:8901/";
 
 const playAudio = (path) => {
-  const full_path = "http://127.0.0.1:8901/" + encodeURIComponent(path);
+  const full_path = url + encodeURIComponent(path);
 
   audio.src = full_path;
-  audio.addEventListener("canplaythrough", () => {
-    audio.play();
+
+  audio.play();
+
+  audio.ontimeupdate = () => {
+    pos.value = audio.currentTime / audio.duration * 100;
+  }
+
+  audio.addEventListener("ended", () => {
+    playNext();
   });
 };
 
-export { playAudio };
+function playNext() {
+  playAudio(perks.next.value.filepath);
+  perks.current.value = perks.next.value;
+}
+
+function playPrev() {
+  playAudio(perks.prev.value.filepath);
+  perks.current.value = perks.prev.value;
+}
+
+function playPause() {
+  if (audio.paused) {
+    audio.play();
+  } else {
+    audio.pause();
+  }
+}
+
+export default { playAudio, playNext, playPrev, playPause, pos };