From e48dca46722e57e68f0c47478401164e3b2b2702 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 9 Jun 2022 11:52:26 +0300
Subject: [PATCH] enable album nav play button

---
 src/components/AlbumView/Header.vue   |  3 +-
 src/components/nav/NavBar.vue         |  2 +-
 src/components/nav/Titles/Album.vue   |  4 +--
 src/components/shared/PlayBtn.vue     | 20 ++++++++---
 src/components/shared/PlayBtnRect.vue | 51 +++++++++------------------
 src/composables/usePlayFrom.ts        | 51 +++++++++++++++++++++++++++
 src/composables/useVisibility.ts      |  4 +--
 src/stores/nav.ts                     |  7 ++--
 8 files changed, 92 insertions(+), 50 deletions(-)
 create mode 100644 src/composables/usePlayFrom.ts

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 8ac374d6..f30b362d 100644
--- a/src/components/AlbumView/Header.vue
+++ b/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;
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index ff07687d..7938d898 100644
--- a/src/components/nav/NavBar.vue
+++ b/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>
diff --git a/src/components/nav/Titles/Album.vue b/src/components/nav/Titles/Album.vue
index e4903ee6..fcebe531 100644
--- a/src/components/nav/Titles/Album.vue
+++ b/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>
 
diff --git a/src/components/shared/PlayBtn.vue b/src/components/shared/PlayBtn.vue
index 33667207..de274ddb 100644
--- a/src/components/shared/PlayBtn.vue
+++ b/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 {
diff --git a/src/components/shared/PlayBtnRect.vue b/src/components/shared/PlayBtnRect.vue
index 80b66caf..dee50f0b 100644
--- a/src/components/shared/PlayBtnRect.vue
+++ b/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">
diff --git a/src/composables/usePlayFrom.ts b/src/composables/usePlayFrom.ts
new file mode 100644
index 00000000..0cf13de1
--- /dev/null
+++ b/src/composables/usePlayFrom.ts
@@ -0,0 +1,51 @@
+import { playSources } from "@/composables/enums";
+
+import useQStore from "@/stores/queue";
+import useFStore from "@/stores/folder";
+import useAStore from "@/stores/album";
+import usePStore from "@/stores/p.ptracks";
+
+const queue = useQStore;
+const folder = useFStore;
+const album = useAStore;
+const playlist = usePStore;
+
+type store = typeof queue | typeof folder | typeof album | typeof playlist;
+
+export default function play(
+  source: playSources,
+  aqueue: typeof queue,
+  store: store
+) {
+  const useQueue = aqueue();
+
+  switch (source) {
+    // check which route the play request come from
+    case playSources.folder:
+      store = store as typeof folder;
+
+      useQueue.playFromFolder(store().path, store().tracks);
+      useQueue.play(store().tracks[0]);
+      break;
+    case playSources.album:
+      store = store as typeof album;
+
+      useQueue.playFromAlbum(
+        store().info.title,
+        store().info.artist,
+        store().tracks
+      );
+      useQueue.play(store().tracks[0]);
+      break;
+    case playSources.playlist:
+      store = store as typeof playlist;
+
+      useQueue.playFromPlaylist(
+        store().info.name,
+        store().info.playlistid,
+        store().tracks
+      );
+      useQueue.play(store().tracks[0]);
+      break;
+  }
+}
diff --git a/src/composables/useVisibility.ts b/src/composables/useVisibility.ts
index b46137b4..d625f7fa 100644
--- a/src/composables/useVisibility.ts
+++ b/src/composables/useVisibility.ts
@@ -4,7 +4,7 @@ import { Ref, watch } from "vue";
 
 export default function useVisibility(
   elem: Ref<HTMLElement>,
-  callback: () => void
+  callback: (state: boolean) => void
 ) {
   const visible = ref(false);
 
@@ -15,7 +15,7 @@ export default function useVisibility(
   watch(
     () => visible.value,
     (newVal) => {
-      callback();
+      callback(newVal);
     }
   );
 }
diff --git a/src/stores/nav.ts b/src/stores/nav.ts
index d7feeef1..faed7d02 100644
--- a/src/stores/nav.ts
+++ b/src/stores/nav.ts
@@ -2,12 +2,11 @@ import { defineStore } from "pinia";
 
 export default defineStore("navmanagement", {
   state: () => ({
-    showPlay: true,
+    showPlay: false,
   }),
   actions: {
-    toggleShowPlay() {
-      this.showPlay = !this.showPlay;
-      console.log(this.showPlay);
+    toggleShowPlay(state: boolean) {
+      this.showPlay = state;
     },
   },
 });