use the small thumbnails on tracklists

src/App.vue

@@ -10,7 +10,7 @@
       disableSidebar: !settings.use_sidebar,
       extendWidth: settings.extend_width && settings.extend_width_enabled,
       isSmall: !xl,
-      addBorderRight: xxl,
+      addBorderRight: xxl && !settings.extend_width,
     }"
   >
     <LeftSidebar />

src/components/AlbumView/Header.vue

@@ -11,7 +11,7 @@
     }"
   >
     <div class="big-img noscroll" :class="{ imgSmall: widthIsSmall }">
-      <img :src="imguri.thumb + album.image" class="rounded" />
+      <img :src="imguri.thumb.large + album.image" class="rounded" />
     </div>
     <div
       class="info"

src/components/LeftSidebar/NP/SongCard.vue

@@ -43,7 +43,7 @@ const props = defineProps<{
   track: Track | null;
 }>();
 
-const imguri = paths.images.thumb;
+const imguri = paths.images.thumb.large;
 </script>
 
 <style lang="scss">

src/components/RightSideBar/NowPlayingRight.vue

@@ -2,7 +2,7 @@
   <div class="b-bar bg-primary pad-medium rounded" v-if="settings.show_alt_np">
     <div class="info">
       <img
-        :src="paths.images.thumb + queue.currenttrack?.image"
+        :src="paths.images.thumb.large + queue.currenttrack?.image"
         alt=""
         class="rounded shadow-lg"
       />
@@ -26,7 +26,7 @@
       <span class="current">{{ formatSeconds(queue.duration.current) }}</span>
       <HotKeys />
       <span class="full">{{
-        formatSeconds(queue.currenttrack ? queue.currenttrack.length : 0)
+        formatSeconds(queue.currenttrack ? queue.currenttrack.duration : 0)
       }}</span>
     </div>
   </div>

src/components/shared/SongItem.vue

@@ -75,7 +75,7 @@ import { formatSeconds } from "@/utils";
 import ArtistName from "./ArtistName.vue";
 
 const context_on = ref(false);
-const imguri = paths.images.thumb;
+const imguri = paths.images.thumb.small;
 const options_button_clicked = ref(false);
 
 const artisttitle = ref<HTMLElement | null>(null);

src/components/shared/TrackItem.vue

@@ -11,7 +11,7 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img :src="paths.images.thumb + track.image" alt="" class="rounded-sm" />
+      <img :src="paths.images.thumb.small + track.image" alt="" class="rounded-sm" />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"

src/config.ts

@@ -1,5 +1,5 @@
 // "local" | "remote"
-let mode = "remote";
+let mode = "local";
 
 export interface D<T = string> {
   [key: string]: T;
@@ -16,7 +16,10 @@ const ports = {
 };
 
 const imageRoutes = {
-  thumb: "/t/",
+  thumb: {
+    large: "/t/",
+    small: "/t/s/",
+  },
   artist: "/a/",
   playlist: "/p/",
   raw: "/raw/",
@@ -72,7 +75,10 @@ const paths = {
     files: baseApiUrl + "/file",
   },
   images: {
-    thumb: baseImgUrl + imageRoutes.thumb,
+    thumb: {
+      small: baseImgUrl + imageRoutes.thumb.small,
+      large: baseImgUrl + imageRoutes.thumb.large,
+    },
     artist: baseImgUrl + imageRoutes.artist,
     playlist: baseImgUrl + imageRoutes.playlist,
     raw: baseImgUrl + imageRoutes.raw,
@@ -81,4 +87,4 @@ const paths = {
 
 export { paths, toggleMode };
 
-// TODO: Add setting to toggle between extending to edges or not
+// TODO: Add setting to toggle between extending to edges or not