(UI) improve audio message

Author: antoine92190

src/ChatWindow/Message/AudioPlayer.vue

@@ -17,9 +17,6 @@
 
 			<audio :id="playerUniqId" :src="audioSource" />
 		</div>
-		<div class="vac-player-time">
-			{{ time }}
-		</div>
 	</div>
 </template>
 
@@ -55,9 +52,6 @@ export default {
 			if (this.src) return this.src
 			this.resetProgress()
 			return null
-		},
-		time() {
-			return this.progress > 1 ? this.playedTime : this.duration
 		}
 	},
 
@@ -68,9 +62,10 @@ export default {
 			this.isPlaying = false
 		})
 
-		this.player.addEventListener('loadeddata', ev => {
+		this.player.addEventListener('loadeddata', () => {
 			this.resetProgress()
 			this.duration = this.convertTimeMMSS(this.player.duration)
+			this.updateProgressTime()
 		})
 
 		this.player.addEventListener('timeupdate', this.onTimeUpdate)
@@ -95,13 +90,21 @@ export default {
 			this.playedTime = this.convertTimeMMSS(0)
 			this.progress = 0
 			this.isPlaying = false
+			this.updateProgressTime()
 		},
 		onTimeUpdate() {
 			this.playedTime = this.convertTimeMMSS(this.player.currentTime)
 			this.progress = (this.player.currentTime / this.player.duration) * 100
+			this.updateProgressTime()
 		},
 		onUpdateProgress(pos) {
 			if (pos) this.player.currentTime = pos * this.player.duration
+		},
+		updateProgressTime() {
+			this.$emit(
+				'update-progress-time',
+				this.progress > 1 ? this.playedTime : this.duration
+			)
 		}
 	}
 }
@@ -110,17 +113,11 @@ export default {
 <style lang="scss">
 .vac-audio-player {
 	display: flex;
-	margin-top: 15px;
+	margin: 15px 0 5px;
 
 	.vac-svg-button {
 		max-width: 20px;
 		margin-left: 7px;
 	}
 }
-
-.vac-player-time {
-	margin-left: 41px;
-	color: var(--chat-color);
-	font-size: 12px;
-}
 </style>

src/ChatWindow/Message/Message.vue

@@ -97,6 +97,7 @@
 						<audio-player
 							v-else-if="message.file.audio"
 							:src="message.file.url"
+							@update-progress-time="progressTime = $event"
 							@hover-audio-progress="hoverAudioProgress = $event"
 						>
 							<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -116,6 +117,10 @@
 							<span>{{ message.content }}</span>
 						</div>
 
+						<div class="vac-player-time">
+							{{ progressTime }}
+						</div>
+
 						<div class="vac-text-timestamp">
 							<div
 								v-if="message.edited && !message.deleted"
@@ -224,6 +229,7 @@ export default {
 			optionsOpened: false,
 			emojiOpened: false,
 			newMessage: {},
+			progressTime: '00:00',
 			hoverAudioProgress: false
 		}
 	},
@@ -484,6 +490,13 @@ export default {
 	text-align: right;
 }
 
+.vac-player-time {
+	float: left;
+	margin: -2px 0 0 41px;
+	color: var(--chat-color);
+	font-size: 12px;
+}
+
 .vac-file-message {
 	display: flex;
 	flex-wrap: wrap;