clean up the music player widget a bit

Enjoy my untidy code

src/components/music_player/music_player.js

@@ -41,6 +41,12 @@ const musicPlayer = {
     },
     defaultVolume () {
       return this.$store.getters.mergedConfig.defaultProfileMusicVolume
+    },
+    currentTime() {
+      const currentTime = Math.floor(this.progress * this.songDuration / 100)
+      const minutes = Math.floor(currentTime / 60)
+      const seconds = currentTime - minutes * 60
+      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
     }
   },
   methods: {
@@ -73,6 +79,7 @@ const musicPlayer = {
     clearQueue () {
       this.$store.dispatch('setBackgroundMusic', null)
       this.togglePanel()
+    }
   },
   created () {
     this.progress = 0
@@ -90,6 +97,5 @@ const musicPlayer = {
     clearInterval()
   }
 }
-}
 
 export default musicPlayer

src/components/music_player/music_player.vue

@@ -19,6 +19,16 @@
           </div>
         </div>
         <div class="shout-window">
+          <div class="music-player-timeline">
+          <input
+            class="seekbar"
+            type="range"
+            min="0"
+            max="100"
+            v-model="progress"
+            @change.stop.prevent="seekPosition"
+            />
+          </div>
           <div class="music-player-controls">
           <div
               class="music-player-button"
@@ -51,6 +61,17 @@
                 class="music-player-button"
               />
             </div>
+            <div>
+              <FAIcon
+              icon="times"
+              class="close-icon"
+              @click.stop.prevent="clearQueue"
+            />
+            </div>
+          </div>
+          </div>
+          <div>
+          <div class="music-player-volume">
           <div
               @click.stop.prevent="toggleMute"
             >
@@ -63,29 +84,17 @@
                 icon="volume-off"
               />
             </div>
-          </div>
           <input
             type="range"
+            class="music-player-volume-slider"
             v-model="volume"
             min="0"
             max="100"
             @change.stop.prevent="setVolume"
             />
-            <FAIcon
-              icon="times"
-              class="close-icon"
-              @click.stop.prevent="clearQueue"
-            />
           </div>
-          <div class="music-player-timeline">
+          </div>
-          <input
+          <div>
-            class="seekbar"
-            type="range"
-            min="0"
-            max="100"
-            v-model="progress"
-            @change.stop.prevent="seekPosition"
-            />
         </div>
         </div>
       </div>
@@ -158,16 +167,25 @@
       column-gap: 1em;
 
       .music-player-controls {
-      display: inline-flex;
       column-gap: 1em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       .music-player-button {
         display: inline-flex;
         column-gap: 2em;
       }
     }
-    .music-player-timeline {
+      .music-player-volume {
+        display: inline-flex;
+        column-gap: 1em;
         padding-top: 1em;
+      }
+
+
+    .music-player-timeline {
+      padding-bottom: 1em;
       .seekbar {
         width: 100%
       }