remove pagination

server/app/api.py

@@ -188,6 +188,7 @@ def populate_images():
 
     return {'sample': artists_in_db_array[:25]}
 
+
 @bp.route("/artist/<artist>")
 @cache.cached()
 def getArtistData(artist: str):
@@ -244,24 +245,13 @@ def getArtistData(artist: str):
 @bp.route("/f/<folder>")
 @cache.cached()
 def getFolderTree(folder: str = None):
-    try:
+    req_dir = folder.replace('|', '/')
-        req_dir, last_id = folder.split('::')
+    print(folder)
 
-        req_dir = req_dir.replace('|', '/')
+    if folder == "home":
-        dir_list = req_dir.split('/')
+        req_dir = home_dir
-        requested_dir = os.path.join(home_dir, *dir_list)
 
-        if req_dir == "home":
+    dir_content = os.scandir(os.path.join(home_dir, req_dir))
-            requested_dir = home_dir
-
-        if last_id == "None":
-            last_id = None
-
-    except:
-        requested_dir = home_dir
-        last_id = None
-
-    dir_content = os.scandir(requested_dir)
 
     folders = []
 
@@ -286,7 +276,7 @@ def getFolderTree(folder: str = None):
                     getTags(entry.path)
 
     songs_array = all_songs_instance.find_songs_by_folder(
-        req_dir, last_id)
+        req_dir)
     songs = convert_to_json(songs_array)
     for song in songs:
         song['artists'] = song['artists'].split(', ')
@@ -299,27 +289,6 @@ def getFolderTree(folder: str = None):
     return {"files": songs, "folders": folders}
 
 
-@bp.route('/image/<img_type>/<image_id>')
-def send_image(img_type, image_id):
-    if img_type == "thumbnail":
-        song_obj = all_songs_instance.get_song_by_id(image_id)
-        loaded_song = convert_one_to_json(song_obj)
-
-        img_dir = app_dir + "/images/thumbnails"
-        image = loaded_song['image']
-
-    if img_type == "artist":
-        artist_obj = artist_instance.get_artist_by_id(image_id)
-        artist = convert_one_to_json(artist_obj)
-
-        img_dir = app_dir + "/images/artists"
-
-        image = artist['name'] + ".jpg"
-        print(img_dir + image)
-
-    return send_from_directory(img_dir, image)
-
-
 @bp.route('/get/queue', methods=['POST'])
 def post():
     args = request.get_json()
@@ -340,6 +309,7 @@ def post():
 
     return {'msg': 'ok'}
 
+
 @bp.route('/qwerty')
 def populateArtists():
     all_songs = all_songs_instance.get_all_songs()
@@ -358,5 +328,25 @@ def populateArtists():
             if a_obj not in artists:
                 artists.append(a_obj)
 
+            artist_instance.insert_artist(a_obj)
 
     return {'songs': artists}
+
+
+@bp.route('/albums')
+def getAlbums():
+    s = all_songs_instance.get_all_songs()
+    ss = convert_to_json(s)
+
+    albums = []
+
+    for song in ss:
+        al_obj = {
+            "name": song['album'],
+            "artist": song['artists']
+        }
+
+        if al_obj not in albums:
+            albums.append(al_obj)
+
+    return {'albums': albums}

server/app/models.py

@@ -7,13 +7,14 @@ class Mongo:
         mongo_uri = pymongo.MongoClient()
         self.db = mongo_uri[database]
 
+
 class Artists(Mongo):
     def __init__(self):
         super(Artists, self).__init__('ALL_ARTISTS')
         self.collection = self.db['THEM_ARTISTS']
 
     def insert_artist(self, artist_obj):
-        self.collection.update(artist_obj, artist_obj, upsert=True)
+        self.collection.update_one(artist_obj, {'$set': artist_obj}, upsert=True)
 
     def get_all_artists(self):
         return self.collection.find()
@@ -48,20 +49,16 @@ class AllSongs(Mongo):
         return self.collection.find({'album': {'$regex': query, '$options': 'i'}})
 
     def get_all_songs(self):
-        return self.collection.find()
+        return self.collection.find().limit(25)
 
-    def find_songs_by_folder(self, query, last_id=None):
+    def find_songs_by_folder(self, query):
-        limit = 18
+        return self.collection.find({'folder': query})
-        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_folder_og(self, query):
         return self.collection.find({'folder': query})
 
     def find_songs_by_artist(self, query):
