move progress bar and hot keys to new components

src/assets/css/BottomBar/BottomBar.scss

@@ -1,17 +1,10 @@
 .b-bar {
   height: 100%;
-  // padding: 0 $small 0 $small;
-
-  .prog {
-    display: grid;
-  }
 
   .grid {
     display: grid;
     height: 100%;
-    // grid-auto-columns: 1fr;
+    grid-template-columns: 1fr 2fr 1fr;
-    // grid-auto-flow: column;
-    grid-template-columns: 1fr 3fr 1fr;
 
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
@@ -48,39 +41,64 @@
     }
 
     .controlsx {
-      // border: solid 1px;
       width: 100%;
       overflow: hidden;
       display: flex;
       align-items: center;
-      justify-content: flex-end;
+      margin: $small;
+      padding: $small;
 
-      @include phone-only {
+      .progress-bottom {
-        // width: min-content;
+        display: flex;
+        align-items: center;
       }
 
       .controls-bottom {
-      // border: solid 1px;
-
         width: min-content;
-
-        .shuffle, .fav {
-          @include phone-only {
-            display: none !important;
-          }
-        }
       }
 
       .progress-bottom {
         width: 100%;
 
         .durationx {
-          background-color: #202020;
+          background-color: rgba(0, 72, 131, 0.171);
           padding: $smaller;
-          border-radius: .4rem;
+          border-radius: 0.4rem;
           margin: 0 $small 0 $small;
+          font-size: .8rem;
+          color: rgb(0, 119, 255);
         }
-        // display: none;
+      }
+    }
+
+    .r-group {
+      display: flex;
+      align-items: center;
+      gap: $small;
+
+      & > * {
+        height: 2rem;
+        width: 2rem;
+        background-size: 1.2rem !important;
+        background-position: 45% 50%;
+        cursor: pointer;
+        border-radius: 0.5rem;
+
+        &:hover {
+          background-color: rgb(170, 50, 50);
+        }
+      }
+
+      .heart {
+        background-image: url(../../icons/heart.svg);
+      }
+
+      .add-to {
+        background-image: url(../../icons/plus.svg);
+      }
+
+      .repeat {
+        background-image: url(../../icons/repeat.svg);
       }
     }
 

src/assets/css/ProgressBar.scss

@@ -0,0 +1,70 @@
+input[type="range"] {
+  -webkit-appearance: none;
+  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;
+}
+
+/* Input Thumb */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 0.8rem;
+  width: 0.8rem;
+  border-radius: 50%;
+  background: $blue;
+}
+
+input[type="range"]::-moz-range-thumb {
+  -webkit-appearance: none;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  background: $blue;
+}
+
+input[type="range"]::-ms-thumb {
+  -webkit-appearance: none;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  background: $blue;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: $pink;
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  background: $pink;
+}
+
+input[type="range"]::-ms-thumb:hover {
+  background: $pink;
+}
+
+/* Input Track */
+input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-moz-range-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-ms-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}

src/assets/css/global.scss

