use tabs to seperate search results

src/stores/queue.ts

@@ -12,7 +12,8 @@ import {
 import notif from "../composables/mediaNotification";
 import { FromOptions } from "../composables/enums";
 
-function addQToLocalStorage(
+
+function writeQueue(
   from: fromFolder | fromAlbum | fromPlaylist,
   tracks: Track[]
 ) {
@@ -25,11 +26,11 @@ function addQToLocalStorage(
   );
 }
 
-function addCurrentToLocalStorage(track: Track) {
+function writeCurrent(track: Track) {
   localStorage.setItem("current", JSON.stringify(track));
 }
 
-function readCurrentFromLocalStorage(): Track {
+function readCurrent(): Track {
   const current = localStorage.getItem("current");
   if (current) {
     return JSON.parse(current);
@@ -114,7 +115,7 @@ export default defineStore("Queue", {
         }
       }
     },
-    readQueueFromLocalStorage() {
+    readQueue() {
       const queue = localStorage.getItem("queue");
 
       if (queue) {
@@ -123,7 +124,7 @@ export default defineStore("Queue", {
         this.tracks = parsed.tracks;
       }
 
-      this.updateCurrent(readCurrentFromLocalStorage());
+      this.updateCurrent(readCurrent());
     },
     updateCurrent(track: Track) {
       this.current = track;
@@ -131,7 +132,7 @@ export default defineStore("Queue", {
       this.updateNext(this.current);
       this.updatePrev(this.current);
 
-      addCurrentToLocalStorage(track);
+      writeCurrent(track);
     },
     updateNext(track: Track) {
       const index = this.tracks.findIndex(
@@ -161,8 +162,9 @@ export default defineStore("Queue", {
     },
     setNewQueue(tracklist: Track[]) {
       if (this.tracks !== tracklist) {
-        this.tracks = tracklist;
-        addQToLocalStorage(this.from, this.tracks);
+        this.tracks = [];
+        this.tracks.push(...tracklist);
+        writeQueue(this.from, this.tracks);
       }
     },
     playFromFolder(fpath: string, tracks: Track[]) {
@@ -201,7 +203,8 @@ export default defineStore("Queue", {
     },
     addTrackToQueue(track: Track) {
       this.tracks.push(track);
-      addQToLocalStorage(this.from, this.tracks);
+      writeQueue(this.from, this.tracks);
+      this.updateNext(this.current);
     },
     playTrackNext(track: Track) {
       const Toast = useNotifStore();
@@ -209,19 +212,24 @@ export default defineStore("Queue", {
         (t: Track) => t.trackid === this.current.trackid
       );
 
-      const next: Track = this.tracks[currentid + 1];
+      if (currentid == this.tracks.length - 1) {
+        this.tracks.push(track);
+      } else {
+        const next: Track = this.tracks[currentid + 1];
 
-      if (next.trackid === track.trackid) {
-        Toast.showNotification("Track is already queued", NotifType.Info);
-        return;
+        if (next.trackid === track.trackid) {
+          Toast.showNotification("Track is already queued", NotifType.Info);
+          return;
+        }
       }
 
       this.tracks.splice(currentid + 1, 0, track);
+      this.updateNext(this.current);
       Toast.showNotification(
         `Added ${track.title} to queue`,
         NotifType.Success
       );
-      addQToLocalStorage(this.from, this.tracks);
+      writeQueue(this.from, this.tracks);
     },
   },
 });

src/stores/search.ts

@@ -0,0 +1,134 @@
+import { ref, reactive } from "@vue/reactivity";
+import { defineStore } from "pinia";
+import { AlbumInfo, Artist, Track } from "../interfaces";
+import {
+  searchTracks,
+  searchAlbums,
+  searchArtists,
+  loadMoreTracks,
+  loadMoreAlbums,
+  loadMoreArtists,
+} from "../composables/searchMusic";
+import { watch } from "vue";
+import useDebouncedRef from "../composables/useDebouncedRef";
+
+/**
+ *
+ * @param id  The id of the element of the div to scroll
+ * Scrolls on clicking the loadmore button
+ */
+function scrollOnLoad(id: string) {
+  const elem = document.getElementById(id);
+
+  elem.scroll({
+    top: elem.scrollHeight,
+    left: 0,
+    behavior: "smooth",
+  });
+}
+
+export default defineStore("search", () => {
+  const query = useDebouncedRef("", 600);
+
+  const tracks = reactive({
+    value: <Track[]>[],
+    more: false,
+  });
+
+  const albums = reactive({
+    value: <AlbumInfo[]>[],
+    more: false,
+  });
+
+  const artists = reactive({
+    value: <Artist[]>[],
+    more: false,
+  });
+
+  /**
+   * Searches for tracks, albums and artists
+   * @param query query to search for
+   */
+  function search(query: string) {
+    searchTracks(query).then((res) => {
+      tracks.value = res.tracks;
+      tracks.more = res.more;
+    });
+
+    searchAlbums(query).then((res) => {
+      albums.value = res.albums;
+      albums.more = res.more;
+    });
+
+    searchArtists(query).then((res) => {
+      artists.value = res.artists;
+      artists.more = res.more;
+    });
+  }
+
+  /**
+   * Loads more search tracks results
+   *
+   * @param index The starting index of the tracks to load
+   */
+  function loadTracks(index: number) {
+    loadMoreTracks(index)
+      .then((res) => {
+        tracks.value = [...tracks.value, ...res.tracks];
+        tracks.more = res.more;
+      })
+      .then(() => {
+        scrollOnLoad("tab-content");
+      });
+  }
+
+  /**
+   * Loads more search albums results
+   *
+   * @param index The starting index of the albums to load
+   */
+  function loadAlbums(index: number) {
+    loadMoreAlbums(index)
+      .then((res) => {
+        albums.value = [...albums.value, ...res.albums];
+        albums.more = res.more;
+      })
+      .then(() => {
+        scrollOnLoad("tab-content");
+      });
+  }
+
+  /**
+   * Loads more search artists results
+   *
+   * @param index The starting index of the artists to load
+   */
+  function loadArtists(index: number) {
+    loadMoreArtists(index)
+      .then((res) => {
+        artists.value = [...artists.value, ...res.artists];
+        artists.more = res.more;
+      })
+      .then(() => {
+        scrollOnLoad("tab-content");
+      });
+  }
+
+  watch(
+    () => query.value,
+    (newQuery) => {
+      search(newQuery);
+    }
+  );
+
+  return {
+    tracks,
+    albums,
+    artists,
+    query,
+    search,
+    loadTracks,
+    loadAlbums,
+    loadArtists,
+  };
+});