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/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,
   },