fix watchdoge.py add_track()

src/components/LeftSidebar/NP/HotKeys.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="hotkeys">
+    <div class="image ctrl-btn" id="previous" @click="playPrev"></div>
+    <div
+      class="image ctrl-btn play-pause"
+      @click="playPause"
+      :class="{ isPlaying: isPlaying }"
+    ></div>
+    <div class="image ctrl-btn" id="next" @click="playNext"></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>
+
+<style lang="scss">
+.hotkeys {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  gap: $small;
+  height: 3rem;
+  align-items: center;
+  place-content: flex-end;
+
+  .ctrl-btn {
+      height: 2.5rem;
+        width: 100%;
+      background-size: 1.5rem !important;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: $red;
+      }
+    }
+
+  #previous {
+    background-image: url(../../../assets/icons/previous.svg);
+  }
+
+  .play-pause {
+    background-image: url(../../../assets/icons/play.svg);
+  }
+
+  .isPlaying {
+    background-image: url(../../../assets/icons/pause.svg);
+  }
+
+  #next {
+    background-image: url(../../../assets/icons/next.svg);
+  }
+}
+</style>

src/components/LeftSidebar/NP/Progress.vue

@@ -0,0 +1,21 @@
+<template>
+  <input
+    id="progress"
+    type="range"
+    :value="pos"
+    min="0"
+    max="100"
+    step="0.1"
+    @change="seek()"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import playAudio from "../../../composables/playAudio";
+const pos = ref(playAudio.pos);
+
+const seek = () => {
+  playAudio.seek(document.getElementById("progress").value);
+};
+</script>

src/components/LeftSidebar/NP/otherKeys.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="other-keys">
+    <div class="keys rounded playlist image"></div>
+    <div class="keys rounded heart"></div>
+    <div class="keys rounded folder"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.l_ .other-keys {
+//   border: solid;
+  height: 2.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .keys {
+    height: 2rem;
+    width: 100%;
+    background-size: 1.5rem;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &:hover {
+      background-color: $red;
+    }
+  }
+  .playlist {
+    background-image: url("../../../assets/icons/plus.svg");
+  }
+}
+</style>