major changes:

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

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>