client: fix play when nothin' was playin'

src/assets/icons/play.svg

@@ -1,3 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20C7.34784 20 4.8043 18.9464 2.92893 17.0711C1.05357 15.1957 0 12.6522 0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10ZM8.4875 6.36625C8.39404 6.29971 8.28408 6.26018 8.16965 6.25198C8.05522 6.24379 7.94074 6.26724 7.83876 6.31978C7.73678 6.37233 7.65122 6.45192 7.59147 6.54986C7.53172 6.64779 7.50007 6.76028 7.5 6.875V13.125C7.50007 13.2397 7.53172 13.3522 7.59147 13.4501C7.65122 13.5481 7.73678 13.6277 7.83876 13.6802C7.94074 13.7328 8.05522 13.7562 8.16965 13.748C8.28408 13.7398 8.39404 13.7003 8.4875 13.6337L12.8625 10.5087C12.9435 10.4509 13.0096 10.3746 13.0551 10.2861C13.1007 10.1976 13.1245 10.0995 13.1245 10C13.1245 9.90047 13.1007 9.80237 13.0551 9.71388C13.0096 9.62539 12.9435 9.54906 12.8625 9.49125L8.4875 6.36625Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.125 1.87499C19.125 2.06249 21.9375 3.56249 24 5.62499C26.4375 8.24999 27.75 11.4375 27.75 15.1875C27.75 18.1875 26.625 21 24.75 23.4375C22.875 25.6875 20.25 27.375 17.25 27.9375C14.25 28.5 11.25 28.125 8.62504 26.625C6.00004 25.125 3.93754 22.875 2.81254 20.0625C1.68754 17.25 1.50004 14.0625 2.43754 11.25C3.37504 8.24999 5.06254 5.81249 7.68754 4.12499C10.125 2.43749 13.125 1.68749 16.125 1.87499ZM17.0625 26.0625C19.5 25.5 21.75 24.1875 23.4375 22.125C24.9375 20.0625 25.875 17.625 25.6875 15C25.6875 12 24.5625 8.99999 22.5 6.93749C20.625 5.06249 18.375 3.93749 15.75 3.74999C13.3125 3.56249 10.6875 4.12499 8.62504 5.62499C6.56254 7.12499 5.06254 9.18749 4.31254 11.8125C3.56254 14.25 3.56254 16.875 4.68754 19.3125C5.81254 21.75 7.50004 23.625 9.75004 24.9375C12 26.25 14.625 26.625 17.0625 26.0625V26.0625Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 9.375L12.7069 8.595L21.1444 14.22V15.78L12.7069 21.405L11.25 20.625V9.375ZM13.125 11.1263V18.8738L18.9356 15L13.125 11.1263Z" fill="white"/>
 </svg>

src/components/RightSideBar/NowPlaying.vue

@@ -18,7 +18,15 @@
       </div>
     </div>
     <div class="progress">
-      <input type="range" :value="pos" min="0" max="100" />
+      <input
+        id="progress"
+        type="range"
+        :value="pos"
+        min="0"
+        max="100"
+        step="1"
+        @change="seek()"
+      />
     </div>
     <div class="controls">
       <div class="shuffle">
@@ -27,7 +35,11 @@
       </div>
       <div class="nav">
         <div class="image" id="previous" @click="playPrev"></div>
-        <div class="image" id="play-pause" @click="playPause"></div>
+        <div
+          class="image play-pause"
+          @click="playPause"
+          :class="{ isPlaying: isPlaying }"
+        ></div>
         <div class="image" id="next" @click="playNext"></div>
       </div>
       <div class="fav">
@@ -52,8 +64,22 @@ export default {
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
     const { playPause } = playAudio;
+    const isPlaying = playAudio.playing;
 
-    return { current, putCommas, playNext, playPrev, playPause, pos };
+    const seek = () => {
+      playAudio.seek(document.getElementById("progress").value);
+    };
+
+    return {
+      current,
+      putCommas,
+      playNext,
+      playPrev,
+      playPause,
+      pos,
+      seek,
+      isPlaying,
+    };
   },
 };
 </script>
@@ -142,7 +168,11 @@ export default {
         background-image: url(../../assets/icons/previous.svg);
       }
 
-      #play-pause {
+      .play-pause {
+        background-image: url(../../assets/icons/play.svg);
+      }
+
+      .isPlaying {
         background-image: url(../../assets/icons/pause.svg);
       }
 

src/components/RightSideBar/UpNext.vue

@@ -31,9 +31,9 @@
               }"
             ></div>
             <div class="tags">
-              <p class="title">{{ song.title }}</p>
+              <p class="title ellip">{{ song.title }}</p>
               <hr />
-              <p class="artist">
+              <p class="artist ellip">
                 <span v-for="artist in putCommas(song.artists)" :key="artist">{{
                   artist
                 }}</span>
@@ -191,6 +191,7 @@ export default {
 }
 
 .up-next .all-items .song-item .artist {
+  width: 20rem;
   font-size: small;
   color: rgba(255, 255, 255, 0.637);
 }

src/composables/playAudio.js

@@ -4,19 +4,25 @@ import perks from "./perks";
 
 const audio = ref(new Audio()).value;
 const pos = ref(0);
+const playing = ref(false)
 
 const url = "http://127.0.0.1:8901/";
 
 const playAudio = (path) => {
   const full_path = url + encodeURIComponent(path);
 
-  audio.src = full_path;
+  setTimeout(() => {
+    audio.src = full_path;
+  }, 150);
+  audio.load();
 
-  audio.play();
+  audio.oncanplaythrough = () => {
+    audio.play();
+  };
 
   audio.ontimeupdate = () => {
-    pos.value = audio.currentTime / audio.duration * 100;
+    pos.value = (audio.currentTime / audio.duration) * 100;
-  }
+  };
 
   audio.addEventListener("ended", () => {
     playNext();
@@ -33,7 +39,16 @@ function playPrev() {
   perks.current.value = perks.prev.value;
 }
 
+function seek(pos) {
+  console.log(pos);
+  audio.currentTime = (pos / 100) * audio.duration;
+}
+
 function playPause() {
+  if (audio.src === "") {
+    playAudio(perks.current.value.filepath);
+  }
+
   if (audio.paused) {
     audio.play();
   } else {
@@ -41,4 +56,12 @@ function playPause() {
   }
 }
 
-export default { playAudio, playNext, playPrev, playPause, pos };
+audio.addEventListener('play', () => {
+  playing.value = true;
+})
+
+audio.addEventListener('pause', () => {
+  playing.value = false;
+})
+
+export default { playAudio, playNext, playPrev, playPause, seek, pos, playing };