implement playing tracks from artist page

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>