client: add progress bar

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

src/components/FolderView/SongList.vue

@@ -14,7 +14,10 @@
           <tr
             v-for="song in songs"
             :key="song"
-            @click="updateQueue(song, song.type.name, song.type.id)"
+            @click="
+              updateQueue(song, song.type.name, song.type.id),
+                playAudio(song.filepath)
+            "
           >
             <td :style="{ width: songTitleWidth + 'px' }" class="flex">
               <div
@@ -58,7 +61,7 @@
 import { ref, toRefs } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
-import { playAudio } from "@/composables/playAudio.js";
+import audio from "@/composables/playAudio.js";
 import getQueue from "@/composables/getQueue.js";
 import perks from "@/composables/perks.js";
 
@@ -81,28 +84,12 @@ export default {
 
       perks.current.value = song;
       localStorage.setItem("current", JSON.stringify(song));
-
-      const index = perks.queue.value.findIndex(
-        (item) => item._id.$oid === song._id.$oid
-      );
-
-      if (index == perks.queue.value.length - 1) {
-        perks.next.value = perks.queue.value[0];
-      } else {
-        perks.next.value = perks.queue.value[index + 1];
-      }
-
-      localStorage.setItem(
-        "next",
-        JSON.stringify(perks.queue.value[index + 1])
-      );
-
     };
 
     const resizeSongTitleWidth = () => {
       try {
         let a = songtitle.value.clientWidth;
-  
+
         songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
       } catch (error) {
         return;
@@ -123,6 +110,8 @@ export default {
       });
     });
 
+    const playAudio = audio.playAudio;
+
     return {
       songtitle,
       songTitleWidth,
@@ -147,25 +136,6 @@ export default {
   }
 }
 
-.folder .table table {
-  border-collapse: collapse;
-  text-transform: capitalize;
-  position: relative;
-  margin: 1rem;
-
-  tbody tr {
-    cursor: pointer;
-    transition: all 0.5s ease;
-
-    &:hover {
-      td {
-        background-color: rgba(255, 174, 0, 0.534);
-      }
-      transform: scale(0.99);
-    }
-  }
-}
-
 .folder .table table td .album-art {
   width: 3rem;
   height: 3rem;
@@ -187,6 +157,8 @@ td,
 th {
   padding: 8px;
   text-align: left;
+  outline: none;
+  border: none;
 }
 
 th {
@@ -210,4 +182,23 @@ td .artist {
   font-weight: lighter;
   margin-right: 0.5rem;
 }
+
+.folder .table table {
+  border-collapse: collapse;
+  text-transform: capitalize;
+  position: relative;
+  margin: 1rem;
+
+  tbody tr {
+    cursor: pointer;
+    transition: all 0.5s ease;
+
+    &:hover {
+      & {
+        background-color: rgba(255, 174, 0, 0.534);
+      }
+      transform: scale(0.99);
+    }
+  }
+}
 </style>

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>