client: implement a buggy inifinite scroll on folder view

server/app/api.py

@@ -46,18 +46,20 @@ def search_by_title():
     else:
         query = request.args.get('q')
 
+    all_songs = []
+
     songs = all_songs_instance.find_song_by_title(query)
-    all_songs = convert_to_json(songs)
+    all_songs.append(convert_to_json(songs))
 
-    albums = all_songs_instance.find_songs_by_album(query)
-    all_songs.append(convert_to_json(albums))
+    songs_by_albums = all_songs_instance.find_songs_by_album(query)
+    all_songs.append(convert_to_json(songs_by_albums))
 
-    artists = all_songs_instance.find_songs_by_artist(query)
-    all_songs.append(convert_to_json(artists))
+    songs_by_artists = all_songs_instance.find_songs_by_artist(query)
+    all_songs.append(convert_to_json(songs_by_artists))
 
-    songs = remove_duplicates(all_songs)
+    # songs = remove_duplicates(all_songs)
 
-    return {'songs': songs}
+    return {'songs': all_songs}
 
 
 @bp.route('/populate')
@@ -272,6 +274,7 @@ def getFolderTree():
     start = time.time()
 
     req_dir = request.args.get('f')
+    last_id = request.args.get('last_id')
 
     if req_dir is not None:
         requested_dir = home_dir + req_dir
@@ -298,7 +301,7 @@ def getFolderTree():
 
         if entry.is_file():
             if isValidFile(entry.name) == True:
-                songs_array = all_songs_instance.find_songs_by_folder(req_dir)
+                songs_array = all_songs_instance.find_songs_by_folder(req_dir, last_id)
                 songs = convert_to_json(songs_array)
                 for song in songs:
                     song['artists'] = song['artists'].split(', ')

server/app/models.py

@@ -45,12 +45,13 @@ class AllSongs(Mongo):
 
     # def drop_db(self):
     #     self.collection.drop()
-    
+
     def get_song_by_id(self, file_id):
         return self.collection.find_one({'_id': ObjectId(file_id)})
 
     def insert_song(self, song_obj):
-        self.collection.update({'filepath': song_obj['filepath']}, song_obj, upsert=True)
+        self.collection.update(
+            {'filepath': song_obj['filepath']}, song_obj, upsert=True)
 
     def find_song_by_title(self, query):
         self.collection.create_index([('title', pymongo.TEXT)])
@@ -62,8 +63,12 @@ class AllSongs(Mongo):
     def get_all_songs(self):
         return self.collection.find()
 
-    def find_songs_by_folder(self, query):
-        return self.collection.find({'folder': query})
+    def find_songs_by_folder(self, query, last_id=None):
+        limit = 18
+        if last_id is None:
+            return self.collection.find({'folder': query}).limit(limit)
+        else:
+            return self.collection.find({'folder': query, '_id': {'$gt': ObjectId(last_id)}}).limit(limit)
 
     def find_songs_by_artist(self, query):
         return self.collection.find({'artists': {'$regex': query, '$options': 'i'}})
@@ -79,4 +84,4 @@ class AllSongs(Mongo):
             self.collection.remove({'filepath': filepath})
             return True
         except:
-            return False
+            return False

src/components/FolderView/SongList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <div class="table rounded" ref="songtitle" v-if="songs.length">
-      <table class="rounded">
+      <table>
         <tr>
           <th>Track</th>
           <th>Artist</th>
@@ -30,7 +30,7 @@
               >
             </div>
           </td>
-          <td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
+          <td :style="{ width: songTitleWidth + 'px' }"> <div class="ellip">{{ song.album }}</div></td>
           <td
             :style="{ width: songTitleWidth + 'px' }"
             v-if="songTitleWidth > minWidth"
