client: implement a buggy scrollIntoView in queue view

server/app/api.py

@@ -286,7 +286,7 @@ def getFolderTree(folder: str = None):
         song['type']['name'] = "folder"
         song['type']['id'] = req_dir
 
-    return {"files": songs, "folders": folders}
+    return {"files": songs, "folders": sorted(folders, key= lambda i: i['name'])}
 
 
 @bp.route('/get/queue', methods=['POST'])

server/app/models.py

@@ -52,7 +52,7 @@ class AllSongs(Mongo):
         return self.collection.find().limit(25)
 
     def find_songs_by_folder(self, query):
-        return self.collection.find({'folder': query})
+        return self.collection.find({'folder': query}).sort('title', pymongo.ASCENDING)
 
     def find_songs_by_folder_og(self, query):
         return self.collection.find({'folder': query})

src/components/FolderView/FolderList.vue

@@ -56,7 +56,7 @@ export default {
 }
 
 .f-container .f-item {
-  min-width: 14.4rem;
+  min-width: 13rem;
   min-height: 5rem;
   display: flex;
   align-items: center;
@@ -85,10 +85,10 @@ export default {
 
 .f-container .f-item:hover {
   transition: all 0.2s ease;
-  background: #000000; /* fallback for old browsers */
+  background: #000000;
   background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
-    -webkit-linear-gradient(to bottom, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
+    -webkit-linear-gradient(to bottom, #434343, #000000);
   background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
-    linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    linear-gradient(to bottom, #434343, #000000);
 }
 </style>

src/components/FolderView/SongList.vue

@@ -14,10 +14,8 @@
           <tr
             v-for="song in songs"
             :key="song"
-            @click="
+            @click="updateQueue(song), playAudio(song.filepath)"
-              updateQueue(song, song.type.name, song.type.id),
+            :class="{ current: current._id.$oid == song._id.$oid }"
-                playAudio(song.filepath)
-            "
           >
             <td :style="{ width: songTitleWidth + 'px' }" class="flex">
               <div
@@ -62,7 +60,6 @@ import { ref, toRefs } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import audio from "@/composables/playAudio.js";
-import getQueue from "@/composables/getQueue.js";
 import perks from "@/composables/perks.js";
 
 export default {
@@ -75,9 +72,9 @@ export default {
     const minWidth = ref(300);
     const putCommas = perks.putCommas;
 
-    const updateQueue = async (song, type, id) => {
+    const updateQueue = async (song) => {
       if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
-        const queue = await getQueue(type, id);
+        const queue = song_list.value;
         localStorage.setItem("queue", JSON.stringify(queue));
         perks.queue.value = queue;
       }
@@ -111,6 +108,7 @@ export default {
     });
 
     const playAudio = audio.playAudio;
+    const current = ref(perks.current);
 
     return {
       songtitle,
@@ -119,6 +117,7 @@ export default {
       playAudio,
       updateQueue,
       putCommas,
+      current,
     };
   },
 };
@@ -134,6 +133,10 @@ export default {
   &::-webkit-scrollbar {
     display: none;
   }
+
+  .current {
+    color: rgb(255, 238, 0);
+  }
 }
 
 .folder .table table td .album-art {
@@ -195,7 +198,17 @@ td .artist {
 
     &:hover {
       & {
-        background-color: rgb(5, 80, 150);
+        & > td {
+          background-color: rgb(5, 80, 150);
+        }
+
+        & td:first-child {
+          border-radius: $small 0 0 $small;
+        }
+
+        & td:last-child {
+          border-radius: 0 $small $small 0;
+        }
       }
     }
   }

src/components/RightSideBar/UpNext.vue

@@ -23,7 +23,13 @@
     <div>
       <div :class="{ hr: is_expanded }" class="all-items">
         <div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
-          <div class="song-item h-1" v-for="song in queue" :key="song" @click="playThis(song)">
+          <div
+            class="song-item h-1"
+            v-for="song in queue"
+            :key="song"
+            @click="playThis(song)"
+            :class="{ currentInQueue: current._id.$oid == song._id.$oid }"
+          >
             <div
               class="album-art image"
               :style="{
@@ -50,29 +56,63 @@
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
+import { watch } from "@vue/runtime-core";
 
 export default {
   props: ["up_next"],
   setup(props, { emit }) {
     const is_expanded = toRefs(props).up_next;
+
+    const queue = ref(perks.queue);
+    const next = ref(perks.next);
+    const current = ref(perks.current);
+
     let collapse = () => {
       emit("expandQueue");
     };
 
     const { playNext } = audio;
-    const {playAudio} = audio;
+    const { playAudio } = audio;
+
+    watch(is_expanded, (val) => {
+      if (val == true) {
+        var elem = document.getElementsByClassName("currentInQueue")[0];
+        elem.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center",
+        });
+      }
+    });
+
+    watch(current, (val) => {
+      if (val) {
+        var elem = document.getElementsByClassName("currentInQueue")[0];
+        elem.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center",
+        });
+      }
+    });
 
     const playThis = (song) => {
       playAudio(song.filepath);
       perks.current.value = song;
-    }
+    };
-
-    const queue = ref(perks.queue);
-    const next = ref(perks.next);
 
     const putCommas = perks.putCommas;
 
-    return { collapse, is_expanded, playNext, playThis, putCommas, queue, next };
+    return {
+      collapse,
+      is_expanded,
+      playNext,
+      playThis,
+      putCommas,
+      queue,
+      next,
+      current,
+    };
   },
 };
 </script>
@@ -90,6 +130,11 @@ export default {
 .up-next .v1 {
   max-height: 20em;
   transition: max-height 0.5s ease;
+  padding: $small;
+
+  .currentInQueue {
+    background-color: rgba(0, 125, 241, 0.562);
+  }
 }
 
 .up-next {

src/views/FolderView.vue

@@ -96,7 +96,7 @@ export default {
 
 #scrollable {
   overflow-y: scroll;
-  height: 100%;
+  height: calc(100% - $small);
-  padding-bottom: $small;
+  padding-right: $small;
 }
 </style>