From fff2c53801e1d48f3583c50efc583b0e28893072 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 2 Dec 2022 22:45:06 +0300
Subject: [PATCH] fix scrolling in artist search page

---
 src/components/AlbumView/Header.vue | 36 +++++++++++++++++++++++++----
 src/composables/fetch/album.ts      |  1 -
 src/stores/queue.ts                 |  2 +-
 src/utils/usePutCommas.ts           |  2 +-
 src/views/SearchView/artists.vue    |  5 +---
 src/views/SearchView/main.vue       |  1 +
 6 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 72166584..7aab4f4b 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -2,7 +2,9 @@
   <div
     class="album-header-ambient rounded"
     style="height: 100%; width: 100%"
-    :style="{ boxShadow: album.colors ? `0 .5rem 2rem ${album.colors[0]}` : '' }"
+    :style="{
+      boxShadow: album.colors ? `0 .5rem 2rem ${album.colors[0]}` : '',
+    }"
   ></div>
   <div
     class="a-header rounded"
@@ -52,9 +54,12 @@
       </div>
       <div class="art" v-if="!albumHeaderSmall">
         <img
-          :src="imguri.artist + album.artistimg"
+          v-for="a in album.albumartists"
+          :src="imguri.artist + a.image"
           class="shadow-lg circular"
           loading="lazy"
+          :title="a.name"
+          :style="{ border: `solid 2px ${album.colors[0]}` }"
         />
       </div>
     </div>
@@ -76,7 +81,7 @@ import ArtistName from "@/components/shared/ArtistName.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
-defineProps<{
+const props = defineProps<{
   album: AlbumInfo;
 }>();
 
@@ -151,8 +156,29 @@ useVisibility(albumheaderthing, handleVisibilityState);
     align-items: flex-end;
 
     .art {
-      display: flex;
-      align-items: flex-end;
+      display: inline-flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      // background-color: red;
+
+      img {
+        height: 4rem;
+        background-color: $gray;
+        border: solid 2px $white;
+      }
+
+      img:last-child {
+        height: 4rem;
+        margin-top: 5px;
+      }
+
+      img:not(:last-child) {
+        margin-left: -2rem;
+      }
+
+      img:hover {
+        z-index: 10;
+      }
     }
 
     img {
diff --git a/src/composables/fetch/album.ts b/src/composables/fetch/album.ts
index 637bd386..9f93b714 100644
--- a/src/composables/fetch/album.ts
+++ b/src/composables/fetch/album.ts
@@ -71,7 +71,6 @@ const getAlbumsFromArtist = async (
   limit: number = 2,
   exclude: string
 ) => {
-  console.log(albumartists)
   const { data } = await useAxios({
     url: albumsByArtistUrl,
     props: {
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index fb446c3a..b1699cf0 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -52,7 +52,7 @@ export default defineStore("Queue", {
       }
 
       const track = this.tracklist[index];
-      const uri = `${paths.api.files}/${track.id}-${track.trackhash}`;
+      const uri = `${paths.api.files}/${track.trackhash}`;
 
       new Promise((resolve, reject) => {
         audio.autoplay = true;
diff --git a/src/utils/usePutCommas.ts b/src/utils/usePutCommas.ts
index 9957a216..04613002 100644
--- a/src/utils/usePutCommas.ts
+++ b/src/utils/usePutCommas.ts
@@ -4,7 +4,7 @@
  * @returns a string with commas in between each artist
  */
 export default (artists: string[]) => {
-  let result = [];
+  let result: string[] = [];
 
   artists.forEach((i, index, artists) => {
     if (index !== artists.length - 1) {
diff --git a/src/views/SearchView/artists.vue b/src/views/SearchView/artists.vue
index 0fea4cb0..d20eb98d 100644
--- a/src/views/SearchView/artists.vue
+++ b/src/views/SearchView/artists.vue
@@ -13,7 +13,4 @@ import ArtistCard from "@/components/shared/ArtistCard.vue";
 import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
-</script>
-
-<style lang="scss">
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/SearchView/main.vue b/src/views/SearchView/main.vue
index a04c74e9..84492b87 100644
--- a/src/views/SearchView/main.vue
+++ b/src/views/SearchView/main.vue
@@ -180,6 +180,7 @@ onMounted(() => {
     gap: 1.75rem 0;
 
     padding-bottom: 4rem;
+    overflow: auto;
   }
 
   button.load-more {