add more bugs

src/components/FolderView/SearchBox.vue

@@ -28,7 +28,7 @@ export default {
 }
 
 .folder-top .fname {
-  width: 50%;
+  // width: 50%;
   display: flex;
   align-items: center;
 

src/components/FolderView/SongList.vue

@@ -137,6 +137,12 @@ export default {
     const current = ref(perks.current);
     const search_query = ref(state.search_query);
 
+    function doNothing(e) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      console.log('mwathani')
+    }
+
     const searchSongs = computed(() => {
       const songs = [];
 
@@ -162,6 +168,7 @@ export default {
 
     return {
       searchSongs,
+      doNothing,
       songtitle,
       songTitleWidth,
       minWidth,

src/components/RightSideBar/NowPlaying.vue

@@ -97,14 +97,7 @@ export default {
   height: 14rem;
   margin-top: .5rem;
   padding: 0.5rem;
-  background: rgb(14, 14, 14);
-  background: linear-gradient(
-    326deg,
-    rgb(0, 0, 0) 0%,
-    rgb(10, 10, 10) 13%,
-    rgba(0, 0, 0, 1) 43%,
-    rgba(0, 0, 0, 1) 100%
-  );
+  background: $card-dark;
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -137,17 +130,12 @@ export default {
       width: 100%;
       height: 0.25rem;
       cursor: pointer;
-      background: #1488cc; /* fallback for old browsers */
-      background: -webkit-linear-gradient(
-        to right,
-        #1488cc,
-        #2b32b2
-      ); /* Chrome 10-25, Safari 5.1-6 */
+      background: #1488cc;
       background: linear-gradient(
         to right,
         #1488cc,
         #2b32b2
-      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+      );
     }
 
     input::-webkit-slider-thumb {

src/components/Search.vue

@@ -88,21 +88,13 @@ import { ref, toRefs } from "@vue/reactivity";
 
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
+import searchMusic from "../composables/searchMusic.js";
+// import useDebounce from "../composed/useDebounce.js";
 
 export default {
   emits: ["expandSearch", "collapseSearch"],
   props: ["search"],
   setup(props, { emit }) {
-    const songs = [
-      {
-        title: "Thriller",
-        artist: "Michael jackson",
-      },
-      {
-        title: "We are the world",
-        artist: "Michael jackson",
-      },
-    ];
     const options = [
       {
         title: "🎵 Track",
@@ -129,6 +121,7 @@ export default {
         icon: "🈁",
       },
     ];
+    
     const loading = ref(state.loading);
     const searchComponent = ref(null);
     const filters = ref(state.filters);
@@ -183,6 +176,8 @@ export default {
     }
 
     watch(query, (new_query) => {
+      searchMusic(new_query);
+
       state.search_query.value = new_query;
       if (new_query !== "") {
         counter = 0;
@@ -206,13 +201,14 @@ export default {
       });
     });
 
+
     return {
       addFilter,
       activateMagicFlag,
       removeMagicFlag,
       removeFilter,
       removeLastFilter,
-      songs,
+      songs: state.search_tracks,
       albums,
       artists,
       query,
@@ -222,6 +218,7 @@ export default {
       filters,
       searchComponent,
       loading,
+      searchMusic,
     };
   },
 };
@@ -363,7 +360,7 @@ export default {
 .right-search .heading {
   font-size: small;
   position: relative;
-  padding:  $small;
+  padding: $small;
   display: flex;
   align-items: center;
 

src/composables/perks.js

@@ -3,6 +3,7 @@ import { watch } from "@vue/runtime-core";
 
 import media from "./mediaNotification.js";
 import state from "./state.js";
+import playAudio from "./playAudio.js";
 
 const current = ref(state.current);
 
@@ -107,14 +108,27 @@ setTimeout(() => {
   });
 }, 1000);
 
-window.addEventListener("keyup", (e) => {
-  e.preventDefault();
+var _key_down_fired = false;
+
+window.addEventListener("keydown", (e) => {
   
-  if (e.ctrlKey && e.code == "KeyF") {
+  if (e.code == "Space" && !_key_down_fired) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    playAudio.playPause();
+    _key_down_fired = true;
+
+  } else if (e.ctrlKey && e.code == "KeyF") {
     console.log('Ctrl F')
   }
 });
 
+window.addEventListener("keyup", (e) => {
+  if (e.code == "Space") {
+    _key_down_fired = false;
+  }
+})
+
 export default {
   putCommas,
   readQueue,

src/composables/searchMusic.js

@@ -0,0 +1,16 @@
+import state from "./state.js";
+
+const base_url = "http://127.0.0.1:9876/search?q=";
+
+async function search(query) {
+  const url = base_url + query;
+
+  const res = await fetch(url);
+    const json = await res.json();
+    state.search_tracks.value = json.songs;
+    state.search_albums.value = json.albums;
+    state.search_artists.value = json.artists;
+    console.log(state.search);
+}
+
+export default search;

src/composables/state.js

@@ -34,6 +34,9 @@ const loading = ref(false);
 
 const is_playing = ref(false);
 
+const search_tracks = ref([]);
+const search_albums = ref([]);
+const search_artists = ref([]);
 
 export default {
   search_query,
@@ -44,4 +47,7 @@ export default {
   magic_flag,
   loading,
   is_playing,
+  search_tracks,
+  search_albums,
+  search_artists,
 };