@@ -1,3 +1,5 @@
+@import "../css/ProgressBar.scss";
+
 :root {
   --separator: #ffffff46;
   --green: #4ad168;
@@ -104,8 +106,6 @@ button {
 .bottom-bar {
   grid-area: bottom-bar;
   height: 4rem;
-  // margin: 0 $small 0 $small;
-  // display: none;
 }
 
 .collapsed .l-sidebar {
@@ -122,7 +122,7 @@ button {
 }
 
 .rounded {
-  border-radius: 10px;
+  border-radius: $small;
 }
 
 .circular {
@@ -271,102 +271,21 @@ button {
   color: rgb(250, 250, 250);
 
   &:hover {
-    background-color: rgb(170, 50, 50);
+    background-color: $pink;
   }
 }
 
-.progress {
+input[type="number"] {
-  display: flex;
+  width: 40px;
-  align-items: center;
+  padding: 4px 5px;
-  position: relative;
+  border: 1px solid #bbb;
-
+  border-radius: 3px;
-  .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: #252829;
-    // 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;
@@ -378,6 +297,10 @@ button {
       background-size: 70%;
       cursor: pointer;
       border-radius: 0.5rem;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
     }
 
     & :first-child {
@@ -401,6 +324,10 @@ button {
       background-size: 70%;
       border-radius: 0.5rem;
       cursor: pointer;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
     }
 
     & :first-child {
@@ -411,10 +338,4 @@ button {
       background-image: url(../../assets/icons/heart.svg);
     }
   }
-
-  .fav *:hover,
-  .shuffle *:hover,
-  .nav *:hover {
-    background-color: rgb(5, 80, 150);
-  }
 }

src/components/BottomBar/BottomBar.vue

@@ -2,33 +2,25 @@
   <div class="b-bar border card-dark">
     <div class="grid">
       <SongCard />
-      <div class="controlsx">
+      <div class="controlsx border rounded">
         <div class="controls controls-bottom">
-          <div class="nav">
+          <HotKeys />
-            <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
+          <Progress />
-            id="progress"
-            type="range"
-            :value="pos"
-            min="0"
-            max="1000"
-            @change="seek()"
-          />
           <span class="durationx">3:55</span>
         </div>
+        <div class="r-group">
+          <div class="heart image"></div>
+          <div class="add-to image"></div>
+          <div class="repeat image"></div>
+        </div>
+        <div class="controls controls-bottom"></div>
+      </div>
+      <div class="volume-group">
+
       </div>
-      <div class="prog"></div>
-      <div class="volume-group"></div>
     </div>
   </div>
 </template>
@@ -38,14 +30,11 @@ import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
 import playAudio from "../../composables/playAudio";
 import SongCard from "./SongCard.vue";
+import Progress from "../shared/Progress.vue";
+import HotKeys from "../shared/HotKeys.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;

src/components/RightSideBar/NowPlaying.vue

@@ -22,29 +22,14 @@
     </div>
     <div class="progress">
       <div class="duration">{{ current.length }}</div>
-      <input
+      <Progress />
-        id="progress"
-        type="range"
-        :value="pos"
-        min="0"
-        max="1000"
-        @change="seek()"
-      />
     </div>
     <div class="controls">
       <div class="shuffle">
         <div class="image"></div>
         <div class="image"></div>
       </div>
-      <div class="nav">
+      <HotKeys />
-        <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 class="fav">
         <div class="image"></div>
         <div class="image"></div>
@@ -55,9 +40,13 @@
 
 <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 HotKeys from "../shared/HotKeys.vue";
+
 export default {
   setup() {
     const current = ref(perks.current);
@@ -66,16 +55,13 @@ export default {
     function fmtMSS(s) {
       return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
     }
-
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
     const { playPause } = playAudio;
     const isPlaying = playAudio.playing;
-
     const seek = () => {
       playAudio.seek(document.getElementById("progress").value);
     };
-
     return {
       current,
       putCommas,
@@ -88,6 +74,7 @@ export default {
       fmtMSS,
     };
   },
+  components: { Progress, HotKeys },
 };
 </script>
 
@@ -95,14 +82,12 @@ export default {
 .now-playing {
   border-radius: 0.5rem;
   height: 14rem;
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   padding: 0.5rem;
   background: $card-dark;
   display: grid;
   grid-template-rows: 3fr 1fr;
 
-  
-
   .art-tags {
     display: flex;
     align-items: center;

src/components/shared/AlbumCard.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="result-item border">
+  <router-link
+    :to="{
+      name: 'AlbumView',
+      params: { album: album.name, artist: album.artist },
+    }"
+    class="result-item border"
+  >
     <div
       class="album-art image"
       :style="{
@@ -8,7 +14,7 @@
     ></div>
     <div class="title ellip">{{ album.name }}</div>
     <div class="artistsx ellipsis">{{ album.artist }}</div>
-  </div>
+  </router-link>
 </template>
 
 <script>

src/components/shared/HotKeys.vue

@@ -0,0 +1,58 @@
+<template>
+  <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>
+</template>
+
+<script setup>
+import playAudio from "../../composables/playAudio";
+
+const playPause = playAudio.playPause;
+const playNext = playAudio.playNext;
+const playPrev = playAudio.playPrev;
+
+const isPlaying = playAudio.playing;
+</script>
+
+<style lang="scss">
+.nav {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  gap: $small;
+
+  & * {
+    height: 2rem;
+    width: 2rem;
+    background-size: 1.2rem !important;
+    cursor: pointer;
+    border-radius: 0.5rem;
+
+    &:hover {
+      background-color: $pink;
+    }
+  }
+
+  #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);
+  }
+}
+</style>

src/components/shared/Progress.vue

@@ -0,0 +1,20 @@
+<template>
+  <input
+    id="progress"
+    type="range"
+    :value="pos"
+    min="0"
+    max="1000"
+    @change="seek()"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import playAudio from "../../composables/playAudio";
+const pos = ref(playAudio.pos);
+
+const seek = () => {
+  playAudio.seek(document.getElementById("progress").value);
+};
+</script>

src/composables/playAudio.js

@@ -11,6 +11,7 @@ const playing = ref(state.is_playing);
 const url = "http://0.0.0.0:8901/";
 
 const playAudio = (path) => {
+  const elem = document.getElementById('progress')
   const full_path = url + encodeURIComponent(path);
 
   new Promise((resolve, reject) => {
@@ -26,7 +27,8 @@ const playAudio = (path) => {
 
       audio.ontimeupdate = () => {
         pos.value = (audio.currentTime / audio.duration) * 1000;
-        
+        let bg_size = ((audio.currentTime / audio.duration)*100)
+        elem.style.backgroundSize = `${bg_size}% 100%`;
       };
     })
     .catch((err) => console.log(err));