minor refactoring

src/components/BottomBar/BottomBar.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="b-bar border card-dark">
     <div class="grid">
-      <SongCard/>
+      <SongCard :collapsed="props.collapsed" />
       <div class="controlsx border rounded">
         <div class="controls controls-bottom">
           <HotKeys />
         </div>
         <div class="progress progress-bottom">
-          <span class="durationx">{{formatSeconds(current_pos)}}</span>
+          <span class="durationx">{{ formatSeconds(current_pos) }}</span>
           <Progress />
-          <span class="durationx">{{ formatSeconds(state.current.value.length) }}</span>
+          <span class="durationx">{{
+            formatSeconds(state.current.value.length)
+          }}</span>
         </div>
         <div class="r-group">
           <div class="heart image"></div>
@@ -24,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
@@ -33,6 +35,13 @@ import state from "../../composables/state";
 import perks from "../../composables/perks";
 import playAudio from "../../composables/playAudio";
 
-const current_pos = ref(playAudio.current_time);
+const current_pos = playAudio.current_time
 const formatSeconds = perks.formatSeconds;
+
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>

src/components/BottomBar/SongCard.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="info">
     <div
+      v-if="props.collapsed"
       class="image art"
       :style="{
         backgroundImage: `url(&quot;${track.image}&quot;)`,
@@ -24,11 +25,15 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import perks from "../../composables/perks";
 import state from "../../composables/state";
 
-const track = ref(state.current);
-
+const track = state.current;
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
 const putCommas = perks.putCommas;
 </script>