client: improve quick access

- default to opened sidebar

server/app/api.py

@@ -1,5 +1,4 @@
-import typing
-from app.models import Folders, Artists
+from app.models import Artists
 
 from app.helpers import (
     all_songs_instance,
@@ -30,7 +29,6 @@ from flask import Blueprint, request, send_from_directory
 bp = Blueprint('api', __name__, url_prefix='')
 
 artist_instance = Artists()
-folder_instance = Folders()
 img_path = "http://127.0.0.1:8900/images/thumbnails/"
 
 
@@ -190,11 +188,12 @@ def populate_images():
 
     return {'sample': artists_in_db_array[:25]}
 
-
-@bp.route("/artist")
-def getArtistData():
-    artist = urllib.parse.unquote(request.args.get('q'))
-    artist_obj = artist_instance.find_artists_by_name(artist)
+@bp.route("/artist/<artist>")
+@cache.cached()
+def getArtistData(artist: str):
+    print(artist)
+    artist = urllib.parse.unquote(artist)
+    artist_obj = artist_instance.get_artists_by_name(artist)
     artist_obj_json = convert_to_json(artist_obj)
 
     def getArtistSongs():
@@ -340,3 +339,24 @@ def post():
         return {'songs': songs_array}
 
     return {'msg': 'ok'}
+
+@bp.route('/qwerty')
+def populateArtists():
+    all_songs = all_songs_instance.get_all_songs()
+    songs = convert_to_json(all_songs)
+
+    artists = []
+
+    for song in songs:
+        artist = song['artists'].split(', ')
+
+        for a in artist:
+            a_obj = {
+                "name": a,
+            }
+
+            if a_obj not in artists:
+                artists.append(a_obj)
+
+
+    return {'songs': artists}

server/app/models.py

@@ -7,19 +7,6 @@ class Mongo:
         mongo_uri = pymongo.MongoClient()
         self.db = mongo_uri[database]
 
-
-class Folders(Mongo):
-    def __init__(self):
-        super(Folders, self).__init__('LOCAL_FOLDERS')
-        self.collection = self.db['LOCAL_FOLDERS']
-
-    def insert_folder(self, folder):
-        self.collection.insert_one(folder)
-
-    def find_folder(self, folder_id):
-        return self.collection.find_one({'_id': ObjectId(folder_id)})
-
-
 class Artists(Mongo):
     def __init__(self):
         super(Artists, self).__init__('ALL_ARTISTS')
@@ -34,8 +21,8 @@ class Artists(Mongo):
     def get_artist_by_id(self, artist_id):
         return self.collection.find_one({'_id': ObjectId(artist_id)})
 
-    def find_artists_by_name(self, query):
-        return self.collection.find({'name': {'$regex': query, '$options': 'i'}})
+    def get_artists_by_name(self, query):
+        return self.collection.find({'name': query}).limit(20)
 
 
 class AllSongs(Mongo):

src/App.vue

@@ -53,7 +53,7 @@ export default {
   },
 
   setup() {
-    const collapsed = ref(true);
+    const collapsed = ref(false);
 
     perks.readQueue();
 

src/assets/css/global.scss

@@ -12,7 +12,9 @@ body {
   margin: 0;
   background: #0d0e0e;
   color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  font-size: 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
 }
 
 .heading {
@@ -37,7 +39,7 @@ a {
 }
 
 .separator {
-  border-top: .1px $separator solid;
+  border-top: 0.1px $separator solid;
   color: transparent;
   margin: $small 0 $small 0;
 }
@@ -72,13 +74,6 @@ a {
   z-index: -1;
 }
 
-.collapsed .l-sidebar {
-  width: 70px;
-  transition-timing-function: ease-in-out;
-  transition-duration: 0.3s;
-  transition-property: width;
-}
-
 .l-sidebar {
   width: 15em;
   grid-area: l-sidebar;
@@ -86,11 +81,14 @@ a {
   margin: 0.5rem 0 0.5rem 0.5rem;
   border-radius: 0.5rem;
   background-color: #131313b2;
-  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-  transition-duration: 0.3s;
-  transition-property: width;
 }
 
+.collapsed .l-sidebar {
+  width: 70px;
+  transition: all 0.3s ease;
+}
+
+
 .ellip {
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -175,7 +173,6 @@ a {
   background: rgb(163, 163, 163);
 }
 
-
 @-webkit-keyframes similarAlbums {
   0% {
     background-position: 0% 38%;
@@ -219,4 +216,4 @@ a {
   100% {
     background-position: 0% 38%;
   }
-}
+}

src/components/FolderView/SongList.vue

@@ -191,13 +191,12 @@ td .artist {
 
   tbody tr {
     cursor: pointer;
-    transition: all 0.5s ease;
+    transition: all 0.1s ease;
 
     &:hover {
       & {
-        background-color: rgba(255, 174, 0, 0.534);
+        background-color: rgb(5, 80, 150);
       }
-      transform: scale(0.99);
     }
   }
 }

src/components/LeftSidebar/Navigation.vue

@@ -98,13 +98,14 @@ export default {
   background-color: transparent;
   height: 100%;
   padding: 10px;
-  transition: all 0.3s ease-in-out;
+  // transition: all .3s ease-in-out;
+  // transition-delay: 1s;
 }
 
 .collapsed .nav-button {
   font-size: smaller;
   margin-top: 5px;
-  transition: all 0.2s ease-in-out;
+  // transition: all 2s ease-in-out;
 }
 
 .side-nav-container .nav-button:hover {

src/components/LeftSidebar/PinnedStuff.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-nav-container"
+    class="side-nav-container rounded"
     :class="{ hidden: collapsed }"
     id="pinned-container"
   >
@@ -33,7 +33,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="playlists-button">
         <div class="nav-icon image" id="playlists-icon"></div>
-        <span id="text">Juice WRLD Discography</span>
+        <span id="text" class="ellip">Juice WRLD Discography</span>
       </div>
     </router-link>
     <hr />
@@ -60,13 +60,30 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+#pinned-container {
+  background-color: rgb(0, 0, 0);
+  border-top: none;
+  margin: $small;
+  padding: $small;
+
+  #text {
+    font-size: 0.9rem;
+  }
+
+  .nav-icon {
+    margin: 0 $small 0 0;
+  }
+}
+
 #pinned-container .nav-button {
+  border-radius: $small;
   color: rgba(255, 255, 255, 0.671);
+  // margin-top: $small;
 }
 
 #pinned-container .nav-button:hover {
-  background-color: rgba(5, 80, 150, 0.322);
+  background-color: rgb(5, 80, 150);
 }
 
 #pinned-container .nav-button .nav-icon {

src/components/RightSideBar/NowPlaying.vue

@@ -18,6 +18,7 @@
       </div>
     </div>
     <div class="progress">
+      <div class="duration">{{ fmtMSS(current.length) }}</div>
       <input
         id="progress"
         type="range"
@@ -60,6 +61,11 @@ export default {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
     const pos = playAudio.pos;
+    function fmtMSS(s) {
+      return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
+    }
+
+    // const duration = ref()
 
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
@@ -79,6 +85,7 @@ export default {
       pos,
       seek,
       isPlaying,
+      fmtMSS
     };
   },
 };
@@ -87,9 +94,10 @@ export default {
 <style lang="scss">
 .now-playing {
   border-radius: 0.5rem;
+  height: 14rem;
   margin-top: 1rem;
   padding: 0.5rem;
-  background-color: rgb(12, 12, 12);
+  background-color: rgb(0, 0, 0);
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -97,6 +105,14 @@ export default {
     display: flex;
     align-items: center;
     height: 1.5rem;
+    position: relative;
+
+    .duration {
+      position: absolute;
+      right: 0;
+      top: -1rem;
+      font-size: small;
+    }
 
     input {
       -webkit-appearance: none;
@@ -159,11 +175,6 @@ export default {
         border-radius: 0.5rem;
       }
 
-      & *:hover {
-        filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
-          brightness(89%) contrast(101%);
-      }
-
       #previous {
         background-image: url(../../assets/icons/previous.svg);
       }
@@ -225,6 +236,12 @@ export default {
         background-image: url(../../assets/icons/heart.svg);
       }
     }
+
+    .fav *:hover,
+    .shuffle *:hover,
+    .nav *:hover {
+      background-color: black;
+    }
   }
 
   .art-tags {