diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css index df01615e11d04..18c3d15d9a358 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{ @@ -266,11 +269,15 @@ order: 3; } + &__audio-message { + order: 4; + } + &__send { flex: 0; font-size: 20px; - order: 4; + order: 5; } } } 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 @@ + + + diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html index 141e31336f1b8..39bc62295fbf4 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"}} {{else}} - {{> messageBox__audioMessage}} + {{#if isAudioMessageAllowed}} + {{> messageBox__audioMessage}} + {{/if}} {{> messageBox__actions}} {{/unless}} {{# messageBox__actionsSmall}} @@ -102,24 +104,22 @@ diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js index 176ca033a6240..fe5fafedacb3f 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)); } }); @@ -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() { @@ -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); @@ -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); 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 @@ - 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 @@ - 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 @@ -