show album name and play button on scroll down

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">

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[]>([]);
 

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();
+    }
+  );
+}

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);
+    },
+  },
+});