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_ {

src/components/playlists/PlaylistCard.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
 
   .image {
     min-width: 100%;
-    height: 8.5rem;
+    height: 10rem;
     background-image: url("../../assets/images/eggs.jpg");
   }
 

src/components/shared/Loader.vue

@@ -12,10 +12,8 @@ const loading = state.loading
 
 <style lang="scss">
 .loaderx {
-  position: absolute;
-  top: 0.65rem;
   width: 1.5rem;
-  height: 1.5rem;
+  height:1.5rem;
   border-radius: 50%;
 }
 

src/components/shared/SongItem.vue

@@ -79,10 +79,7 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  contextStore.showContextMenu(
-    e,
-    trackContext(props.song, modalStore)
-  );
+  contextStore.showContextMenu(e, trackContext(props.song, modalStore));
   context_on.value = true;
 
   contextStore.$subscribe((mutation, state) => {

src/components/shared/TrackItem.vue

@@ -4,7 +4,7 @@
     @click="playThis(props.track)"
     :class="[
       {
-        currentInQueue: current.trackid === props.track.trackid,
+        currentInQueue: props.isCurrent,
       },
       { 'context-on': context_on },
     ]"
@@ -18,8 +18,8 @@
     >
       <div
         class="now-playing-track image"
-        v-if="current.trackid === props.track.trackid"
-        :class="{ active: is_playing, not_active: !is_playing }"
+        v-if="props.isCurrent"
+        :class="{ active: props.isPlaying, not_active: !props.isPlaying }"
       ></div>
     </div>
     <div class="tags">
@@ -34,21 +34,31 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import perks from "../../composables/perks";
-import playAudio from "../../composables/playAudio";
-import useContextStore from "@/stores/context";
 import trackContext from "../../contexts/track_context";
+import { Track } from "../../interfaces";
+
+import useContextStore from "../../stores/context";
+import useModalStore from "../../stores/modal";
 
 const contextStore = useContextStore();
+const modalStore = useModalStore();
+
+const props = defineProps<{
+  track: Track;
+  isCurrent: boolean;
+  isPlaying: boolean;
+}>();
+
 const context_on = ref(false);
 
-const showContextMenu = (e) => {
+const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  contextStore.showContextMenu(e, trackContext(props.track));
+  contextStore.showContextMenu(e, trackContext(props.track, modalStore));
   context_on.value = true;
 
   contextStore.$subscribe((mutation, state) => {
@@ -57,18 +67,16 @@ const showContextMenu = (e) => {
     }
   });
 };
-const props = defineProps({
-  track: Object,
-  default: () => ({}),
-});
+
+const emit = defineEmits<{
+  (e: "PlayThis", track: Track): void;
+}>();
 
 const current = ref(perks.current);
 const putCommas = perks.putCommas;
-const is_playing = ref(playAudio.playing);
 
-const playThis = (song) => {
-  playAudio.playAudio(song.trackid);
-  perks.current.value = song;
+const playThis = (track: Track) => {
+  emit("PlayThis", track);
 };
 </script>