implement play from album card

src/components/shared/AlbumCard.vue

@@ -18,31 +18,45 @@
       }"
     ></div>
     <div class="with-img">
-      <img class="rounded" :src="imguri + album.image" alt="" />
-      <PlayBtnVue />
+      <img class="rounded-sm shadow-lg" :src="imguri + album.image" alt="" />
+      <PlayBtn
+        :store="useAlbumStore"
+        :source="playSources.album"
+        :albumHash="album.albumhash"
+        :albumName="album.title"
+      />
     </div>
     <div>
       <h4 class="title ellip" v-tooltip>
         {{ album.title }}
       </h4>
-      <div class="artist ellip">{{ album.albumartists[0].name }}</div>
+      <div class="artist ellip" @click.prevent.stop="() => {}">
+        <RouterLink
+          :to="{
+            name: Routes.artist,
+            params: { hash: album.albumartists[0].artisthash },
+          }"
+        >
+          {{ album.albumartists[0].name }}
+        </RouterLink>
+      </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";
+import PlayBtn from "./PlayBtn.vue";
+
+import useAlbumStore from "@/stores/pages/album";
+import { playSources, Routes } from "@/composables/enums";
 
 const imguri = paths.images.thumb.large;
 defineProps<{
   album: Album;
 }>();
-
-const isHovered = ref(false);
 </script>
 
 <style lang="scss">
@@ -64,15 +78,22 @@ const isHovered = ref(false);
   .with-img {
     position: relative;
     padding: 0;
+
+    &:hover {
+      .play-btn {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
   }
 
   .play-btn {
     $btn-width: 4rem;
     position: absolute;
-    top: 1rem;
+    bottom: 1rem;
     right: calc((100% - $btn-width) / 2);
     opacity: 0;
-    transform: translateY(-1rem);
+    transform: translateY(1rem);
     transition: all 0.25s;
     width: $btn-width;
 
@@ -86,7 +107,6 @@ const isHovered = ref(false);
     height: 100%;
     width: 100%;
     position: absolute;
-    z-index: -1;
     opacity: 0;
   }
 
@@ -94,12 +114,6 @@ const isHovered = ref(false);
     .bg {
       opacity: 1;
     }
-
-    .play-btn {
-      // transition-delay: 0.25s;
-      transform: translateY(0);
-      opacity: 1;
-    }
   }
 
   img {
@@ -115,12 +129,21 @@ const isHovered = ref(false);
     margin-bottom: $smaller;
     font-size: 0.9rem;
     width: fit-content;
+    position: relative;
   }
 
   .artist {
     font-size: 0.8rem;
     text-align: left;
     opacity: 0.75;
+
+    a {
+      cursor: pointer !important;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 }
 </style>

src/components/shared/PlayBtn.vue

@@ -1,8 +1,5 @@
 <template>
-  <button
-    class="play-btn circular"
-    @click.prevent.stop="usePlayFrom(source, useQStore, store)"
-  >
+  <button class="play-btn circular shadow-sm" @click.prevent.stop="handlePlay">
     <PlaySvg />
   </button>
 </template>
@@ -16,12 +13,29 @@ import { playSources } from "@/composables/enums";
 import usePlayFrom from "@/composables/usePlayFrom";
 
 import PlaySvg from "../../assets/icons/play.svg";
+import { playFromAlbumCard } from "@/composables/usePlayFrom";
 
-defineProps<{
+const props = defineProps<{
   source: playSources;
+  albumHash?: string;
+  albumName?: string;
   store: typeof useAlbumStore | typeof usePlaylistStore;
-  color: string;
 }>();
+
+function handlePlay() {
+  switch (props.source) {
+    case playSources.album:
+      playFromAlbumCard(
+        useQStore,
+        props.albumHash || "",
+        props.albumName || ""
+      );
+      break;
+
+    default:
+      break;
+  }
+}
 </script>
 
 <style lang="scss">
@@ -33,7 +47,5 @@ defineProps<{
   svg {
     transition: none;
   }
-
-
 }
 </style>

src/composables/useKeyboard.ts

@@ -15,8 +15,9 @@ export default function (queue: typeof useQStore) {
   const q = queue();
   window.addEventListener("keydown", (e: KeyboardEvent) => {
     const target = e.target as HTMLElement;
-    // if alt is pressed, don't do anything
     if (e.altKey) return;
+    if (e.shiftKey) return;
+
     let ctrlKey = e.ctrlKey;
 
     function FocusedOnInput(target: HTMLElement) {

src/composables/usePlayFrom.ts

@@ -1,11 +1,15 @@
 import { playSources } from "@/composables/enums";
+
 import useAStore from "@/stores/pages/album";
 import useArtistPageStore from "@/stores/pages/artist";
 import useFStore from "@/stores/pages/folder";
 import usePStore from "@/stores/pages/playlist";
 import useQStore from "@/stores/queue";
 import useSettingsStore from "@/stores/settings";
+import { useNotifStore } from "@/stores/notification";
+
 import { getArtistTracks } from "./fetch/artists";
+import { getAlbumTracks } from "./fetch/album";
 
 const queue = useQStore;
 const folder = useFStore;
@@ -86,4 +90,16 @@ async function utilPlayFromArtist(
   qu.play(index);
 }
 
-export { utilPlayFromArtist };
+async function playFromAlbumCard(
+  queue: typeof useQStore,
+  albumhash: string,
+  albumname: string
+) {
+  const qu = queue();
+
+  const tracks = await getAlbumTracks(albumhash, useNotifStore);
+  qu.playFromAlbum(albumname, albumhash, tracks.tracks);
+  qu.play();
+}
+
+export { utilPlayFromArtist, playFromAlbumCard };