fix incorrect album fetching

server/app/api.py

@@ -351,12 +351,16 @@ def getAlbums():
 
     return {'albums': albums}
 
-@bp.route('/albums/<album>')
-def getAlbumSongs(album: str):
-    album = urllib.parse.unquote(album)
-    songs = all_songs_instance.find_songs_by_album(album)
+@bp.route('/albums/<query>')
+def getAlbumSongs(query: str):
+    album = query.split('::')[0]
+    artist = query.split('::')[1]
+
+    songs = all_songs_instance.find_songs_by_album(album, artist)
     songs_array = convert_to_json(songs)
 
+    print(artist)
+
     for song in songs_array:
         song['artists'] = song['artists'].split(', ')
         song['filepath'] = song['filepath'].replace(home_dir, '')

server/app/models.py

@@ -46,8 +46,8 @@ class AllSongs(Mongo):
         self.collection.create_index([('title', pymongo.TEXT)])
         return self.collection.find({'title': {'$regex': query, '$options': 'i'}})
 
-    def find_songs_by_album(self, query):
-        return self.collection.find({'album': query})
+    def find_songs_by_album(self, name, artist):
+        return self.collection.find({'album': name, 'album_artist': artist})
 
     def get_all_songs(self):
         return self.collection.find().limit(25)

src/components/FolderView/SongList.vue

@@ -32,7 +32,7 @@
               </div>
             </td>
             <td :style="{ width: songTitleWidth + 'px' }">
-              <div class="ellip">
+              <div class="ellip" v-if="song.artists[0] != ''">
                 <span
                   class="artist"
                   v-for="artist in putCommas(song.artists)"
@@ -40,11 +40,17 @@
                   >{{ artist }}</span
                 >
               </div>
+              <div class="ellip" v-else>
+                <span class="artist">{{ song.album_artist }}</span>
+              </div>
             </td>
             <td :style="{ width: songTitleWidth + 'px' }">
               <router-link
                 class="ellip"
-                :to="{ name: 'AlbumView', params: { album: song.album } }"
+                :to="{
+                  name: 'AlbumView',
+                  params: { album: song.album, artist: song.album_artist },
+                }"
                 >{{ song.album }}</router-link
               >
             </td>
@@ -80,6 +86,7 @@ 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/RightSideBar/NowPlaying.vue

@@ -10,11 +10,14 @@
       <div>
         <p id="title" class="ellipsis">{{ current.title }}</p>
         <hr />
-        <div id="artist">
+        <div id="artist" v-if="current.artists[0] != ''">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
             artist
           }}</span>
         </div>
+        <div id="artist" v-else>
+          <span>{{ current.album_artist }}</span>
+        </div>
       </div>
     </div>
     <div class="progress">

src/composables/getAlbum.js

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

src/router/index.js

@@ -34,7 +34,7 @@ const routes = [
     component: AlbumsExplorer,
   },
   {
-    path: "/albums/:album",
+    path: "/albums/:album/:artist",
     name: "AlbumView",
     component: AlbumView,
   },

src/views/AlbumView.vue

@@ -40,11 +40,12 @@ export default {
   setup() {
     const route = useRoute();
     const album_name = route.params.album;
+    const album_artists = route.params.artist;
     const album_songs = ref([]);
     const album_info = ref({});
 
     onMounted(() => {
-      getAlbum(album_name).then((data) => {
+      getAlbum(album_name, album_artists).then((data) => {
         album_songs.value = data.songs;
         album_info.value = data.info;
       });