(UI) support multiple audio types

Author: antoine92190

src/ChatWindow/Message/Message.vue

@@ -95,7 +95,7 @@
 						</div>
 
 						<audio-player
-							v-else-if="message.file.audio"
+							v-else-if="isAudio"
 							:src="message.file.url"
 							@update-progress-time="progressTime = $event"
 							@hover-audio-progress="hoverAudioProgress = $event"
@@ -192,7 +192,11 @@ import MessageActions from './MessageActions'
 import MessageReactions from './MessageReactions'
 import AudioPlayer from './AudioPlayer'
 
-const { isImageFile, isVideoFile } = require('../../utils/media-file')
+const {
+	isImageFile,
+	isVideoFile,
+	isAudioFile
+} = require('../../utils/media-file')
 
 export default {
 	name: 'Message',
@@ -262,6 +266,9 @@ export default {
 		isVideo() {
 			return isVideoFile(this.message.file)
 		},
+		isAudio() {
+			return isAudioFile(this.message.file)
+		},
 		isCheckmarkVisible() {
 			return (
 				this.message.senderId === this.currentUserId &&

src/ChatWindow/RoomsList/RoomContent.vue

@@ -41,12 +41,7 @@
 						</slot>
 					</span>
 					<div
-						v-if="
-							room.lastMessage &&
-								!room.lastMessage.deleted &&
-								room.lastMessage.file &&
-								room.lastMessage.file.audio
-						"
+						v-if="room.lastMessage && !room.lastMessage.deleted && isAudio"
 						class="vac-text-ellipsis"
 					>
 						<slot name="microphone-icon">
@@ -123,6 +118,7 @@ import SvgIcon from '../../components/SvgIcon'
 import FormatMessage from '../../components/FormatMessage'
 
 import typingText from '../../utils/typing-text'
+const { isAudioFile } = require('../../utils/media-file')
 
 export default {
 	name: 'RoomsContent',
@@ -197,8 +193,17 @@ export default {
 			)
 		},
 		formattedDuration() {
-			let s = Math.round(this.room.lastMessage.file.duration)
+			const file = this.room.lastMessage.file
+
+			if (!file.duration) {
+				return `${file.name}.${file.extension}`
+			}
+
+			let s = Math.round(file.duration)
 			return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
+		},
+		isAudio() {
+			return isAudioFile(this.room.lastMessage.file)
 		}
 	},
 

src/utils/constants.js

@@ -1,2 +1,3 @@
 export const IMAGE_TYPES = ['png', 'jpg', 'jpeg', 'webp', 'svg', 'gif']
-export const VIDEO_TYPES = ['mp4', 'ogg', 'webm', 'quicktime']
+export const VIDEO_TYPES = ['mp4', 'video/ogg', 'webm', 'quicktime']
+export const AUDIO_TYPES = ['mp3', 'audio/ogg', 'wav', 'mpeg']

src/utils/media-file.js

@@ -1,13 +1,19 @@
-import { IMAGE_TYPES, VIDEO_TYPES } from './constants'
+import { IMAGE_TYPES, VIDEO_TYPES, AUDIO_TYPES } from './constants'
 
-export function isImageFile(file) {
+function checkMediaType(types, file) {
 	if (!file) return
 	const { type } = file
-	return IMAGE_TYPES.some(t => type.toLowerCase().includes(t))
+	return types.some(t => type.toLowerCase().includes(t))
+}
+
+export function isImageFile(file) {
+	return checkMediaType(IMAGE_TYPES, file)
 }
 
 export function isVideoFile(file) {
-	if (!file) return
-	const { type } = file
-	return VIDEO_TYPES.some(t => type.toLowerCase().includes(t))
+	return checkMediaType(VIDEO_TYPES, file)
+}
+
+export function isAudioFile(file) {
+	return checkMediaType(AUDIO_TYPES, file)
 }