[FIX] Audio message recording issues (#13486)

Closes #10530

.eslintignore

@@ -13,12 +13,11 @@ packages/rocketchat_theme/client/minicolors/jquery.minicolors.js
 packages/rocketchat_theme/client/vendor/
 packages/rocketchat-ui/client/lib/customEventPolyfill.js
 packages/rocketchat-ui/client/lib/Modernizr.js
-packages/rocketchat-ui/client/lib/recorderjs/recorder.js
+packages/rocketchat-ui/client/public/mp3-realtime-worker.js
+packages/rocketchat-ui/client/public/lame.min.js
 packages/rocketchat-videobridge/client/public/external_api.js
 packages/tap-i18n/lib/tap_i18next/tap_i18next-1.7.3.js
 private/moment-locales/
 public/livechat/
-public/mp3-realtime-worker.js
-public/lame.min.js
 !.scripts
 !packages/rocketchat-livechat/.app

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

@@ -26,7 +26,7 @@
 						</span>
 					{{else}}
 						{{#if isAudioMessageAllowed}}
-							{{> messageBoxAudioMessage}}
+							{{> messageBoxAudioMessage rid=_id}}
 						{{/if}}
 						<span class="rc-message-box__action-menu" data-desktop>
 							{{#if actions}}

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

@@ -3,14 +3,20 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 import { Tracker } from 'meteor/tracker';
-import { settings } from 'meteor/rocketchat:settings';
-import { Markdown } from 'meteor/rocketchat:markdown';
 import { EmojiPicker } from 'meteor/rocketchat:emoji';
-import { KonchatNotification, fileUpload, chatMessages, ChatMessages } from 'meteor/rocketchat:ui';
-import { RoomManager, popover, messageBox, Layout } from 'meteor/rocketchat:ui-utils';
+import { katex } from 'meteor/rocketchat:katex';
+import { Markdown } from 'meteor/rocketchat:markdown';
 import { ChatSubscription } from 'meteor/rocketchat:models';
+import { settings } from 'meteor/rocketchat:settings';
+import {
+	AudioRecorder,
+	ChatMessages,
+	chatMessages,
+	fileUpload,
+	KonchatNotification,
+} from 'meteor/rocketchat:ui';
+import { Layout, messageBox, popover, RoomManager } from 'meteor/rocketchat:ui-utils';
 import { t, roomTypes, getUserPreference } from 'meteor/rocketchat:utils';
-import { katex } from 'meteor/rocketchat:katex';
 import moment from 'moment';
 import './messageBoxReplyPreview';
 import './messageBoxTyping';
@@ -85,7 +91,7 @@ const formattingButtons = [
 
 function applyFormatting(event, instance) {
 	event.preventDefault();
-	const { input } = instance;
+	const { input } = chatMessages[RoomManager.openedRoom];
 	const { selectionEnd = input.value.length, selectionStart = 0 } = input;
 	const initText = input.value.slice(0, selectionStart);
 	const selectedText = input.value.slice(selectionStart, selectionEnd);
@@ -226,8 +232,7 @@ Template.messageBox.helpers({
 		return !Template.instance().sendIconDisabled.get();
 	},
 	isAudioMessageAllowed() {
-		return (navigator.mediaDevices || navigator.getUserMedia || navigator.webkitGetUserMedia ||
-			navigator.mozGetUserMedia || navigator.msGetUserMedia) &&
+		return AudioRecorder.isSupported() &&
 			settings.get('FileUpload_Enabled') &&
 			settings.get('Message_AudioRecorderEnabled') &&
 			(!settings.get('FileUpload_MediaTypeWhiteList') ||

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

@@ -1,19 +1,19 @@
-<template name="messageBoxAudioMessage">
-	<div class="rc-message-box__audio-message">
-		<div class="rc-message-box__icon cross js-audio-message-cross">
+<template name="messageBoxAudioMessage" args="rid">
+	<div class="rc-message-box__audio-message {{stateClass}}">
+		<div class="rc-message-box__icon rc-message-box__audio-message-cancel js-audio-message-cancel">
 			{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
 		</div>
-		<div class="rc-message-box__timer-box">
-			<p class="rc-message-box__timer-dot">&bull;&nbsp;</p>
-			<span class="rc-message-box__timer">00:00</span>
+		<div class="rc-message-box__audio-message-timer">
+			<span class="rc-message-box__audio-message-timer-dot"></span>
+			<span class="rc-message-box__audio-message-timer-text">{{time}}</span>
 		</div>
-		<div class="rc-message-box__icon check js-audio-message-check">
+		<div class="rc-message-box__icon rc-message-box__audio-message-done js-audio-message-done">
 			{{> icon block="rc-input__icon-svg" icon="checkmark-circled"}}
 		</div>
-		<div class="rc-message-box__icon mic active js-audio-message-record">
+		<div class="rc-message-box__icon rc-message-box__audio-message-mic js-audio-message-record">
 			{{> icon block="rc-input__icon-svg" icon="mic"}}
 		</div>
-		<div class="rc-message-box__icon loading js-audio-message-loading">
+		<div class="rc-message-box__icon rc-message-box__audio-message-loading js-audio-message-loading">
 			{{> icon block="rc-input__icon-svg" icon="loading"}}
 		</div>
 	</div>