@@ -52,7 +52,6 @@ export default {
   props: ["songs"],
   setup() {
     const songtitle = ref(null);
-    console.log(songtitle);
     const songTitleWidth = ref(null);
     const image_path = "http://127.0.0.1:8900/images/thumbnails/";
 
@@ -86,7 +85,7 @@ export default {
 <style lang="scss">
 .table {
   width: 100%;
-  height: calc(100%);
+  height: 100%;
   background-color: rgba(56, 56, 56, 0.363);
   overflow-y: auto;
 

src/composables/getFiles.js

@@ -1,12 +1,19 @@
 import { ref } from "@vue/reactivity";
 
-let home_url = "http://127.0.0.1:9876";
+let folders_uri = "http://127.0.0.1:9876";
 
-const getData = async (path) => {
+const getData = async (path, last_id) => {
+  let url;
   const songs = ref(null);
   const folders = ref(null);
 
-  const res = await fetch(`${home_url}/?f=${path}`);
+  if (last_id) {
+    url = `${folders_uri}/?f=${path}&last_id=${last_id}`;
+  } else {
+    url = url = `${folders_uri}/?f=${path}`;
+  }
+
+  const res = await fetch(url);
 
   if (!res.ok) {
     const message = `An erro has occured: ${res.status}`;
@@ -14,6 +21,7 @@ const getData = async (path) => {
   }
 
   const data = await res.json();
+
   songs.value = data.files;
   folders.value = data.folders;
 

src/views/FolderView.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path"/>
+      <SearchBox :path="path" />
     </div>
-    <div id="scrollable">
+    <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
       <SongList :songs="songs" />
     </div>
@@ -19,7 +19,7 @@ import FolderList from "@/components/FolderView/FolderList.vue";
 import SearchBox from "@/components/FolderView/SearchBox.vue";
 
 import getData from "../composables/getFiles.js";
-import { watch } from "@vue/runtime-core";
+import { onMounted, watch } from "@vue/runtime-core";
 
 export default {
   components: {
@@ -34,25 +34,58 @@ export default {
     const songs = ref([]);
     const folders = ref([]);
 
-    const getPathFolders = (path) => {
-      getData(path).then((data) => {
-        document.getElementById('scrollable').scrollTop = 0;
-        songs.value = data.songs.value;
-        folders.value = data.folders.value;
+    const scrollable = ref(null);
+
+    const last_song_id = ref(null);
+    const last_page = ref([]);
+
+    onMounted(() => {
+      const getPathFolders = (path, last_id) => {
+        getData(path, last_id).then((data) => {
+          scrollable.value.scrollTop = 0;
+
+          songs.value = data.songs.value;
+          last_page.value = songs.value;
+
+          if (songs.value.length) {
+            last_song_id.value = songs.value.slice(-1)[0]._id.$oid;
+          }
+
+          folders.value = data.folders.value;
+        });
+      };
+
+      getPathFolders(path.value);
+
+      watch(route, (new_route) => {
+        path.value = new_route.params.path;
+        getPathFolders(encodeURI(path.value));
       });
-    };
 
-    getPathFolders(path.value);
+      scrollable.value.onscroll = () => {
+        let dom = scrollable.value;
 
-    watch(route, (new_route) => {
-      path.value = new_route.params.path;
-      getPathFolders(encodeURI(path.value));
+        let scrollY = dom.scrollHeight - dom.scrollTop;
+        let height = dom.offsetHeight;
+        let offset = height - scrollY;
+
+        if (offset == 0 || offset == 1) {
+          getData(path.value, last_song_id.value).then((data) => {
+            songs.value = songs.value.concat(data.songs.value);
+
+            if (songs.value.length) {
+              last_song_id.value = songs.value.slice(-1)[0]._id.$oid;
+            }
+          });
+        }
+      };
     });
 
     return {
       songs,
       folders,
-      path
+      path,
+      scrollable,
     };
   },
 };
@@ -78,6 +111,9 @@ export default {
 #scrollable {
   overflow-y: scroll;
   height: 100%;
-  padding: $small 1rem 0 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>