update routes

public/workers/silence.js

@@ -10,7 +10,7 @@ onmessage = async (e) => {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ end: ending_file, start: starting_file }),
+    body: JSON.stringify({ ending_file, starting_file }),
   });
 
   const data = await res.json();

src/components/BottomBar/Left.vue

@@ -101,12 +101,19 @@ defineEmits<{
       align-items: center;
       justify-content: center;
       opacity: 0;
-      transition: opacity 0.2s;
+      transition: all 0.2s;
 
       svg {
         transform: rotate(-90deg);
       }
     }
+
+    &:hover {
+      .expandicon {
+        transform: translateY(-$medium);
+        height: 130%;
+      }
+    }
   }
 
   a {

src/components/BottomBar/Right.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="right-group">
-    <LyricsButton v-if="settings.use_lyrics_plugin || lyrics.exists" />
+    <LyricsButton />
     <Volume />
     <button
       class="repeat"
@@ -32,7 +32,6 @@
 <script setup lang="ts">
 import useQueue from "@/stores/queue";
 import useSettings from "@/stores/settings";
-import useLyrics from "@/stores/lyrics";
 
 import Volume from "./Volume.vue";
 import HeartSvg from "../shared/HeartSvg.vue";
@@ -42,7 +41,6 @@ import RepeatOneSvg from "@/assets/icons/repeat-one.svg";
 import ShuffleSvg from "@/assets/icons/shuffle.svg";
 
 const queue = useQueue();
-const lyrics = useLyrics();
 const settings = useSettings();
 
 defineProps<{

src/config.ts

@@ -30,22 +30,31 @@ const imageRoutes = {
 
 export const paths = {
   api: {
-    album: base_url + "/album",
-    favorite: base_url + "/favorite",
     favorites: base_url + "/favorites",
-    favAlbums: base_url + "/albums/favorite",
-    favTracks: base_url + "/tracks/favorite",
-    favArtists: base_url + "/artists/favorite",
-    isFavorite: base_url + "/favorites/check",
+    get favAlbums() {
+      return this.favorites + "/albums";
+    },
+    get favTracks() {
+      return this.favorites + "/tracks";
+    },
+    get favArtists() {
+      return this.favorites + "/artists";
+    },
+    get isFavorite() {
+      return this.favorites + "/check";
+    },
+    get addFavorite() {
+      return this.favorites + "/add";
+    },
+    get removeFavorite() {
+      return this.favorites + "/remove";
+    },
     artist: base_url + "/artist",
     lyrics: base_url + "/lyrics",
     plugins: base_url + "/plugins",
-    get addFavorite() {
-      return this.favorite + "/add";
-    },
-    get removeFavorite() {
-      return this.favorite + "/remove";
-    },
+
+    // Single album
+    album: base_url + "/album",
     get albumartists() {
       return this.album + "/artists";
     },
@@ -56,7 +65,7 @@ export const paths = {
       return this.album + "/from-artist";
     },
     get albumVersions() {
-      return this.album + "/versions";
+      return this.album + "/other-versions";
     },
     folder: {
       base: base_url + "/folder",
@@ -64,13 +73,10 @@ export const paths = {
     },
     dir_browser: base_url + "/folder/dir-browser",
     playlist: {
-      base: base_url + "/playlist",
+      base: base_url + "/playlists",
       get new() {
         return this.base + "/new";
       },
-      get all() {
-        return this.base + "s";
-      },
       get artists() {
         return this.base + "/artists";
       },
@@ -115,7 +121,7 @@ export const paths = {
       },
     },
     settings: {
-      base: base_url + "/settings",
+      base: base_url + "/notsettings",
       get get_root_dirs() {
         return this.base + "/get-root-dirs";
       },

src/interfaces.ts

@@ -171,8 +171,7 @@ export interface subPath {
 export interface FetchProps {
   url: string;
   props?: {};
-  get?: boolean;
-  put?: boolean;
+  method?: "GET" | "POST" | "PUT" | "DELETE"
   headers?: {};
 }
 

src/requests/album.ts

@@ -1,6 +1,6 @@
 import { paths } from "@/config";
-import { NotifType, useNotifStore } from "@/stores/notification";
 import { Album, Track } from "@/interfaces";
+import { NotifType, useNotifStore } from "@/stores/notification";
 import useAxios from "./useAxios";
 
 const {
@@ -81,7 +81,7 @@ export const getAlbumsFromArtist = async (
   });
 
   if (data) {
-    return data.data;
+    return data;
   }
 
   return [];
@@ -102,7 +102,7 @@ export const getAlbumVersions = async (
   });
 
   if (data) {
-    return data.data;
+    return data;
   }
 
   return [];
@@ -111,10 +111,10 @@ export const getAlbumVersions = async (
 export async function getAlbumTracks(albumhash: string): Promise<Track[]> {
   const { data } = await useAxios({
     url: albumUrl + `/${albumhash}/` + "tracks",
-    get: true,
+    method: "GET",
   });
 
-  return data.tracks;
+  return data;
 }
 
 export async function getSimilarAlbums(
@@ -124,10 +124,10 @@ export async function getSimilarAlbums(
   const { data } = await useAxios({
     url:
       albumUrl + "/similar?" + "artisthash=" + artisthash + "&limit=" + limit,
-    get: true,
+    method: "GET",
   });
 
-  return data.albums;
+  return data;
 }
 
 export { getAlbumData as getAlbum, getAlbumArtists, getAlbumBio };

src/requests/artists.ts

@@ -11,7 +11,7 @@ export const getArtistData = async (hash: string, limit: number = 5) => {
   }
 
   const { data, error, status } = await useAxios({
-    get: true,
+    method: "GET",
     url: paths.api.artist + `/${hash}?limit=${limit}`,
   });
 
@@ -36,7 +36,7 @@ export const getArtistAlbums = async (hash: string, limit = 6, all = false) => {
   }
 
   const { data, error } = await useAxios({
-    get: true,
+    method: "GET",
     url: paths.api.artist + `/${hash}/albums?limit=${limit}&all=${all}`,
   });
 
@@ -49,7 +49,7 @@ export const getArtistAlbums = async (hash: string, limit = 6, all = false) => {
 
 export const getArtistTracks = async (hash: string) => {
   const { data, error } = await useAxios({
-    get: true,
+    method: "GET",
     url: paths.api.artist + `/${hash}/tracks`,
   });
 
@@ -57,12 +57,12 @@ export const getArtistTracks = async (hash: string) => {
     console.error(error);
   }
 
-  return data.tracks as Track[];
+  return data as Track[];
 };
 
 export const getSimilarArtists = async (hash: string, limit = 6) => {
   const { data, error } = await useAxios({
-    get: true,
+    method: "GET",
     url: paths.api.artist + `/${hash}/similar?limit=${limit}`,
   });
 
@@ -70,7 +70,7 @@ export const getSimilarArtists = async (hash: string, limit = 6) => {
     console.error(error);
   }
 
-  return data.artists as Artist[];
+  return data as Artist[];
 };
 
 export async function saveArtistAsPlaylist(name: string, hash: string) {

src/requests/colors.ts

@@ -1,12 +1,12 @@
-import useAxios from "./useAxios";
 import { paths } from "@/config";
+import useAxios from "./useAxios";
 
 export async function fetchAlbumColor(
   albumhash: string | undefined
 ): Promise<string> {
   const { data } = await useAxios({
     url: paths.api.colors.album + `/${albumhash}`,
-    get: true,
+    method: "GET",
   });
 
 

src/requests/favorite.ts

@@ -48,7 +48,7 @@ export async function getAllFavs(
     url:
       paths.api.favorites +
       `?track_limit=${track_limit}&album_limit=${album_limit}&artist_limit=${artist_limit}`,
-    get: true,
+    method: "GET",
   });
 
   return data;
@@ -57,7 +57,7 @@ export async function getAllFavs(
 export async function getFavAlbums(limit = 6) {
   const { data } = await useAxios({
     url: paths.api.favAlbums + `?limit=${limit}`,
-    get: true,
+    method: "GET",
   });
 
   return data.albums as Album[];
@@ -66,7 +66,7 @@ export async function getFavAlbums(limit = 6) {
 export async function getFavTracks(limit = 5) {
   const { data } = await useAxios({
     url: paths.api.favTracks + `?limit=${limit}`,
-    get: true,
+    method: "GET",
   });
 
   return data.tracks as Track[];
@@ -75,7 +75,7 @@ export async function getFavTracks(limit = 5) {
 export async function getFavArtists(limit = 6) {
   const { data } = await useAxios({
     url: paths.api.favArtists + `?limit=${limit}`,
-    get: true,
+    method: "GET",
   });
 
   return data.artists as Artist[];
@@ -84,7 +84,7 @@ export async function getFavArtists(limit = 6) {
 export async function isFavorite(itemhash: string, type: favType) {
   const { data } = await useAxios({
     url: paths.api.isFavorite + `?hash=${itemhash}&type=${type}`,
-    get: true,
+    method: "GET",
   });
 
   try {

src/requests/folders.ts

@@ -33,7 +33,7 @@ export async function getFiles(path: string, tracks_only = false) {
 export async function openInFiles(path: string) {
   const { error } = await useAxios({
     url: paths.api.folder.showInFiles + `?path=${path}`,
-    get: true,
+    method: "GET",
   });
 
   if (error) {
@@ -44,7 +44,7 @@ export async function openInFiles(path: string) {
 export async function getTracksInPath(path: string) {
   const { data, error } = await useAxios({
     url: paths.api.folder.base + "/tracks/all" + `?path=${path}`,
-    get: true,
+    method: "GET",
   });
 
   if (error) {

src/requests/home.ts

@@ -4,7 +4,7 @@ import useAxios from "./useAxios";
 export async function getRecents(path: string, limit: number) {
   const { data } = await useAxios({
     url: path + "?limit=" + limit,
-    get: true,
+    method: "GET",
   });
 
   return data;

src/requests/playlists.ts

@@ -5,7 +5,6 @@ import useAxios from "./useAxios";
 
 const {
   new: newPlaylistUrl,
-  all: allPlaylistsUrl,
   base: basePlaylistUrl,
   artists: playlistArtistsUrl,
 } = paths.api.playlist;
@@ -44,8 +43,8 @@ export async function createNewPlaylist(playlist_name: string) {
  */
 export async function getAllPlaylists(no_images = false): Promise<Playlist[]> {
   const { data, error } = await useAxios({
-    url: allPlaylistsUrl + (no_images ? "?no_images=true" : ""),
-    get: true,
+    url: basePlaylistUrl + (no_images ? "?no_images=true" : ""),
+    method: "GET",
   });
 
   if (error) console.error(error);
@@ -67,7 +66,7 @@ export async function getPlaylist(pid: number | string, no_tracks = false) {
 
   const { data, status } = await useAxios({
     url: uri,
-    get: true,
+    method: "GET",
   });
 
   if (status == 404) {
@@ -190,7 +189,7 @@ export async function updatePlaylist(
 
   const { data, status } = await useAxios({
     url: uri,
-    put: true,
+    method: "PUT",
     props: playlist,
     headers: {
       "Content-Type": "multipart/form-data",
@@ -234,10 +233,8 @@ export async function getPlaylistArtists(pid: number): Promise<Artist[]> {
 
 export async function deletePlaylist(pid: number) {
   const { status } = await useAxios({
-    url: paths.api.playlist.base + "/delete",
-    props: {
-      pid,
-    },
+    url: paths.api.playlist.base + `/${pid}/delete`,
+    method: "DELETE"
   });
 
   if (status == 200) {
@@ -267,7 +264,7 @@ export async function removeTracks(
 export async function removeBannerImage(playlistid: number) {
   const { data, status } = await useAxios({
     url: paths.api.playlist.base + `/${playlistid}/remove-img`,
-    get: true,
+    method: "DELETE",
   });
 
   if (status === 200) {
@@ -281,7 +278,6 @@ export async function removeBannerImage(playlistid: number) {
 export async function pinUnpinPlaylist(pid: number) {
   const { status } = await useAxios({
     url: paths.api.playlist.base + `/${pid}/pin_unpin`,
-    get: true,
   });
 
   if (status === 200) {

src/requests/plugins/index.ts

@@ -1,10 +1,13 @@
 import { paths } from "@/config";
 import useAxios from "../useAxios";
 
-export const pluginSetActive = async (plugin: string, state: number) => {
+export const pluginSetActive = async (plugin: string, active: boolean) => {
   const { data } = await useAxios({
-    url: paths.api.plugins + `/setactive?plugin=${plugin}&state=${state}`,
-    get: true,
+    url: paths.api.plugins + "/setactive",
+    props: {
+      plugin,
+      active,
+    },
   });
 
   return data;

src/requests/searchMusic.ts

@@ -18,7 +18,7 @@ const {
 async function fetchData(url: string) {
   const { data } = await useAxios({
     url: url,
-    get: true,
+    method: "GET",
   });
 
   return data;
@@ -82,13 +82,9 @@ async function loadMoreArtists(index: number, query: string) {
 }
 
 export {
-  searchTracks,
-  searchAlbums,
-  searchArtists,
-  loadMoreTracks,
-  loadMoreAlbums,
-  loadMoreArtists,
-  searchTopResults,
+    loadMoreAlbums,
+    loadMoreArtists, loadMoreTracks, searchAlbums,
+    searchArtists, searchTopResults, searchTracks
 };
 
 // TODO: Rewrite this module using `useAxios` hook

src/requests/settings/index.ts

@@ -16,7 +16,7 @@ export async function setSetting(key: DbSettingKeys, value: any) {
 export async function getAllSettings() {
   const { data, status } = await useAxios({
     url: paths.api.settings.base,
-    get: true,
+    method: "GET",
   });
 
   const settings = data.settings as DBSettings;

src/requests/settings/rootdirs.ts

@@ -1,14 +1,14 @@
-import useAxios from "../useAxios";
 import { paths } from "@/config";
-import { NotifType, useNotifStore } from "@/stores/notification";
 import { Folder } from "@/interfaces";
+import { NotifType, useNotifStore } from "@/stores/notification";
+import useAxios from "../useAxios";
 
 const { add_root_dir, get_root_dirs, remove_root_dir } = paths.api.settings;
 
 export async function getRootDirs() {
   const { data, error } = await useAxios({
     url: get_root_dirs,
-    get: true,
+    method: "GET",
   });
 
   if (error) {
@@ -68,7 +68,7 @@ export async function getFolders(folder: string = "$home") {
 export async function triggerScan() {
   const { error } = await useAxios({
     url: paths.api.settings.trigger_scan,
-    get: true,
+    method: "GET",
   });
 
   if (error) {

src/requests/useAxios.ts

@@ -10,37 +10,48 @@ export default async (args: FetchProps) => {
 
   const on_ngrok = args.url.includes("ngrok");
   const ngrok_config = {
-    headers: {
       "ngrok-skip-browser-warning": "stupid-SOAB!",
-    },
   };
 
-  function getAxios() {
-    if (args.get) {
-      return axios.get(args.url, on_ngrok ? ngrok_config : {});
-    }
-
-    if (args.put) {
-      return axios.put(args.url, args.props, on_ngrok ? ngrok_config : {});
-    }
-
-    return axios.post(args.url, args.props, on_ngrok ? ngrok_config : {});
-  }
-
   const { startLoading, stopLoading } = useLoaderStore();
   startLoading();
-  await getAxios()
-    .then((res: AxiosResponse) => {
-      data = res.data;
-      status = res.status;
-    })
-    .catch((err: AxiosError) => {
-      error = err.message as string;
-      status = err.response?.status as number;
-    })
-    .then(() => stopLoading());
 
-  return { data, error, status };
+  try {
+    const res = await axios({
+      url: args.url,
+      data: args.props,
+      // INFO: Most requests use POST
+      method: args.method || "POST",
+      // INFO: Add ngrok header and provided headers
+      headers: {...args.headers, ...on_ngrok ? ngrok_config : {}}
+    })
+
+    stopLoading();
+    return {
+      data: res.data,
+      status: res.status
+    }
+
+  } catch (error: any) {
+    stopLoading();
+    return {
+      error: error.message,
+      status: error.response?.status
+    }
+  }
+
+  // await getAxios()
+  //   .then((res: AxiosResponse) => {
+  //     data = res.data;
+  //     status = res.status;
+  //   })
+  //   .catch((err: AxiosError) => {
+  //     error = err.message as string;
+  //     status = err.response?.status as number;
+  //   })
+  //   .then(() => stopLoading());
+
+  // return { data, error, status };
 };
 
 // TODO: Set base url in axios config

src/stores/pages/itemlist.ts

@@ -54,7 +54,7 @@ const state = () => {
           ? paths.api.getall.albums
           : paths.api.getall.artists) +
         `?start=${start}&limit=${pageSize}&sortby=${sortby.value}&reverse=${reverse_string.value}`,
-      get: true,
+      method: "GET",
     });
 
     const { data } = res;

src/stores/player.ts

@@ -1,6 +1,6 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
 import { router, Routes } from "@/router";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 
 import useColors from "./colors";
 import useLyrics from "./lyrics";
@@ -11,8 +11,8 @@ import useSettings from "./settings";
 import useTracker from "./tracker";
 
 import { paths } from "@/config";
-import { crossFade } from "@/utils/audio/crossFade";
 import updateMediaNotif from "@/helpers/mediaNotification";
+import { crossFade } from "@/utils/audio/crossFade";
 
 export function getUrl(filepath: string, trackhash: string) {
   return `${paths.api.files}/${trackhash}?filepath=${encodeURIComponent(
@@ -34,8 +34,8 @@ export const usePlayer = defineStore("player", () => {
   let currentAudioData = {
     filepath: "",
     silence: {
-      start: 0,
-      end: 0,
+      starting_file: 0,
+      ending_file: 0,
     },
   };
 
@@ -45,8 +45,8 @@ export const usePlayer = defineStore("player", () => {
     loaded: false,
     ticking: false,
     silence: {
-      start: 0,
-      end: 0,
+      starting_file: 0,
+      ending_file: 0,
     },
   };
 
@@ -65,8 +65,8 @@ export const usePlayer = defineStore("player", () => {
     nextAudioData.loaded = false;
     nextAudioData.ticking = false;
     nextAudioData.silence = {
-      start: 0,
-      end: 0,
+      starting_file: 0,
+      ending_file: 0,
     };
 
     clearMovingNextTimeout();
@@ -146,7 +146,7 @@ export const usePlayer = defineStore("player", () => {
     if (
       !queue.manual &&
       !audio.src.includes("sm.radio.jingles") &&
-      audio.currentTime - currentAudioData.silence.start / 1000 <= 4
+      audio.currentTime - currentAudioData.silence.starting_file / 1000 <= 4
     ) {
       crossFade({
         audio,
@@ -221,8 +221,8 @@ export const usePlayer = defineStore("player", () => {
 
   const handleNextAudioCanPlay = async () => {
     if (!settings.use_silence_skip) {
-      nextAudioData.silence.start = 0;
-      currentAudioData.silence.end = Math.floor(audio.duration * 1000);
+      nextAudioData.silence.starting_file = 0;
+      currentAudioData.silence.ending_file = Math.floor(audio.duration * 1000);
       nextAudioData.loaded = true;
       return;
     }
@@ -236,8 +236,8 @@ export const usePlayer = defineStore("player", () => {
 
     worker.onmessage = (e) => {
       const silence = e.data;
-      nextAudioData.silence.start = silence.start;
-      currentAudioData.silence.end = silence.end;
+      nextAudioData.silence.starting_file = silence.starting_file;
+      currentAudioData.silence.ending_file = silence.ending_file;
       nextAudioData.loaded = silence !== null;
     };
   };
@@ -266,7 +266,7 @@ export const usePlayer = defineStore("player", () => {
     });
 
     audio = nextAudioData.audio;
-    audio.currentTime = nextAudioData.silence.start / 1000;
+    audio.currentTime = nextAudioData.silence.starting_file / 1000;
     currentAudioData.silence = nextAudioData.silence;
     currentAudioData.filepath = nextAudioData.filepath;
 
@@ -300,11 +300,12 @@ export const usePlayer = defineStore("player", () => {
     if (
       nextAudioData.loaded &&
       !nextAudioData.ticking &&
-      currentAudioData.silence.end
+      currentAudioData.silence.ending_file
     ) {
       const { crossfade_duration, use_crossfade } = settings;
       const diff =
-        currentAudioData.silence.end - Math.floor(audio.currentTime * 1000);
+        currentAudioData.silence.ending_file -
+        Math.floor(audio.currentTime * 1000);
 
       const is_jingle =
         queue.currenttrack.filepath.includes("sm.radio.jingles");

src/stores/settings/index.ts

@@ -32,7 +32,7 @@ export default defineStore("settings", {
     separators: <string[]>[],
 
     // client
-    useCircularArtistImg: false,
+    useCircularArtistImg: true,
 
     // plugins
     use_lyrics_plugin: <boolean | undefined>false,
@@ -169,8 +169,7 @@ export default defineStore("settings", {
       this.useCircularArtistImg = !this.useCircularArtistImg;
     },
     toggleLyricsPlugin() {
-      const state = this.use_lyrics_plugin ? 0 : 1;
-      pluginSetActive("lyrics_finder", state).then(() => {
+      pluginSetActive("lyrics_finder", !this.use_lyrics_plugin).then(() => {
         this.use_lyrics_plugin = !this.use_lyrics_plugin;
       });
     },