major refactors

- add album page store
- show loaders in beforeEnter guards
- show bitrate on now playing card
- etc

src/composables/album.js

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

src/composables/album.ts

@@ -0,0 +1,65 @@
+import axios from "axios";
+import state from "./state";
+import { AlbumInfo, Track } from "../interfaces";
+
+const getAlbumTracks = async (album: string, artist: string) => {
+  let data = {
+    info: <AlbumInfo>{},
+    tracks: <Track[]>[],
+  };
+
+  await axios
+    .post(state.settings.uri + "/album/tracks", {
+      album: album,
+      artist: artist,
+    })
+    .then((res) => {
+      data.info = res.data.info;
+      data.tracks = res.data.songs;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+
+  return data;
+};
+
+const getAlbumArtists = async (album, artist) => {
+  let artists = [];
+
+  await axios
+    .post(state.settings.uri + "/album/artists", {
+      album: album,
+      artist: artist,
+    })
+    .then((res) => {
+      artists = res.data.artists;
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+
+  return artists;
+};
+
+const getAlbumBio = async (album: string, albumartist: string) => {
+  let bio = null;
+
+  await axios
+    .post(state.settings.uri + "/album/bio", {
+      album: album,
+      albumartist: albumartist,
+    })
+    .then((res) => {
+      bio = res.data.bio;
+    })
+    .catch((err) => {
+      if (err.response.status === 404) {
+        bio = null;
+      }
+    });
+
+  return bio;
+};
+
+export { getAlbumTracks, getAlbumArtists, getAlbumBio };

src/composables/routeLoader.js

@@ -1,47 +0,0 @@
-import Router from "@/router";
-
-import album from "./album.js";
-import state from "./state";
-
-async function toAlbum(title, artist) {
-  console.log("routing to album");
-
-  state.loading.value = true;
-  await album
-    .getAlbumTracks(title, artist)
-    .then((data) => {
-      state.album.tracklist = data.songs;
-      state.album.info = data.info;
-    })
-    .then(
-      await album.getAlbumArtists(title, artist).then((data) => {
-        state.album.artists = data;
-      })
-    )
-    .then(
-      album.getAlbumBio(title, artist).then((data) => {
-        if (data === "None") {
-          state.album.bio = null;
-        } else {
-          state.album.bio = data;
-        }
-      })
-    )
-    .then(() => {
-      Router.push({
-        name: "AlbumView",
-        params: {
-          album: title,
-          artist: artist,
-        },
-      });
-      state.loading.value = false;
-    })
-    .catch((error) => {
-      console.log(error);
-    });
-}
-
-export default {
-  toAlbum,
-};