major refactors

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="hotkeys">
-    <div class="image ctrl-btn" id="previous" @click="playPrev"></div>
+    <div class="image ctrl-btn" id="previous" @click="props.prev"></div>
     <div
       class="image ctrl-btn play-pause"
       @click="playPause"
-      :class="{ isPlaying: isPlaying }"
+      :class="{ isPlaying: props.playing }"
     ></div>
-    <div class="image ctrl-btn" id="next" @click="playNext"></div>
+    <div class="image ctrl-btn" id="next" @click="props.next"></div>
   </div>
 </template>
 
-<script setup>
-import playAudio from '../../../composables/playAudio';
-
-const playPause = playAudio.playPause;
-const playNext = playAudio.playNext;
-const playPrev = playAudio.playPrev;
-
-const isPlaying = playAudio.playing;
+<script setup lang="ts">
+const props = defineProps<{
+  playing: boolean;
+  playPause: () => void;
+  next: () => void;
+  prev: () => void;
+}>();
 </script>
 
 <style lang="scss">
@@ -31,16 +30,16 @@ const isPlaying = playAudio.playing;
   place-content: flex-end;
 
   .ctrl-btn {
-      height: 2.5rem;
-        width: 100%;
-      background-size: 1.5rem !important;
-      cursor: pointer;
-      border-radius: 0.5rem;
+    height: 2.5rem;
+    width: 100%;
+    background-size: 1.5rem !important;
+    cursor: pointer;
+    border-radius: 0.5rem;
 
-      &:hover {
-        background-color: $red;
-      }
+    &:hover {
+      background-color: $red;
     }
+  }
 
   #previous {
     background-image: url(../../../assets/icons/previous.svg);

src/components/LeftSidebar/NP/Progress.vue

@@ -2,7 +2,7 @@
   <input
     id="progress"
     type="range"
-    :value="pos"
+    :value="props.pos"
     min="0"
     max="100"
     step="0.1"
@@ -10,12 +10,14 @@
   />
 </template>
 
-<script setup>
-import { ref } from "vue";
-import playAudio from "../../../composables/playAudio";
-const pos = ref(playAudio.pos);
-
+<script setup lang="ts">
 const seek = () => {
-  playAudio.seek(document.getElementById("progress").value);
+  const value = Number(document.getElementById("progress").value);
+  props.seek(value);
 };
+
+const props = defineProps<{
+  pos: number;
+  seek: (time: number) => void;
+}>();
 </script>

src/components/LeftSidebar/SongCard.vue

@@ -1,39 +1,30 @@
 <template>
   <div class="info">
-    <div
-      v-if="props.collapsed"
-      class="image art"
-      :style="{
-        backgroundImage: `url(&quot;${track.image}&quot;)`,
-      }"
-    ></div>
     <div class="desc">
       <div>
-        <div class="title ellip">{{ track.title }}</div>
+        <div class="title ellip">{{ props.track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="track.artists[0] !== ''">
-          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
-            artist
-          }}</span>
+        <div class="artists ellip" v-if="props.track.artists[0] !== ''">
+          <span
+            v-for="artist in putCommas(props.track.artists)"
+            :key="artist"
+            >{{ artist }}</span
+          >
         </div>
         <div class="artists" v-else>
-          <span>{{ track.albumartist }}</span>
+          <span>{{ props.track.albumartist }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import perks from "../../composables/perks";
-import state from "../../composables/state";
-
-const track = state.current;
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
+import { Track } from "../../interfaces";
 const putCommas = perks.putCommas;
-</script>
+
+const props = defineProps<{
+  track: Track;
+}>();
+</script>

src/components/LeftSidebar/nowPlaying.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l_ rounded" v-if="!props.collapsed">
+  <div class="l_ rounded">
     <div class="headin">Now Playing</div>
     <div class="button menu image rounded"></div>
     <div class="separator no-border"></div>
@@ -8,32 +8,30 @@
         <div
           class="l-image image rounded"
           :style="{
-            backgroundImage: `url(&quot;${current.image}&quot;)`,
+            backgroundImage: `url(&quot;${queue.current.image}&quot;)`,
           }"
         ></div>
       </div>
       <div class="separator no-border"></div>
-      <SongCard />
-      <Progress />
-      <HotKeys />
+      <SongCard :track="queue.current" />
+      <Progress :seek="queue.seek" :pos="queue.current_time" />
+      <HotKeys
+        :playing="queue.playing"
+        :playPause="queue.playPause"
+        :next="queue.playNext"
+        :prev="queue.playPrev"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import state from "../../composables/state";
 import SongCard from "./SongCard.vue";
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
+import useQStore from "../../stores/queue";
 
-const current = ref(state.current);
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
+const queue = useQStore();
 </script>
 <style lang="scss">
 .l_ {