adjusted to meet component/container structure conventions and simplify code

bigbluebutton-html5/imports/ui/components/actions-bar/audio-menu/component.jsx

@@ -5,7 +5,7 @@ import Users from '/imports/api/users/index';
 import Auth from '/imports/ui/services/auth/index';
 import MuteAudioContainer from '../mute-button/container';
 
-export default class JoinAudioComponent extends React.Component {
+export default class JoinAudio extends React.Component {
 
   renderLeaveButton() {
     return (
@@ -13,7 +13,7 @@ export default class JoinAudioComponent extends React.Component {
       <Button
         onClick={this.props.close}
         label={'Leave Audio'}
-        color={'primary'}
+        color={'danger'}
         icon={'audio'}
         size={'lg'}
         circle={true}
@@ -32,17 +32,17 @@ export default class JoinAudioComponent extends React.Component {
       );
     } else if (this.props.isInListenOnly) {
       return this.renderLeaveButton();
-    } else {
-      return (
-        <Button
-          onClick={this.props.open}
-          label={'Join Audio'}
-          color={'primary'}
-          icon={'audio'}
-          size={'lg'}
-          circle={true}
-        />
-      );
     }
+
+    return (
+      <Button
+        onClick={this.props.open}
+        label={'Join Audio'}
+        color={'primary'}
+        icon={'audio'}
+        size={'lg'}
+        circle={true}
+      />
+    );
   }
 }

bigbluebutton-html5/imports/ui/components/actions-bar/audio-menu/container.jsx

@@ -3,23 +3,24 @@ import { createContainer } from 'meteor/react-meteor-data';
 import Button from '/imports/ui/components/button/component';
 import Users from '/imports/api/users/index';
 import Auth from '/imports/ui/services/auth/index';
-import JoinAudioComponent from './component';
+import JoinAudio from './component';
 
 class JoinAudioContainer extends React.Component {
 
   render() {
     return (
-      <JoinAudioComponent {...this.props} />
+      <JoinAudio {...this.props} />
     );
   }
 }
 
 export default createContainer((params) => {
-  const data = {
-    isInAudio: Users.findOne({ userId: Auth.userID }).user.voiceUser.joined,
-    isInListenOnly: Users.findOne({ userId: Auth.userID }).user.listenOnly,
+  const user = Users.findOne({ userId: Auth.userID }).user;
+
+  return {
+    isInAudio: user.voiceUser.joined,
+    isInListenOnly: user.listenOnly,
     open: params.open,
     close: params.close,
   };
-  return data;
 }, JoinAudioContainer);

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

@@ -10,7 +10,7 @@ import Users from '/imports/api/users/index';
 import JoinAudioContainer from './audio-menu/container';
 import { exitAudio } from '/imports/api/phone';
 
-const openJoinAudio = () => {showModal(<Audio />);};
+const openJoinAudio = () => showModal(<Audio />);
 
 export default class ActionsBar extends Component {
   constructor(props) {
@@ -29,11 +29,8 @@ export default class ActionsBar extends Component {
         <div className={styles.center}>
           <JoinAudioContainer
             open={openJoinAudio.bind(this)}
-            close={
-              () => {
-                exitAudio();
-              }
-            }
+            close={() => {exitAudio();}}
+
           />
 
           <Button

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

@@ -6,21 +6,14 @@ import Users from '/imports/api/users/index';
 import Auth from '/imports/ui/services/auth/index';
 
 export default class MuteAudioComponent extends React.Component {
-  muteUser() {
-    callServer('muteUser', Auth.userID);
-  }
-
-  unmuteUser() {
-    callServer('unmuteUser', Auth.userID);
-  }
 
   render() {
-    const { isMuted } = this.props;
-    let onClick = this.muteUser;
+    const { isMuted, muteUser, unmuteUser } = this.props;
+    let onClick = muteUser;
     let label = 'Mute';
 
     if (isMuted) {
-      onClick = this.unmuteUser;
+      onClick = unmuteUser;
       label = 'Unmute';
     }
 

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

@@ -11,6 +11,8 @@ class MuteAudioContainer extends React.Component {
     return (
       <MuteAudioComponent
         isMuted = {this.props.isMuted}
+        muteUser = {this.props.muteUser}
+        unmuteUser = {this.props.unmuteUser}
       />
     );
   }
@@ -19,6 +21,8 @@ class MuteAudioContainer extends React.Component {
 export default createContainer((params) => {
   const data = {
     isMuted: Users.findOne({ userId: Auth.userID }).user.voiceUser.muted,
+    muteUser: () => callServer('muteUser', Auth.userID),
+    unmuteUser: () => callServer('unmuteUser', Auth.userID),
   };
   return data;
 }, MuteAudioContainer);