update track interface to follow server updates

+ add search debounce time

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