major redesign and refactor

+ centralized urls
+ reduce max app width
+ bump up header height to 23rem

src/composables/fetch/album.ts

@@ -1,18 +1,23 @@
+import { paths } from "@/config";
 import state from "../state";
 import { AlbumInfo, Track } from "../../interfaces";
 import useAxios from "./useAxios";
 import { NotifType, useNotifStore } from "@/stores/notification";
 
-const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
-  const url = state.settings.uri + "/album";
+const {
+  album: albumUrl,
+  albumartists: albumArtistsUrl,
+  albumbio: albumBioUrl
+} = paths.api
 
+const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
   interface AlbumData {
     info: AlbumInfo;
     tracks: Track[];
   }
 
   const { data, status } = await useAxios({
-    url,
+    url: albumUrl,
     props: {
       hash: hash,
     },
@@ -31,7 +36,7 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
 
 const getAlbumArtists = async (hash: string) => {
   const { data, error } = await useAxios({
-    url: state.settings.uri + "/album/artists",
+    url: albumArtistsUrl,
     props: {
       hash: hash,
     },
@@ -46,7 +51,7 @@ const getAlbumArtists = async (hash: string) => {
 
 const getAlbumBio = async (hash: string) => {
   const { data, status } = await useAxios({
-    url: state.settings.uri + "/album/bio",
+    url: albumBioUrl,
     props: {
       hash: hash,
     },

src/composables/fetch/folders.ts

@@ -1,5 +1,5 @@
+import { paths } from "@/config";
 import { Folder, Track } from "@/interfaces";
-import state from "../state";
 import useAxios from "./useAxios";
 
 export default async function (path: string) {
@@ -9,7 +9,7 @@ export default async function (path: string) {
   }
 
   const { data, error } = await useAxios({
-    url: `${state.settings.uri}/folder`,
+    url: paths.api.folder,
     props: {
       folder: path,
     },

src/composables/fetch/playlists.ts

@@ -1,15 +1,24 @@
+import { paths } from "@/config";
 import { Artist } from "../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";
 import useAxios from "./useAxios";
+
+const {
+  new: newPlaylistUrl,
+  all: allPlaylistsUrl,
+  base: basePlaylistUrl,
+  artists: playlistArtistsUrl
+} = paths.api.playlist;
+
 /**
  * Creates a new playlist on the server.
  * @param playlist_name The name of the playlist to create.
  */
 async function createNewPlaylist(playlist_name: string, track?: Track) {
   const { data, status } = await useAxios({
-    url: state.settings.uri + "/playlist/new",
+    url: newPlaylistUrl,
     props: {
       name: playlist_name,
     },
@@ -44,7 +53,7 @@ async function createNewPlaylist(playlist_name: string, track?: Track) {
  */
 async function getAllPlaylists(): Promise<Playlist[]> {
   const { data, error } = await useAxios({
-    url: state.settings.uri + "/playlists",
+    url: allPlaylistsUrl,
     get: true,
   });
 
@@ -58,7 +67,7 @@ async function getAllPlaylists(): Promise<Playlist[]> {
 }
 
 async function addTrackToPlaylist(playlist: Playlist, track: Track) {
-  const uri = `${state.settings.uri}/playlist/${playlist.playlistid}/add`;
+  const uri = `${basePlaylistUrl}/${playlist.playlistid}/add`;
 
   const { status } = await useAxios({
     url: uri,
@@ -76,7 +85,7 @@ async function addTrackToPlaylist(playlist: Playlist, track: Track) {
 }
 
 async function getPlaylist(pid: string) {
-  const uri = state.settings.uri + "/playlist/" + pid;
+  const uri = `${basePlaylistUrl}/${pid}`;
 
   interface PlaylistData {
     info: Playlist;
@@ -100,7 +109,7 @@ async function getPlaylist(pid: string) {
 }
 
 async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
-  const uri = state.settings.uri + "/playlist/" + pid + "/update";
+  const uri = `${basePlaylistUrl}/${pid}/update`;
 
   const { data, error } = await useAxios({
     url: uri,
@@ -127,10 +136,8 @@ async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
  * @returns {Promise<Artist[]>} A promise that resolves to an array of artists.
  */
 export async function getPlaylistArtists(pid: string): Promise<Artist[]> {
-  const uri = state.settings.uri + "/playlist/artists";
-
   const { data, error } = await useAxios({
-    url: uri,
+    url: playlistArtistsUrl,
     props: {
       pid: pid,
     },

src/composables/fetch/searchMusic.ts

@@ -1,14 +1,14 @@
+import { paths } from "@/config";
 import state from "../state";
 import axios from "axios";
 import useAxios from "./useAxios";
 
-const base_url = `${state.settings.uri}/search`;
-
-const uris = {
-  tracks: `${base_url}/tracks?q=`,
-  albums: `${base_url}/albums?q=`,
-  artists: `${base_url}/artists?q=`,
-};
+const {
+  tracks: searchTracksUrl,
+  albums: searchAlbumsUrl,
+  artists: searchArtistsUrl,
+  load: loadMoreUrl,
+} = paths.api.search;
 
 /**
  * Fetch data from url
@@ -25,24 +25,22 @@ async function fetchData(url: string) {
 }
 
 async function searchTracks(query: string) {
-  const url = uris.tracks + encodeURIComponent(query.trim());
+  const url = searchTracksUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
 async function searchAlbums(query: string) {
-  const url = uris.albums + encodeURIComponent(query.trim());
+  const url = searchAlbumsUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
 async function searchArtists(query: string) {
-  const url = uris.artists + encodeURIComponent(query.trim());
+  const url = searchArtistsUrl + encodeURIComponent(query.trim());
   return await fetchData(url);
 }
 
-const loadmore_url = state.settings.uri + "/search/loadmore";
-
 async function loadMoreTracks(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "tracks",
       index: index,
@@ -53,7 +51,7 @@ async function loadMoreTracks(index: number) {
 }
 
 async function loadMoreAlbums(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "albums",
       index: index,
@@ -64,7 +62,7 @@ async function loadMoreAlbums(index: number) {
 }
 
 async function loadMoreArtists(index: number) {
-  const response = await axios.get(loadmore_url, {
+  const response = await axios.get(loadMoreUrl, {
     params: {
       type: "artists",
       index: index,

src/composables/fetch/useAxios.ts

@@ -1,6 +1,10 @@
 import { FetchProps } from "../../interfaces";
 import axios, { AxiosError, AxiosResponse } from "axios";
+
 import useLoaderStore from "@/stores/loader";
+import { paths } from "@/config";
+
+const url = paths.api
 
 export default async (args: FetchProps) => {
   let data: any = null;

src/composables/state.ts

@@ -1,10 +1,9 @@
 import { ref } from "@vue/reactivity";
-import { reactive } from "vue";
 
 const loading = ref(false);
-const settings = reactive({
-  uri: "http://127.0.0.1:1970",
-});
+const settings = {
+  uri: "http://10.5.8.81:1970",
+};
 
 export default {
   loading,