(UI) add voice message duration

Author: antoine92190

README.md

@@ -532,6 +532,8 @@ messages="[
       name: 'My File',
       size: 67351,
       type: 'png',
+      audio: true,
+      duration: 14.4,
       url: 'https://firebasestorage.googleapis.com/...'
     },
     reactions: {

demo/src/ChatContainer.vue

@@ -394,7 +394,10 @@ export default {
 					type: file.type,
 					url: file.localUrl
 				}
-				if (file.audio) message.file.audio = true
+				if (file.audio) {
+					message.file.audio = true
+					message.file.duration = file.duration
+				}
 			}
 
 			if (replyMessage) {
@@ -429,7 +432,10 @@ export default {
 					type: file.type,
 					url: file.url || file.localUrl
 				}
-				if (file.audio) message.file.audio = true
+				if (file.audio) {
+					message.file.audio = true
+					message.file.duration = file.duration
+				}
 			} else {
 				newMessage.file = deleteDbField
 			}

src/ChatWindow/Message.vue

@@ -132,7 +132,7 @@
 						<div v-else-if="message.file.audio" class="audio-message">
 							<div id="player">
 								<audio controls v-if="message.file.audio">
-									<source :src="message.file.url" type="audio/mpeg" />
+									<source :src="message.file.url" />
 								</audio>
 							</div>
 						</div>

src/ChatWindow/Room.vue

@@ -541,23 +541,49 @@ export default {
 				this.recorder.onerror = event => reject(event.name)
 			})
 
-			stopped.then(() => {
+			stopped.then(async () => {
 				stream.getTracks().forEach(track => track.stop())
 
-				const recordedBlob = new Blob(this.recordedChunks, {
+				const blob = new Blob(this.recordedChunks, {
 					type: 'audio/ogg; codecs="opus"'
 				})
 
+				const duration = await this.getBlobDuration(blob)
+
 				this.file = {
-					blob: recordedBlob,
+					blob: blob,
 					name: 'audio',
-					size: recordedBlob.size,
-					type: recordedBlob.type,
+					size: blob.size,
+					duration: duration,
+					type: blob.type,
 					audio: true,
-					localUrl: URL.createObjectURL(recordedBlob)
+					localUrl: URL.createObjectURL(blob)
 				}
 			})
 		},
+		getBlobDuration(blob) {
+			const tempVideoEl = document.createElement('video')
+
+			const durationP = new Promise(resolve =>
+				tempVideoEl.addEventListener('loadedmetadata', () => {
+					if (tempVideoEl.duration === Infinity) {
+						tempVideoEl.currentTime = Number.MAX_SAFE_INTEGER
+						tempVideoEl.ontimeupdate = () => {
+							tempVideoEl.ontimeupdate = null
+							resolve(tempVideoEl.duration)
+							tempVideoEl.currentTime = 0
+						}
+					} else resolve(tempVideoEl.duration)
+				})
+			)
+
+			tempVideoEl.src =
+				typeof blob === 'string' || blob instanceof String
+					? blob
+					: window.URL.createObjectURL(blob)
+
+			return durationP
+		},
 		addNewMessage(message) {
 			this.newMessages.push(message)
 		},

src/ChatWindow/RoomsList.vue

@@ -92,6 +92,7 @@
 								<slot name="microphone-icon">
 									<svg-icon name="microphone" class="icon-microphone" />
 								</slot>
+								{{ formattedDuration(room.lastMessage.file.duration) }}
 							</div>
 							<format-message
 								v-else-if="room.lastMessage"
@@ -203,6 +204,10 @@ export default {
 
 			return `${user.username} - ${content}`
 		},
+		formattedDuration(s) {
+			s = Math.round(s)
+			return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s
+		},
 		isMessageCheckmarkVisible(room) {
 			return (
 				room.lastMessage &&