client:fetch songs and folders in folder view

src/components/FolderView/FolderList.vue

@@ -22,7 +22,9 @@
 <script>
 export default {
   props: ["folders"],
-  setup() {},
+  setup() {
+    console.log('props.folders')
+  },
 };
 </script>
 

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" ref="songtitle">
+    <div class="table rounded" ref="songtitle" v-if="songs.length">
       <table class="rounded">
         <tr>
           <th>Track</th>
@@ -10,7 +10,10 @@
         </tr>
         <tr v-for="song in songs" :key="song">
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
-            <div class="album-art rounded image"></div>
+            <div
+              class="album-art rounded image"
+              :style='{ backgroundImage: `url("${image_path + song.image}")` }'
+            ></div>
             <div>
               <span class="ellipsis">{{ song.title }}</span>
             </div>
@@ -25,28 +28,28 @@
             :style="{ width: songTitleWidth + 'px' }"
             v-if="songTitleWidth > minWidth"
           >
-            {{ song.duration }}
+            {{ song.length/60 }}
           </td>
         </tr>
       </table>
     </div>
+    <div v-else ref="songtitle"></div>
   </div>
 </template>
 
 <script>
 import { ref } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
-import Songs from "../../data/songs.js";
 
 export default {
+  props: ["songs"],
   setup() {
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
+    const image_path = "http://127.0.0.1:8900/images/thumbnails/";
 
     const minWidth = ref(300);
 
-    const songs = Songs.songs;
-
     const resizeSongTitleWidth = () => {
       let a = songtitle.value.clientWidth;
 
@@ -55,7 +58,7 @@ export default {
 
     onMounted(() => {
       resizeSongTitleWidth();
-      
+
       window.addEventListener("resize", () => {
         resizeSongTitleWidth();
       });
@@ -67,7 +70,7 @@ export default {
       });
     });
 
-    return { songtitle, songTitleWidth, songs, minWidth };
+    return { songtitle, image_path, songTitleWidth, minWidth };
   },
 };
 </script>
@@ -95,8 +98,8 @@ export default {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
-  background-color: #ccc;
-  background-image: url(../../assets/images/jw.jpeg);
+  // background-color: rgb(194, 67, 67);
+  // background-image: url(../../assets/images/jw.jpeg);
 }
 
 .folder .table .flex {

src/composables/getFiles.js

@@ -14,7 +14,7 @@ const getData = async (path) => {
   }
 
   const data = await res.json();
-  songs.value = data.songs;
+  songs.value = data.files;
   folders.value = data.folders;
 
   return { songs, folders };

src/views/FolderView.vue

@@ -4,7 +4,7 @@
       <SearchBox />
     </div>
     <div id="scrollable">
-      <SongList />
+      <SongList :songs="songs" />
       <FolderList :folders="folders" />
     </div>
   </div>
@@ -12,13 +12,14 @@
 
 <script>
 import { ref } from "@vue/reactivity";
-import { useRoute } from 'vue-router'
+import { useRoute } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import SearchBox from "@/components/FolderView/SearchBox.vue";
 
 import getData from "../composables/getFiles.js";
+import { watch } from "@vue/runtime-core";
 
 export default {
   components: {
@@ -28,18 +29,25 @@ export default {
   },
   setup() {
     const route = useRoute();
-
-    const path = route.params.path;
-
-    console.log(path);
+    const path = ref(route.params.path);
 
     const songs = ref([]);
     const folders = ref([]);
 
-    getData("/Music").then((data) => {
-      songs.value = data.songs.value;
-      folders.value = data.folders.value;
+    const getPathFolders = (path) => {
+      getData(path).then((data) => {
+        songs.value = data.songs.value;
+        folders.value = data.folders.value;
+      });
+    };
+
+    getPathFolders(path.value);
+
+    watch(route, (new_route) => {
+      const path = ref(new_route.params.path);
+      getPathFolders(path.value);
     });
+
     return {
       songs,
       folders,