Skip to content

Commit

Permalink
[FIX] Audio Message UI fixes (#10303)
Browse files Browse the repository at this point in the history 
* [FIX] Check before rendering audio message template

* [FIX] use component for icons

* [FIX] Single node for audioMessage template

* [FIX] Mic position order in mobile web
  • Loading branch information
@kb0304 @rodrigok
kb0304 authored and rodrigok committed Apr 4, 2018
1 parent 72f0586 commit a9aea36
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 41 deletions.
37 changes: 22 additions & 15 deletions packages/rocketchat-theme/client/imports/components/message-box.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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{
Expand Down Expand Up @@ -266,11 +269,15 @@
order: 3;
}

&__audio-message {
order: 4;
}

&__send {
flex: 0;

font-size: 20px;
order: 4;
order: 5;
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/rocketchat-ui-master/public/icons.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions packages/rocketchat-ui-message/client/messageBox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down Expand Up @@ -102,24 +104,22 @@
</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">
<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">
<div class="rc-message-box__icon mic active js-audio-message-record">
{{> 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>
Expand Down
33 changes: 17 additions & 16 deletions packages/rocketchat-ui-message/client/messageBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
});

Expand Down Expand Up @@ -484,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() {
Expand All @@ -502,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);
Expand All @@ -524,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);
Expand Down
1 change: 0 additions & 1 deletion public/images/circle-check.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion public/images/circle-cross.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion public/images/loading.svg
View file

This file was deleted.

0 comments on commit a9aea36

Please sign in to comment.