Skip to content

Commit

Permalink
[FIX] Some Safari bugs (#13895)
Browse files Browse the repository at this point in the history
* Fix input text caret size on Safari

* Prevent errors in absence of Permissions API; move microphone handling to messageBoxAudioMessage module
  • Loading branch information
tassoevan authored and sampaiodiego committed Mar 26, 2019
1 parent ebbb457 commit 6ef4095
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 40 deletions.
8 changes: 5 additions & 3 deletions app/theme/client/imports/forms/input.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
textarea.rc-input__element {
height: auto;

font-family: inherit;
line-height: 0.5rem 1rem;
}
Expand Down Expand Up @@ -52,6 +54,7 @@ textarea.rc-input__element {

&__element {
width: 100%;
height: 2.5rem;
padding: 0 1rem;

text-overflow: ellipsis;
Expand All @@ -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 {
Expand Down
4 changes: 1 addition & 3 deletions app/ui-message/client/messageBox.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
17 changes: 0 additions & 17 deletions app/ui-message/client/messageBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { Markdown } from '../../markdown';
import { ChatSubscription } from '../../models';
import { settings } from '../../settings';
import {
AudioRecorder,
ChatMessages,
chatMessages,
fileUpload,
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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)
Expand Down
36 changes: 19 additions & 17 deletions app/ui-message/client/messageBoxAudioMessage.html
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions app/ui-message/client/messageBoxAudioMessage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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;
}
},
Expand Down

0 comments on commit 6ef4095

Please sign in to comment.