From 5446b1fe4b2c94d3130dcc8e421d913c221065b9 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 16 Feb 2022 15:06:29 +0300
Subject: [PATCH] prevent type coercion

- remove unused imports
- minor refactors and cleanups
---
 server/app/watchdoge.py                       |  2 -
 src/assets/css/ProgressBar.scss               |  6 +-
 src/assets/css/global.scss                    | 18 ++--
 src/components/AlbumView/AlbumBio.vue         |  4 +-
 src/components/AlbumView/Header.vue           | 10 +--
 src/components/BottomBar/BottomBar.vue        |  1 -
 src/components/BottomBar/SongCard.vue         |  2 +-
 src/components/FolderView/Header.vue          |  6 +-
 src/components/LeftSidebar/Navigation.vue     |  4 +-
 .../PlaylistView/FeaturedArtists.vue          |  4 +-
 src/components/PlaylistView/Header.vue        |  7 +-
 src/components/RightSideBar/Main.vue          |  6 +-
 src/components/RightSideBar/Tabs.vue          | 15 ++--
 src/components/Search.vue                     |  8 +-
 src/components/shared/ArtistCard.vue          |  7 +-
 src/components/shared/SongItem.vue            |  6 +-
 src/components/shared/TrackItem.vue           |  9 +-
 src/composables/album.js                      | 10 +--
 src/composables/getFiles.js                   | 24 ++---
 src/composables/perks.js                      | 16 ++--
 src/composables/playAudio.js                  | 88 +++++++++----------
 src/composables/routeLoader.js                | 70 +++++++--------
 src/composables/useDebouncedRef.js            | 17 ++--
 src/main.js                                   |  2 +-
 src/views/AlbumView.vue                       |  4 +-
 src/views/FolderView.vue                      | 50 +++++------
 26 files changed, 190 insertions(+), 206 deletions(-)

diff --git a/server/app/watchdoge.py b/server/app/watchdoge.py
index 3c681544..e7e26916 100644
--- a/server/app/watchdoge.py
+++ b/server/app/watchdoge.py
@@ -58,7 +58,5 @@ class Handler(PatternMatchingEventHandler):
         print(event.dest_path)
 
 
-# if __name__ == '__main__':
 watch = OnMyWatch()
-# watch.run()
 
