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>
+          {{ track.filetype }}• {{ track.bitrate }}
-          <span v-else-if="track.bitrate > 330">FLAC</span>
-          <span v-else>MP3</span>
-          • {{ 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 QueueSvg from "@/assets/icons/queue.svg";
-import SearchSvg from "../../assets/icons/search.svg";
+import SearchSvg from "@/assets/icons/search.svg";
-import useSearchStore from "../../stores/search";
+import useSearchStore from "@/stores/search";
-import useTabStore from "../../stores/tabs";
+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

src/composables/mediaNotification.ts

@@ -9,7 +9,7 @@ export default () => {
 
     navigator.mediaSession.metadata = new window.MediaMetadata({
       title: track.title,
-      artist: track.artists.join(", "),
+      artist: track.artist.join(", "),
       artwork: [
         {
           src: paths.images.thumb + track.image,

src/contexts/track_context.ts

@@ -5,8 +5,8 @@ import { Option } from "../interfaces";
 import Router from "../router";
 
 import {
-  addTrackToPlaylist,
+    addTrackToPlaylist,
-  getAllPlaylists,
+    getAllPlaylists
 } from "../composables/fetch/playlists";
 
 import useModalStore from "../stores/modal";
@@ -27,7 +27,7 @@ export default async (
     type: "separator",
   };
 
-  const single_artist = track.artists.length === 1;
+  const single_artist = track.artist.length === 1;
 
   let playlists = <Option[]>[];
   const p = await getAllPlaylists();
@@ -46,7 +46,7 @@ export default async (
       return false;
     }
 
-    return track.artists.map((artist) => {
+    return track.artist.map((artist) => {
       return <Option>{
         label: artist,
         action: () => console.log("artist"),

src/interfaces.ts

@@ -4,20 +4,21 @@ export interface Track {
   trackid: string;
   title: string;
   album?: string;
-  artists: string[];
+  artist: string[];
   albumartist?: string;
   albumhash?: string;
   folder?: string;
   filepath?: string;
-  length?: number;
+  duration?: number;
   bitrate?: number;
   genre?: string;
   image: string;
-  tracknumber: number;
+  track: string;
-  discnumber: number;
+  disc: string;
   index: number;
   hash: string;
   copyright?: string;
+  filetype: string
 }
 
 export interface Folder {

src/stores/pages/album.ts

@@ -4,14 +4,14 @@ import { ComputedRef } from "vue";
 
 import { FuseTrackOptions } from "@/composables/enums";
 
-import { getAlbumBio, getAlbumTracks } from "../../composables/fetch/album";
+import { getAlbumTracks } from "../../composables/fetch/album";
 import { AlbumInfo, Artist, FuseResult, Track } from "../../interfaces";
 import { useNotifStore } from "../notification";
 
 function sortTracks(tracks: Track[]) {
   return tracks.sort((a, b) => {
-    if (a.tracknumber && b.tracknumber) {
+    if (a.track && b.track) {
-      return a.tracknumber - b.tracknumber;
+      return a.track - b.track;
     }
 
     return 0;
@@ -24,9 +24,9 @@ interface Discs {
 
 function createDiscs(tracks: Track[]): Discs {
   return tracks.reduce((group, track) => {
-    const { discnumber } = track;
+    const { disc } = track;
-    group[discnumber] = group[discnumber] ?? [];
+    group[disc] = group[disc] ?? [];
-    group[discnumber].push(track);
+    group[disc].push(track);
     return group;
   }, {} as Discs);
 }

src/stores/search.ts

@@ -32,7 +32,7 @@ function scrollOnLoad() {
 export default defineStore("search", () => {
   // @ts-ignore
   const query = ref("");
-  const debouncedQuery = useDebounce(query);
+  const debouncedQuery = useDebounce(query, 500);
   const { startLoading, stopLoading } = useLoaderStore();
   const route = useRoute();