prevent type coercion

- remove unused imports
- minor refactors and cleanups

src/composables/album.js

@@ -10,13 +10,11 @@ const getAlbumTracks = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 
-  const data = await res.json();
-
-  return data;
+  return await res.json();
 };
 
 const getAlbumArtists = async (name, artist) => {
@@ -30,7 +28,7 @@ const getAlbumArtists = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 
@@ -49,7 +47,7 @@ const getAlbumBio = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 

src/composables/getFiles.js

@@ -1,24 +1,24 @@
 let base_uri = "http://0.0.0.0:9876";
 
 const getTracksAndDirs = async (path) => {
-  let url;
+    let url;
 
-  const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
-  url = url = `${base_uri}/f/${encoded_path}`;
+    const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
+    url = url = `${base_uri}/f/${encoded_path}`;
 
-  const res = await fetch(url);
+    const res = await fetch(url);
 
-  if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
-    throw new Error(message);
-  }
+    if (!res.ok) {
+        const message = `An error has occurred: ${res.status}`;
+        throw new Error(message);
+    }
 
-  const data = await res.json();
+    const data = await res.json();
 
-  const songs = data.files;
-  const folders = data.folders;
+    const songs = data.files;
+    const folders = data.folders;
 
-  return { songs, folders };
+    return {songs, folders};
 };
 
 export default getTracksAndDirs;

src/composables/perks.js

@@ -40,10 +40,10 @@ function updateNext(song_) {
     (item) => item.track_id === song_.track_id
   );
 
