Merge pull request #3611 from KDSBrowne/MuteButton-Voice-Inidicator

Mute button glow indicator

bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/component.jsx

@@ -5,12 +5,16 @@ import styles from '../styles.scss';
 export default class MuteAudio extends React.Component {
 
   render() {
-    const { isInAudio, isMuted, callback } = this.props;
+    const { isInAudio, isMuted, callback, isTalking} = this.props;
     let label = !isMuted ? 'Mute' : 'Unmute';
     let icon = !isMuted ? 'audio-off' : 'audio';
     let className = !isInAudio ? styles.invisible : null;
     let tabIndex = !isInAudio ? -1 : 0;
 
+    if (isInAudio && isTalking) {
+      className = styles.circleGlow;
+    }
+
     return (
       <Button
         onClick={callback}

bigbluebutton-html5/imports/ui/components/actions-bar/mute-button/container.jsx

@@ -19,6 +19,8 @@ export default createContainer((params) => {
   const user = Users.findOne({ userId: userId }).user;
   const isMuted = user.voiceUser.muted;
   const isInAudio = user.voiceUser.joined;
+  const isTalking = user.voiceUser.talking;
+
   let callback = () => {};
 
   if (isInAudio && !isMuted) {
@@ -33,6 +35,7 @@ export default createContainer((params) => {
     isInAudio,
     isMuted,
     callback,
+    isTalking,
   };
   return data;
 }, MuteAudioContainer);

bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss

@@ -30,3 +30,7 @@
 .invisible {
   visibility: hidden;
 }
+
+.circleGlow > :first-child{
+    box-shadow: 0 0 .15rem #FFF !important;
+}

bigbluebutton-html5/imports/ui/components/button/component.jsx

@@ -95,6 +95,7 @@ export default class Button extends BaseButton {
     } = this.props;
 
     let propClassNames = {};
+
     propClassNames[styles.button] = true;
     propClassNames[styles[size]] = true;
     propClassNames[styles[color]] = true;

bigbluebutton-html5/imports/ui/components/button/styles.scss

@@ -259,7 +259,6 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   }
 }
 
-
 .circle {
   $btn-sm-padding-x: nth($btn-sm-padding, 2) / 2.75;
   $btn-md-padding-x: nth($btn-md-padding, 2) / 2.75;