more refactors

src/assets/css/BottomBar/BottomBar.scss

@@ -1,5 +1,6 @@
 .b-bar {
   height: 100%;
+  border-top: solid 1px $gray;
 
   .grid {
     display: grid;
@@ -62,12 +63,12 @@
         width: 100%;
 
         .durationx {
-          background-color: #97979725;
-          // border: solid 1px rgba(255, 255, 255, 0.253);
+          background-color: $black;
           padding: $smaller;
-          border-radius: 0.75rem;
+          border-radius: 0.5rem;
           margin: 0 $small 0 $small;
           font-size: 0.8rem;
+          min-width: 2.5rem;
         }
       }
     }

src/assets/css/ProgressBar.scss

@@ -5,7 +5,7 @@ input[type="range"] {
   height: 0.3rem;
   border-radius: 5px;
   background-size: 0 100%;
-  background: rgb(59, 57, 57) linear-gradient($blue, $blue) no-repeat;
+  background: $black linear-gradient($blue, $blue) no-repeat;
 }
 
 /* Input Thumb */

src/assets/css/global.scss

@@ -40,7 +40,7 @@ a {
 }
 
 .border {
-  border: solid 2px #27262654;
+  border: solid 1px $gray;
 }
 
 .border-sm {

src/components/AlbumView/Header.vue

@@ -11,7 +11,7 @@
         <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats">
-            {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
+            {{ album_info.count }} Tracks • {{ album_info.duration }} • {{album_info.date}}
           </div>
           <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
@@ -58,7 +58,7 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 1rem;
+  padding: $small;
   height: 100%;
   background-image: url("../../assets/images/abg.webp");
   background-position: 0% 60%;
@@ -74,7 +74,7 @@ export default {
 
     .top {
       .h {
-        color: rgba(255, 255, 255, 0.795);
+        color: #ffffffcb;
       }
       .title {
         font-size: 2rem;
@@ -94,9 +94,16 @@ export default {
     }
 
     .bottom {
+      position: relative;
+
       .stats {
+        background-color: #1f1f1f8e;
+        padding: $small;
+        border-radius: $small;
+        position: absolute;
+        right: 0;
+        bottom: 0;
         font-weight: bold;
-        display: none;
       }
 
       .play {
@@ -106,7 +113,6 @@ export default {
         align-items: center;
         background: $highlight-blue;
         padding: $small;
-        margin: $small 0;
         cursor: pointer;
 
         .icon {

src/components/BottomBar/BottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar border">
+  <div class="b-bar">
     <div class="grid">
       <SongCard :collapsed="props.collapsed" />
       <div class="controlsx rounded">

src/components/FolderView/Header.vue

@@ -15,7 +15,7 @@
     <div class="search">
       <input
         type="text"
-        class="search-input"
+        class="search-input border"
         placeholder="Search this folder"
         v-model="query"
       />
@@ -68,11 +68,10 @@ export default {
   .search-input {
     max-width: 20rem;
     width: 100%;
-    border: 1px solid $separator;
     border-radius: 0.5rem;
     padding-left: 1rem;
-    background-color: #46454500;
-    color: #fff;
+    background-color: transparent;
+    color: $white;
     font-size: 1rem;
     line-height: 2.2rem;
     outline: none;

src/components/RightSideBar/Main.vue

@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys border">
+      <div class="tab-keys">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
@@ -100,9 +100,9 @@ function changeTab(tab) {
       height: 100%;
       position: absolute;
       grid-area: tabs;
-      // padding: $small 0;
       border-radius: 0;
       overflow: hidden;
+      border-left: solid 1px $gray;
     }
   }
 }

src/components/shared/Progress.vue

@@ -1,11 +1,11 @@
 <template>
   <input
-    class="progress-bar"
     id="progress"
     type="range"
     :value="pos"
     min="0"
-    max="1000"
+    max="100"
+    step="0.1"
     @change="seek()"
   />
 </template>

src/composables/playAudio.js

@@ -14,8 +14,7 @@ const playing = ref(state.is_playing);
 const url = "http://0.0.0.0:9876/file/";
 
 const playAudio = (trackid) => {
-    const elem = document.getElementsByClassName('progress-bar')[0];
-    const bottom_elem = document.getElementsByClassName('progress-bar')[1];
+    const elem = document.getElementById('progress');
 
     const full_path = url + encodeURIComponent(trackid);
 
@@ -32,11 +31,10 @@ const playAudio = (trackid) => {
             );
             audio.ontimeupdate = () => {
                 current_time.value = audio.currentTime;
-                pos.value = (audio.currentTime / audio.duration) * 1000;
+                pos.value = (audio.currentTime / audio.duration) * 100;
                 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));
@@ -54,7 +52,7 @@ function playPrev() {
 }
 
 function seek(position) {
-    audio.currentTime = (position / 1000) * audio.duration;
+    audio.currentTime = (position / 100) * audio.duration;
 }
 
 function playPause() {