misc

src/components/FolderView/SongList.vue

@@ -82,23 +82,16 @@ export default {
     const current = ref(perks.current);
     const search_query = ref(state.search_query);
 
-    const updateQueue = async (song) => {
-      if (state.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
-        const new_queue = song_list.value;
-        localStorage.setItem("queue", JSON.stringify(new_queue));
-        state.queue.value = new_queue;
-      }
-
-      state.current.value = song;
-      localStorage.setItem("current", JSON.stringify(song));
-    };
+    function updateQueue(song){
+      perks.updateQueue(song)
+    }
 
     const searchSongs = computed(() => {
       const songs = [];
 
       if (search_query.value.length > 2) {
         state.loading.value = true;
-        
+
         for (let i = 0; i < song_list.value.length; i++) {
           if (
             song_list.value[i].title
@@ -162,7 +155,7 @@ export default {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
-  background-image: url(../../assets/icons/file.svg);
+  background-image: url(../../assets/images/null.webp);
   display: grid;
   place-items: center;
 }

src/components/SongItem.vue

@@ -3,7 +3,7 @@
     <td
       :style="{ width: songTitleWidth + 'px' }"
       class="flex"
-      @click="emitUpdate(song), playAudio(song.filepath)"
+      @click="emitUpdate(song)"
     >
       <div
         class="album-art rounded image"
@@ -56,7 +56,6 @@
 <script>
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
-import audio from "@/composables/playAudio.js"
 
 export default {
   props: ["song", "current", "songTitleWidth", "minWidth"],
@@ -69,7 +68,6 @@ export default {
       putCommas: perks.putCommas,
       emitUpdate,
       is_playing: state.is_playing,
-      playAudio: audio.playAudio
     };
   },
 };

src/composables/perks.js

@@ -80,6 +80,19 @@ const readQueue = () => {
   }
 };
 
+const updateQueue = async (song) => {
+  playAudio.playAudio(song.filepath)
+
+  if (state.queue.value[0]._id.$oid !== state.song_list.value[0]._id.$oid) {
+    const new_queue = state.song_list.value;
+    localStorage.setItem("queue", JSON.stringify(new_queue));
+    state.queue.value = new_queue;
+  }
+
+  state.current.value = song;
+  localStorage.setItem("current", JSON.stringify(song));
+};
+
 function focusCurrent() {
   const elem = document.getElementsByClassName("currentInQueue")[0];
 
@@ -92,21 +105,21 @@ function focusCurrent() {
   }
 }
 
-function getElem(identifier, type){
-  switch(type){
+function getElem(identifier, type) {
+  switch (type) {
     case "class": {
-      return document.getElementsByClassName(identifier)[0]
+      return document.getElementsByClassName(identifier)[0];
     }
     case "id": {
-      return document.getElementById(identifier)
+      return document.getElementById(identifier);
     }
   }
 }
 
 function focusSearchBox() {
-  const elem = getElem('search', 'id')
+  const elem = getElem("search", "id");
 
-  elem.focus()
+  elem.focus();
 }
 
 setTimeout(() => {
@@ -135,7 +148,7 @@ window.addEventListener("keydown", (e) => {
           setTimeout(() => {
             key_down_fired = false;
           }, 1000);
-          
+
           playAudio.playNext();
         }
       }
@@ -151,7 +164,6 @@ window.addEventListener("keydown", (e) => {
           setTimeout(() => {
             key_down_fired = false;
           }, 1000);
-
         }
       }
 
@@ -174,7 +186,7 @@ window.addEventListener("keydown", (e) => {
       if (!key_down_fired) {
         if (!ctrlKey) return;
         e.preventDefault();
-        focusSearchBox()
+        focusSearchBox();
 
         key_down_fired = true;
       }
@@ -190,6 +202,7 @@ export default {
   putCommas,
   readQueue,
   focusCurrent,
+  updateQueue,
   current,
   queue,
   next,

src/composables/state.js

@@ -12,6 +12,9 @@ const queue = ref([
   },
 ]);
 
+const song_list = ref([])
+const folder_list = ref([])
+
 const current = ref({
   title: "Nothing played yet",
   artists: ["... blah blah blah"],
@@ -41,6 +44,8 @@ const search_artists = ref([]);
 export default {
   search_query,
   queue,
+  song_list,
+  folder_list,
   current,
   prev,
   filters,

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path" />
+      <Header :path="path" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -17,7 +17,7 @@ import { useRoute } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
-import SearchBox from "@/components/FolderView/SearchBox.vue";
+import Header from "@/components/FolderView/Header.vue";
 
 import getData from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
@@ -27,14 +27,14 @@ export default {
   components: {
     SongList,
     FolderList,
-    SearchBox,
+    Header,
   },
   setup() {
     const route = useRoute();
     const path = ref(route.params.path);
 
-    const songs = ref([]);
-    const folders = ref([]);
+    const songs = ref(state.song_list);
+    const folders = ref(state.folder_list);
 
     const scrollable = ref(null);
 
@@ -48,8 +48,8 @@ export default {
         getData(path, last_id).then((data) => {
           scrollable.value.scrollTop = 0;
 
-          songs.value = data.songs;
-          folders.value = data.folders;
+          state.song_list.value = data.songs;
+          state.folder_list.value = data.folders;
 
           state.loading.value = false;
         });