improve nowPlaying alignment

src/App.vue

@@ -69,10 +69,8 @@ export default {
     position: absolute;
     width: 3rem;
     height: 100%;
-    background: url(./assets/icons/menu.svg);
     background-size: 2rem;
-    background-repeat: no-repeat;
-    background-position: center;
+    background: url(./assets/icons/menu.svg) no-repeat center;
     cursor: pointer;
   }
 }
@@ -80,10 +78,8 @@ export default {
   height: 2rem;
   width: 9rem;
   margin-left: 3rem;
-  background: url(./assets/logo.svg);
   background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+  background: url(./assets/logo.svg) no-repeat center;
 }
 
 .r-sidebar {

src/assets/css/BottomBar/BottomBar.scss

@@ -19,7 +19,7 @@
         width: 3rem;
         height: 3rem;
         border-radius: $smaller;
-        background-image: url("../../images/eggs.jpg");
+        background-image: url("../../images/null.webp");
       }
 
       .separator {

src/assets/css/global.scss

@@ -154,6 +154,18 @@ button {
   white-space: nowrap;
 }
 
+.shadow-sm {
+  box-shadow: 0rem 0rem .5rem rgb(0, 0, 0);
+}
+
+.shadow-md {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
+}
+
 /* scrollbars */
 
 /* width */

src/components/AlbumView/Header.vue

@@ -66,7 +66,7 @@ export default {
   gap: $small;
   position: relative;
   overflow: hidden;
-  height: 15rem;
+  height: 14rem;
 
   .right {
     @include tablet-landscape {

src/components/BottomBar/SongCard.vue

@@ -16,7 +16,7 @@
           }}</span>
         </div>
         <div class="artists" v-else>
-          <span>{{ track.album_artist }}</span>
+          <span>{{ track.albumartist }}</span>
         </div>
       </div>
     </div>

src/components/FolderView/Header.vue

@@ -40,7 +40,6 @@ export default {
     }
 
     watch(query, () => {
-      console.log(query.value);
       emit("search", query.value);
     });
 

src/components/FolderView/SongList.vue

@@ -74,8 +74,8 @@ function updateQueue(song) {
   perks.updateQueue(song, type);
 }
 
-function loadAlbum(title, album_artist) {
-  routeLoader.toAlbum(title, album_artist);
+function loadAlbum(title, albumartist) {
+  routeLoader.toAlbum(title, albumartist);
 }
 </script>
 

src/components/PlaylistView/Header.vue

@@ -26,7 +26,7 @@
 .p-header {
   display: grid;
   grid-template-columns: 1fr;
-  height: 15rem;
+  height: 14rem;
   background-image: url("../../assets/images/eggs.jpg");
   position: relative;
 

src/components/RightSideBar/NowPlaying.vue

@@ -1,23 +1,29 @@
 <template>
-  <div class="now-playing border">
+  <div class="now-playing border shadow-lg">
     <div class="art-tags">
       <div class="duration">{{ current.length }}</div>
       <div
-        class="album-art image border"
         :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
+        class="album-art image border"
       ></div>
-      <div>
+      <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
-        <hr />
-        <div id="artist" class="ellip" v-if="current.artists[0] != ''">
+        <div class="separator no-border"></div>
+        <div v-if="current.artists[0] != ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
             artist
           }}</span>
         </div>
-        <div id="artist" v-else>
-          <span>{{ current.album_artist }}</span>
+        <div v-else id="artist">
+          <span>{{ current.albumartist }}</span>
+        </div>
+        <div id="type">
+          <span v-if="current.bitrate > 330"
+            >FLAC • {{ current.bitrate }} Kbps</span
+          >
+          <span v-else>MP3 | {{ current.bitrate }} Kbps</span>
         </div>
       </div>
     </div>
@@ -26,37 +32,35 @@
         <Progress />
       </div>
     </div>
-    <div class="controls">
-      <div class="shuffle">
-        <div class="image"></div>
-        <div class="image"></div>
-      </div>
-      <HotKeys />
-      <div class="fav">
-        <div class="image"></div>
-        <div class="image"></div>
+    <div class="c-wrapper border rounded">
+      <div class="controls">
+        <div class="shuffle">
+          <div class="image"></div>
+          <div class="image"></div>
+        </div>
+        <HotKeys />
+        <div class="fav">
+          <div class="image"></div>
+          <div class="image"></div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
-
-import perks from "../../composables/perks.js";
 import playAudio from "@/composables/playAudio.js";
-
-import Progress from "../shared/Progress.vue";
+import { ref } from "@vue/reactivity";
+import perks from "../../composables/perks.js";
 import HotKeys from "../shared/HotKeys.vue";
+import Progress from "../shared/Progress.vue";
 
 export default {
   setup() {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
     const pos = playAudio.pos;
-    function fmtMSS(s) {
-      return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
-    }
+
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
     const { playPause } = playAudio;
@@ -73,7 +77,6 @@ export default {
       pos,
       seek,
       isPlaying,
-      fmtMSS,
     };
   },
   components: { Progress, HotKeys },
@@ -83,39 +86,56 @@ export default {
 <style lang="scss">
 .now-playing {
   border-radius: 0.5rem;
-  height: 15rem;
+  height: 13.5rem;
   padding: 0.5rem;
   background: $card-dark;
   display: grid;
   grid-template-rows: 3fr 1fr;
 
+  .progress {
+    display: flex;
+
+    .prog {
+      width: 100%;
+      display: grid;
+      align-items: center;
+    }
+  }
+
   .art-tags {
     display: flex;
     align-items: center;
     position: relative;
 
+    .t-a {
+      #title {
+        margin: 0;
+        width: 20rem;
+        color: #fff;
+      }
+
+      #artist {
+        font-size: 0.8rem;
+        width: 20rem;
+        color: $highlight-blue;
+      }
+    }
+
     .duration {
       position: absolute;
       bottom: $small;
       right: 0;
-      font-size: .9rem;
+      font-size: 0.9rem;
     }
 
-    hr {
-      border: none;
-      margin: 0.3rem;
-    }
-
-    #title {
-      margin: 0;
-      width: 20rem;
-      color: #fff;
-    }
-
-    #artist {
-      font-size: small;
-      width: 20rem;
-      color: $highlight-blue;
+    #type {
+      font-size: $medium;
+      color: $red;
+      padding: $smaller;
+      border-radius: $smaller;
+      position: absolute;
+      bottom: 0.1rem;
+      border: solid 1px $red;
     }
 
     .album-art {
@@ -123,9 +143,16 @@ export default {
       height: 7rem;
       border-radius: 0.5rem;
       margin-right: 0.5rem;
-      margin-left: $small;
       background-image: url("../../assets/images/null.webp");
     }
   }
+
+  .c-wrapper {
+    background-color: $bbb;
+    height: 3.5rem;
+    padding: 0 $small;
+    display: grid;
+    align-items: center;
+  }
 }
 </style>

src/components/shared/SongItem.vue

@@ -31,11 +31,11 @@
         >
       </div>
       <div class="ellip" v-else>
-        <span class="artist">{{ song.album_artist }}</span>
+        <span class="artist">{{ song.albumartist }}</span>
       </div>
     </td>
     <td class="song-album">
-      <div class="ellip" @click="emitLoadAlbum(song.album, song.album_artist)">
+      <div class="ellip" @click="emitLoadAlbum(song.album, song.albumartist)">
         {{ song.album }}
       </div>
     </td>
@@ -94,6 +94,7 @@ export default {
   }
 
   .song-duration {
+    font-size: .8rem;
     width: 5rem !important;
   }
 
@@ -143,6 +144,9 @@ export default {
   }
 
   &:hover {
+    * {
+      color: #fff;
+    }
     & {
       & td {
         background-color: rgb(5, 80, 150);
@@ -173,7 +177,6 @@ export default {
       & > td:nth-child(4) {
         @include tablet-landscape {
           border-radius: 0 $small $small 0 !important;
-          // border: solid red !important;
         }
       }
 

src/composables/perks.js

@@ -37,7 +37,7 @@ const putCommas = (artists) => {
 };
 
 function updateNext(song_) {
-  const index = state.queue.value.findIndex((item) => item.id === song_.id);
+  const index = state.queue.value.findIndex((item) => item.track_id === song_.track_id);
 
   if (index == queue.value.length - 1) {
     next.value = queue.value[0];
@@ -50,7 +50,7 @@ function updateNext(song_) {
 }
 
 function updatePrev(song) {
-  const index = state.queue.value.findIndex((item) => item.id === song.track_id);
+  const index = state.queue.value.findIndex((item) => item.track_id === song.track_id);
 
   if (index == 0) {
     prev.value = queue.value[queue.value.length - 1];
@@ -131,6 +131,7 @@ function focusSearchBox() {
 
 setTimeout(() => {
   watch(current, (new_current) => {
+
     media.showMediaNotif();
 
     updateNext(new_current);

src/composables/playAudio.js

@@ -11,7 +11,6 @@ const playing = ref(state.is_playing);
 const url = "http://0.0.0.0:8901/";
 
 const playAudio = (path) => {
-  console.log(path)
   const elem = document.getElementById('progress')
   const full_path = url + encodeURIComponent(path);
 
@@ -42,7 +41,7 @@ function playNext() {
 }
 
 function playPrev() {
-  playAudio(perks.prev.value.filepath);
+  playAudio(state.prev.value.filepath);
   perks.current.value = perks.prev.value;
 }