[FIX] Some Safari bugs (#13895)

* Fix input text caret size on Safari

* Prevent errors in absence of Permissions API; move microphone handling to messageBoxAudioMessage module

app/theme/client/imports/forms/input.css

@@ -1,4 +1,6 @@
 textarea.rc-input__element {
+	height: auto;
+
 	font-family: inherit;
 	line-height: 0.5rem 1rem;
 }
@@ -52,6 +54,7 @@ textarea.rc-input__element {
 
 	&__element {
 		width: 100%;
+		height: 2.5rem;
 		padding: 0 1rem;
 
 		text-overflow: ellipsis;
@@ -64,11 +67,10 @@ textarea.rc-input__element {
 		background-color: transparent;
 
 		font-size: var(--input-font-size);
-
-		line-height: 2.25rem;
+		line-height: normal;
 
 		&--small {
-			line-height: 1.75rem;
+			height: 2rem;
 		}
 
 		&::placeholder {

app/ui-message/client/messageBox.html

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

app/ui-message/client/messageBox.js

@@ -9,7 +9,6 @@ import { Markdown } from '../../markdown';
 import { ChatSubscription } from '../../models';
 import { settings } from '../../settings';
 import {
-	AudioRecorder,
 	ChatMessages,
 	chatMessages,
 	fileUpload,
@@ -146,14 +145,6 @@ Template.messageBox.onCreated(function() {
 	this.isMicrophoneDenied = new ReactiveVar(true);
 	this.sendIconDisabled = new ReactiveVar(false);
 	messageBox.emit('created', this);
-
-	navigator.permissions.query({ name: 'microphone' })
-		.then((permissionStatus) => {
-			this.isMicrophoneDenied.set(permissionStatus.state === 'denied');
-			permissionStatus.onchange = () => {
-				this.isMicrophoneDenied.set(permissionStatus.state === 'denied');
-			};
-		});
 });
 
 Template.messageBox.onRendered(function() {
@@ -241,14 +232,6 @@ Template.messageBox.helpers({
 	isSendIconDisabled() {
 		return !Template.instance().sendIconDisabled.get();
 	},
-	isAudioMessageAllowed() {
-		return AudioRecorder.isSupported() &&
-			!Template.instance().isMicrophoneDenied.get() &&
-			settings.get('FileUpload_Enabled') &&
-			settings.get('Message_AudioRecorderEnabled') &&
-			(!settings.get('FileUpload_MediaTypeWhiteList') ||
-			settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/mp3|audio\/\*/i));
-	},
 	actions() {
 		const actionGroups = messageBox.actions.get();
 		return Object.values(actionGroups)

app/ui-message/client/messageBoxAudioMessage.html

@@ -1,20 +1,22 @@
 <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"}}
+	{{#if isAllowed}}
+		<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__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 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 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 rc-message-box__audio-message-loading js-audio-message-loading">
+				{{> icon block="rc-input__icon-svg" icon="loading"}}
+			</div>
 		</div>
-		<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 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 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 rc-message-box__audio-message-loading js-audio-message-loading">
-			{{> icon block="rc-input__icon-svg" icon="loading"}}
-		</div>
-	</div>
+	{{/if}}
 </template>

app/ui-message/client/messageBoxAudioMessage.js

@@ -3,6 +3,7 @@ import { Session } from 'meteor/session';
 import { Tracker } from 'meteor/tracker';
 import { Template } from 'meteor/templating';
 import { fileUploadHandler } from '../../file-upload';
+import { settings } from '../../settings';
 import { AudioRecorder, chatMessages } from '../../ui';
 import { call } from '../../ui-utils';
 import { t } from '../../utils';
@@ -87,9 +88,31 @@ const recordingRoomId = new ReactiveVar(null);
 Template.messageBoxAudioMessage.onCreated(function() {
 	this.state = new ReactiveVar(null);
 	this.time = new ReactiveVar('00:00');
+	this.isMicrophoneDenied = new ReactiveVar(true);
+
+	if (navigator.permissions) {
+		navigator.permissions.query({ name: 'microphone' })
+			.then((permissionStatus) => {
+				this.isMicrophoneDenied.set(permissionStatus.state === 'denied');
+				permissionStatus.onchange = () => {
+					this.isMicrophoneDenied.set(permissionStatus.state === 'denied');
+				};
+			});
+	} else {
+		this.isMicrophoneDenied.set(false);
+	}
 });
 
 Template.messageBoxAudioMessage.helpers({
+	isAllowed() {
+		return AudioRecorder.isSupported() &&
+			!Template.instance().isMicrophoneDenied.get() &&
+			settings.get('FileUpload_Enabled') &&
+			settings.get('Message_AudioRecorderEnabled') &&
+			(!settings.get('FileUpload_MediaTypeWhiteList') ||
+			settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/mp3|audio\/\*/i));
+	},
+
 	stateClass() {
 		if (recordingRoomId.get() && (recordingRoomId.get() !== Template.currentData().rid)) {
 			return 'rc-message-box__audio-message--busy';
@@ -129,6 +152,7 @@ Template.messageBoxAudioMessage.events({
 			recordingRoomId.set(this.rid);
 		} catch (error) {
 			instance.state.set(null);
+			instance.isMicrophoneDenied.set(true);
 			chatMessages[this.rid].recording = false;
 		}
 	},