minor refactors

server/app/api.py

@@ -353,8 +353,8 @@ def getAlbums():
 
 @bp.route('/albums/<query>')
 def getAlbumSongs(query: str):
-    album = query.split('::')[0]
-    artist = query.split('::')[1]
+    album = query.split('::')[0].replace('|', '/')
+    artist = query.split('::')[1].replace('|', '/')
 
     songs = all_songs_instance.find_songs_by_album(album, artist)
     songs_array = convert_to_json(songs)

src/components/FolderView/FolderList.vue

@@ -84,11 +84,6 @@ export default {
 }
 
 .f-container .f-item:hover {
-  transition: all 0.2s ease;
-  background: #000000;
-  background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
-    -webkit-linear-gradient(to bottom, #434343, #000000);
-  background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
-    linear-gradient(to bottom, #434343, #000000);
+  background-color: $blue;
 }
 </style>

src/components/FolderView/SongList.vue

@@ -86,7 +86,6 @@ export default {
     const putCommas = perks.putCommas;
 
     const updateQueue = async (song) => {
-      console.log(song.artists.length);
       if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
         const queue = song_list.value;
         localStorage.setItem("queue", JSON.stringify(queue));

src/components/LeftSidebar/Navigation.vue

@@ -73,13 +73,16 @@ export default {
 </script>
 
 <style lang="scss">
-.side-nav-container .in {
-  display: flex;
+.collapsed .nav-button {
+  font-size: smaller;
+  margin-top: 5px;
   align-items: center;
-}
+  justify-content: center;
 
-.collapsed .in {
-  flex-direction: column;
+  .in {
+    width: 100%;
+    flex-direction: column;
+  }
 }
 
 .side-nav-container {
@@ -91,69 +94,62 @@ export default {
 
   .nav-button {
     border-radius: $small;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background-color: transparent;
+    height: 100%;
+    padding: 0.6rem 0 0.6rem 0;
+
+    &:hover {
+      background-color: rgb(5, 80, 150);
+    }
+
+    .nav-icon {
+      height: 1.5rem;
+      width: 1.5rem;
+      margin-right: 0.5rem;
+      margin-left: 10px;
+    }
+
+    .in {
+      display: flex;
+      align-items: center;
+    }
+
+    #home-icon {
+      background-image: url(../../assets/icons/home.svg);
+    }
+
+    #album-icon {
+      background-image: url(../../assets/icons/album.svg);
+    }
+
+    #text {
+      margin-top: 5px;
+    }
+
+    #artists-icon {
+      background-image: url(../../assets/icons/artist.svg);
+    }
+
+    #playlists-icon {
+      background-image: url(../../assets/icons/playlist.svg);
+    }
+
+    #mixes-icon {
+      background-image: url(../../assets/icons/mix.svg);
+    }
+
+    #folders-icon {
+      background-image: url(../../assets/icons/folder.svg);
+    }
+    #settings-icon {
+      background-image: url(../../assets/icons/settings.svg);
+    }
   }
 }
 
-.side-nav-container .nav-button {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  background-color: transparent;
-  height: 100%;
-  padding: 10px;
-}
-
-.collapsed .nav-button {
-  font-size: smaller;
-  margin-top: 5px;
-}
-
-.side-nav-container .nav-button:hover {
-  background-color: rgb(5, 80, 150);
-}
-
-.side-nav-container .nav-button .nav-icon {
-  height: 24px;
-  width: 24px;
-  margin-right: 0.5rem;
-  margin-left: 10px;
-}
-
-.side-nav-container #home-button #home-icon {
-  background-image: url(../../assets/icons/home.svg);
-}
-
-.side-nav-container #album-button #album-icon {
-  background-image: url(../../assets/icons/album.svg);
-}
-
-.side-nav-container #home-button #text {
-  margin-top: 5px;
-}
-
-.side-nav-container #artists-button #artists-icon {
-  background-image: url(../../assets/icons/artist.svg);
-}
-
-.side-nav-container #playlists-button #playlists-icon {
-  background-image: url(../../assets/icons/playlist.svg);
-}
-
-.side-nav-container #mixes-button #mixes-icon {
-  background-image: url(../../assets/icons/mix.svg);
-}
-
-.side-nav-container #folders-button #folders-icon {
-  background-image: url(../../assets/icons/folder.svg);
-}
-.side-nav-container #folders-button #settings-icon {
-  background-image: url(../../assets/icons/settings.svg);
-}
-
-.side-nav-container #folders-button #text {
-  margin-top: 5px;
-}
-
 .side-nav-container hr {
   display: none;
 }

src/components/RightSideBar/Search.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="right-search"
-    @mouseenter="magic_flag = true"
-    @mouseleave="toggleMagicFlag"
-  >
+  <div class="right-search" ref="searchComponent">
     <div class="input">
       <div class="search-icon image"></div>
       <div class="filter">
@@ -19,6 +15,9 @@
       <input
         type="search"
         id="search"
+        @focus="toggleMagicFlag"
+        @blur="toggleMagicFlag"
+        @keyup.backspace="removeLastFilter"
         placeholder="find your music"
         v-model="query"
       />
@@ -127,6 +126,7 @@ export default {
         icon: "🈁",
       },
     ];
+    const searchComponent = ref(null);
     const filters = ref([]);
     const albums = [
       "Smooth Criminal like wtf ... and im serious",
@@ -148,14 +148,22 @@ export default {
       filters.value = filters.value.filter((f) => f !== filter);
     }
 
+    function removeLastFilter() {
+      if (query.value === '') {
+        if (filters.value.length) {
+          filters.value.pop();
+        }
+      }
+    }
+
     function toggleMagicFlag() {
       setTimeout(() => {
-        magic_flag.value = false;
-      }, 1000);
+        magic_flag.value = !magic_flag.value;
+      }, 300);
     }
 
     watch(query, (new_query) => {
-      if (new_query.length > 0) {
+      if (new_query) {
         emit("expandSearch");
       } else {
         emit("collapseSearch");
@@ -166,6 +174,7 @@ export default {
       addFilter,
       toggleMagicFlag,
       removeFilter,
+      removeLastFilter,
       songs,
       albums,
       artists,
@@ -174,6 +183,7 @@ export default {
       magic_flag,
       options,
       filters,
+      searchComponent,
     };
   },
 };

src/composables/getAlbum.js

@@ -1,7 +1,7 @@
 let base_uri = "http://127.0.0.1:9876";
 
 const getAlbum = async (name, artist) => {
-  const res = await fetch(base_uri + "/albums/" + name + "::" + artist);
+  const res = await fetch(base_uri + "/albums/" + name.replaceAll("/", "|") + "::" + artist.replaceAll("/", "|"));
 
   if (!res.ok) {
     const message = `An error has occured: ${res.status}`;

src/composables/getQueue.js

@@ -1,26 +0,0 @@
-const url = "http://127.0.0.1:9876/get/queue";
-
-const getQueue = async (type, id) => {
-  const res = await fetch(url, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      type: type,
-      id: id,
-    }),
-  });
-
-  if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
-    throw new Error(message);
-  }
-
-  const data = await res.json();
-
-  return data.songs;
-};
-
-export default getQueue;