client: request folder lists from server

server/.gitignore

@@ -1 +0,0 @@
-.vscode

server/Pipfile

@@ -14,6 +14,7 @@ requests = "*"
 watchdog = "*"
 progress = "*"
 pillow = "*"
+gunicorn = "*"
 
 [dev-packages]
 autopep8 = "*"

server/Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "99f472c203bd38494cccddd96820194910b1693da8ea6ed6d4b141895ff3002e"
+            "sha256": "ac6887caf42c4ea723d7e1e9fc8a94cb42b2cd815c447eb2afd0f35a73f314e1"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -55,6 +55,14 @@
             "index": "pypi",
             "version": "==3.0.10"
         },
+        "gunicorn": {
+            "hashes": [
+                "sha256:9dcc4547dbb1cb284accfb15ab5667a0e5d1881cc443e0677b4882a4067a807e",
+                "sha256:e0a968b5ba15f8a328fdfd7ab1fcb5af4470c28aaf7e55df02a99bc13138e6e8"
+            ],
+            "index": "pypi",
+            "version": "==20.1.0"
+        },
         "idna": {
             "hashes": [
                 "sha256:84d9dd047ffa80596e0f246e2eab0b391788b0503584e8945f2368256d2735ff",

server/app/__init__.py

@@ -10,8 +10,3 @@ def create_app():
     app.register_blueprint(api.bp, url_prefix='/')
 
     return app
-
-
-if __name__ == '__main__':
-    app = create_app()
-    app.run(debug=True)

server/manage.py

@@ -0,0 +1,6 @@
+from app import create_app
+
+
+if __name__ == '__main__':
+    app = create_app()
+    app.run(debug=True, threaded=True, host="127.0.0.1", port=9876)

server/start.sh

@@ -1,10 +1,14 @@
 export PORT=8000
 export music_dir="/home/cwilvx/Music/"
 
-export FLASK_APP=app
-export FLASK_DEBUG=1
-export FLASK_RUN_PORT=8008
+# export FLASK_APP=app
+# export FLASK_DEBUG=1
+# export FLASK_RUN_PORT=8008
 
 # export music_dirs="['/home/cwilvx/Music/', '/home/cwilvx/FreezerMusic']"
 
-flask run
+# flask run
+
+python manage.py
+
+# gunicorn -b 0.0.0.0:9876 --workers=4 "wsgi:create_app()" --log-level=debug

server/wsgi.py

@@ -0,0 +1,5 @@
+from app import create_app
+
+if __name__ == '__main__':
+    app = create_app()
+    app.run(debug=True, threaded=True)

src/components/FolderView/FolderList.vue

@@ -1,29 +1,32 @@
 <template>
   <div class="f-container rounded">
-    <p>folders in this directory</p>
-    <div id="f-items">
-      <router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
+    <p v-if="folders.length">folders in this directory</p>
+    <div id="f-items" v-if="folders.length">
+      <router-link
+        :to="{ name: 'FolderView', params: { path: folder.path } }"
+        v-for="folder in folders"
+        :key="folder"
+      >
         <div class="f-item rounded">
-          <span class="f-item-text">{{ folder.name }}</span>
+          <div class="f-item-text ellip">{{ folder.name }}</div>
+          <div class="f-item-count">{{ folder.count }} tracks</div>
         </div>
       </router-link>
     </div>
+    <div v-else>
+      <p>No folders in this directory</p>
+    </div>
   </div>
 </template>
 
 <script>
-import Folders from "../../data/folders.js";
-
 export default {
-  setup() {
-    const folders = Folders.folders;
-
-    return { folders };
-  },
+  props: ["folders"],
+  setup() {},
 };
 </script>
 
-<style>
+<style lang="scss">
 .f-container {
   margin-bottom: 1rem;
   background: rgba(31, 30, 30, 0.521);
@@ -49,7 +52,6 @@ export default {
   min-width: 14.4rem;
   min-height: 5rem;
   display: flex;
-  justify-content: center;
   align-items: center;
   position: relative;
   background-image: url(../../assets/icons/folder.svg);
@@ -57,21 +59,23 @@ export default {
   background-position: 1rem;
   background-size: 10% 100%;
   background-color: rgba(80, 80, 80, 0.247);
+
+  .f-item-count {
+    position: absolute;
+    top: 70%;
+    left: 3rem;
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .f-item-text {
+    position: absolute;
+    left: 3rem;
+    text-align: left;
+  }
 }
 
 .f-container .f-item:hover {
   background-color: rgba(0, 0, 0, 0.527);
 }
-
-.f-container .f-item-text {
-  position: absolute;
-  left: 3rem;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-}
 </style>

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView' }">
+    <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' }">
+    <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>
@@ -104,7 +104,7 @@ export default {
 .collapsed .nav-button {
   font-size: smaller;
   margin-top: 5px;
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 .side-nav-container .nav-button:hover {

src/composables/getFiles.js

@@ -0,0 +1,23 @@
+import { ref } from "@vue/reactivity";
+
+let home_url = "http://127.0.0.1:9876";
+
+const getData = async (path) => {
+  const songs = ref(null);
+  const folders = ref(null);
+
+  const res = await fetch(`${home_url}/?f=${path}`);
+
+  if (!res.ok) {
+    const message = `An erro has occured: ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+  songs.value = data.songs;
+  folders.value = data.folders;
+
+  return { songs, folders };
+};
+
+export default getData;

src/composables/scrolls.js

@@ -1,17 +0,0 @@
-const scrollLeftX = (artists_dom) => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: -700,
-    behavior: "smooth",
-  });
-};
-
-const scrollRightX = (artists_dom) => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: 700,
-    behavior: "smooth",
-  });
-};
-
-export { scrollLeftX, scrollRightX, };

src/router/index.js

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

src/views/AlbumView.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script>
+// import { useRoute } from 'vue-router'
+
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue";
@@ -32,6 +34,7 @@ export default {
     SongList,
     FeaturedArtists,
   },
+  setup() {},
 };
 </script>
 

src/views/FolderView.vue

@@ -5,16 +5,21 @@
     </div>
     <div id="scrollable">
       <SongList />
-      <FolderList />
+      <FolderList :folders="folders" />
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from "@vue/reactivity";
+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";
+
 export default {
   components: {
     SongList,
@@ -22,8 +27,22 @@ export default {
     SearchBox,
   },
   setup() {
+    const route = useRoute();
+
+    const path = route.params.path;
+
+    console.log(path);
+
+    const songs = ref([]);
+    const folders = ref([]);
+
+    getData("/Music").then((data) => {
+      songs.value = data.songs.value;
+      folders.value = data.folders.value;
+    });
     return {
-      //
+      songs,
+      folders,
     };
   },
 };
@@ -43,7 +62,7 @@ export default {
   position: absolute;
   height: min-content;
   width: calc(100% - 2rem);
-  top: .5rem;
+  top: 0.5rem;
 }
 
 #scrollable {