add bottom bar

src/components/BottomBar/BottomBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="b-bar border card-dark">
+    <div class="grid">
+      <SongCard />
+      <div class="controlsx">
+        <div class="controls controls-bottom">
+          <div class="nav">
+            <div class="image" id="previous" @click="playPrev"></div>
+            <div
+              class="image play-pause"
+              @click="playPause"
+              :class="{ isPlaying: isPlaying }"
+            ></div>
+            <div class="image" id="next" @click="playNext"></div>
+          </div>
+        </div>
+        <div class="progress progress-bottom">
+          <span class="durationx">0:45</span>
+          <input
+            id="progress"
+            type="range"
+            :value="pos"
+            min="0"
+            max="1000"
+            @change="seek()"
+          />
+          <span class="durationx">3:55</span>
+        </div>
+      </div>
+      <div class="prog"></div>
+      <div class="volume-group"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import "../../assets/css/BottomBar/BottomBar.scss";
+import playAudio from "../../composables/playAudio";
+import SongCard from "./SongCard.vue";
+
+const pos = ref(playAudio.pos);
+const isPlaying = ref(playAudio.playing);
+
+const seek = () => {
+  playAudio.seek(document.getElementById("progress").value);
+};
+
+const { playNext } = playAudio;
+const { playPrev } = playAudio;
+const { playPause } = playAudio;
+</script>

src/components/BottomBar/SongCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="info">
+    <div
+      class="image art"
+      :style="{
+        backgroundImage: `url(&quot;${track.image}&quot;)`,
+      }"
+    ></div>
+    <div class="desc">
+      <div>
+        <div class="title ellip">{{ track.title }}</div>
+        <div class="separator no-border"></div>
+        <div class="artists ellip" v-if="track.artists[0] != ''">
+          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
+        <div class="artists" v-else>
+          <span>{{ track.album_artist }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import perks from "../../composables/perks";
+
+const track = ref(perks.current);
+
+const putCommas = perks.putCommas;
+</script>

src/components/FolderView/SongList.vue

@@ -99,7 +99,7 @@ function loadAlbum(title, album_artist) {
   }
 
   .current * {
-    color: rgb(0, 110, 255);
+    color: $highlight-blue;
   }
 
   .current:hover {

src/components/RightSideBar/NowPlaying.vue

@@ -101,153 +101,7 @@ export default {
   display: grid;
   grid-template-rows: 3fr 1fr;
 
-  .progress {
-    display: flex;
-    align-items: center;
-    height: 1.5rem;
-    position: relative;
-
-    .duration {
-      position: absolute;
-      right: 0;
-      top: -1rem;
-      font-size: small;
-    }
-
-    input {
-      -webkit-appearance: none;
-      width: 100%;
-      border: none;
-      outline: none;
-      background: transparent;
-    }
-
-    input:focus {
-      outline: none;
-    }
-
-    input::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 0.25rem;
-      cursor: pointer;
-      background: #1488cc;
-      background: linear-gradient(
-        to right,
-        #1488cc,
-        #2b32b2
-      );
-    }
-
-    input::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 1rem;
-      border-radius: 50%;
-      background: #ffffff;
-      cursor: pointer;
-      margin-top: -0.35rem;
-    }
-
-    input:focus::-webkit-slider-runnable-track,
-    input::-moz-range-track {
-      background: #367ebd;
-    }
-
-    input::-moz-range-thumb {
-      height: 1rem;
-      width: 1rem;
-      border-radius: 50%;
-      background: #ffffff;
-      cursor: pointer;
-      margin-top: -0.35rem;
-    }
-  }
-
-  .controls {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-
-    .nav {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      width: 100%;
-
-      & * {
-        height: 3rem;
-        width: 3rem;
-        background-size: 50%;
-        cursor: pointer;
-        border-radius: 0.5rem;
-      }
-
-      #previous {
-        background-image: url(../../assets/icons/previous.svg);
-      }
-
-      .play-pause {
-        background-image: url(../../assets/icons/play.svg);
-      }
-
-      .isPlaying {
-        background-image: url(../../assets/icons/pause.svg);
-      }
-
-      #next {
-        background-image: url(../../assets/icons/next.svg);
-      }
-    }
-
-    .shuffle {
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      & * {
-        height: 2rem;
-        width: 2rem;
-        background-size: 70%;
-        cursor: pointer;
-        border-radius: 0.5rem;
-      }
-
-      & :first-child {
-        background-image: url(../../assets/icons/repeat.svg);
-      }
-
-      & :last-child {
-        background-image: url(../../assets/icons/shuffle.svg);
-      }
-    }
-
-    .fav {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      & * {
-        height: 2rem;
-        width: 2rem;
-        background-size: 70%;
-        border-radius: 0.5rem;
-        cursor: pointer;
-      }
-
-      & :first-child {
-        background-image: url(../../assets/icons/plus.svg);
-      }
-
-      & :last-child {
-        background-image: url(../../assets/icons/heart.svg);
-      }
-    }
-
-    .fav *:hover,
-    .shuffle *:hover,
-    .nav *:hover {
-      background-color: rgb(5, 80, 150);
-    }
-  }
+  
 
   .art-tags {
     display: flex;

src/components/RightSideBar/Recommendation.vue

@@ -22,10 +22,6 @@ export default {
         title: "Mockingbird",
         artist: "Eminem",
       },
-      {
-        title: "Slim shady",
-        artist: "Eminem",
-      },
     ];
 
     const r_albums = ["Crybaby", "Everybody's Everything", "Castles II"];