client: fix play when nothin' was playin'

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);
 }