-  if (index == queue.value.length - 1) {
+  if (index === queue.value.length - 1) {
     next.value = queue.value[0];
     state.prev.value = queue.value[queue.value.length - 2];
-  } else if (index == 0) {
+  } else if (index === 0) {
     next.value = queue.value[1];
   } else {
     next.value = queue.value[index + 1];
@@ -55,9 +55,9 @@ function updatePrev(song) {
     (item) => item.track_id === song.track_id
   );
 
-  if (index == 0) {
+  if (index === 0) {
     prev.value = queue.value[queue.value.length - 1];
-  } else if (index == queue.value.length - 1) {
+  } else if (index === queue.value.length - 1) {
     prev.value = queue.value[index - 1];
   } else {
     prev.value = queue.value[index - 1];
@@ -81,7 +81,7 @@ const readQueue = () => {
 };
 
 const updateQueue = async (song, type) => {
-  playAudio.playAudio(song.filepath);
+  playAudio.playAudio(song.track_id);
   let list;
 
   switch (type) {
@@ -151,7 +151,7 @@ window.addEventListener("keydown", (e) => {
 
   switch (e.key) {
     case "ArrowRight":
-      if (target.tagName == "INPUT") return;
+      if (target.tagName === "INPUT") return;
 
       {
         if (!key_down_fired) {
@@ -169,7 +169,7 @@ window.addEventListener("keydown", (e) => {
     case "ArrowLeft":
       {
         if (!key_down_fired) {
-          if (target.tagName == "INPUT") return;
+          if (target.tagName === "INPUT") return;
 
           key_down_fired = true;
 
@@ -186,7 +186,7 @@ window.addEventListener("keydown", (e) => {
     case " ":
       {
         if (!key_down_fired) {
-          if (target.tagName == "INPUT") return;
+          if (target.tagName === "INPUT") return;
           e.preventDefault();
           key_down_fired = true;
 

src/composables/playAudio.js

@@ -1,4 +1,4 @@
-import { ref } from "@vue/reactivity";
+import {ref} from "@vue/reactivity";
 
 import perks from "./perks";
 import media from "./mediaNotification.js";
@@ -11,77 +11,77 @@ const current_time = ref(0);
 
 const playing = ref(state.is_playing);
 
-const url = "http://0.0.0.0:8901/";
+const url = "http://0.0.0.0:9876/file/";
 
-const playAudio = (path) => {
-  const elem = document.getElementsByClassName('progress-bar')[0];
-  const bottom_elem = document.getElementsByClassName('progress-bar')[1];
+const playAudio = (track_id) => {
+    const elem = document.getElementsByClassName('progress-bar')[0];
+    const bottom_elem = document.getElementsByClassName('progress-bar')[1];
 
-  const full_path = url + encodeURIComponent(path);
+    const full_path = url + encodeURIComponent(track_id);
 
-  new Promise((resolve, reject) => {
-    audio.src = full_path;
-    audio.oncanplaythrough = resolve;
-    audio.onerror = reject;
-  })
-    .then(() => {
-      audio.play();
-      perks.focusCurrent()
-
-      state.is_playing.value = true;
-
-      audio.ontimeupdate = () => {
-        current_time.value = audio.currentTime;
-        pos.value = (audio.currentTime / audio.duration) * 1000;
-        let bg_size = ((audio.currentTime / audio.duration)*100)
-
-        elem.style.backgroundSize = `${bg_size}% 100%`;
-        bottom_elem.style.backgroundSize = `${bg_size}% 100%`;
-      };
+    new Promise((resolve, reject) => {
+        audio.src = full_path;
+        audio.oncanplaythrough = resolve;
+        audio.onerror = reject;
     })
-    .catch((err) => console.log(err));
+        .then(() => {
+            audio.play().then(() => {
+                    perks.focusCurrent()
+                    state.is_playing.value = true;
+                }
+            );
+            audio.ontimeupdate = () => {
+                current_time.value = audio.currentTime;
+                pos.value = (audio.currentTime / audio.duration) * 1000;
+                let bg_size = ((audio.currentTime / audio.duration) * 100)
+
+                elem.style.backgroundSize = `${bg_size}% 100%`;
+                bottom_elem.style.backgroundSize = `${bg_size}% 100%`;
+            };
+        })
+        .catch((err) => console.log(err));
 };
 
 function playNext() {
-  playAudio(perks.next.value.filepath);
-  perks.current.value = perks.next.value;
-  media.showMediaNotif();
+    playAudio(perks.next.value.track_id);
+    perks.current.value = perks.next.value;
+    media.showMediaNotif();
 }
 
 function playPrev() {
-  playAudio(state.prev.value.filepath);
-  perks.current.value = perks.prev.value;
+    playAudio(state.prev.value.track_id);
+    perks.current.value = perks.prev.value;
 }
 
 function seek(position) {
-  audio.currentTime = (position / 1000) * audio.duration;
+    audio.currentTime = (position / 1000) * audio.duration;
 }
 
 function playPause() {
-  if (audio.src === "") {
-    playAudio(perks.current.value.filepath);
-  }
+    if (audio.src === "") {
+        playAudio(perks.current.value.filepath);
+    }
 
-  if (audio.paused) {
-    audio.play();
-  } else {
-    audio.pause();
-  }
+    if (audio.paused) {
+        audio.play();
+    } else {
+        audio.pause();
+    }
 }
 
 audio.addEventListener("play", () => {
-  state.is_playing.value = true;
+    state.is_playing.value = true;
 });
 
 audio.addEventListener("pause", () => {
-  state.is_playing.value = false;
+    state.is_playing.value = false;
 });
 
 audio.addEventListener("ended", () => {
-  playNext();
+    playNext();
 });
 
-export default { playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time };
+export default {playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time};
 
 
 // TODO

src/composables/routeLoader.js

@@ -3,41 +3,41 @@ import Router from "@/router";
 import album from "./album.js";
 import state from "./state.js";
 
-function toAlbum(title, artist) {
-  state.loading.value = true;
-  album
-    .getAlbumTracks(title, artist)
-    .then((data) => {
-      state.album_song_list.value = data.songs;
-      state.album_info.value = data.info;
-    })
-    .then(
-      album.getAlbumArtists(title, artist).then((data) => {
-        state.album_artists.value = data;
-      })
-    )
-    .then(
-      album.getAlbumBio(title, artist).then((data) => {
-        if (data == "None") {
-          state.album_bio.value = null;
-        } else {
-          state.album_bio.value = data;
-        }
-      })
-    )
-    .then(() => {
-      Router.push({
-        name: "AlbumView",
-        params: {
-          album: title,
-          artist: artist,
-        },
-      });
-      state.loading.value = false;
-    })
-    .catch((error) => {
-      console.log(error);
-    });
+async function toAlbum(title, artist) {
+    state.loading.value = true;
+    album
+        .getAlbumTracks(title, artist)
+        .then((data) => {
+            state.album_song_list.value = data.songs;
+            state.album_info.value = data.info;
+        })
+        .then(
+            await album.getAlbumArtists(title, artist).then((data) => {
+                state.album_artists.value = data;
+            })
+        )
+        .then(
+            await album.getAlbumBio(title, artist).then((data) => {
+                if (data === "None") {
+                    state.album_bio.value = null;
+                } else {
+                    state.album_bio.value = data;
+                }
+            })
+        )
+        .then(() => {
+            Router.push({
+                name: "AlbumView",
+                params: {
+                    album: title,
+                    artist: artist,
+                },
+            });
+            state.loading.value = false;
+        })
+        .catch((error) => {
+            console.log(error);
+        });
 }
 
 export default {

src/composables/useDebouncedRef.js

@@ -1,4 +1,4 @@
-import { ref, customRef } from 'vue'
+import {customRef, ref} from 'vue'
 
 const debounce = (fn, delay = 0, immediate = false) => {
   let timeout
@@ -14,21 +14,20 @@ const debounce = (fn, delay = 0, immediate = false) => {
 
 const useDebouncedRef = (initialValue, delay, immediate) => {
   const state = ref(initialValue)
-  const debouncedRef = customRef((track, trigger) => ({
+  return customRef((track, trigger) => ({
     get() {
       track()
       return state.value
     },
     set: debounce(
-      value => {
-        state.value = value
-        trigger()
-      },
-      delay,
-      immediate
+        value => {
+          state.value = value
+          trigger()
+        },
+        delay,
+        immediate
     ),
   }))
-  return debouncedRef
 }
 
 export default useDebouncedRef