Barely functional time progress number and volume percentage

Volume slider works, time display does not and needs work, but idk what is wrong with it.

src/components/music_player/music_player.js

@@ -42,12 +42,12 @@ const musicPlayer = {
     defaultVolume () {
       return this.$store.getters.mergedConfig.defaultProfileMusicVolume
     },
-    currentTime() {
-      const currentTime = Math.floor(this.progress * this.songDuration / 100)
+    formattedSongTime() {
+      const currentTime = Math.floor(this.progress * this.$store.getters.songCurrentTime / 100)
       const minutes = Math.floor(currentTime / 60)
       const seconds = currentTime - minutes * 60
       return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-    }
+    },
   },
   methods: {
     nextSong () {

src/components/music_player/music_player.vue

@@ -69,6 +69,7 @@
             />
             </div>
           </div>
+          <div class="song-progress">{{ formattedSongTime }}</div>
           </div>
           <div>
           <div class="music-player-volume">
@@ -92,6 +93,7 @@
             max="100"
             @change.stop.prevent="setVolume"
             />
+            <div class="song-progress">{{ volume }}%</div>
           </div>
           </div>
           <div>
@@ -181,6 +183,11 @@
         display: inline-flex;
         column-gap: 1em;
         padding-top: 1em;
+
+      .music-player-volume-slider {
+        max-width: 10em;
+      }
+
       }
 
 

src/modules/music_player.js

@@ -88,6 +88,9 @@ const musicPlayer = {
     songProgress (state) {
       return Math.round(state.currentSong.currentTime / state.currentSong.duration * 100)
     },
+    songCurrentTime (state) {
+      return state.currentSong.currentTime
+    },
     hasSong (state) {
       return state.currentSong
     },