From 5af3d9cfc35f9104e10fd9899a99f8c6b473471e Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 17 Sep 2022 17:37:09 +0300
Subject: [PATCH] use the small thumbnails on tracklists

---
 src/App.vue                                     |  2 +-
 src/components/AlbumView/Header.vue             |  2 +-
 src/components/LeftSidebar/NP/SongCard.vue      |  2 +-
 src/components/RightSideBar/NowPlayingRight.vue |  4 ++--
 src/components/shared/SongItem.vue              |  2 +-
 src/components/shared/TrackItem.vue             |  2 +-
 src/config.ts                                   | 14 ++++++++++----
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 75fe3efa..cda06c71 100644
--- a/src/App.vue
+++ b/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 />
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 163ba361..e101e97a 100644
--- a/src/components/AlbumView/Header.vue
+++ b/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"
diff --git a/src/components/LeftSidebar/NP/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
index f1372c8f..dd91ebf6 100644
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/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">
diff --git a/src/components/RightSideBar/NowPlayingRight.vue b/src/components/RightSideBar/NowPlayingRight.vue
index 5fcc6d9d..e416fe4b 100644
--- a/src/components/RightSideBar/NowPlayingRight.vue
+++ b/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>
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 3deef673..0f3ff20e 100644
--- a/src/components/shared/SongItem.vue
+++ b/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);
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 42ca5ab0..2b009185 100644
--- a/src/components/shared/TrackItem.vue
+++ b/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"
diff --git a/src/config.ts b/src/config.ts
index 45240eeb..04ad909f 100644
--- a/src/config.ts
+++ b/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
\ No newline at end of file
+// TODO: Add setting to toggle between extending to edges or not