From 691610ba129d7b28c1336b3b401368b354e7559b Mon Sep 17 00:00:00 2001
From: kb0304 <karanbedi0304@gmail.com>
Date: Tue, 3 Apr 2018 02:40:48 +0530
Subject: [PATCH 1/4] [FIX] Check before rendering audio message template

---
 packages/rocketchat-ui-message/client/messageBox.html | 4 +++-
 packages/rocketchat-ui-message/client/messageBox.js   | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index 141e31336f1b8..ae827dc67e3f3 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -41,7 +41,9 @@
 							{{> icon block="rc-input__icon-svg" icon="send"}}
 						</div>
 					{{else}}
-						{{> messageBox__audioMessage}}
+						{{#if isAudioMessageAllowed}}
+							{{> messageBox__audioMessage}}
+						{{/if}}
 						{{> messageBox__actions}}
 					{{/unless}}
 					{{# messageBox__actionsSmall}}
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 176ca033a6240..277511f8e01af 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -277,7 +277,12 @@ Template.messageBox.helpers({
 		return Template.instance().dataReply.get();
 	},
 	isAudioMessageAllowed() {
-		return RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList'));
+		return (navigator.getUserMedia || navigator.webkitGetUserMedia ||
+			navigator.mozGetUserMedia || navigator.msGetUserMedia) &&
+			RocketChat.settings.get('FileUpload_Enabled') &&
+			RocketChat.settings.get('Message_AudioRecorderEnabled') &&
+			(!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') ||
+			RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/mp3|audio\/\*/i));
 	}
 });
 

From bdbe15a5ca17ca6bb580069b0f1e90e006fbf2a5 Mon Sep 17 00:00:00 2001
From: kb0304 <karanbedi0304@gmail.com>
Date: Tue, 3 Apr 2018 03:05:44 +0530
Subject: [PATCH 2/4] [FIX] use component for icons

---
 packages/rocketchat-ui-master/public/icons.svg        | 3 +++
 packages/rocketchat-ui-message/client/messageBox.html | 6 +++---
 public/images/circle-check.svg                        | 1 -
 public/images/circle-cross.svg                        | 1 -
 public/images/loading.svg                             | 1 -
 5 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 public/images/circle-check.svg
 delete mode 100644 public/images/circle-cross.svg
 delete mode 100644 public/images/loading.svg

diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index 432d6d6d4bee1..99ac982a06b47 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -100,4 +100,7 @@
     <symbol viewBox="0 0 512 512" id="icon-sort-amount-down"><path d="M204.485 392l-84 84.485c-4.686 4.686-12.284 4.686-16.971 0l-84-84.485c-4.686-4.686-4.686-12.284 0-16.97l7.07-7.071c4.686-4.686 12.284-4.686 16.971 0L95 419.887V44c0-6.627 5.373-12 12-12h10c6.627 0 12 5.373 12 12v375.887l51.444-51.928c4.686-4.686 12.284-4.686 16.971 0l7.07 7.071c4.687 4.686 4.687 12.284 0 16.97zM384 308v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h104c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h168c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zM320 404v-8c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></symbol>
     <symbol viewBox="0 0 576 512" id="icon-edit-rounded"><path d="M417.8 315.5l20-20c3.8-3.8 10.2-1.1 10.2 4.2V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h292.3c5.3 0 8 6.5 4.2 10.2l-20 20c-1.1 1.1-2.7 1.8-4.2 1.8H48c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V319.7c0-1.6.6-3.1 1.8-4.2zm145.9-191.2L251.2 436.8l-99.9 11.1c-13.4 1.5-24.7-9.8-23.2-23.2l11.1-99.9L451.7 12.3c16.4-16.4 43-16.4 59.4 0l52.6 52.6c16.4 16.4 16.4 43 0 59.4zm-93.6 48.4L403.4 106 169.8 339.5l-8.3 75.1 75.1-8.3 233.5-233.6zm71-85.2l-52.6-52.6c-3.8-3.8-10.2-4-14.1 0L426 83.3l66.7 66.7 48.4-48.4c3.9-3.8 3.9-10.2 0-14.1z"/></symbol>
     <symbol id="icon-cube" viewBox="0 0 512 512"><path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 34.2l224 84v.3l-224 97.1-224-97.1v-.3l224-84zM32 153.4l208 90.1v224.7l-208-104V153.4zm240 314.8V243.5l208-90.1v210.9L272 468.2z"/></symbol>
+    <symbol id="icon-circle-cross" viewBox="0 0 256 256"><path d="M183.191,174.141c2.5,2.498,2.5,6.552,0,9.05c-1.249,1.25-2.889,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875  l-46.142-46.142L81.856,183.19c-1.249,1.25-2.888,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875c-2.5-2.498-2.5-6.552,0-9.05  l46.143-46.143L72.806,81.856c-2.5-2.499-2.5-6.552,0-9.05c2.497-2.5,6.553-2.5,9.05,0l46.142,46.142l46.142-46.142  c2.497-2.5,6.553-2.5,9.051,0c2.5,2.499,2.5,6.552,0,9.05l-46.143,46.142L183.191,174.141z M256,128C256,57.42,198.58,0,128,0  C57.42,0,0,57.42,0,128c0,70.58,57.42,128,128,128C198.58,256,256,198.58,256,128z M243.2,128c0,63.521-51.679,115.2-115.2,115.2  c-63.522,0-115.2-51.679-115.2-115.2C12.8,64.478,64.478,12.8,128,12.8C191.521,12.8,243.2,64.478,243.2,128z" fill="#ef0e0e"/></symbol>
+    <symbol id="icon-circle-check" viewBox="0 0 32 32"><g><path d="M16,0C7.163,0,0,7.163,0,16c0,8.837,7.163,16,16,16c8.836,0,16-7.164,16-16C32,7.163,24.836,0,16,0z M16,30   C8.268,30,2,23.732,2,16C2,8.268,8.268,2,16,2s14,6.268,14,14C30,23.732,23.732,30,16,30z" fill="#2db730"/><path d="M23.3,10.393L13.012,20.589l-4.281-4.196c-0.394-0.391-1.034-0.391-1.428,0   c-0.395,0.391-0.395,1.024,0,1.414l4.999,4.899c0.41,0.361,1.023,0.401,1.428,0l10.999-10.899c0.394-0.39,0.394-1.024,0-1.414   C24.334,10.003,23.695,10.003,23.3,10.393z" fill="#2db730"/></g><g/><g/><g/><g/><g/><g/></symbol>
+    <symbol id="icon-loading" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></symbol>
 </svg>
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index ae827dc67e3f3..51e6bcc573699 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -106,14 +106,14 @@
 <template name="messageBox__audioMessage">
 	<div class="rc-message-box__audio-recording">
 		<div class="rc-message-box__icon cross js-audio-message-cross">
-			<img src="/images/circle-cross.svg">
+			{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
 		</div>
 		<div class="rc-message-box__timer-box">
 			<p class="rc-message-box__timer-dot">&#8226;&nbsp;</p>
 			<span class="rc-message-box__timer"> 00:00</span>
 		</div>
 		<div class="rc-message-box__icon check js-audio-message-check">
-			<img src="/images/circle-check.svg">
+			{{> icon block="rc-input__icon-svg" icon="circle-check"}}
 		</div>
 	</div>
 	<div class="rc-message-box__audio-message">
@@ -121,7 +121,7 @@
 			{{> icon block="rc-input__icon-svg" icon="mic"}}
 		</div>
 		<div class="rc-message-box__icon loading js-audio-message-loading">
-			<img class="rc-input__icon-svg" src="/images/loading.svg">
+			{{> icon block="rc-input__icon-svg" icon="loading"}}
 		</div>
 	</div>
 </template>
diff --git a/public/images/circle-check.svg b/public/images/circle-check.svg
deleted file mode 100644
index b5e092b5f6ac5..0000000000000
--- a/public/images/circle-check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="26px" id="id-circle-cross" version="1.1" viewBox="0 0 32 32" width="26px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icon-circle-check"><path d="M16,0C7.163,0,0,7.163,0,16c0,8.837,7.163,16,16,16c8.836,0,16-7.164,16-16C32,7.163,24.836,0,16,0z M16,30   C8.268,30,2,23.732,2,16C2,8.268,8.268,2,16,2s14,6.268,14,14C30,23.732,23.732,30,16,30z" fill="#2db730"/><path d="M23.3,10.393L13.012,20.589l-4.281-4.196c-0.394-0.391-1.034-0.391-1.428,0   c-0.395,0.391-0.395,1.024,0,1.414l4.999,4.899c0.41,0.361,1.023,0.401,1.428,0l10.999-10.899c0.394-0.39,0.394-1.024,0-1.414   C24.334,10.003,23.695,10.003,23.3,10.393z" fill="#2db730"/></g><g/><g/><g/><g/><g/><g/></svg>
diff --git a/public/images/circle-cross.svg b/public/images/circle-cross.svg
deleted file mode 100644
index 781bf5b4c2c7c..0000000000000
--- a/public/images/circle-cross.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 256 256" height="26px" id="icon-circle-cross" version="1.1" viewBox="0 0 256 256" width="26px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M183.191,174.141c2.5,2.498,2.5,6.552,0,9.05c-1.249,1.25-2.889,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875  l-46.142-46.142L81.856,183.19c-1.249,1.25-2.888,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875c-2.5-2.498-2.5-6.552,0-9.05  l46.143-46.143L72.806,81.856c-2.5-2.499-2.5-6.552,0-9.05c2.497-2.5,6.553-2.5,9.05,0l46.142,46.142l46.142-46.142  c2.497-2.5,6.553-2.5,9.051,0c2.5,2.499,2.5,6.552,0,9.05l-46.143,46.142L183.191,174.141z M256,128C256,57.42,198.58,0,128,0  C57.42,0,0,57.42,0,128c0,70.58,57.42,128,128,128C198.58,256,256,198.58,256,128z M243.2,128c0,63.521-51.679,115.2-115.2,115.2  c-63.522,0-115.2-51.679-115.2-115.2C12.8,64.478,64.478,12.8,128,12.8C191.521,12.8,243.2,64.478,243.2,128z" fill="#ef0e0e"/></svg>
diff --git a/public/images/loading.svg b/public/images/loading.svg
deleted file mode 100644
index a2766d01acaba..0000000000000
--- a/public/images/loading.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32px"  height="32px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

From cf877e63e8806ff85d9f3e2d44478ea1433bdcd5 Mon Sep 17 00:00:00 2001
From: kb0304 <karanbedi0304@gmail.com>
Date: Tue, 3 Apr 2018 03:48:31 +0530
Subject: [PATCH 3/4] [FIX] Single node for audioMessage template

---
 .../client/imports/components/message-box.css | 31 ++++++++++---------
 .../client/messageBox.html                    |  4 +--
 .../client/messageBox.js                      | 26 +++++++---------
 3 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css
index df01615e11d04..b762790778707 100644
--- a/packages/rocketchat-theme/client/imports/components/message-box.css
+++ b/packages/rocketchat-theme/client/imports/components/message-box.css
@@ -139,8 +139,20 @@
 			transition: transform 0.1s linear;
 		}
 
+		&.check {
+			color: red;
+			display: none;
+			&.active {
+				display: flex;
+			}
+		}
+
 		&.cross {
 			color: red;
+			display: none;
+			&.active {
+				display: flex;
+			}
 		}
 
 		&.loading {
@@ -172,25 +184,16 @@
 		display: none;
 	}
 
-	&__audio-recording {
-		display: none;
-		position: relative;
-		z-index: -1;
-		&.active{
-			display: flex;
-			z-index: 2;
-		}
-	}
-
 	&__audio-message{
-		&.hidden{
-			z-index: -1;
-		}
+		display: flex;
 	}
 
 	&__timer-box{
-		display: flex;
+		display: none;
 		width: 50px;
+		&.active {
+			display: flex;
+		}
 	}
 
 	&__timer-dot{
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index 51e6bcc573699..39bc62295fbf4 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -104,7 +104,7 @@
 	</div>
 </template>
 <template name="messageBox__audioMessage">
-	<div class="rc-message-box__audio-recording">
+	<div class="rc-message-box__audio-message">
 		<div class="rc-message-box__icon cross js-audio-message-cross">
 			{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
 		</div>
@@ -115,8 +115,6 @@
 		<div class="rc-message-box__icon check js-audio-message-check">
 			{{> icon block="rc-input__icon-svg" icon="circle-check"}}
 		</div>
-	</div>
-	<div class="rc-message-box__audio-message">
 		<div class="rc-message-box__icon mic active js-audio-message-record">
 			{{> icon block="rc-input__icon-svg" icon="mic"}}
 		</div>
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 277511f8e01af..fe5fafedacb3f 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -489,9 +489,9 @@ Template.messageBox.events({
 	},
 	'click .js-audio-message-record'(event) {
 		event.preventDefault();
-		const icon = document.querySelector('.rc-message-box__audio-message');
+		const recording_icons = document.querySelectorAll('.rc-message-box__icon.check, .rc-message-box__icon.cross, .rc-message-box__timer-box');
 		const timer = document.querySelector('.rc-message-box__timer');
-		const timer_box = document.querySelector('.rc-message-box__audio-recording');
+		const mic = document.querySelector('.rc-message-box__icon.mic');
 
 		chatMessages[RocketChat.openedRoom].recording = true;
 		AudioRecorder.start(function() {
@@ -507,18 +507,18 @@ Template.messageBox.events({
 				timer.innerHTML = `${ minutes }:${ seconds }`;
 			}, 1000);
 
-			icon.classList.add('hidden');
-			timer_box.classList.add('active');
+			mic.classList.remove('active');
+			recording_icons.forEach((e)=>{ e.classList.add('active'); });
 		});
 	},
 	'click .js-audio-message-cross'(event) {
 		event.preventDefault();
-		const icon = document.querySelector('.rc-message-box__audio-message');
 		const timer = document.querySelector('.rc-message-box__timer');
-		const timer_box = document.querySelector('.rc-message-box__audio-recording');
+		const mic = document.querySelector('.rc-message-box__icon.mic');
+		const recording_icons = document.querySelectorAll('.rc-message-box__icon.check, .rc-message-box__icon.cross, .rc-message-box__timer-box');
 
-		timer_box.classList.remove('active');
-		icon.classList.remove('hidden');
+		recording_icons.forEach((e)=>{ e.classList.remove('active'); });
+		mic.classList.add('active');
 		timer.innerHTML = '00:00';
 		if (audioMessageIntervalId) {
 			clearInterval(audioMessageIntervalId);
@@ -529,17 +529,13 @@ Template.messageBox.events({
 	},
 	'click .js-audio-message-check'(event) {
 		event.preventDefault();
-		const icon = document.querySelector('.rc-message-box__audio-message');
 		const timer = document.querySelector('.rc-message-box__timer');
-		const timer_box = document.querySelector('.rc-message-box__audio-recording');
+		const mic = document.querySelector('.rc-message-box__icon.mic');
 		const loader = document.querySelector('.js-audio-message-loading');
-		const mic = document.querySelector('.js-audio-message-record');
+		const recording_icons = document.querySelectorAll('.rc-message-box__icon.check, .rc-message-box__icon.cross, .rc-message-box__timer-box');
 
-		icon.classList.remove('hidden');
-		timer_box.classList.remove('active');
-		mic.classList.remove('active');
+		recording_icons.forEach((e)=>{ e.classList.remove('active'); });
 		loader.classList.add('active');
-
 		timer.innerHTML = '00:00';
 		if (audioMessageIntervalId) {
 			clearInterval(audioMessageIntervalId);

From 1698680f8d3a9aa020b337904a1dfae160b4b95e Mon Sep 17 00:00:00 2001
From: kb0304 <karanbedi0304@gmail.com>
Date: Tue, 3 Apr 2018 04:22:44 +0530
Subject: [PATCH 4/4] [FIX] Mic position order in mobile web

---
 .../client/imports/components/message-box.css               | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css
index b762790778707..18c3d15d9a358 100644
--- a/packages/rocketchat-theme/client/imports/components/message-box.css
+++ b/packages/rocketchat-theme/client/imports/components/message-box.css
@@ -269,11 +269,15 @@
 			order: 3;
 		}
 
+		&__audio-message {
+			order: 4;
+		}
+
 		&__send {
 			flex: 0;
 
 			font-size: 20px;
-			order: 4;
+			order: 5;
 		}
 	}
 }