major changes:

- resize images to 150x150
- convert them to webp
- use $set to update database
- remove comments in py code
- a whole lot more

server/Pipfile.lock

@@ -308,7 +308,7 @@
                 "sha256:f785375ca2b4e2192786f1e0d2a94c66900d12e780ebae1eccbbab85eb9a7054"
             ],
             "index": "pypi",
-            "version": "==4.0.1"
+            "version": "== 4.0.1"
         },
         "requests": {
             "hashes": [

server/app/api.py

@@ -57,22 +57,31 @@ def search_by_title():
     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)
-
     return {'songs': all_songs}
 
 
 @bp.route('/populate')
 def populate():
-    sub_dirs, files = run_fast_scandir(home_dir, [".flac", ".mp3"])
+    '''
+    Populate the database with all songs in the music directory
+
+    checks if the song is in the database, if not, it adds it
+    also checks if the album art exists in the image path, if not tries to
+    extract it.
+    '''
+    files = run_fast_scandir(home_dir, [".flac", ".mp3"])[1]
 
     bar = Bar('Processing', max=len(files))
+
     for file in files:
         file_in_db_obj = all_songs_instance.find_song_by_path(file)
         song_obj = convert_one_to_json(file_in_db_obj)
 
         try:
             image = song_obj['image']
+
+            if not os.path.exists(os.path.join(app_dir, 'images', 'thumbnails', image)):
+                extract_thumb(file)
         except:
             image = None
 
@@ -82,48 +91,10 @@ def populate():
             except MutagenError:
                 pass
 
-        if image is not None and not os.path.exists(image):
-
-            extract_thumb(file)
-
         bar.next()
 
     bar.finish()
-
-    # dirs = []
-    # files = []
-
-    # for dir in sub_dirs:
-
-    #     files_in_dir = run_fast_scandir(dir, [".flac", ".mp3"])[1]
-
-    #     if len(files_in_dir) != 0:
-    #         dir_content = os.scandir(dir)
-
-    #         for entry in dir_content:
-    #             dirs = []
-    #             files = []
-
-    #             if entry.is_dir() and not entry.name.startswith('.'):
-    #                 print(dir)
-    #                 files_in_dir = run_fast_scandir(entry.path, [".flac", ".mp3"])[1]
-
-    #                 if len(files_in_dir) != 0:
-    #                     dir_data = {
-    #                         "name": entry.name,
-    #                         "count": len(files_in_dir),
-    #                         "path": entry.path.replace(home_dir, "")
-    #                     }
-
-    #                     dirs.append(dir_data)
-
-    #             if entry.is_file():
-    #                 if isValidFile(entry.name) == True:
-    #                     files.append(entry.path)
-
-    #             print(dirs)
-
-    # return {"info": ''}
+    return {'msg': 'updated everything'}
 
 
 @bp.route('/file/<file_id>')
@@ -151,7 +122,7 @@ def get_folder_artists():
         this_artists = song['artists'].split(', ')
 
         for artist in this_artists:
-            
+
             if artist not in artists:
                 artists.append(artist)
 
@@ -277,7 +248,8 @@ def getFolderTree():
     last_id = request.args.get('last_id')
 
     if req_dir is not None:
-        requested_dir = home_dir + req_dir
+        requested_dir = os.path.join(home_dir, req_dir)
+        print(requested_dir)
     else:
         requested_dir = home_dir
 
@@ -289,7 +261,7 @@ def getFolderTree():
     for entry in dir_content:
         if entry.is_dir() and not entry.name.startswith('.'):
             files_in_dir = run_fast_scandir(entry.path, [".flac", ".mp3"])[1]
-            
+
             if len(files_in_dir) != 0:
                 dir = {
                     "name": entry.name,
@@ -301,7 +273,8 @@ def getFolderTree():
 
         if entry.is_file():
             if isValidFile(entry.name) == True:
-                songs_array = all_songs_instance.find_songs_by_folder(req_dir, last_id)
+                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(', ')
@@ -309,7 +282,7 @@ def getFolderTree():
                 files = songs
 
     for file in files:
-        del file['filepath']
+        file['filepath'] = file['filepath'].replace(home_dir, '')
 
     dir_content.close()
     end = time.time()

server/app/helpers.py

@@ -20,8 +20,8 @@ all_songs_instance = AllSongs()
 music_dir = os.environ.get("music_dir")
 music_dirs = os.environ.get("music_dirs")
 
-home_dir = os.path.expanduser('~')
-app_dir = home_dir + '/.shit'
+home_dir = os.path.expanduser('~') + "/"
+app_dir = home_dir + '/.musicx'
 
 
 PORT = os.environ.get("PORT")
@@ -47,10 +47,11 @@ def run_fast_scandir(dir, ext):
 
 
 def extract_thumb(path):
-    img_path = app_dir + "/images/thumbnails/" + path.split('/')[-1] + '.jpg'
+    webp_path = path.split('/')[-1] + '.webp'
+    img_path = app_dir + "/images/thumbnails/" + webp_path
 
     if os.path.exists(img_path):
-        return path.split('/')[-1] + '.jpg'
+        return webp_path
 
     if path.endswith('.flac'):
         audio = FLAC(path)
@@ -65,18 +66,27 @@ def extract_thumb(path):
         except IndexError:
             album_art = None
 
-    if album_art is not None:
-
+    if album_art is None:
+        return "null.webp"
+    else:
         img = Image.open(BytesIO(album_art))
 
         try:
-            img.save(img_path, 'JPEG')
+            small_img = img.resize((150, 150), Image.ANTIALIAS)
+            small_img.save(img_path, format="webp")
         except OSError:
             try:
-                img.convert('RGB'.save(img_path, 'JPEG'))
+                png = img.convert('RGB')
+                small_img = png.resize((150, 150), Image.ANTIALIAS)
+                small_img.save(img_path, format="webp")
+                print('{} :: was png'.format(
+                    img_path
+                ))
+
             except:
                 img_path = None
-        return path.split('/')[-1] + '.jpg'
+
+    return webp_path
 
 
 def getTags(full_path):
@@ -253,7 +263,7 @@ def getFolderContents(filepath, folder):
 
 def create_config_dir():
     home_dir = os.path.expanduser('~')
-    config_folder = home_dir + "/.shit"
+    config_folder = home_dir + app_dir
 
     dirs = ["", "/images", "/images/artists", "/images/thumbnails"]
 

server/app/models.py

@@ -50,8 +50,9 @@ class AllSongs(Mongo):
         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_one(
+            {'filepath': song_obj['filepath']}, { "$set": song_obj}, upsert=True)
+        # self.collection.insert_one(song_obj)
 
     def find_song_by_title(self, query):
         self.collection.create_index([('title', pymongo.TEXT)])

src/App.vue

@@ -4,7 +4,7 @@
     <div class="l-sidebar">
       <div id="logo-container">
         <div id="toggle" @click="toggleNav"></div>
-        <router-link :to="{ name: 'FolderView' }" v-if="!collapsed"
+        <router-link :to="{ name: 'Home' }" v-if="!collapsed"
           ><div class="logo"></div
         ></router-link>
       </div>

src/components/FolderView/FolderList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="f-container rounded" :class="{ info: !folders.length }">
+  <div class="f-container rounded" :class="{ no_f: !folders.length }">
     <p v-if="folders.length">folders in this directory</p>
     <div id="f-items" v-if="folders.length">
       <router-link
@@ -35,7 +35,7 @@ export default {
   padding: 1rem;
 }
 
-.info {
+.no_f {
   background-image: url(../../assets/icons/info.svg);
   background-repeat: no-repeat;
   background-position: 1rem;

src/components/FolderView/SearchBox.vue

@@ -32,16 +32,6 @@ export default {
   text-transform: uppercase;
   display: flex;
   align-items: center;
-  // border: solid;
-  // height: 4rem;
-
-  // .name {
-  //   font-size: large;
-  // }
-
-  // .path {
-  //   font-size: $small;
-  // }
 }
 
 .folder-top .fsearch {

src/components/FolderView/SongList.vue

@@ -8,7 +8,7 @@
           <th>Album</th>
           <th v-if="songTitleWidth > minWidth">Duration</th>
         </tr>
-        <tr v-for="song in songs" :key="song">
+        <tr v-for="song in songs" :key="song" @click="playAudio(song.filepath)">
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
             <div
               class="album-art rounded image"
@@ -30,7 +30,9 @@
               >
             </div>
           </td>
-          <td :style="{ width: songTitleWidth + 'px' }"> <div class="ellip">{{ song.album }}</div></td>
+          <td :style="{ width: songTitleWidth + 'px' }">
+            <div class="ellip">{{ song.album }}</div>
+          </td>
           <td
             :style="{ width: songTitleWidth + 'px' }"
             v-if="songTitleWidth > minWidth"
@@ -47,6 +49,7 @@
 <script>
 import { ref } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
+import { playAudio } from "@/composables/playAudio.js";
 
 export default {
   props: ["songs"],
@@ -77,7 +80,7 @@ export default {
       });
     });
 
-    return { songtitle, image_path, songTitleWidth, minWidth };
+    return { songtitle, image_path, songTitleWidth, minWidth, playAudio };
   },
 };
 </script>

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>

src/composables/playAudio.js

@@ -0,0 +1,9 @@
+const playAudio = (path) => {
+  const audio = new Audio("http://127.0.0.1:8901" + path);
+
+  audio.addEventListener("canplaythrough", () => {
+    audio.play();
+  });
+};
+
+export { playAudio };

src/router/index.js

@@ -15,7 +15,7 @@ const routes = [
     component: Home,
   },
   {
-    path: "/folder:path",
+    path: "/folder/:path",
     name: "FolderView",
     component: FolderView,
   },