update track interface to follow server updates

+ add search debounce time

src/components/FolderView/SongList.vue

@@ -21,7 +21,7 @@
         :track="track"
         :index="
           on_album_page
-            ? track.tracknumber
+            ? track.track
             : track.index !== undefined
             ? track.index + 1
             : index + 1
@@ -43,9 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import {  ref } from "vue";
-import { useElementSize } from "@vueuse/core";
 import { computed } from "@vue/reactivity";
+import { useElementSize } from "@vueuse/core";
+import { ref } from "vue";
 
 import SongItem from "../shared/SongItem.vue";
 
@@ -90,7 +90,7 @@ function updateQueue(index: number) {
 function getTrackList() {
   if (props.on_album_page) {
     const tracks = props.tracks.map((track) => {
-      track.index = track.tracknumber;
+      track.index = track.track;
       return track;
     });
 

src/components/LeftSidebar/NP/Progress.vue

@@ -9,7 +9,7 @@
     @change="seek()"
     :style="{
       backgroundSize: `${
-        (time.current / (q.currenttrack?.length || 0)) * 100
+        (time.current / (q.currenttrack?.duration || 0)) * 100
       }% 100%`,
     }"
   />

src/components/LeftSidebar/NP/SongCard.vue

@@ -16,18 +16,17 @@
           loading="lazy"
         />
         <div id="bitrate" v-if="track?.bitrate">
-          <span v-if="track.bitrate > 1500">MASTER</span>
-          <span v-else-if="track.bitrate > 330">FLAC</span>
-          <span v-else>MP3</span>
-          • {{ track.bitrate }}
+          {{ track.filetype }}• {{ track.bitrate }}
         </div>
       </div>
     </router-link>
 
     <div class="bottom">
-      <div class="title ellip t-center">{{ props.track?.title || '♥ Hello ♥' }}</div>
+      <div class="title ellip t-center">
+        {{ props.track?.title || "♥ Hello ♥" }}
+      </div>
       <ArtistName
-        :artists="track?.artists || []"
+        :artists="track?.artist || []"
         :albumartist="track?.albumartist || 'Play something'"
         class="artists"
       />
@@ -74,6 +73,7 @@ const imguri = paths.images.thumb;
       background-color: $black;
       border-radius: $smaller;
       box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
+      text-transform: uppercase;
     }
   }
 

src/components/RightSideBar/NowPlayingRight.vue

@@ -10,7 +10,7 @@
         <div class="np-artist ellip">
           <span
             v-for="artist in putCommas(
-              queue.currenttrack?.artists || ['♥ Hello ♥']
+              queue.currenttrack?.artist || ['♥ Hello ♥']
             )"
           >
             {{ artist }}

src/components/RightSideBar/Queue/upNext.vue

@@ -10,7 +10,7 @@
     <div class="tags">
       <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
       <div class="artist ellip" v-if="track">
-        <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+        <span v-for="artist in putCommas(track.artist)" :key="artist">{{
           artist
         }}</span>
       </div>

src/components/RightSideBar/SearchInput.vue

@@ -30,10 +30,10 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import QueueSvg from "../../assets/icons/queue.svg";
-import SearchSvg from "../../assets/icons/search.svg";
-import useSearchStore from "../../stores/search";
-import useTabStore from "../../stores/tabs";
+import QueueSvg from "@/assets/icons/queue.svg";
+import SearchSvg from "@/assets/icons/search.svg";
+import useSearchStore from "@/stores/search";
+import useTabStore from "@/stores/tabs";
 
 const search = useSearchStore();
 const tabs = useTabStore();

src/components/shared/ArtistName.vue

@@ -2,7 +2,11 @@
   <div v-tooltip="returnArtists()" style="width: auto">
     <div
       class="ellip"
-      v-if="artists.length === 0 || (artists[0] === '' && artists.length === 1)"
+      v-if="
+        artists === null ||
+        artists.length === 0 ||
+        (artists[0] === '' && artists.length === 1)
+      "
     >
       <span>{{ albumartist }}</span>
     </div>
@@ -18,15 +22,17 @@
 import { putCommas } from "@/utils";
 
 const props = defineProps<{
-  artists: string[];
+  artists: string[] | null;
   albumartist: string | undefined;
 }>();
 
 function returnArtists() {
+  if (props.artists === null) return props.albumartist;
+
   if (props.artists[0] !== "" && props.artists.length > 1) {
     return props.artists.join(", ");
-  } else {
-    return props.albumartist;
   }
+
+  return props.albumartist;
 }
 </script>

src/components/shared/SongItem.vue

@@ -28,14 +28,14 @@
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
-            :artists="track.artists"
+            :artists="track.artist"
             :albumartist="track.albumartist"
           />
         </div>
       </div>
     </div>
     <div class="song-artists">
-      <ArtistName :artists="track.artists" :albumartist="track.albumartist" />
+      <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
     </div>
     <router-link
       class="song-album ellip"
@@ -43,14 +43,14 @@
       :to="{
         name: 'AlbumView',
         params: {
-          hash: track.albumhash,
+          hash: track.albumhash || 'Unknown',
         },
       }"
     >
       {{ track.album }}
     </router-link>
     <div class="song-duration">
-      <div class="text ellip">{{ formatSeconds(track.length) }}</div>
+      <div class="text ellip">{{ formatSeconds(track.duration) }}</div>
     </div>
     <div
       class="options-icon circular"
@@ -82,7 +82,7 @@ const artisttitle = ref<HTMLElement | null>(null);
 
 const props = defineProps<{
   track: Track;
-  index: number;
+  index: number | string;
   isPlaying: Boolean;
   isCurrent: Boolean;
 }>();

src/components/shared/TrackItem.vue

@@ -24,7 +24,7 @@
       </div>
       <hr />
       <div class="artist">
-        <ArtistName :artists="track.artists" :albumartist="track.albumartist" />
+        <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
       </div>
     </div>
     <div