implement playing tracks from artist page

src/components/AlbumView/ArtistAlbums.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="artist-albums">
+  <div
+    class="artist-albums"
+  >
     <h3>
       <span>{{ title }} </span>
       <span class="see-more">SEE ALL</span>

src/components/AlbumView/Header.vue

@@ -129,21 +129,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
-  // .albumartists {
-  //   outline: solid 1px;
-  //   // display: flex;
-  //   // width: 100%;
-  //   // flex-wrap: nowrap;
-  //   // height: 1rem;
-  //   // overflow: hidden;
-
-  //   span {
-  //     // white-space: nowrap;
-  //     // overflow: hidden;
-  //     // text-overflow: ellipsis;
-  //   }
-  // }
-
   .big-img {
     height: calc(100%);
     width: 16rem;

src/components/ArtistView/Header.vue

@@ -1,4 +1,13 @@
 <template>
+  <div
+    class="artist-header-ambient rounded"
+    style="height: 100%; width: 100%"
+    :style="{
+      boxShadow: artist.info.colors
+        ? `0 .5rem 2rem ${artist.info.colors[0]}`
+        : '',
+    }"
+  ></div>
   <div class="artist-page-header rounded no-scroll">
     <div
       class="artist-info"
@@ -28,7 +37,7 @@
     <div
       class="gradient"
       :style="{
-        backgroundImage: `linear-gradient(to left, transparent 40%,
+        backgroundImage: `linear-gradient(to left, transparent 30%,
       ${artist.info.colors[0]} 50%,
       ${artist.info.colors[0]} 100%)`,
       }"
@@ -48,6 +57,13 @@ const artist = useArtistPageStore();
 </script>
 
 <style lang="scss">
+.artist-header-ambient {
+  height: 17rem;
+  position: absolute;
+  opacity: 0.25;
+  margin-right: -1rem;
+
+}
 .artist-page-header {
   height: 18rem;
   display: grid;

src/components/ArtistView/TopTracks.vue

@@ -6,6 +6,7 @@
         v-for="(song, index) in artist.tracks"
         :track="song"
         :index="index + 1"
+        @playThis="playFromPage(index)"
       />
     </div>
     <div class="error" v-if="!artist.tracks.length">No tracks</div>
@@ -15,8 +16,27 @@
 <script setup lang="ts">
 import SongItem from "../shared/SongItem.vue";
 import useArtistPageStore from "@/stores/pages/artist";
+import useQueueStore from "@/stores/queue";
+import { FromOptions, playSources } from "@/composables/enums";
+
+import { getArtistTracks } from "@/composables/fetch/artists";
 
 const artist = useArtistPageStore();
+const queue = useQueueStore();
+
+async function playFromPage(index: number) {
+  if (
+    queue.from.type == FromOptions.artist &&
+    queue.from.artisthash == artist.info.artisthash
+  ) {
+    queue.play(index);
+    return;
+  }
+
+  const tracks = await getArtistTracks(artist.info.artisthash);
+  queue.playFromArtist(artist.info.artisthash, artist.info.name, tracks);
+  queue.play(index);
+}
 </script>
 
 <style lang="scss">

src/components/shared/AlbumCard.vue

@@ -5,35 +5,101 @@
       params: { hash: album.albumhash },
     }"
     class="result-item"
+    :class="{
+      nocontrast: album.colors ? isLight(album.colors[0]) : false,
+    }"
   >
-    <img class="rounded" :src="imguri + album.image" alt="" />
+    <div
+      class="bg rounded"
+      :style="{
+        backgroundColor: `${
+          album.colors[0] ? album.colors[0] : 'rgb(72, 72, 74)'
+        }`,
+      }"
+    ></div>
+    <div class="with-img">
+      <img class="rounded" :src="imguri + album.image" alt="" />
+      <PlayBtnVue />
+    </div>
     <div>
-      <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
+      <h4 class="title ellip" v-tooltip>
+        {{ album.title }}
+      </h4>
       <div class="artist ellip">{{ album.albumartists[0].name }}</div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { paths } from "../../config";
 import { Album } from "../../interfaces";
+import { isLight } from "@/composables/colors/album";
+import PlayBtnVue from "./PlayBtn.vue";
 
 const imguri = paths.images.thumb.large;
 defineProps<{
   album: Album;
 }>();
+
+const isHovered = ref(false);
 </script>
 
 <style lang="scss">
+.result-item.nocontrast {
+  &:hover {
+    color: $black;
+  }
+}
+
 .result-item {
   display: grid;
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
   height: fit-content;
+  position: relative;
+  color: $white;
+
+  .with-img {
+    position: relative;
+    padding: 0;
+  }
+
+  .play-btn {
+    $btn-width: 4rem;
+    position: absolute;
+    top: 1rem;
+    right: calc((100% - $btn-width) / 2);
+    opacity: 0;
+    transform: translateY(-1rem);
+    transition: all 0.25s;
+    width: $btn-width;
+
+    &:hover {
+      transition: all 0.25s;
+      background: $darkestblue;
+    }
+  }
+
+  .bg {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
 
   &:hover {
-    background-color: $gray4;
+    .bg {
+      opacity: 1;
+    }
+
+    .play-btn {
+      // transition-delay: 0.25s;
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   img {

src/components/shared/PlayBtn.vue

@@ -1,5 +1,8 @@
 <template>
-  <button class="play-btn" @click="usePlayFrom(source, useQStore, store)">
+  <button
+    class="play-btn circular"
+    @click.prevent.stop="usePlayFrom(source, useQStore, store)"
+  >
     <PlaySvg />
   </button>
 </template>
@@ -17,6 +20,7 @@ import PlaySvg from "../../assets/icons/play.svg";
 defineProps<{
   source: playSources;
   store: typeof useAlbumStore | typeof usePlaylistStore;
+  color: string;
 }>();
 </script>
 
@@ -24,10 +28,12 @@ defineProps<{
 .play-btn {
   aspect-ratio: 1;
   padding: 0;
-  border-radius: 0.65rem;
+  background: $black;
 
   svg {
     transition: none;
   }
+
+
 }
 </style>