(feat) add voice messages

Author: antoine92190

README.md

@@ -179,6 +179,7 @@ fetchMessages({ room, options }) {
 | showAddRoom                | Boolean          | -        | true    |
 | showSendIcon               | Boolean          | -        | true    |
 | showFiles                  | Boolean          | -        | true    |
+| showAudio                  | Boolean          | -        | true    |
 | showEmojis                 | Boolean          | -        | true    |
 | showReactionEmojis         | Boolean          | -        | true    |
 | showNewMessagesDivider (8) | Boolean          | -        | true    |
@@ -642,6 +643,8 @@ Example:
 | pencil-icon                | Replace the pencil icon                                     | -                             | -                                                                                                    |
 | checkmark-icon             | Replace the checkmark icon                                  | message                       | -                                                                                                    |
 | deleted-icon               | Replace the deleted icon                                    | deleted                       | -                                                                                                    |
+| microphone-icon            | Replace the microphone icon                                 |                               | -                                                                                                    |
+| microphone-off-icon        | Replace the microphone-off icon                             |                               | -                                                                                                    |
 | dropdown-icon              | Replace the dropdown icon                                   | -                             | -                                                                                                    |
 | search-icon                | Replace the search icon                                     | -                             | -                                                                                                    |
 | add-icon                   | Replace the add room icon                                   | -                             | -                                                                                                    |

demo/src/ChatContainer.vue

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

src/ChatWindow/ChatWindow.vue

@@ -31,6 +31,7 @@
 				:messageActions="messageActions"
 				:showSendIcon="showSendIcon"
 				:showFiles="showFiles"
+				:showAudio="showAudio"
 				:showEmojis="showEmojis"
 				:showReactionEmojis="showReactionEmojis"
 				:showNewMessagesDivider="showNewMessagesDivider"
@@ -103,6 +104,7 @@ export default {
 		showAddRoom: { type: Boolean, default: true },
 		showSendIcon: { type: Boolean, default: true },
 		showFiles: { type: Boolean, default: true },
+		showAudio: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
 		showReactionEmojis: { type: Boolean, default: true },
 		showNewMessagesDivider: { type: Boolean, default: true },

src/ChatWindow/FormatMessage.vue

@@ -22,8 +22,8 @@
 				>
 					<slot name="deleted-icon" v-bind="{ deleted }">
 						<svg-icon v-if="deleted" name="deleted" class="icon-deleted" />
-						{{ message.value }}
 					</slot>
+					{{ message.value }}
 				</component>
 			</template>
 		</div>

src/ChatWindow/Message.vue

@@ -129,6 +129,12 @@
 							></format-message>
 						</div>
 
+						<div v-else-if="message.file.audio" class="audio-message">
+							<audio controls v-if="message.file.audio">
+								<source :src="message.file.url" />
+							</audio>
+						</div>
+
 						<div v-else class="file-message">
 							<div
 								class="svg-button icon-file"
@@ -715,6 +721,10 @@ export default {
 	text-align: right;
 }
 
+.audio-message {
+	margin-top: 3px;
+}
+
 .file-message {
 	display: flex;
 	flex-wrap: wrap;

src/ChatWindow/Room.vue

@@ -169,6 +169,20 @@
 			</transition>
 
 			<div class="box-footer">
+				<div class="icon-textarea-left" v-if="showAudio">
+					<div class="svg-button" @click="recordAudio">
+						<slot
+							v-if="recorder.state === 'recording'"
+							name="microphone-off-icon"
+						>
+							<svg-icon name="microphone-off" />
+						</slot>
+						<slot v-else name="microphone-icon">
+							<svg-icon name="microphone" />
+						</slot>
+					</div>
+				</div>
+
 				<div
 					class="image-container"
 					:class="{ 'image-container-right': textareaAction }"
@@ -202,14 +216,6 @@
 					</div>
 				</div>
 
-				<div class="icon-textarea-left" v-if="textareaAction">
-					<div class="svg-button" @click="textareaActionHandler">
-						<slot name="custom-action-icon">
-							<svg-icon name="microphone" />
-						</slot>
-					</div>
-				</div>
-
 				<textarea
 					v-show="!file || imageFile"
 					ref="roomTextarea"
@@ -324,6 +330,7 @@ export default {
 		messageActions: { type: Array, required: true },
 		showSendIcon: { type: Boolean, required: true },
 		showFiles: { type: Boolean, required: true },
+		showAudio: { type: Boolean, required: true },
 		showEmojis: { type: Boolean, required: true },
 		showReactionEmojis: { type: Boolean, required: true },
 		showNewMessagesDivider: { type: Boolean, required: true },
@@ -349,7 +356,10 @@ export default {
 			emojisList: {},
 			hideOptions: true,
 			scrollIcon: false,
-			newMessages: []
+			newMessages: [],
+			recorderStream: {},
+			recorder: {},
+			recordedChunks: []
 		}
 	},
 
@@ -501,6 +511,48 @@ export default {
 	},
 
 	methods: {
+		async recordAudio() {
+			if (this.recorder.state === 'recording') {
+				this.recorder.stop()
+			} else {
+				this.recordedChunk = await this.startRecording()
+			}
+		},
+		async startRecording() {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				audio: true,
+				video: false
+			})
+
+			this.recorder = new MediaRecorder(stream)
+
+			this.recorder.ondataavailable = e => this.recordedChunks.push(e.data)
+			this.recorder.start()
+
+			const stopped = new Promise((resolve, reject) => {
+				this.recorder.onstop = resolve
+				this.recorder.onerror = event => reject(event.name)
+			})
+
+			stopped.then(() => {
+				stream.getTracks().forEach(track => track.stop())
+
+				const recordedBlob = new Blob(this.recordedChunks, {
+					type: 'audio/ogg; codecs="opus"'
+				})
+
+				this.file = {
+					blob: recordedBlob,
+					name: 'audio',
+					size: recordedBlob.size,
+					type: recordedBlob.type,
+					audio: true,
+					localUrl: URL.createObjectURL(recordedBlob)
+				}
+
+				this.message = 'audio'
+			})
+		},
 		addNewMessage(message) {
 			this.newMessages.push(message)
 		},

src/ChatWindow/RoomsList.vue

@@ -81,8 +81,20 @@
 									></svg-icon>
 								</slot>
 							</span>
+							<div
+								v-if="
+									room.lastMessage &&
+										room.lastMessage.file &&
+										room.lastMessage.file.audio
+								"
+								class="text-ellipsis"
+							>
+								<slot name="microphone-icon">
+									<svg-icon name="microphone" class="icon-microphone" />
+								</slot>
+							</div>
 							<format-message
-								v-if="room.lastMessage"
+								v-else-if="room.lastMessage"
 								:content="getLastMessage(room)"
 								:deleted="!!room.lastMessage.deleted"
 								:formatLinks="false"
@@ -375,6 +387,14 @@ input {
 	background-color: var(--chat-room-color-online);
 }
 
+.icon-microphone {
+	height: 15px;
+	width: 15px;
+	vertical-align: middle;
+	margin: -3px 1px 0 -1px;
+	fill: var(--chat-room-color-message);
+}
+
 .room-badge {
 	background-color: var(--chat-room-bg-color-badge);
 	color: var(--chat-room-color-badge);

src/ChatWindow/SvgIcon.vue

@@ -112,6 +112,11 @@ export default {
 					name: 'microphone',
 					path:
 						'M16 24h-8v-1h3.5v-3.018c-3.63-.256-6.5-3.287-6.5-6.982v-2h1v2.01c.005 3.307 2.692 5.99 6 5.99 3.311 0 6-2.689 6-6v-2h1v2c0 3.695-2.87 6.726-6.5 6.982v3.018h3.5v1zm-9-19c0-2.76 2.24-5 5-5s5 2.24 5 5v8c0 2.76-2.24 5-5 5s-5-2.24-5-5v-8zm9 0c0-2.208-1.792-4-4-4s-4 1.792-4 4v8c0 2.208 1.792 4 4 4s4-1.792 4-4v-8z'
+				},
+				{
+					name: 'microphone-off',
+					path:
+						'M16 24h-8v-1h3.5v-3.018c-3.63-.256-6.5-3.287-6.5-6.982v-2h1v2.01c.005 3.307 2.692 5.99 6 5.99 3.311 0 6-2.689 6-6v-2h1v2c0 3.695-2.87 6.726-6.5 6.982v3.018h3.5v1zm-9-19c0-2.76 2.24-5 5-5s5 2.24 5 5v8c0 2.76-2.24 5-5 5s-5-2.24-5-5v-8zm9 0c0-2.208-1.792-4-4-4s-4 1.792-4 4v8c0 2.208 1.792 4 4 4s4-1.792 4-4v-8z'
 				}
 			]
 		}
@@ -205,4 +210,8 @@ export default {
 #chat-icon-microphone {
 	fill: var(--chat-icon-color-microphone);
 }
+
+#chat-icon-microphone-off {
+	fill: var(--chat-icon-color-microphone-off);
+}
 </style>

src/themes/index.js

@@ -120,7 +120,8 @@ export const defaultThemeStyles = {
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
 			dropdownScroll: '#0a0a0a',
-			microphone: '#1976d2'
+			microphone: '#1976d2',
+			microphoneOff: '#eb4034'
 		}
 	},
 	dark: {
@@ -244,7 +245,8 @@ export const defaultThemeStyles = {
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
 			dropdownScroll: '#0a0a0a',
-			microphone: '#fff'
+			microphone: '#fff',
+			microphoneOff: '#eb4034'
 		}
 	}
 }
@@ -375,6 +377,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-dropdown-message': icons.dropdownMessage,
 		'--chat-icon-bg-dropdown-message': icons.dropdownMessageBackground,
 		'--chat-icon-color-dropdown-scroll': icons.dropdownScroll,
-		'--chat-icon-color-microphone': icons.microphone
+		'--chat-icon-color-microphone': icons.microphone,
+		'--chat-icon-color-microphone-off': icons.microphoneOff
 	}
 }