client: add progress bar

- add favourites buttons
- redirect /folder/ => /folder/home
- minor fixes

src/components/RightSideBar/NowPlaying.vue

@@ -17,10 +17,23 @@
         </div>
       </div>
     </div>
+    <div class="progress">
+      <input type="range" :value="pos" min="0" max="100" />
+    </div>
     <div class="controls">
-      <div class="image" id="previous"></div>
-      <div class="image" id="play-pause"></div>
-      <div class="image" id="next"></div>
+      <div class="shuffle">
+        <div class="image"></div>
+        <div class="image"></div>
+      </div>
+      <div class="nav">
+        <div class="image" id="previous" @click="playPrev"></div>
+        <div class="image" id="play-pause" @click="playPause"></div>
+        <div class="image" id="next" @click="playNext"></div>
+      </div>
+      <div class="fav">
+        <div class="image"></div>
+        <div class="image"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -28,87 +41,191 @@
 <script>
 import { ref } from "@vue/reactivity";
 import perks from "../../composables/perks.js";
+import playAudio from "@/composables/playAudio.js";
 
 export default {
   setup() {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
+    const pos = playAudio.pos;
 
-    return { current, putCommas };
+    const { playNext } = playAudio;
+    const { playPrev } = playAudio;
+    const { playPause } = playAudio;
+
+    return { current, putCommas, playNext, playPrev, playPause, pos };
   },
 };
 </script>
 
-<style>
+<style lang="scss">
 .now-playing {
-  height: 5rem;
   border-radius: 0.5rem;
   margin-top: 1rem;
   padding: 0.5rem;
-  background-color: #131313b2;
-
+  background-color: rgb(12, 12, 12);
   display: grid;
-  grid-template-columns: 3fr 1fr;
-}
+  grid-template-rows: 3fr 1fr;
 
-.now-playing .art-tags {
-  display: flex;
-  align-items: center;
-}
+  .progress {
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
 
-.now-playing .art-tags .album-art {
-  width: 4.5rem;
-  height: 4.5rem;
-  border-radius: 0.5rem;
-  margin-right: 0.5rem;
-  background-color: #ad1717a8;
-  background-image: url(../../assets/images/null.webp);
-}
+    input {
+      -webkit-appearance: none;
+      width: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+    }
 
-.now-playing .art-tags hr {
-  border: none;
-  margin: 0.3rem;
-}
-.now-playing .art-tags #title {
-  margin: 0;
-  width: 14rem;
-  color: #fff;
-}
+    input:focus {
+      outline: none;
+    }
 
-.now-playing .art-tags #artist {
-  font-weight: lighter;
-  font-size: small;
-  color: rgba(255, 255, 255, 0.712);
-}
+    input::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 0.25rem;
+      cursor: pointer;
+      background: #3071a9;
+    }
 
-.now-playing .controls {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  align-items: center;
-}
+    input::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 1rem;
+      width: 1rem;
+      border-radius: 50%;
+      background: #ffffff;
+      cursor: pointer;
+      margin-top: -0.35rem;
+    }
 
-.now-playing .controls * {
-  height: 3rem;
-  width: 3rem;
-  background-size: 50%;
-  cursor: pointer;
-  border-radius: 0.5rem;
-}
+    input:focus::-webkit-slider-runnable-track,
+    input::-moz-range-track {
+      background: #367ebd;
+    }
 
-.now-playing .controls *:hover {
-  filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
-    brightness(89%) contrast(101%);
-}
+    input::-moz-range-thumb {
+      height: 1rem;
+      width: 1rem;
+      border-radius: 50%;
+      background: #ffffff;
+      cursor: pointer;
+      margin-top: -0.35rem;
+    }
+  }
 
-.now-playing .controls #previous {
-  background-image: url(../../assets/icons/previous.svg);
-}
+  .controls {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
 
-.now-playing .controls #play-pause {
-  background-image: url(../../assets/icons/pause.svg);
-}
+    .nav {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      width: 100%;
 
-.now-playing .controls #next {
-  background-image: url(../../assets/icons/next.svg);
+      & * {
+        height: 3rem;
+        width: 3rem;
+        background-size: 50%;
+        cursor: pointer;
+        border-radius: 0.5rem;
+      }
+
+      & *:hover {
+        filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
+          brightness(89%) contrast(101%);
+      }
+
+      #previous {
+        background-image: url(../../assets/icons/previous.svg);
+      }
+
+      #play-pause {
+        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);
+      }
+    }
+  }
+
+  .art-tags {
+    display: flex;
+    align-items: center;
+
+    hr {
+      border: none;
+      margin: 0.3rem;
+    }
+
+    #title {
+      margin: 0;
+      width: 13rem;
+      color: #fff;
+    }
+
+    #artist {
+      font-size: small;
+      color: rgba(255, 255, 255, 0.712);
+    }
+
+    .album-art {
+      width: 6rem;
+      height: 6rem;
+      border-radius: 0.5rem;
+      margin-right: 0.5rem;
+      margin-left: $small;
+      background-color: #ad1717a8;
+      background-image: url(../../assets/images/null.webp);
+    }
+  }
 }
 </style>

src/components/RightSideBar/UpNext.vue

@@ -3,7 +3,7 @@
     <p class="heading">
       COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
     </p>
-    <div class="main-item h-1">
+    <div class="main-item h-1" @click="playNext">
       <div
         class="album-art image"
         :style="{
@@ -23,7 +23,7 @@
     <div>
       <div :class="{ hr: is_expanded }" class="all-items">
         <div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
-          <div class="song-item h-1" v-for="song in queue" :key="song">
+          <div class="song-item h-1" v-for="song in queue" :key="song" @click="playThis(song)">
             <div
               class="album-art image"
               :style="{
@@ -49,23 +49,30 @@
 <script>
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
+import audio from "@/composables/playAudio.js";
 
 export default {
   props: ["up_next"],
   setup(props, { emit }) {
     const is_expanded = toRefs(props).up_next;
-
-    const queue = ref(perks.queue);
-
-    const next = ref(perks.next);
-
     let collapse = () => {
       emit("expandQueue");
     };
 
+    const { playNext } = audio;
+    const {playAudio} = audio;
+
+    const playThis = (song) => {
+      playAudio(song.filepath);
+      perks.current.value = song;
+    }
+
+    const queue = ref(perks.queue);
+    const next = ref(perks.next);
+
     const putCommas = perks.putCommas;
 
-    return { collapse, is_expanded, putCommas, queue, next };
+    return { collapse, is_expanded, playNext, playThis, putCommas, queue, next };
   },
 };
 </script>