From 843a80f4a380cbc8cbdd6cd5dedac68815fde22a Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 9 Jun 2022 10:43:14 +0300
Subject: [PATCH] show album name and play button on scroll down

---
 src/components/AlbumView/Header.vue | 25 ++++++++++++++-----------
 src/components/nav/NavBar.vue       |  4 +++-
 src/composables/useVisibility.ts    | 21 +++++++++++++++++++++
 src/stores/nav.ts                   | 13 +++++++++++++
 4 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 src/composables/useVisibility.ts
 create mode 100644 src/stores/nav.ts

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 56ed2d4c..8ac374d6 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="album-h">
+  <div class="album-h" ref="albumheaderthing">
     <div class="a-header rounded">
       <div class="art">
         <div
           class="image shadow-lg rounded"
           :style="{
-            backgroundImage: `url(&quot;${imguri + props.album.image}&quot;)`,
+            backgroundImage: `url(&quot;${imguri + album.image}&quot;)`,
           }"
           v-motion-slide-from-left
         ></div>
@@ -17,14 +17,13 @@
             <span v-else-if="album.is_compilation">Compilation</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip">{{ props.album.title }}</div>
+          <div class="title ellip">{{ album.title }}</div>
         </div>
         <div class="bottom">
           <div class="stats">
-            {{ props.album.count }} Tracks •
-            {{ formatSeconds(props.album.duration, true) }} •
-            {{ props.album.date }} •
-            {{ props.album.artist }}
+            {{ album.count }} Tracks •
+            {{ formatSeconds(album.duration, true) }} • {{ album.date }} •
+            {{ album.artist }}
           </div>
           <PlayBtnRect :source="playSources.album" />
         </div>
@@ -34,20 +33,24 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
 import { paths } from "../../config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import useVisibility from "@/composables/useVisibility";
+import useNavStore from "@/stores/nav";
 
-const imguri = paths.images.thumb;
-const props = defineProps<{
+defineProps<{
   album: AlbumInfo;
 }>();
 
-function extrackColors() {}
+const albumheaderthing = ref<HTMLElement>(null);
+const imguri = paths.images.thumb;
+const nav = useNavStore();
 
-extrackColors();
+useVisibility(albumheaderthing, nav.toggleShowPlay);
 </script>
 
 <style lang="scss">
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 162a25ba..ff07687d 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" />
+        <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>
@@ -34,8 +34,10 @@ import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
 import Playlists from "./Titles/Playlists.vue";
 import Album from "./Titles/Album.vue";
+import useNavStore from "@/stores/nav";
 
 const route = useRoute();
+const nav = useNavStore();
 
 const subPaths = ref<subPath[]>([]);
 
diff --git a/src/composables/useVisibility.ts b/src/composables/useVisibility.ts
new file mode 100644
index 00000000..b46137b4
--- /dev/null
+++ b/src/composables/useVisibility.ts
@@ -0,0 +1,21 @@
+import { ref } from "@vue/reactivity";
+import { useIntersectionObserver } from "@vueuse/core";
+import { Ref, watch } from "vue";
+
+export default function useVisibility(
+  elem: Ref<HTMLElement>,
+  callback: () => void
+) {
+  const visible = ref(false);
+
+  useIntersectionObserver(elem, ([{ isIntersecting }], observerElement) => {
+    visible.value = isIntersecting;
+  });
+
+  watch(
+    () => visible.value,
+    (newVal) => {
+      callback();
+    }
+  );
+}
diff --git a/src/stores/nav.ts b/src/stores/nav.ts
new file mode 100644
index 00000000..d7feeef1
--- /dev/null
+++ b/src/stores/nav.ts
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+
+export default defineStore("navmanagement", {
+  state: () => ({
+    showPlay: true,
+  }),
+  actions: {
+    toggleShowPlay() {
+      this.showPlay = !this.showPlay;
+      console.log(this.showPlay);
+    },
+  },
+});