loadmore tracks, albums, artists

src/components/AlbumView/Header.vue

@@ -10,8 +10,9 @@
         </div>
         <div class="separator no-border"></div>
         <div class="bottom">
-          <div class="stats">
-            {{ album_info.count }} Tracks • {{ album_info.duration }} • {{album_info.date}}
+          <div class="stats shadow-sm">
+            {{ album_info.count }} Tracks • {{ album_info.duration }} •
+            {{ album_info.date }}
           </div>
           <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
@@ -60,7 +61,14 @@ export default {
   align-items: center;
   padding: $small;
   height: 100%;
-  background-image: url("../../assets/images/abg.webp");
+  background-image: linear-gradient(
+    56deg,
+    $gray 0%,
+    $gray4 25%,
+    $gray1 50%,
+    $gray1 75%,
+    $gray 100%
+  );
   background-position: 0% 60%;
   background-repeat: no-repeat;
   background-size: cover;
@@ -97,7 +105,7 @@ export default {
       position: relative;
 
       .stats {
-        background-color: #1f1f1f8e;
+        background-color: $gray;
         padding: $small;
         border-radius: $small;
         position: absolute;

src/components/LeftSidebar/Navigation.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup>
-
 const menus = [
   {
     name: "home",
@@ -85,7 +84,7 @@ const props = defineProps({
     padding: 0.6rem 0 0.6rem 0;
 
     &:hover {
-      background-color: rgba(73, 73, 73, 0.13);
+      background-color: $gray;
 
       #home-icon {
         background-color: rgba(145, 58, 58, 0.555);

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <div class="main-item  border" >
+      <div class="main-item border">
         <p class="heading">COMING UP NEXT</p>
         <div class="itemx" @click="playNext">
           <div
@@ -78,7 +78,7 @@ export default {
       border-radius: 0.5rem;
 
       &:hover {
-        background-color: $blue;
+        background-color: $gray;
       }
     }
 

src/components/RightSideBar/Search.vue

@@ -2,47 +2,51 @@
   <div class="right-search">
     <div>
       <div class="input">
-        <Filters :filters="filters" @removeFilter="removeFilter"/>
+        <Filters :filters="filters" @removeFilter="removeFilter" />
         <div class="input-loader border">
           <input
-              id="search"
-              v-model="query"
-              placeholder="find your music"
-              type="text"
-              @keyup.backspace="removeLastFilter"
+            id="search"
+            v-model="query"
+            placeholder="find your music"
+            type="text"
+            @keyup.backspace="removeLastFilter"
           />
           <div class="_loader">
-            <Loader/>
+            <Loader />
           </div>
         </div>
       </div>
       <div class="separator no-border"></div>
-      <Options @addFilter="addFilter"/>
+      <Options @addFilter="addFilter" />
     </div>
-    <div class="scrollable">
+    <div class="scrollable" ref="search_thing">
       <TracksGrid
-          v-if="tracks.tracks.length"
-          :more="tracks.more"
-          :tracks="tracks.tracks"
+        v-if="tracks.tracks.length"
+        :more="tracks.more"
+        :tracks="tracks.tracks"
+        @loadMore="loadMoreTracks"
       />
       <AlbumGrid
-          v-if="albums.albums.length"
-          :albums="albums.albums"
-          :more="albums.more"
+        v-if="albums.albums.length"
+        :albums="albums.albums"
+        :more="albums.more"
+        @loadMore="loadMoreAlbums"
       />
       <div class="separator no-border" v-if="albums.albums.length"></div>
       <ArtistGrid
-          v-if="artists.artists.length"
-          :artists="artists.artists"
-          :more="artists.more"
+        v-if="artists.artists.length"
+        :artists="artists.artists"
+        :more="artists.more"
+        @loadMore="loadMoreArtists"
       />
       <div
-          v-if="
+        v-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
-          !albums.albums.length && query.length !== 0
+          !albums.albums.length &&
+          query.length !== 0
         "
-          class="no-res border rounded"
+        class="no-res border rounded"
       >
         <div class="no-res-text">
           No results for <span class="highlight rounded">{{ query }}</span>
@@ -56,9 +60,9 @@
 </template>
 
 <script>
-import {reactive, ref} from "@vue/reactivity";
+import { reactive, ref } from "@vue/reactivity";
 
-import {watch} from "@vue/runtime-core";
+import { watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
@@ -69,6 +73,7 @@ import Loader from "@/components/Search/Loader.vue";
 import Options from "@/components/Search/Options.vue";
 import Filters from "@/components/Search/Filters.vue";
 import "@/assets/css/Search/Search.scss";
+import loadMore from "../../composables/loadmore";
 
 export default {
   components: {
@@ -81,6 +86,7 @@ export default {
   },
 
   setup() {
+    const search_thing = ref(null);
     const loading = ref(state.loading);
     const filters = ref([]);
 
@@ -123,8 +129,43 @@ export default {
       }
     }
 
+    function scrollSearchThing() {
+      search_thing.value.scroll({
+        top: search_thing.value.scrollTop + 330,
+        left: 0,
+        behavior: "smooth",
+      });
+    }
+
+    function loadMoreTracks(start) {
+      // scrollSearchThing();
+      loadMore.loadMoreTracks(start).then((response) => {
+        tracks.tracks = [...tracks.tracks, ...response.tracks];
+        tracks.more = response.more;
+      });
+    }
+
+    function loadMoreAlbums(start) {
+      loadMore.loadMoreAlbums(start).then((response) => {
+        albums.albums = [...albums.albums, ...response.albums];
+        albums.more = response.more;
+      });
+    }
+
+    function loadMoreArtists(start) {
+      scrollSearchThing();
+      loadMore.loadMoreArtists(start).then((response) => {
+        artists.artists = [...artists.artists, ...response.artists];
+        artists.more = response.more;
+      });
+    }
+
     watch(query, (new_query) => {
-      if (query.value === "" || query.value === "  " || query.value.length < 2) {
+      if (
+        query.value === "" ||
+        query.value === "  " ||
+        query.value.length < 2
+      ) {
         albums.albums = [];
         artists.artists = [];
         tracks.tracks = [];
@@ -132,7 +173,6 @@ export default {
         return;
       }
 
-
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;
         albums.more = res.albums.more;
@@ -149,13 +189,16 @@ export default {
       addFilter,
       removeFilter,
       removeLastFilter,
+      loadMoreTracks,
+      loadMoreAlbums,
+      loadMoreArtists,
       tracks,
       albums,
       artists,
       query,
       filters,
       loading,
-
+      search_thing,
     };
   },
 };

src/components/Search/AlbumGrid.vue

@@ -19,8 +19,11 @@ export default {
     LoadMore,
   },
   setup(props, { emit }) {
+    let counter = 0;
+
     function loadMore() {
-      emit("loadMore");
+      counter += 6;
+      emit("loadMore", counter);
     }
 
     return {

src/components/Search/ArtistGrid.vue

@@ -19,8 +19,11 @@ export default {
     LoadMore,
   },
   setup(props, { emit }) {
+    let counter = 0;
+
     function loadMore() {
-      emit("loadMore");
+      counter += 6;
+      emit("loadMore", counter);
     }
 
     return {

src/components/Search/TracksGrid.vue

@@ -20,6 +20,8 @@
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../shared/TrackItem.vue";
 
+let counter = 0;
+
 const props = defineProps({
   tracks: {
     type: Object,
@@ -34,7 +36,8 @@ const props = defineProps({
 const emit = defineEmits(["loadMore"]);
 
 function loadMore() {
-  emit("loadMore", "tracks");
+  counter += 5;
+  emit("loadMore", counter);
 }
 </script>