change server port to localhost 1970

+ change img server to localhost 1971
+ add loading = lazy to images

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>

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">

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>

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>

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>

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>

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"

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 {

src/config.ts

@@ -1,9 +1,9 @@
 const paths = {
   api: "",
   images: {
-    thumb: "http://0.0.0.0:9877/t/",
+    thumb: "http://0.0.0.0:1971/t/",
-    artist: "http://0.0.0.0:9877/a/",
+    artist: "http://0.0.0.0:1971/a/",
-    playlist: "http://0.0.0.0:9877/p/"
+    playlist: "http://0.0.0.0:1971/p/"
   },
 };
 

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);
+      await useFStore()
-      state.loading.value = false;
+        .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();
+      await usePStore()
-      state.loading.value = false;
+        .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);
+      await usePTrackStore()
-      state.loading.value = false;
+        .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);
+      await useAStore()
-      state.loading.value = false;
+        .fetchTracksAndArtists(to.params.hash)
+        .then(() => {
+          state.loading.value = false;
+        });
     },
   },
   {

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" />