From f5b6791d4bf4e0a3e07cf9926fde9057b0304633 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 11 Sep 2022 20:37:29 +0300
Subject: [PATCH] update track interface to follow server updates

+ add search debounce time
---
 src/components/FolderView/SongList.vue          |  8 ++++----
 src/components/LeftSidebar/NP/Progress.vue      |  2 +-
 src/components/LeftSidebar/NP/SongCard.vue      | 12 ++++++------
 src/components/RightSideBar/NowPlayingRight.vue |  2 +-
 src/components/RightSideBar/Queue/upNext.vue    |  2 +-
 src/components/RightSideBar/SearchInput.vue     |  8 ++++----
 src/components/shared/ArtistName.vue            | 14 ++++++++++----
 src/components/shared/SongItem.vue              | 10 +++++-----
 src/components/shared/TrackItem.vue             |  2 +-
 src/composables/mediaNotification.ts            |  2 +-
 src/contexts/track_context.ts                   |  8 ++++----
 src/interfaces.ts                               |  9 +++++----
 src/stores/pages/album.ts                       | 12 ++++++------
 src/stores/search.ts                            |  2 +-
 14 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index e49e5665..ca8ff7f1 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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;
     });
 
diff --git a/src/components/LeftSidebar/NP/Progress.vue b/src/components/LeftSidebar/NP/Progress.vue
index 38060e80..ff648202 100644
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/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%`,
     }"
   />
diff --git a/src/components/LeftSidebar/NP/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
index caa6a4de..f1372c8f 100644
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/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;
     }
   }
 
diff --git a/src/components/RightSideBar/NowPlayingRight.vue b/src/components/RightSideBar/NowPlayingRight.vue
index 86fc0c6d..5fcc6d9d 100644
--- a/src/components/RightSideBar/NowPlayingRight.vue
+++ b/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 }}
diff --git a/src/components/RightSideBar/Queue/upNext.vue b/src/components/RightSideBar/Queue/upNext.vue
index 4cc01ca5..102df077 100644
--- a/src/components/RightSideBar/Queue/upNext.vue
+++ b/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>
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 5a8cbc15..ee658db4 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/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();
diff --git a/src/components/shared/ArtistName.vue b/src/components/shared/ArtistName.vue
index 71d45c7d..f85b564c 100644
--- a/src/components/shared/ArtistName.vue
+++ b/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>
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 24b7cedb..ac16faa9 100644
--- a/src/components/shared/SongItem.vue
+++ b/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;
 }>();
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index d94982aa..42ca5ab0 100644
--- a/src/components/shared/TrackItem.vue
+++ b/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
diff --git a/src/composables/mediaNotification.ts b/src/composables/mediaNotification.ts
index 6807b639..05fc487c 100644
--- a/src/composables/mediaNotification.ts
+++ b/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,
diff --git a/src/contexts/track_context.ts b/src/contexts/track_context.ts
index eb08112c..bd78045c 100644
--- a/src/contexts/track_context.ts
+++ b/src/contexts/track_context.ts
@@ -5,8 +5,8 @@ import { Option } from "../interfaces";
 import Router from "../router";
 
 import {
-  addTrackToPlaylist,
-  getAllPlaylists,
+    addTrackToPlaylist,
+    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"),
diff --git a/src/interfaces.ts b/src/interfaces.ts
index a070e8be..bce4883d 100644
--- a/src/interfaces.ts
+++ b/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;
-  discnumber: number;
+  track: string;
+  disc: string;
   index: number;
   hash: string;
   copyright?: string;
+  filetype: string
 }
 
 export interface Folder {
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index 6d340490..77b7d6a9 100644
--- a/src/stores/pages/album.ts
+++ b/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) {
-      return a.tracknumber - b.tracknumber;
+    if (a.track && b.track) {
+      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;
-    group[discnumber] = group[discnumber] ?? [];
-    group[discnumber].push(track);
+    const { disc } = track;
+    group[disc] = group[disc] ?? [];
+    group[disc].push(track);
     return group;
   }, {} as Discs);
 }
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 9ba6b74d..b8825d1a 100644
--- a/src/stores/search.ts
+++ b/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();