fix current track in queue auto scroll position

- add another inner container to limit the offset
- auto scroll current track to container start
- add todo file

server/app/api/__init__.py

@@ -34,7 +34,7 @@ def initialize() -> None:
     albumslib.create_everything()
     folderslib.run_scandir()
     playlistlib.create_all_playlists()
-    # functions.reindex_tracks()
+    functions.reindex_tracks()
 
 
 initialize()

server/app/lib/watchdoge.py

@@ -148,3 +148,7 @@ class Handler(PatternMatchingEventHandler):
 
 
 watch = OnMyWatch()
+
+# TODO
+# When removing a track, check if there are other tracks in the same album,
+# if it was the last one, remove the album.

src/components/FolderView/FolderItem.vue

@@ -13,7 +13,7 @@
   </router-link>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
   folder: {
     type: Object,

src/components/FolderView/SongList.vue

@@ -20,9 +20,9 @@
         />
       </div>
     </div>
-    <div v-else-if="tracks.length === 0 && search_query">
+    <div v-else-if="tracks.length === 0">
       <div class="no-results">
-        <div class="text">Nothing down here 😑</div>
+        <div class="text">No tracks here</div>
       </div>
     </div>
   </div>
@@ -33,7 +33,6 @@ import { useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
-import state from "../../composables/state";
 import useQStore from "../../stores/queue";
 import { Track } from "../../interfaces";
 
@@ -47,7 +46,6 @@ const props = defineProps<{
 }>();
 
 let route = useRoute().name;
-const search_query = state.search_query;
 
 /**
  * Plays a clicked track and updates the queue

src/components/RightSideBar/Queue.vue

@@ -2,19 +2,21 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.next" :playNext="queue.playNext" />
-      <div
+      <div class="scrollable-r border rounded">
-        class="scrollable-r border rounded"
+        <div
-        @mouseenter="setMouseOver(true)"
+          class="inner"
-        @mouseleave="setMouseOver(false)"
+          @mouseenter="setMouseOver(true)"
-      >
+          @mouseleave="setMouseOver(false)"
-        <TrackItem
+        >
-          v-for="t in queue.tracks"
+          <TrackItem
-          :key="t.trackid"
+            v-for="t in queue.tracks"
-          :track="t"
+            :key="t.trackid"
-          @playThis="queue.play(t)"
+            :track="t"
-          :isCurrent="t.trackid === queue.current.trackid"
+            @playThis="queue.play(t)"
-          :isPlaying="queue.playing"
+            :isCurrent="t.trackid === queue.current.trackid"
-        />
+            :isPlaying="queue.playing"
+          />
+        </div>
       </div>
       <PlayingFrom :from="queue.from" />
     </div>
@@ -62,10 +64,17 @@ onUpdated(() => {
 
     .scrollable-r {
       height: 100%;
-      padding: $small;
+      padding: $small 0 $small $small;
-      overflow: auto;
+      overflow: hidden;
-      overflow-x: hidden;
+
-      scrollbar-color: grey transparent;
+      .inner {
+        height: 100%;
+        overflow: scroll;
+        margin-top: 1rem;
+        padding-right: $small;
+        overflow-x: hidden;
+        scrollbar-color: grey transparent;
+      }
     }
   }
 }

src/components/RightSideBar/Search/Main.vue

@@ -11,7 +11,6 @@
         <ArtistGrid />
       </Tab>
     </TabsWrapper>
-    <component :is="s.currentTab" />
   </div>
 </template>
 
@@ -22,8 +21,6 @@ import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
 import "@/assets/css/Search/Search.scss";
-import useSearchStore from "@/stores/search";
-const s = useSearchStore();
 
 </script>
 

src/components/RightSideBar/Search/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="name == s.currentTab"  v-motion-slide-visible-top>
+  <div v-show="name == s.currentTab" v-motion-slide-visible-top>
     <slot />
   </div>
 </template>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -26,7 +26,7 @@ const queue = useQStore();
 const search = useSearchStore();
 
 function loadMore() {
-    search.updateLoadCounter("tracks", 5);
+  search.updateLoadCounter("tracks", 5);
   search.loadTracks(search.loadCounter.tracks);
 }
 

src/components/modals/updatePlaylist.vue

@@ -41,7 +41,7 @@
       />
     </div>
     <div class="submit">
-      <input type="submit" class="rounded" value="Update" />
+      <input type="submit" id="updateplaylistsubmit" class="rounded" value="Update" @click="" />
     </div>
   </form>
 </template>
@@ -98,8 +98,19 @@ function handleFile(file: File) {
   image = file;
 }
 
+let clicked = false;
+
 function update_playlist(e: Event) {
   e.preventDefault();
+
+  if (!clicked) {
+    clicked = true;
+    const elem = document.getElementById("updateplaylistsubmit") as HTMLFormElement
+    elem.value = "Updating"
+  } else {
+    return;
+  }
+
   const form = e.target as HTMLFormElement;
   const formData = new FormData(form);
 

src/composables/perks.ts

@@ -19,7 +19,7 @@ function focusElem(className: string, delay?: number) {
     if (dom) {
       dom.scrollIntoView({
         behavior: "smooth",
-        block: "center",
+        block: "start",
         inline: "center",
       });
     }

todo

@@ -0,0 +1,16 @@
+### Server
+
+- [ ] Debug the watchdog module. It has some weird behavior.
+- [ ] Dynamically add files as they are being processed. Current behavior is: process all, then add them at once. This can cause impatience in case of lots of files.
+- [ ] Add settings module
+- [ ] In case of duplicates, select the higher bitrate track
+- [ ] Add and deploy demo branch
+
+### Client
+- [ ] Add processes tab to show running tasks, eg. when tagging files. I have no idea on how to go about it so far. Web sockets? 
+- [ ] Responsiveness, especially the track list.
+- [ ] Make dummy buttons functional.
+- [ ] Add settings page (or modal)
+- [ ] Add keyboard shortcuts listing page (or modal)
+- [ ] Add backspace shortcut to go back.
+- [ ] Implement Esc key to cancel modals.