enable album nav play button

src/components/AlbumView/Header.vue

@@ -25,7 +25,7 @@
             {{ formatSeconds(album.duration, true) }} • {{ album.date }} •
             {{ album.artist }}
           </div>
-          <PlayBtnRect :source="playSources.album" />
+          <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
         </div>
       </div>
     </div>
@@ -41,6 +41,7 @@ import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import useVisibility from "@/composables/useVisibility";
 import useNavStore from "@/stores/nav";
+import useAlbumStore from "@/stores/album";
 
 defineProps<{
   album: AlbumInfo;

src/components/nav/NavBar.vue

@@ -6,7 +6,7 @@
       </div>
 
       <div class="info">
-        <Album v-show="$route.name == Routes.album && nav.showPlay" />
+        <Album v-show="$route.name == Routes.album && !nav.showPlay" />
         <Playlists v-show="$route.name == Routes.playlists" />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
       </div>

src/components/nav/Titles/Album.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title albumnavtitle" v-motion-slide-from-left-100>
-    <PlayBtn />
+    <PlayBtn :source="playSources.album" :store="useAlbumStore" />
     <div class="ellip">
       {{ store.info.title }}
     </div>
@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import useAlbumStore from "@/stores/album";
 import PlayBtn from "@/components/shared/PlayBtn.vue";
-
+import { playSources } from "@/composables/enums";
 const store = useAlbumStore();
 </script>
 

src/components/shared/PlayBtn.vue

@@ -1,11 +1,21 @@
 <template>
-  <div class="play-btn rounded shadow-sm" @click="playThis"></div>
+  <div
+    class="play-btn rounded shadow-sm"
+    @click="usePlayFrom(source, useQStore, store)"
+  ></div>
 </template>
+
 <script setup lang="ts">
-function playThis(e: Event) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-}
+import { playSources } from "@/composables/enums";
+import useAlbumStore from "@/stores/album";
+import usePlaylistStore from "@/stores/p.ptracks";
+import usePlayFrom from "@/composables/usePlayFrom";
+import useQStore from "@/stores/queue";
+
+defineProps<{
+  source: playSources;
+  store: typeof useAlbumStore | typeof usePlaylistStore;
+}>();
 </script>
 <style lang="scss">
 .play-btn {

src/components/shared/PlayBtnRect.vue

@@ -1,48 +1,29 @@
 <template>
-  <div class="playbtnrect rounded" @click="play">
+  <div
+    class="playbtnrect rounded"
+    @click="usePlayFrom(source, useQStore, store)"
+  >
     <div class="icon image"></div>
     <div class="text">Play</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { playSources } from "../../composables/enums";
+import { playSources } from "@/composables/enums";
+import usePlayFrom from "@/composables/usePlayFrom";
+import useQStore from "@/stores/queue";
+import useFStore from "@/stores/folder";
+import useAStore from "@/stores/album";
+import usePStore from "@/stores/p.ptracks";
 
-import useQStore from "../../stores/queue";
-import useFStore from "../../stores/folder";
-import useAStore from "../../stores/album";
-import usePStore from "../../stores/p.ptracks";
-
-const props = defineProps<{
+defineProps<{
   source: playSources;
+  store:
+    | typeof useQStore
+    | typeof useFStore
+    | typeof useAStore
+    | typeof usePStore;
 }>();
-
-const queue = useQStore();
-const folder = useFStore();
-const album = useAStore();
-const playlist = usePStore();
-
-function play() {
-  switch (props.source) {
-    // check which route the play request come from
-    case playSources.folder:
-      queue.playFromFolder(folder.path, folder.tracks);
-      queue.play(queue.tracks[0]);
-      break;
-    case playSources.album:
-      queue.playFromAlbum(album.info.title, album.info.artist, album.tracks);
-      queue.play(album.tracks[0]);
-      break;
-    case playSources.playlist:
-      queue.playFromPlaylist(
-        playlist.info.name,
-        playlist.info.playlistid,
-        playlist.tracks
-      );
-      queue.play(playlist.tracks[0]);
-      break;
-  }
-}
 </script>
 
 <style lang="scss">