add functionality to play button on artist page

src/components/AlbumView/ArtistAlbums.vue

@@ -1,20 +1,21 @@
 <template>
-  <div class="albums-from-artist">
+  <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
       <span class="see-more">SEE ALL</span>
     </h3>
     <div class="cards">
-      <AlbumCard v-for="a in albums" :album="a" />
+      <AlbumCard v-for="a in albums.slice(0, maxAbumCards)" :album="a" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import AlbumCard from "../shared/AlbumCard.vue";
-
 import { Album } from "@/interfaces";
 
+import { maxAbumCards } from "@/stores/content-width";
+
 defineProps<{
   title: string;
   albums: Album[];
@@ -22,7 +23,7 @@ defineProps<{
 </script>
 
 <style lang="scss">
-.albums-from-artist {
+.artist-albums {
   overflow: hidden;
 
   h3 {
@@ -40,7 +41,7 @@ defineProps<{
   .cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    gap: 2rem 0;
+    gap: 5rem 0;
   }
 }
 </style>

src/components/ArtistView/Header.vue

@@ -20,7 +20,7 @@
           {{ formatSeconds(artist.info.duration, true) }}
         </div>
       </section>
-      <PlayBtnRect />
+      <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
     </div>
     <div class="artist-img no-select">
       <img :src="paths.images.artist.large + artist.info.image" />
@@ -28,7 +28,7 @@
     <div
       class="gradient"
       :style="{
-        backgroundImage: `linear-gradient(to left, transparent 10%,
+        backgroundImage: `linear-gradient(to left, transparent 40%,
       ${artist.info.colors[0]} 50%,
       ${artist.info.colors[0]} 100%)`,
       }"
@@ -42,6 +42,7 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import formatSeconds from "@/utils/useFormatSeconds";
 import { isLight } from "@/composables/colors/album";
 import { paths } from "@/config";
+import { playSources } from "@/composables/enums";
 
 const artist = useArtistPageStore();
 </script>
@@ -55,9 +56,11 @@ const artist = useArtistPageStore();
 
   .artist-img {
     height: 18rem;
+
     img {
       height: 100%;
       width: 100%;
+      aspect-ratio: 1;
       object-fit: cover;
       object-position: 0% 20%;
     }

src/components/ArtistView/TopTracks.vue

@@ -23,8 +23,8 @@ const artist = useArtistPageStore();
 
 <style lang="scss">
 .artist-top-tracks {
-  margin-bottom: 1rem;
   margin-top: 2rem;
+
   .section-title {
     margin-left: 0;
   }

src/components/nav/Titles/QueueTitle.vue

@@ -24,6 +24,7 @@ import AlbumSvg from "@/assets/icons/album.svg";
 import FolderSvg from "@/assets/icons/folder.svg";
 import PlaylistSvg from "@/assets/icons/playlist.svg";
 import SearchSvg from "@/assets/icons/search.svg";
+import ArtistSvg from "@/assets/icons/artist.svg";
 
 import { RouteLocationRaw } from "vue-router";
 
@@ -82,6 +83,18 @@ function getSource() {
         },
       };
 
+    case FromOptions.artist:
+      return {
+        name: source.artistname,
+        icon: ArtistSvg,
+        location: {
+          name: Routes.artist,
+          params: {
+            hash: source.artisthash,
+          },
+        },
+      };
+
     default:
       return { name: "👻 No source", location: {} };
   }

src/components/shared/PlayBtnRect.vue

@@ -1,8 +1,5 @@
 <template>
-  <button
-    class="playbtnrect"
-    @click="usePlayFrom(source, useQStore, store)"
-  >
+  <button class="playbtnrect" @click="usePlayFrom(source, useQStore, store)">
     <playBtnSvg />
     <div class="text">Play</div>
   </button>
@@ -14,20 +11,18 @@ import usePlayFrom from "@/composables/usePlayFrom";
 import useFStore from "@/stores/pages/folder";
 import useAStore from "@/stores/pages/album";
 import usePStore from "@/stores/pages/playlist";
+import useArtistPageStore from "@/stores/pages/artist";
 import useQStore from "@/stores/queue";
 import playBtnSvg from "@/assets/icons/play.svg";
 
 defineProps<{
   source: playSources;
-  background?: {
-    color: string;
-    isDark?: boolean;
-  };
   store:
     | typeof useQStore
     | typeof useFStore
     | typeof useAStore
-    | typeof usePStore;
+    | typeof usePStore
+    | typeof useArtistPageStore;
 }>();
 </script>