diff --git a/src/assets/css/ProgressBar.scss b/src/assets/css/ProgressBar.scss
index 6576688f..ddac3efb 100644
--- a/src/assets/css/ProgressBar.scss
+++ b/src/assets/css/ProgressBar.scss
@@ -3,11 +3,9 @@ input[type="range"] {
   margin-right: 15px;
   width: calc(100% - 2px);
   height: 0.3rem;
-  background: rgb(59, 57, 57);
   border-radius: 5px;
-  background-image: linear-gradient($blue, $blue);
-  background-size: 0% 100%;
-  background-repeat: no-repeat;
+  background-size: 0 100%;
+  background: rgb(59, 57, 57) linear-gradient($blue, $blue) no-repeat;
 }
 
 /* Input Thumb */
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index abf033b3..7d284855 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -154,7 +154,7 @@ button {
 }
 
 .shadow-sm {
-  box-shadow: 0rem 0rem .5rem rgb(0, 0, 0);
+  box-shadow: 0 0 .5rem rgb(0, 0, 0);
 }
 
 .shadow-md {
@@ -195,46 +195,46 @@ button {
 
 @-webkit-keyframes similarAlbums {
   0% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
   50% {
     background-position: 100% 63%;
   }
   100% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
 }
 @-moz-keyframes similarAlbums {
   0% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
   50% {
     background-position: 100% 63%;
   }
   100% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
 }
 @-o-keyframes similarAlbums {
   0% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
   50% {
     background-position: 100% 63%;
   }
   100% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
 }
 @keyframes similarAlbums {
   0% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
   50% {
     background-position: 100% 63%;
   }
   100% {
-    background-position: 0% 38%;
+    background-position: 0 38%;
   }
 }
 
diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index b4e5ca50..3dba2858 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -54,7 +54,7 @@ export default {
       height: 10rem;
       position: absolute;
       background-color: rgb(196, 58, 58);
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
       bottom: -10rem;
       left: 7rem;
       transform: rotate(45deg) translate(-1rem, -9rem);
@@ -74,7 +74,7 @@ export default {
       background-color: $blue;
       border-radius: 50%;
       transform: translateX(-11rem) translateY(7rem);
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
     }
   }
   .bio {
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 8008a820..05a7dad6 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -85,7 +85,7 @@ export default {
       position: absolute;
       left: -4.2rem;
       top: 3rem;
-      box-shadow: 0px 0px 1.5rem rgb(0, 0, 0);
+      box-shadow: 0 0 1.5rem rgb(0, 0, 0);
     }
 
     .rect {
@@ -96,7 +96,7 @@ export default {
       background-color: rgb(196, 58, 58);
       transform: rotate(-45deg) translate(20%, -50%);
       z-index: 1;
-      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      box-shadow: 0 0 2rem rgb(0, 0, 0);
       transition: all 0.5s ease-in-out;
 
       &:hover {
@@ -114,7 +114,7 @@ export default {
       background-color: $blue;
       border-radius: 50%;
       transform: translateX(-11rem) translateY(7rem);
-      box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.164);
+      box-shadow: 0 0 2rem rgba(0, 0, 0, 0.164);
       transition: all 0.5s ease-in-out;
 
       &:hover {
@@ -145,9 +145,7 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 1rem;
-  position: relative;
-  padding-left: 14rem;
+  padding: 0 1rem 0 14rem;
 
   .art {
     position: absolute;
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index e8680ba9..061110c4 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -26,7 +26,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
diff --git a/src/components/BottomBar/SongCard.vue b/src/components/BottomBar/SongCard.vue
index f61eca7a..a346b937 100644
--- a/src/components/BottomBar/SongCard.vue
+++ b/src/components/BottomBar/SongCard.vue
@@ -11,7 +11,7 @@
       <div>
         <div class="title ellip">{{ track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="track.artists[0] != ''">
+        <div class="artists ellip" v-if="track.artists[0] !== ''">
           <span v-for="artist in putCommas(track.artists)" :key="artist">{{
             artist
           }}</span>
diff --git a/src/components/FolderView/Header.vue b/src/components/FolderView/Header.vue
index f9300a75..330afa87 100644
--- a/src/components/FolderView/Header.vue
+++ b/src/components/FolderView/Header.vue
@@ -16,9 +16,8 @@
       <input
         type="text"
         class="search-input"
-        placeholder="Ctrl + F"
+        placeholder="/"
         v-model="query"
-        @keyup.enter="search()"
       />
       <div class="search-icon image"></div>
     </div>
@@ -109,8 +108,7 @@ export default {
 
     border-radius: $small;
     background-color: rgb(24, 22, 22);
-    padding: $small;
-    padding-left: 2.25rem;
+    padding: $small $small $small 2.25rem;
 
     .icon {
       position: absolute;
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 6cf956af..2efa652f 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 
 const menus = [
   {
@@ -71,10 +70,9 @@ const props = defineProps({
 }
 
 .side-nav-container {
-  padding: $small;
   color: #fff;
   margin-bottom: 1rem;
-  padding-top: 10px;
+  padding: 10px $small $small;
   margin-top: 1rem;
   text-transform: capitalize;
 
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index 715f0728..e0b61e87 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -132,14 +132,14 @@ export default {
   transition: all 0.5s ease-in-out;
 
   &:hover {
-    background-position: 0%;
+    background-position: 0;
   }
 
   p {
     margin-left: 1rem;
     font-size: 1.5rem;
     font-weight: 700;
-    text-shadow: 0px 0px 80px rgb(0, 0, 0);
+    text-shadow: 0 0 80px rgb(0, 0, 0);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index be286964..79b6a0d2 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -40,7 +40,7 @@
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
-    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.479);
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.479);
 
     @include phone-only {
       // border: solid;
@@ -64,12 +64,11 @@
     height: 10rem;
     bottom: $small;
     left: $small;
-    padding: $small;
     display: flex;
     flex-direction: row;
     align-items: flex-end;
-    padding-bottom: 3.5rem;
-    box-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.658);
+    padding: $small $small 3.5rem;
+    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
 
     @include phone-only {
       width: calc(100% - 1rem);
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 6fbfb866..834357fe 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -2,14 +2,14 @@
   <div class="r-sidebar">
     <div class="grid">
       <div class="r-content border">
-        <div class="r-dash" v-show="current_tab == tabs.home">
+        <div class="r-dash" v-show="current_tab === tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="current_tab == tabs.search">
+        <div class="r-search" v-show="current_tab === tabs.search">
           <Search />
         </div>
 
-        <div class="r-queue" v-show="current_tab == tabs.queue">
+        <div class="r-queue" v-show="current_tab === tabs.queue">
           <UpNext />
         </div>
       </div>
diff --git a/src/components/RightSideBar/Tabs.vue b/src/components/RightSideBar/Tabs.vue
index 6b2b7be9..74cdc8df 100644
--- a/src/components/RightSideBar/Tabs.vue
+++ b/src/components/RightSideBar/Tabs.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="r-tabs">
     <div v-for="tab in props.tabs"
-    @click="changeTab(tab)"
-    :key="tab"
-      class="image t-item"
-      :class="{ active_tab: props.current_tab == tab }, `${tab}`"
+         @click="changeTab(tab)"
+         :key="tab"
+         class="image t-item"
+         :class="{ active_tab: props.current_tab === tab }, `${tab}`"
     ></div>
     <div>
     </div>
   </div>
 </template>
 
-<script setup>import { onMounted } from 'vue';
+<script setup>
 
 const props = defineProps({
   current_tab: String,
@@ -21,7 +21,7 @@ const props = defineProps({
 const emit = defineEmits(['changeTab'])
 
 function changeTab(tab) {
-  if (tab == props.current_tab) return;
+  if (tab === props.current_tab) return;
 
   emit('changeTab', tab)
 }
@@ -41,8 +41,7 @@ function changeTab(tab) {
     width: 100%;
     height: 2.45rem;
     background-size: 1.5rem;
-    border-radius: 0;
-      border-radius: $small 0 0 $small;
+    border-radius: $small 0 0 $small;
 
     &:hover {
       background-color: rgba(128, 128, 128, 0.281);
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 59ef08f0..245aa095 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -39,7 +39,7 @@
           v-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
-          !albums.albums.length && query.length != 0
+          !albums.albums.length && query.length !== 0
         "
           class="no-res"
       >
@@ -47,7 +47,7 @@
           No results for <span class="highlight rounded">{{ query }}</span>
         </div>
       </div>
-      <div v-else-if="query.length == 0" class="no-res">
+      <div v-else-if="query.length === 0" class="no-res">
         <div class="no-res-text">Find your music 🔍😀</div>
       </div>
     </div>
@@ -123,14 +123,14 @@ export default {
     }
 
     watch(query, (new_query) => {
-      if (query.value == "" || query.value == "  " || query.value.length < 2) {
+      if (query.value === "" || query.value === "  " || query.value.length < 2) {
         albums.albums = [];
         artists.artists = [];
         tracks.tracks = [];
 
         return;
       }
-      ;
+
 
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 91908595..f14cdf12 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -36,13 +36,14 @@ export default {
     height: 7em;
     border-radius: 50%;
     margin-bottom: $small;
-    background: url("../../assets/images/null.webp");
     background-size: 7rem 7rem;
+    background: url("../../assets/images/null.webp");
+    background-size: 100% 100%;
     background-repeat: no-repeat;
-    background-position: center;
+    background-position: top;
     transition: all 0.5s ease-in-out;
     border: solid 1px rgba(5, 5, 5, 0.055);
-    box-shadow: 0px 0px 80px rgb(0, 0, 0);
+    box-shadow: 0 0 80px rgb(0, 0, 0);
   }
 
   &:hover {
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index c3aca6ea..38e7d955 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr class="songlist-item" :class="{ current: current.track_id == song.track_id }">
+  <tr class="songlist-item" :class="{ current: current.track_id === song.track_id }">
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
@@ -8,7 +8,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current.track_id == song.track_id"
+          v-if="current.track_id === song.track_id"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
@@ -22,7 +22,7 @@
       </div>
     </td>
     <td class="song-artists">
-      <div class="ellip" v-if="song.artists[0] != ''">
+      <div class="ellip" v-if="song.artists[0] !== ''">
         <span
           class="artist"
           v-for="artist in putCommas(song.artists)"
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 6acdfabd..b755181b 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -3,7 +3,7 @@
     class="track-item h-1"
     @click="playThis(props.track)"
     :class="{
-      currentInQueue: current.track_id == props.track.track_id,
+      currentInQueue: current.track_id === props.track.track_id,
     }"
   >
     <div
@@ -14,7 +14,7 @@
     >
       <div
         class="now-playing-track image"
-        v-if="current.track_id == props.track.track_id"
+        v-if="current.track_id === props.track.track_id"
         :class="{ active: is_playing, not_active: !is_playing }"
       ></div>
     </div>
@@ -44,7 +44,7 @@ const putCommas = perks.putCommas;
 const is_playing = ref(playAudio.playing);
 
 const playThis = (song) => {
-  playAudio.playAudio(song.filepath);
+  playAudio.playAudio(song.track_id);
   perks.current.value = song;
 };
 
@@ -58,11 +58,10 @@ const playThis = (song) => {
 .track-item {
   display: flex;
   align-items: center;
-  padding: 0.5rem;
   border-radius: 0.5rem;
   position: relative;
   height: 4rem;
-  padding-left: 4rem;
+  padding: 0.5rem 0.5rem 0.5rem 4rem;
 
   &:hover {
     cursor: pointer;
diff --git a/src/composables/album.js b/src/composables/album.js
index 685ce30f..ce2b8abd 100644
--- a/src/composables/album.js
+++ b/src/composables/album.js
@@ -10,13 +10,11 @@ const getAlbumTracks = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 
-  const data = await res.json();
-
-  return data;
+  return await res.json();
 };
 
 const getAlbumArtists = async (name, artist) => {
@@ -30,7 +28,7 @@ const getAlbumArtists = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 
@@ -49,7 +47,7 @@ const getAlbumBio = async (name, artist) => {
   );
 
   if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
+    const message = `An error has occurred: ${res.status}`;
     throw new Error(message);
   }
 
diff --git a/src/composables/getFiles.js b/src/composables/getFiles.js
index 0acc92eb..3db73275 100644
--- a/src/composables/getFiles.js
+++ b/src/composables/getFiles.js
@@ -1,24 +1,24 @@
 let base_uri = "http://0.0.0.0:9876";
 
 const getTracksAndDirs = async (path) => {
-  let url;
+    let url;
 
-  const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
-  url = url = `${base_uri}/f/${encoded_path}`;
+    const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
+    url = url = `${base_uri}/f/${encoded_path}`;
 
-  const res = await fetch(url);
+    const res = await fetch(url);
 
-  if (!res.ok) {
-    const message = `An error has occured: ${res.status}`;
-    throw new Error(message);
-  }
+    if (!res.ok) {
+        const message = `An error has occurred: ${res.status}`;
+        throw new Error(message);
+    }
 
-  const data = await res.json();
+    const data = await res.json();
 
-  const songs = data.files;
-  const folders = data.folders;
+    const songs = data.files;
+    const folders = data.folders;
 
-  return { songs, folders };
+    return {songs, folders};
 };
 
 export default getTracksAndDirs;
diff --git a/src/composables/perks.js b/src/composables/perks.js
index 9592f8c6..83f3d277 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -40,10 +40,10 @@ function updateNext(song_) {
     (item) => item.track_id === song_.track_id
   );
 
-  if (index == queue.value.length - 1) {
+  if (index === queue.value.length - 1) {
     next.value = queue.value[0];
     state.prev.value = queue.value[queue.value.length - 2];
-  } else if (index == 0) {
+  } else if (index === 0) {
     next.value = queue.value[1];
   } else {
     next.value = queue.value[index + 1];
@@ -55,9 +55,9 @@ function updatePrev(song) {
     (item) => item.track_id === song.track_id
   );
 
-  if (index == 0) {
+  if (index === 0) {
     prev.value = queue.value[queue.value.length - 1];
-  } else if (index == queue.value.length - 1) {
+  } else if (index === queue.value.length - 1) {
     prev.value = queue.value[index - 1];
   } else {
     prev.value = queue.value[index - 1];
@@ -81,7 +81,7 @@ const readQueue = () => {
 };
 
 const updateQueue = async (song, type) => {
-  playAudio.playAudio(song.filepath);
+  playAudio.playAudio(song.track_id);
   let list;
 
   switch (type) {
@@ -151,7 +151,7 @@ window.addEventListener("keydown", (e) => {
 
   switch (e.key) {
     case "ArrowRight":
-      if (target.tagName == "INPUT") return;
+      if (target.tagName === "INPUT") return;
 
       {
         if (!key_down_fired) {
@@ -169,7 +169,7 @@ window.addEventListener("keydown", (e) => {
     case "ArrowLeft":
       {
         if (!key_down_fired) {
-          if (target.tagName == "INPUT") return;
+          if (target.tagName === "INPUT") return;
 
           key_down_fired = true;
 
@@ -186,7 +186,7 @@ window.addEventListener("keydown", (e) => {
     case " ":
       {
         if (!key_down_fired) {
-          if (target.tagName == "INPUT") return;
+          if (target.tagName === "INPUT") return;
           e.preventDefault();
           key_down_fired = true;
 
diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js
index db2e3a72..f6b6a19c 100644
--- a/src/composables/playAudio.js
+++ b/src/composables/playAudio.js
@@ -1,4 +1,4 @@
-import { ref } from "@vue/reactivity";
+import {ref} from "@vue/reactivity";
 
 import perks from "./perks";
 import media from "./mediaNotification.js";
@@ -11,77 +11,77 @@ const current_time = ref(0);
 
 const playing = ref(state.is_playing);
 
-const url = "http://0.0.0.0:8901/";
+const url = "http://0.0.0.0:9876/file/";
 
-const playAudio = (path) => {
-  const elem = document.getElementsByClassName('progress-bar')[0];
-  const bottom_elem = document.getElementsByClassName('progress-bar')[1];
+const playAudio = (track_id) => {
+    const elem = document.getElementsByClassName('progress-bar')[0];
+    const bottom_elem = document.getElementsByClassName('progress-bar')[1];
 
-  const full_path = url + encodeURIComponent(path);
+    const full_path = url + encodeURIComponent(track_id);
 
-  new Promise((resolve, reject) => {
-    audio.src = full_path;
-    audio.oncanplaythrough = resolve;
-    audio.onerror = reject;
-  })
-    .then(() => {
-      audio.play();
-      perks.focusCurrent()
-
-      state.is_playing.value = true;
-
-      audio.ontimeupdate = () => {
-        current_time.value = audio.currentTime;
-        pos.value = (audio.currentTime / audio.duration) * 1000;
-        let bg_size = ((audio.currentTime / audio.duration)*100)
-
-        elem.style.backgroundSize = `${bg_size}% 100%`;
-        bottom_elem.style.backgroundSize = `${bg_size}% 100%`;
-      };
+    new Promise((resolve, reject) => {
+        audio.src = full_path;
+        audio.oncanplaythrough = resolve;
+        audio.onerror = reject;
     })
-    .catch((err) => console.log(err));
+        .then(() => {
+            audio.play().then(() => {
+                    perks.focusCurrent()
+                    state.is_playing.value = true;
+                }
+            );
+            audio.ontimeupdate = () => {
+                current_time.value = audio.currentTime;
+                pos.value = (audio.currentTime / audio.duration) * 1000;
+                let bg_size = ((audio.currentTime / audio.duration) * 100)
+
+                elem.style.backgroundSize = `${bg_size}% 100%`;
+                bottom_elem.style.backgroundSize = `${bg_size}% 100%`;
+            };
+        })
+        .catch((err) => console.log(err));
 };
 
 function playNext() {
-  playAudio(perks.next.value.filepath);
-  perks.current.value = perks.next.value;
-  media.showMediaNotif();
+    playAudio(perks.next.value.track_id);
+    perks.current.value = perks.next.value;
+    media.showMediaNotif();
 }
 
 function playPrev() {
-  playAudio(state.prev.value.filepath);
-  perks.current.value = perks.prev.value;
+    playAudio(state.prev.value.track_id);
+    perks.current.value = perks.prev.value;
 }
 
 function seek(position) {
-  audio.currentTime = (position / 1000) * audio.duration;
+    audio.currentTime = (position / 1000) * audio.duration;
 }
 
 function playPause() {
-  if (audio.src === "") {
-    playAudio(perks.current.value.filepath);
-  }
+    if (audio.src === "") {
+        playAudio(perks.current.value.filepath);
+    }
 
-  if (audio.paused) {
-    audio.play();
-  } else {
-    audio.pause();
-  }
+    if (audio.paused) {
+        audio.play();
+    } else {
+        audio.pause();
+    }
 }
 
 audio.addEventListener("play", () => {
-  state.is_playing.value = true;
+    state.is_playing.value = true;
 });
 
 audio.addEventListener("pause", () => {
-  state.is_playing.value = false;
+    state.is_playing.value = false;
 });
 
 audio.addEventListener("ended", () => {
-  playNext();
+    playNext();
 });
 
-export default { playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time };
+export default {playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time};
 
 
 // TODO
diff --git a/src/composables/routeLoader.js b/src/composables/routeLoader.js
index 8792e4af..9452b63a 100644
--- a/src/composables/routeLoader.js
+++ b/src/composables/routeLoader.js
@@ -3,41 +3,41 @@ import Router from "@/router";
 import album from "./album.js";
 import state from "./state.js";
 
-function toAlbum(title, artist) {
-  state.loading.value = true;
-  album
-    .getAlbumTracks(title, artist)
-    .then((data) => {
-      state.album_song_list.value = data.songs;
-      state.album_info.value = data.info;
-    })
-    .then(
-      album.getAlbumArtists(title, artist).then((data) => {
-        state.album_artists.value = data;
-      })
-    )
-    .then(
-      album.getAlbumBio(title, artist).then((data) => {
-        if (data == "None") {
-          state.album_bio.value = null;
-        } else {
-          state.album_bio.value = data;
-        }
-      })
-    )
-    .then(() => {
-      Router.push({
-        name: "AlbumView",
-        params: {
-          album: title,
-          artist: artist,
-        },
-      });
-      state.loading.value = false;
-    })
-    .catch((error) => {
-      console.log(error);
-    });
+async function toAlbum(title, artist) {
+    state.loading.value = true;
+    album
+        .getAlbumTracks(title, artist)
+        .then((data) => {
+            state.album_song_list.value = data.songs;
+            state.album_info.value = data.info;
+        })
+        .then(
+            await album.getAlbumArtists(title, artist).then((data) => {
+                state.album_artists.value = data;
+            })
+        )
+        .then(
+            await album.getAlbumBio(title, artist).then((data) => {
+                if (data === "None") {
+                    state.album_bio.value = null;
+                } else {
+                    state.album_bio.value = data;
+                }
+            })
+        )
+        .then(() => {
+            Router.push({
+                name: "AlbumView",
+                params: {
+                    album: title,
+                    artist: artist,
+                },
+            });
+            state.loading.value = false;
+        })
+        .catch((error) => {
+            console.log(error);
+        });
 }
 
 export default {
diff --git a/src/composables/useDebouncedRef.js b/src/composables/useDebouncedRef.js
index 6bf9b76e..8a8de05f 100644
--- a/src/composables/useDebouncedRef.js
+++ b/src/composables/useDebouncedRef.js
@@ -1,4 +1,4 @@
-import { ref, customRef } from 'vue'
+import {customRef, ref} from 'vue'
 
 const debounce = (fn, delay = 0, immediate = false) => {
   let timeout
@@ -14,21 +14,20 @@ const debounce = (fn, delay = 0, immediate = false) => {
 
 const useDebouncedRef = (initialValue, delay, immediate) => {
   const state = ref(initialValue)
-  const debouncedRef = customRef((track, trigger) => ({
+  return customRef((track, trigger) => ({
     get() {
       track()
       return state.value
     },
     set: debounce(
-      value => {
-        state.value = value
-        trigger()
-      },
-      delay,
-      immediate
+        value => {
+          state.value = value
+          trigger()
+        },
+        delay,
+        immediate
     ),
   }))
-  return debouncedRef
 }
 
 export default useDebouncedRef
diff --git a/src/main.js b/src/main.js
index 972b1fa8..89776f24 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,4 +12,4 @@ const emitter = mitt();
 const app = createApp(App);
 app.use(router);
 app.provide('emitter', emitter);
-app.mount('#app');
+app.mount('#app');
\ No newline at end of file
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index b34038a1..32fccf6e 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -19,7 +19,7 @@
 import { useRoute } from "vue-router";
 import { onMounted } from "@vue/runtime-core";
 import { onUnmounted } from "@vue/runtime-core";
-import { watch, ref } from "vue";
+import { watch } from "vue";
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 
@@ -42,7 +42,7 @@ export default {
     watch(
       () => route.params,
       () => {
-        if (route.name == "AlbumView") {
+        if (route.name === "AlbumView") {
           routeLoader.toAlbum(route.params.album, route.params.artist);
         }
       }
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index a7c3c102..2b2bbdc8 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,26 +1,26 @@
 <template>
-  <div id="f-view-parent" class="card-dark">
+  <div id="f-view-parent" class="border rounded card-dark">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
+      <Header :path="path" :first_song="songs[0]" @search="updateQueryString"/>
     </div>
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="folders" />
+      <FolderList :folders="folders"/>
       <div class="separator" v-if="folders.length && songs.length"></div>
-      <SongList :songs="songs" />
+      <SongList :songs="songs"/>
     </div>
   </div>
 </template>
 
 <script>
-import { computed, ref } from "@vue/reactivity";
-import { useRoute } from "vue-router";
+import {computed, ref} from "@vue/reactivity";
+import {useRoute} from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
 import getTracksAndDirs from "../composables/getFiles.js";
-import { onMounted, watch } from "@vue/runtime-core";
+import {onMounted, watch} from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
 export default {
@@ -46,9 +46,9 @@ export default {
       if (query.value.length > 1) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
-            song_list.value[i].title
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
+              song_list.value[i].title
+                  .toLowerCase()
+                  .includes(query.value.toLowerCase())
           ) {
             songs_.push(song_list.value[i]);
           }
@@ -66,9 +66,9 @@ export default {
       if (query.value.length > 1) {
         for (let i = 0; i < folders_list.value.length; i++) {
           if (
-            folders_list.value[i].name
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
+              folders_list.value[i].name
+                  .toLowerCase()
+                  .includes(query.value.toLowerCase())
           ) {
             folders_.push(folders_list.value[i]);
           }
@@ -84,19 +84,19 @@ export default {
       const getDirData = (path) => {
         state.loading.value = true;
         getTracksAndDirs(path)
-          .then((data) => {
-            scrollable.value.scrollTop = 0;
+            .then((data) => {
+              scrollable.value.scrollTop = 0;
 
-            state.folder_song_list.value = data.songs;
-            state.folder_list.value = data.folders;
+              state.folder_song_list.value = data.songs;
+              state.folder_list.value = data.folders;
 
-            state.loading.value = false;
-          })
-          .then(() => {
-            setTimeout(() => {
-              query.value = "";
-            }, 100);
-          });
+              state.loading.value = false;
+            })
+            .then(() => {
+              setTimeout(() => {
+                query.value = "";
+              }, 100);
+            });
       };
 
       getDirData(path.value);
@@ -130,7 +130,7 @@ export default {
   position: relative;
   padding: 4rem $small 0 $small;
   overflow: hidden;
-  margin: 0;
+  margin: $small;
 }
 
 #f-view-parent .fixed {