loadmore tracks, albums, artists

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "axios": "^0.26.0",
     "mitt": "^3.0.0",
     "register-service-worker": "^1.7.1",
     "sass": "^1.49.0",

server/app/api.py

@@ -1,4 +1,5 @@
 import os
+from pprint import pprint
 import urllib
 from typing import List
 from flask import Blueprint, request, send_file
@@ -54,6 +55,13 @@ def get_artists(artist: str) -> List:
     ]
 
 
+search_results = {
+    "tracks": [],
+    "albums": [],
+    "artists": [],
+}
+
+
 @bp.route("/search")
 def search_by_title():
     """
@@ -64,6 +72,7 @@ def search_by_title():
     albums = get_search_albums(query)
     albums_dicts = []
     artists_dicts = []
+    search_results.clear()
 
     for song in albums:
         album_obj = {
@@ -86,8 +95,8 @@ def search_by_title():
                 artist_obj = {
                     "name": artist,
                     "image": "http://0.0.0.0:8900/images/artists/"
-                             + artist.replace("/", "::")
+                    + artist.replace("/", "::")
-                             + ".webp",
+                    + ".webp",
                 }
 
                 if artist_obj not in artists_dicts:
@@ -95,6 +104,10 @@ def search_by_title():
 
     tracks = helpers.remove_duplicates(get_tracks(query))
 
+    search_results["tracks"] = tracks
+    search_results["albums"] = albums_dicts
+    search_results["artists"] = artists_dicts
+
     return {
         "data": [
             {"tracks": tracks[:5], "more": len(tracks) > 5},
@@ -104,6 +117,33 @@ def search_by_title():
     }
 
 
+@bp.route("/search/loadmore")
+def search_load_more():
+    """
+    Returns more songs, albums or artists from a search query.
+    """
+    type = request.args.get("type")
+    start = int(request.args.get("start"))
+
+    if type == "tracks":
+        return {
+            "tracks": search_results["tracks"][start : start + 5],
+            "more": len(search_results["tracks"]) > start + 5,
+        }
+
+    elif type == "albums":
+        return {
+            "albums": search_results["albums"][start : start + 6],
+            "more": len(search_results["albums"]) > start + 6,
+        }
+
+    elif type == "artists":
+        return {
+            "artists": search_results["artists"][start : start + 6],
+            "more": len(search_results["artists"]) > start + 6,
+        }
+
+
 @bp.route("/populate")
 def find_tracks():
     """call the populate function"""
@@ -136,8 +176,8 @@ def get_albumartists(album, artist):
         artist_obj = {
             "name": artist,
             "image": "http://0.0.0.0:8900/images/artists/"
-                     + artist.replace("/", "::")
+            + artist.replace("/", "::")
-                     + ".webp",
+            + ".webp",
         }
         final_artists.append(artist_obj)
 
@@ -272,8 +312,8 @@ def get_album_tracks(title: str, artist: str):
         "date": songs[0].date,
         "artist": songs[0].albumartist,
         "artist_image": "http://127.0.0.1:8900/images/artists/"
-                        + songs[0].albumartist.replace("/", "::")
+        + songs[0].albumartist.replace("/", "::")
-                        + ".webp",
+        + ".webp",
     }
 
     return {"songs": songs, "info": album_obj}
@@ -293,9 +333,7 @@ def send_track_file(trackid):
     Returns an audio file that matches the passed id to the client.
     """
     try:
-        filepath = instances.songs_instance.get_song_by_id(trackid)['filepath']
+        filepath = instances.songs_instance.get_song_by_id(trackid)["filepath"]
         return send_file(filepath, mimetype="audio/mp3")
     except FileNotFoundError:
         return "File not found", 404
-
-

src/components/AlbumView/Header.vue

@@ -10,8 +10,9 @@
         </div>
         <div class="separator no-border"></div>
         <div class="bottom">
-          <div class="stats">
+          <div class="stats shadow-sm">
-            {{ album_info.count }} Tracks • {{ album_info.duration }} • {{album_info.date}}
+            {{ 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"
+            id="search"
-              v-model="query"
+            v-model="query"
-              placeholder="find your music"
+            placeholder="find your music"
-              type="text"
+            type="text"
-              @keyup.backspace="removeLastFilter"
+            @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"
+        v-if="tracks.tracks.length"
-          :more="tracks.more"
+        :more="tracks.more"
-          :tracks="tracks.tracks"
+        :tracks="tracks.tracks"
+        @loadMore="loadMoreTracks"
       />
       <AlbumGrid
-          v-if="albums.albums.length"
+        v-if="albums.albums.length"
-          :albums="albums.albums"
+        :albums="albums.albums"
-          :more="albums.more"
+        :more="albums.more"
+        @loadMore="loadMoreAlbums"
       />
       <div class="separator no-border" v-if="albums.albums.length"></div>
       <ArtistGrid
-          v-if="artists.artists.length"
+        v-if="artists.artists.length"
-          :artists="artists.artists"
+        :artists="artists.artists"
-          :more="artists.more"
+        :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>
 

src/composables/loadmore.js

@@ -0,0 +1,42 @@
+import axios from "axios";
+
+const url = "http://0.0.0.0:9876/search/loadmore";
+
+async function loadMoreTracks(start) {
+  const response = await axios.get(url, {
+    params: {
+      type: "tracks",
+      start: start,
+    },
+  });
+
+  return response.data;
+}
+
+async function loadMoreAlbums(start) {
+  const response = await axios.get(url, {
+    params: {
+      type: "albums",
+      start: start,
+    },
+  });
+
+  return response.data;
+}
+
+async function loadMoreArtists(start) {
+  const response = await axios.get(url, {
+    params: {
+      type: "artists",
+      start: start,
+    },
+  });
+
+  return response.data;
+}
+
+export default {
+  loadMoreTracks,
+  loadMoreAlbums,
+  loadMoreArtists,
+};

yarn.lock

@@ -353,6 +353,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+axios@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
+  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -807,6 +814,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+follow-redirects@^1.14.8:
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
+  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"