-        return self.collection.find({'artists': {'$regex': query, '$options': 'i'}})
+        return self.collection.find({'artists': query})
 
     def find_songs_by_album_artist(self, query):
         return self.collection.find({'album_artist': {'$regex': query, '$options': 'i'}})

src/App.vue

@@ -15,12 +15,12 @@
       <router-view />
     </div>
     <div class="r-sidebar">
+      <div class="m-np">
       <Search
         v-model:search="search"
         @expandSearch="expandSearch"
         @collapseSearch="collapseSearch"
       />
-      <div class="m-np">
         <NowPlaying />
       </div>
       <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />

src/assets/css/_variables.scss

@@ -2,7 +2,7 @@
 
 $card-dark: #131313b2;
 $red: #df4646;
-$blue: #00a8ff;
+$blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);
 $separator: #ffffff46;
 // sizes

src/assets/css/global.scss

@@ -126,11 +126,11 @@ a {
   margin-bottom: 0.5em;
 }
 
-// @media (max-width: 70em) {
+@media (max-width: 70em) {
-//   .r-sidebar {
+  .r-sidebar {
-//     display: none;
+    display: none;
-//   }
+  }
-// }
+}
 
 .image {
   background-position: center;

src/assets/icons/folder.svg

@@ -1,3 +1 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path d="M 8.5 8 C 6.0324991 8 4 10.032499 4 12.5 L 4 35.5 C 4 37.967501 6.0324991 40 8.5 40 L 39.5 40 C 41.967501 40 44 37.967501 44 35.5 L 44 17.5 C 44 15.032499 41.967501 13 39.5 13 L 24.042969 13 L 19.572266 9.2753906 C 18.584055 8.4521105 17.339162 8 16.052734 8 L 8.5 8 z M 8.5 11 L 16.052734 11 C 16.638307 11 17.202555 11.205358 17.652344 11.580078 L 21.15625 14.5 L 17.652344 17.419922 C 17.202555 17.794642 16.638307 18 16.052734 18 L 7 18 L 7 12.5 C 7 11.653501 7.6535009 11 8.5 11 z M 24.042969 16 L 39.5 16 C 40.346499 16 41 16.653501 41 17.5 L 41 35.5 C 41 36.346499 40.346499 37 39.5 37 L 8.5 37 C 7.6535009 37 7 36.346499 7 35.5 L 7 21 L 16.052734 21 C 17.339162 21 18.584055 20.547889 19.572266 19.724609 L 24.042969 16 z"/></svg>
-<path d="M10.4719 5.625L13.6781 8.82188L14.2219 9.375H26.25V24.375H3.75V5.625H10.4719ZM10.4719 3.75H3.75C3.25272 3.75 2.77581 3.94754 2.42417 4.29918C2.07254 4.65081 1.875 5.12772 1.875 5.625V24.375C1.875 24.8723 2.07254 25.3492 2.42417 25.7008C2.77581 26.0525 3.25272 26.25 3.75 26.25H26.25C26.7473 26.25 27.2242 26.0525 27.5758 25.7008C27.9275 25.3492 28.125 24.8723 28.125 24.375V9.375C28.125 8.87772 27.9275 8.40081 27.5758 8.04918C27.2242 7.69754 26.7473 7.5 26.25 7.5H15L11.8031 4.30313C11.6287 4.12766 11.4213 3.98844 11.1928 3.89351C10.9643 3.79858 10.7193 3.7498 10.4719 3.75V3.75Z" fill="white"/>
-</svg>

src/assets/icons/home.svg

@@ -1,22 +1 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path d="M 23.951172 4 A 1.50015 1.50015 0 0 0 23.072266 4.3222656 L 8.859375 15.519531 C 7.0554772 16.941163 6 19.113506 6 21.410156 L 6 40.5 C 6 41.863594 7.1364058 43 8.5 43 L 18.5 43 C 19.863594 43 21 41.863594 21 40.5 L 21 30.5 C 21 30.204955 21.204955 30 21.5 30 L 26.5 30 C 26.795045 30 27 30.204955 27 30.5 L 27 40.5 C 27 41.863594 28.136406 43 29.5 43 L 39.5 43 C 40.863594 43 42 41.863594 42 40.5 L 42 21.410156 C 42 19.113506 40.944523 16.941163 39.140625 15.519531 L 24.927734 4.3222656 A 1.50015 1.50015 0 0 0 23.951172 4 z M 24 7.4101562 L 37.285156 17.876953 C 38.369258 18.731322 39 20.030807 39 21.410156 L 39 40 L 30 40 L 30 30.5 C 30 28.585045 28.414955 27 26.5 27 L 21.5 27 C 19.585045 27 18 28.585045 18 30.5 L 18 40 L 9 40 L 9 21.410156 C 9 20.030807 9.6307412 18.731322 10.714844 17.876953 L 24 7.4101562 z"/></svg>
-<g clip-path="url(#clip0_105_187)">
-<g filter="url(#filter0_d_105_187)">
-<path d="M6.25 27.5H23.75C24.413 27.5 25.0489 27.2366 25.5178 26.7678C25.9866 26.2989 26.25 25.6631 26.25 25V13.75C26.251 13.5855 26.2194 13.4224 26.1572 13.2701C26.095 13.1178 26.0034 12.9793 25.8875 12.8625L15.8875 2.86251C15.6533 2.6297 15.3365 2.49902 15.0063 2.49902C14.676 2.49902 14.3592 2.6297 14.125 2.86251L4.125 12.8625C4.00689 12.9783 3.91293 13.1163 3.84856 13.2687C3.78419 13.421 3.75069 13.5846 3.75 13.75V25C3.75 25.6631 4.01339 26.2989 4.48223 26.7678C4.95107 27.2366 5.58696 27.5 6.25 27.5ZM12.5 25V18.75H17.5V25H12.5ZM6.25 14.2625L15 5.51251L23.75 14.2625V25H20V18.75C20 18.087 19.7366 17.4511 19.2678 16.9822C18.7989 16.5134 18.163 16.25 17.5 16.25H12.5C11.837 16.25 11.2011 16.5134 10.7322 16.9822C10.2634 17.4511 10 18.087 10 18.75V25H6.25V14.2625Z" fill="white"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_d_105_187" x="-0.25" y="2.49902" width="30.5" height="33.001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_105_187"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_105_187" result="shape"/>
-</filter>
-<clipPath id="clip0_105_187">
-<rect width="30" height="30" rx="10" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/components/AlbumView/Header.vue

@@ -44,6 +44,22 @@ export default {
 .a-header {
   height: 14rem;
   background: rgb(0, 0, 0);
+  background: #355c7d; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #c06c84,
+    #6c5b7b,
+    #355c7d
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #c06c84,
+    #6c5b7b,
+    #355c7d
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+  background-position: 50% 10%;
+
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;

src/components/AlbumsExplorer/AlbumList.vue

@@ -6,6 +6,7 @@
         <input type="search" placeholder="Search albums" />
       </div>
     </div>
+    <div class="separator"></div>
     <div class="all-albums">
       <router-link
         :to="{ path: '/albums/1' }"
@@ -125,7 +126,6 @@ export default {
 
   .all-albums {
     height: calc(100% - 4rem);
-    border-top: 1px solid $separator;
     padding: $small 0 0 0;
     overflow-y: auto;
 

src/components/AlbumsExplorer/TopAlbums.vue

@@ -101,7 +101,7 @@ export default {
 
       .info .top {
         height: 2.5rem;
-        background-color: rgb(51, 129, 20);
+        background-color: $blue;
         border-radius: $small;
         margin-left: auto;
         display: grid;
@@ -126,7 +126,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgb(0, 134, 89);
+          background-color: rgb(0, 45, 104);
           transition: all 0.2s ease-in-out;
 
           .play-icon {

src/components/FolderView/FolderList.vue

@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  props: ["folders"]
+  props: ["folders"],
 };
 </script>
 
@@ -66,6 +66,7 @@ export default {
   background-position: 1rem;
   background-size: 10% 100%;
   background-color: rgba(80, 80, 80, 0.247);
+  transition: all 0.2s ease;
 
   .f-item-count {
     position: absolute;
@@ -83,6 +84,11 @@ export default {
 }
 
 .f-container .f-item:hover {
-  background-color: rgba(0, 0, 0, 0.527);
+  transition: all 0.2s ease;
+  background: #000000; /* fallback for old browsers */
+  background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
+    -webkit-linear-gradient(to bottom, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
+  background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
+    linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -72,8 +72,6 @@ export default {
 };
 </script>
 
-
-
 <style lang="scss">
 .side-nav-container .in {
   display: flex;

src/components/LeftSidebar/PinnedStuff.vue

@@ -62,7 +62,18 @@ export default {
 
 <style lang="scss">
 #pinned-container {
-  background-color: rgb(0, 0, 0);
+  background: #000000; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to bottom,
+    #434343,
+    #000000
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to bottom,
+    #434343,
+    #000000
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
   border-top: none;
   margin: $small;
   padding: $small;

src/components/RightSideBar/NowPlaying.vue

@@ -24,8 +24,7 @@
         type="range"
         :value="pos"
         min="0"
-        max="100"
+        max="1000"
-        step="1"
         @change="seek()"
       />
     </div>
@@ -85,7 +84,7 @@ export default {
       pos,
       seek,
       isPlaying,
-      fmtMSS
+      fmtMSS,
     };
   },
 };
@@ -97,7 +96,14 @@ export default {
   height: 14rem;
   margin-top: 1rem;
   padding: 0.5rem;
-  background-color: rgb(0, 0, 0);
+  background: rgb(14, 14, 14);
+  background: linear-gradient(
+    326deg,
+    rgb(0, 0, 0) 0%,
+    rgb(10, 10, 10) 13%,
+    rgba(0, 0, 0, 1) 43%,
+    rgba(0, 0, 0, 1) 100%
+  );
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -130,7 +136,17 @@ export default {
       width: 100%;
       height: 0.25rem;
       cursor: pointer;
-      background: #3071a9;
+      background: #1488cc; /* fallback for old browsers */
+      background: -webkit-linear-gradient(
+        to right,
+        #1488cc,
+        #2b32b2
+      ); /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(
+        to right,
+        #1488cc,
+        #2b32b2
+      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     }
 
     input::-webkit-slider-thumb {
@@ -255,12 +271,13 @@ export default {
 
     #title {
       margin: 0;
-      width: 13rem;
+      width: 22rem;
       color: #fff;
     }
 
     #artist {
       font-size: small;
+      width: 22rem;
       color: rgba(255, 255, 255, 0.712);
     }
 

src/components/RightSideBar/Search.vue

@@ -3,7 +3,7 @@
     <input
       type="search"
       id="search"
-      placeholder="Michael Jackson"
+      placeholder="find your music"
       v-model="query"
     />
     <div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
@@ -96,6 +96,9 @@ export default {
 </script>
 
 <style>
+.right-search {
+  z-index: 10;
+}
 .right-search .v0 {
   max-height: 0em;
   transition: max-height 0.5s ease;

src/composables/getFiles.js

@@ -2,18 +2,13 @@ import { ref } from "@vue/reactivity";
 
 let folders_uri = "http://127.0.0.1:9876";
 
-const getData = async (path, last_id) => {
+const getData = async (path) => {
   let url;
   const songs = ref(null);
   const folders = ref(null);
 
   const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
-
+  url = url = `${folders_uri}/f/${encoded_path}`;
-  if (last_id) {
-    url = `${folders_uri}/f/${encoded_path}::${last_id}`;
-  } else {
-    url = url = `${folders_uri}/f/${encoded_path}::None`;
-  }
 
   const res = await fetch(url);
 

src/composables/playAudio.js

@@ -21,7 +21,7 @@ const playAudio = (path) => {
   };
 
   audio.ontimeupdate = () => {
-    pos.value = (audio.currentTime / audio.duration) * 100;
+    pos.value = (audio.currentTime / audio.duration) * 1000;
   };
 
   audio.addEventListener("ended", () => {
@@ -41,7 +41,7 @@ function playPrev() {
 
 function seek(pos) {
   console.log(pos);
-  audio.currentTime = (pos / 100) * audio.duration;
+  audio.currentTime = (pos / 1000) * audio.duration;
 }
 
 function playPause() {

src/views/FolderView.vue

@@ -63,27 +63,6 @@ export default {
         path.value = new_route.params.path;
         getPathFolders(path.value);
       });
-
-      scrollable.value.onscroll = () => {
-        let dom = scrollable.value;
-
-        let scrollY = dom.scrollHeight - dom.scrollTop;
-        let height = dom.offsetHeight;
-        let offset = height - scrollY;
-
-        if (offset == 0 || offset == 1) {
-          loading.value = true;
-          getData(path.value, last_song_id.value).then((data) => {
-            songs.value = songs.value.concat(data.songs.value);
-
-            loading.value = false;
-
-            if (songs.value.length) {
-              last_song_id.value = songs.value.slice(-1)[0]._id.$oid;
-            }
-          });
-        }
-      };
     });
 
     return {
@@ -105,6 +84,7 @@ export default {
   padding-left: $small;
   padding-right: $small;
   padding-top: 5rem;
+  overflow: hidden;
 }
 
 #f-view-parent .fixed {