From ffcc0070a00a3cb740666bdf654e33d20a8fca5d Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 6 Aug 2022 23:35:33 +0300
Subject: [PATCH] change server port to localhost 1970

+ change img server to localhost 1971
+ add loading = lazy to images
---
 src/components/AlbumView/AlbumBio.vue         |  8 ++++-
 src/components/AlbumView/Header.vue           |  7 ++++-
 src/components/LeftSidebar/NP/SongCard.vue    |  1 +
 .../RightSideBar/Home/Recommendation.vue      |  2 +-
 src/components/RightSideBar/Search/Main.vue   |  6 ----
 src/components/shared/ArtistCard.vue          |  7 ++++-
 src/components/shared/SongItem.vue            |  1 +
 src/composables/state.ts                      |  2 +-
 src/config.ts                                 |  6 ++--
 src/router/index.js                           | 30 +++++++++++++------
 src/views/FolderView.vue                      |  3 +-
 11 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index 43955440..aedb77f9 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -7,9 +7,15 @@
           class="rect rounded"
           :src="paths.images.thumb + images.album"
           alt=""
+          loading="lazy"
         />
         <div class="circle"></div>
-        <img class="circle" :src="paths.images.artist + images.artist" alt="" />
+        <img
+          class="circle"
+          :src="paths.images.artist + images.artist"
+          alt=""
+          loading="lazy"
+        />
       </div>
       <div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
       <div class="bio rounded bg-black" v-else>No bio found</div>
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 37f72e14..aaf894ed 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -9,7 +9,12 @@
     }"
   >
     <div class="art rounded">
-      <img :src="imguri + album.image" alt="" class="rounded shadow-lg" />
+      <img
+        :src="imguri + album.image"
+        alt=""
+        class="rounded shadow-lg"
+        loading="lazy"
+      />
     </div>
     <div class="info" :class="{ nocontrast: isLight(album.colors[0]) }">
       <div class="top">
diff --git a/src/components/LeftSidebar/NP/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
index 32ffc874..316e0345 100644
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/src/components/LeftSidebar/NP/SongCard.vue
@@ -15,6 +15,7 @@
               :src="imguri + track.image"
               alt=""
               class="l-image rounded force-lm"
+              loading="lazy"
             />
           </div>
         </router-link>
diff --git a/src/components/RightSideBar/Home/Recommendation.vue b/src/components/RightSideBar/Home/Recommendation.vue
index b21d9844..9aec9785 100644
--- a/src/components/RightSideBar/Home/Recommendation.vue
+++ b/src/components/RightSideBar/Home/Recommendation.vue
@@ -3,7 +3,7 @@
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">
-        <img src="" class="rounded" />
+        <img src="" class="rounded" loading="lazy"/>
         <div class="tags">
           <div class="title">{{ song.title }}</div>
           <div class="artist">{{ song.artist }}</div>
diff --git a/src/components/RightSideBar/Search/Main.vue b/src/components/RightSideBar/Search/Main.vue
index 6567a934..4ceae89a 100644
--- a/src/components/RightSideBar/Search/Main.vue
+++ b/src/components/RightSideBar/Search/Main.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
-      <Tab name="Top Results">
-        <ArtistGrid />
-      </Tab>
       <Tab name="tracks">
         <TracksGrid />
       </Tab>
@@ -13,9 +10,6 @@
       <Tab name="artists">
         <ArtistGrid />
       </Tab>
-      <Tab name="Playlists">
-        <ArtistGrid />
-      </Tab>
     </TabsWrapper>
   </div>
 </template>
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 37dc535e..91cd645e 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
-    <img class="artist-image shadow-sm" :src="imguri + artist.image" alt="" />
+    <img
+      class="artist-image shadow-sm"
+      :src="imguri + artist.image"
+      alt=""
+      loading="lazy"
+    />
     <div>
       <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index a272e4d5..d09c5115 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -16,6 +16,7 @@
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
         <img
+          loading="lazy"
           :src="imguri + track.image"
           alt=""
           class="album-art image rounded"
diff --git a/src/composables/state.ts b/src/composables/state.ts
index c98f5db3..49fce7ea 100644
--- a/src/composables/state.ts
+++ b/src/composables/state.ts
@@ -3,7 +3,7 @@ import { reactive } from "vue";
 
 const loading = ref(false);
 const settings = reactive({
-  uri: "http://127.0.0.1:9876",
+  uri: "http://127.0.0.1:1970",
 });
 
 export default {
diff --git a/src/config.ts b/src/config.ts
index 30f0f028..b6c6292e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,9 +1,9 @@
 const paths = {
   api: "",
   images: {
-    thumb: "http://0.0.0.0:9877/t/",
-    artist: "http://0.0.0.0:9877/a/",
-    playlist: "http://0.0.0.0:9877/p/"
+    thumb: "http://0.0.0.0:1971/t/",
+    artist: "http://0.0.0.0:1971/a/",
+    playlist: "http://0.0.0.0:1971/p/"
   },
 };
 
diff --git a/src/router/index.js b/src/router/index.js
index cfb214f1..7a3cfcd1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,7 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home,
-    redirect: '/folder/$home'
+    redirect: "/folder/$home",
   },
   {
     path: "/folder/:path",
@@ -26,8 +26,11 @@ const routes = [
     component: FolderView,
     beforeEnter: async (to) => {
       state.loading.value = true;
-      await useFStore().fetchAll(to.params.path);
-      state.loading.value = false;
+      await useFStore()
+        .fetchAll(to.params.path)
+        .then(() => {
+          state.loading.value = false;
+        });
     },
   },
   {
@@ -40,8 +43,11 @@ const routes = [
     component: Playlists,
     beforeEnter: async () => {
       state.loading.value = true;
-      await usePStore().fetchAll();
-      state.loading.value = false;
+      await usePStore()
+        .fetchAll()
+        .then(() => {
+          state.loading.value = false;
+        });
     },
   },
   {
@@ -50,8 +56,11 @@ const routes = [
     component: PlaylistView,
     beforeEnter: async (to) => {
       state.loading.value = true;
-      await usePTrackStore().fetchAll(to.params.pid);
-      state.loading.value = false;
+      await usePTrackStore()
+        .fetchAll(to.params.pid)
+        .then(() => {
+          state.loading.value = false;
+        });
     },
   },
   {
@@ -65,8 +74,11 @@ const routes = [
     component: AlbumView,
     beforeEnter: async (to) => {
       state.loading.value = true;
-      await useAStore().fetchTracksAndArtists(to.params.hash);
-      state.loading.value = false;
+      await useAStore()
+        .fetchTracksAndArtists(to.params.hash)
+        .then(() => {
+          state.loading.value = false;
+        });
     },
   },
   {
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index a51f3878..3930743f 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -7,8 +7,9 @@
         </div>
         <img
           src="../assets/images/folder.webp"
-          alt="folder page banner"
+          alt=""
           class="rounded"
+          loading="lazy"
         />
       </div>
       <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />