some bug fixes

- watch route params instead of route object in folderview
- move to script setup on album view
- use album as a reactive object instead of refs
- use axios instead of fetch to get album data
- improve clickable areas on songItem
- move album requests to POST

src/composables/album.js

@@ -1,44 +1,45 @@
-let base_uri = "http://0.0.0.0:9876";
+import axios from "axios";
+import state from "./state";
 
-const getAlbumTracks = async (name, artist) => {
-  const res = await fetch(
-    base_uri +
-      "/album/" +
-      encodeURIComponent(name) + "/" +
-      encodeURIComponent(artist) +
-      "/tracks"
-  );
+const getAlbumTracks = async (album, artist) => {
+  let data = {};
 
-  if (!res.ok) {
-    const message = `An error has occurred: ${res.status}`;
-    throw new Error(message);
-  }
+  await axios
+    .post(state.settings.uri + "/album/tracks", {
+      album: album,
+      artist: artist,
+    })
+    .then((res) => {
+      data = res.data;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
 
-  return await res.json();
+  return data;
 };
 
-const getAlbumArtists = async (name, artist) => {
-  const res = await fetch(
-    base_uri +
-      "/album/" +
-      encodeURIComponent(name.replaceAll("/", "|")) +
-      "/" +
-      encodeURIComponent(artist.replaceAll("/", "|")) +
-      "/artists"
-  );
+const getAlbumArtists = async (album, artist) => {
+  let artists = [];
 
-  if (!res.ok) {
-    const message = `An error has occurred: ${res.status}`;
-    throw new Error(message);
-  }
+  await axios
+    .post(state.settings.uri + "/album/artists", {
+      album: album,
+      artist: artist,
+    })
+    .then((res) => {
+      artists = res.data.artists;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
 
-  const data = await res.json();
-  return data.artists;
+  return artists;
 };
 
 const getAlbumBio = async (name, artist) => {
   const res = await fetch(
-    base_uri +
+    state.settings.uri +
       "/album/" +
       encodeURIComponent(name.replaceAll("/", "|")) +
       "/" +

src/composables/perks.js

@@ -89,7 +89,7 @@ const updateQueue = async (song, type) => {
       list = state.folder_song_list.value;
       break;
     case "album":
-      list = state.album_song_list.value;
+      list = state.album.tracklist;
       break;
   }
 

src/composables/routeLoader.js

@@ -5,24 +5,25 @@ import state from "./state.js";
 
 async function toAlbum(title, artist) {
   console.log("routing to album");
+
   state.loading.value = true;
   await album
     .getAlbumTracks(title, artist)
     .then((data) => {
-      state.album_song_list.value = data.songs;
-      state.album_info.value = data.info;
+      state.album.tracklist = data.songs;
+      state.album.info = data.info;
     })
     .then(
       await album.getAlbumArtists(title, artist).then((data) => {
-        state.album_artists.value = data;
+        state.album.artists = data;
       })
     )
     .then(
       album.getAlbumBio(title, artist).then((data) => {
         if (data === "None") {
-          state.album_bio.value = null;
+          state.album.bio = null;
         } else {
-          state.album_bio.value = data;
+          state.album.bio = data;
         }
       })
     )

src/composables/state.js

@@ -1,4 +1,5 @@
 import { ref } from "@vue/reactivity";
+import { reactive } from "vue";
 
 const search_query = ref("");
 
@@ -33,10 +34,12 @@ const prev = ref({
   },
 });
 
-const album_song_list = ref([]);
-const album_info = ref([]);
-const album_artists = ref([]);
-const album_bio = ref("");
+const album = reactive({
+  tracklist: [],
+  info: {},
+  artists: [],
+  bio: "",
+});
 
 const filters = ref([]);
 
@@ -45,9 +48,9 @@ const loading = ref(false);
 
 const is_playing = ref(false);
 
-const search_tracks = ref([]);
-const search_albums = ref([]);
-const search_artists = ref([]);
+const settings = reactive({
+  uri: "http://0.0.0.0:9876",
+})
 
 export default {
   search_query,
@@ -60,11 +63,6 @@ export default {
   magic_flag,
   loading,
   is_playing,
-  search_tracks,
-  search_albums,
-  search_artists,
-  album_song_list,
-  album_info,
-  album_artists,
-  album_bio,
+  album,
+  settings,
 };