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,23 +79,23 @@ const musicPlayer = {
     clearQueue () {
       this.$store.dispatch('setBackgroundMusic', null)
       this.togglePanel()
-    },
-    created () {
-      this.progress = 0
-      this.volume = this.defaultVolume
-      setInterval(() => {
-        if (this.$store.getters.hasSong) {
-          this.progress = this.$store.getters.songProgress
-          if (this.progress === 100) {
-            this.$store.dispatch('playlistNext')
-          }
-        }
-      }, 1000)
-    },
-    beforeDestroy () {
-      clearInterval()
     }
+  },
+  created () {
+    this.progress = 0
+    this.volume = this.defaultVolume
+    setInterval(() => {
+      if (this.$store.getters.hasSong) {
+        this.progress = this.$store.getters.songProgress
+        if (this.progress === 100) {
+          this.$store.dispatch('playlistNext')
+        }
+      }
+    }, 1000)
+  },
+  beforeDestroy () {
+    clearInterval()
   }
 }
 
-export default musicPlayer
+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,7 +61,18 @@
                 class="music-player-button"
               />
             </div>
-            <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"
             >
               <FAIcon
@@ -63,30 +84,18 @@
                 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">
-          <input
-            class="seekbar"
-            type="range"
-            min="0"
-            max="100"
-            v-model="progress"
-            @change.stop.prevent="seekPosition"
-            />
           </div>
+          <div>
+        </div>
         </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-volume {
+        display: inline-flex;
+        column-gap: 1em;
+        padding-top: 1em;
+      }
+
+
     .music-player-timeline {
-      padding-top: 1em;
+      padding-bottom: 1em;
       .seekbar {
         width: 100%
       }