fix albumView using watch function

- other minor changes to almost all files

src/components/BottomBar/BottomBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="b-bar border card-dark">
     <div class="grid">
-      <SongCard />
+      <SongCard/>
       <div class="controlsx border rounded">
         <div class="controls controls-bottom">
           <HotKeys />
@@ -9,7 +9,7 @@
         <div class="progress progress-bottom">
           <span class="durationx">0:45</span>
           <Progress />
-          <span class="durationx">3:55</span>
+          <span class="durationx">{{ state.current.value.length }}</span>
         </div>
         <div class="r-group">
           <div class="heart image"></div>
@@ -18,24 +18,15 @@
         </div>
         <div class="controls controls-bottom"></div>
       </div>
-      <div class="volume-group">
-
-      </div>
+      <div class="volume-group"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
-import playAudio from "../../composables/playAudio";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
 import HotKeys from "../shared/HotKeys.vue";
-
-const isPlaying = ref(playAudio.playing);
-
-const { playNext } = playAudio;
-const { playPrev } = playAudio;
-const { playPause } = playAudio;
+import state from "../../composables/state";
 </script>