[NEW] Update UI for audio message

packages/rocketchat-ui-message/client/messageBox.html

@@ -31,6 +31,7 @@
 							{{> icon block="rc-input__icon-svg" icon="send"}}
 						</div>
 					{{else}}
+						{{> messageBox__audioMessage}}
 						{{> messageBox__actions}}
 					{{/unless}}
 					{{# messageBox__actionsSmall}}
@@ -90,6 +91,16 @@
 		{{/if}}
 	</div>
 </template>
+<template name="messageBox__audioMessage">
+	<div class="rc-message-box__audio-message">
+		<div class="rc-message-box__icon">
+			{{> icon block="rc-input__icon-svg" icon="mic"}}
+		</div>
+	</div>
+	<div class="rc-message-box__timer">
+	</div>
+</template>
+
 <template name="messageBox__actionsSmall">
 	<div class="js-message-actions rc-message-box__action-label" data-small>
 		{{#each actions }}

packages/rocketchat-ui-message/client/messageBox.js

@@ -1,7 +1,9 @@
-/* globals fileUpload KonchatNotification chatMessages popover isRtl */
+/* globals fileUpload KonchatNotification chatMessages popover isRtl AudioRecorder chatMessages*/
 import toastr from 'toastr';
 import moment from 'moment';
 
+let audioMessageIntervalId;
+
 function katexSyntax() {
 	if (RocketChat.katex.katex_enabled()) {
 		if (RocketChat.katex.dollar_syntax_enabled()) {
@@ -269,6 +271,9 @@ Template.messageBox.helpers({
 	},
 	isEmojiEnable() {
 		return RocketChat.getUserPreference(Meteor.user(), 'useEmojis');
+	},
+	isAudioMessageAllowed() {
+		return RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList'));
 	}
 });
 
@@ -452,7 +457,7 @@ Template.messageBox.events({
 				}
 			],
 			mousePosition: {
-				x: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().right + 10,
+				x: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().right + 40,
 				y: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().top
 			},
 			customCSSProperties: {
@@ -465,6 +470,76 @@ Template.messageBox.events({
 		};
 
 		popover.open(config);
+	},
+	'click .rc-message-box__audio-message'(event) {
+		event.preventDefault();
+		const icon = document.querySelector('.rc-message-box__audio-message');
+		const timer = document.querySelector('.rc-message-box__timer');
+
+		if (chatMessages[RocketChat.openedRoom].recording) {
+			icon.style.color = '';
+			icon.classList.remove('pulse');
+
+			timer.innerHTML = '';
+			if (audioMessageIntervalId) {
+				clearInterval(audioMessageIntervalId);
+			}
+			timer.style.color= '';
+
+			AudioRecorder.stop(function(blob) {
+				chatMessages[RocketChat.openedRoom].recording = false;
+				fileUpload([
+					{
+						file: blob,
+						type: 'audio',
+						name: `${ TAPi18n.__('Audio record') }.mp3`
+					}
+				]);
+			});
+			return false;
+		}
+
+		chatMessages[RocketChat.openedRoom].recording = true;
+		AudioRecorder.start(function() {
+			const startTime = new Date;
+			timer.innerHTML = '00:00';
+			audioMessageIntervalId = setInterval(()=> {
+				const now = new Date;
+				const distance = now-startTime;
+				let minutes = Math.floor(distance / (1000 * 60));
+				let seconds = Math.floor((distance % (1000 * 60)) / 1000);
+				if (minutes < 10) { minutes = `0${ minutes }`; }
+				if (seconds < 10) { seconds = `0${ seconds }`; }
+				timer.innerHTML = `${ minutes }:${ seconds }`;
+			}, 1000);
+			timer.style.color = 'red';
+			icon.classList.add('pulse');
+			icon.style.color = 'red';
+		});
+	},
+	'click .rc-message-box__timer'(event) {
+		event.preventDefault();
+		const icon = document.querySelector('.rc-message-box__audio-message');
+		const timer = document.querySelector('.rc-message-box__timer');
+
+		icon.style.color = '';
+		icon.classList.remove('pulse');
+		timer.innerHTML = '';
+		if (audioMessageIntervalId) {
+			clearInterval(audioMessageIntervalId);
+		}
+		timer.style.color= '';
+
+		AudioRecorder.stop(function(blob) {
+			chatMessages[RocketChat.openedRoom].recording = false;
+			fileUpload([
+				{
+					file: blob,
+					type: 'audio',
+					name: `${ TAPi18n.__('Audio record') }.mp3`
+				}
+			]);
+		});
 	}
 });
 

packages/rocketchat-ui-message/startup/messageBoxActions.js

@@ -1,4 +1,4 @@
-/* globals fileUpload chatMessages AudioRecorder device popover modal */
+/* globals fileUpload device modal */
 
 import mime from 'mime-type/with-db';
 import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';
@@ -12,40 +12,6 @@ RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
 	}
 });
 
-RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
-	id: 'audio-message',
-	icon: 'mic',
-	condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/wav|audio\/\*/i)),
-	action({event, element}) {
-		event.preventDefault();
-		const icon = element.querySelector('.rc-icon');
-
-		if (chatMessages[RocketChat.openedRoom].recording) {
-			AudioRecorder.stop(function(blob) {
-				popover.close();
-				icon.style.color = '';
-				icon.classList.remove('pulse');
-				chatMessages[RocketChat.openedRoom].recording = false;
-				fileUpload([
-					{
-						file: blob,
-						type: 'audio',
-						name: `${ TAPi18n.__('Audio record') }.mp3`
-					}
-				]);
-			});
-			return false;
-		}
-
-		chatMessages[RocketChat.openedRoom].recording = true;
-		AudioRecorder.start(function() {
-			icon.classList.add('pulse');
-			icon.style.color = 'red';
-		});
-	}
-});
-
-
 RocketChat.messageBox.actions.add('Add_files_from', 'Computer', {
 	id: 'file-upload',
 	icon: 'computer',