Merge pull request #3497 from mmarangoni/html5-stun-audio

Action bar & join audio improvements

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

@@ -3,34 +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 MuteAudioContainer from '../mute-button/container';
 
 export default class JoinAudioOptions extends React.Component {
 
   renderLeaveButton() {
     return (
-      <span>
-      <Button
-        onClick={this.props.close}
-        label={'Leave Audio'}
-        color={'danger'}
-        icon={'audio'}
-        size={'lg'}
-        circle={true}
-      />
-      </span>
+        <Button
+          onClick={this.props.close}
+          label={'Leave Audio'}
+          color={'danger'}
+          icon={'audio'}
+          size={'lg'}
+          circle={true}
+        />
     );
   }
 
   render() {
-    if (this.props.isInAudio) {
-      return (
-        <span>
-          <MuteAudioContainer/>
-          {this.renderLeaveButton()}
-        </span>
-      );
-    } else if (this.props.isInListenOnly) {
+    if (this.props.isInAudio || this.props.isInListenOnly) {
       return this.renderLeaveButton();
     }
 

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

@@ -8,6 +8,7 @@ import ActionsDropdown from './actions-dropdown/component';
 import Auth from '/imports/ui/services/auth/index';
 import Users from '/imports/api/users/index';
 import JoinAudioOptionsContainer from './audio-menu/container';
+import MuteAudioContainer from './mute-button/container';
 import { exitAudio } from '/imports/api/phone';
 
 const openJoinAudio = () => showModal(<Audio />);
@@ -27,6 +28,7 @@ export default class ActionsBar extends Component {
           <ActionsDropdown />
         </div>
         <div className={styles.center}>
+          <MuteAudioContainer />
           <JoinAudioOptionsContainer
             open={openJoinAudio.bind(this)}
             close={() => {exitAudio();}}
@@ -53,9 +55,11 @@ export default class ActionsBar extends Component {
     return (
       <div className={styles.actionsbar}>
         <div className={styles.center}>
+          <MuteAudioContainer />
           <JoinAudioOptionsContainer
             open={openJoinAudio.bind(this)}
-            close={exitAudio}
+            close={() => {exitAudio();}}
+
           />
 
           <Button
@@ -76,7 +80,7 @@ export default class ActionsBar extends Component {
 
   render() {
     const { isUserPresenter } = this.props;
-    
+
     return isUserPresenter ?
       this.renderForPresenter() :
       this.renderForUser();

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

@@ -1,26 +1,26 @@
 import React from 'react';
 import Button from '/imports/ui/components/button/component';
+import styles from '../styles.scss';
 
-export default class MuteAudioComponent extends React.Component {
+export default class MuteAudio extends React.Component {
 
   render() {
-    const { isMuted, muteUser, unmuteUser } = this.props;
-    let onClick = muteUser;
-    let label = 'Mute';
-
-    if (isMuted) {
-      onClick = unmuteUser;
-      label = 'Unmute';
-    }
+    const { isInAudio, isMuted, callback } = this.props;
+    let label = !isMuted ? 'Mute' : 'Unmute';
+    let icon = !isMuted ? 'mute' : 'unmute';
+    let className = !isInAudio ? styles.invisible : null;
+    let tabIndex = !isInAudio ? -1 : 0;
 
     return (
       <Button
-        onClick={onClick}
+        onClick={callback}
         label={label}
         color={'primary'}
-        icon={'audio'}
+        icon={icon}
         size={'lg'}
         circle={true}
+        className={className}
+        tabIndex={tabIndex}
       />
     );
   }

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

@@ -4,25 +4,35 @@ import {callServer} from '/imports/ui/services/api';
 import Button from '/imports/ui/components/button/component';
 import Users from '/imports/api/users/index';
 import Auth from '/imports/ui/services/auth/index';
-import MuteAudioComponent from './component';
+import MuteAudio from './component';
 
 class MuteAudioContainer extends React.Component {
   render() {
     return (
-      <MuteAudioComponent
-        isMuted = {this.props.isMuted}
-        muteUser = {this.props.muteUser}
-        unmuteUser = {this.props.unmuteUser}
-      />
+      <MuteAudio {...this.props} />
     );
   }
 }
 
 export default createContainer((params) => {
+  const userId = Auth.userID;
+  const user = Users.findOne({ userId: userId }).user;
+  const isMuted = user.voiceUser.muted;
+  const isInAudio = user.voiceUser.joined;
+  let callback = () => {};
+
+  if (isInAudio && !isMuted) {
+    callback = () => callServer('muteUser', userId);
+  }
+
+  if (isInAudio && isMuted) {
+    callback = () => callServer('unmuteUser', userId);
+  }
+
   const data = {
-    isMuted: Users.findOne({ userId: Auth.userID }).user.voiceUser.muted,
-    muteUser: () => callServer('muteUser', Auth.userID),
-    unmuteUser: () => callServer('unmuteUser', Auth.userID),
+    isInAudio,
+    isMuted,
+    callback,
   };
   return data;
 }, MuteAudioContainer);

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

@@ -26,3 +26,7 @@
 .center {
   flex: 1;
 }
+
+.invisible {
+  visibility: hidden;
+}

bigbluebutton-html5/imports/ui/components/audio-modal/listen-only/component.jsx

@@ -3,7 +3,6 @@ import Button from '/imports/ui/components/button/component';
 import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import styles from '../styles.scss';
-
 import StreamVolume from '/imports/ui/components/stream-volume/component';
 import SpeakerSource from '/imports/ui/components/speaker-source/component';
 import AudioTestContainer from '/imports/ui/components/audio-test/container';
@@ -33,7 +32,7 @@ export default class ListenOnly extends React.Component {
             onClick={this.chooseAudio}
           />
           <div>
-            Listen only message
+            Choose your listen only settings
           </div>
         </div>
         <div>

bigbluebutton-html5/imports/ui/components/enter-audio/component.jsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import Button from '/imports/ui/components/button/component';
-import styles from '../settings/styles.scss';
-
-export default class EnterAudio extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={styles.half}>
-        Please note, a dialog will appear in your browser,
-        requiring you to accept sharing your microphone.
-        <br />
-        <img src='resources/images/allow-mic.png' alt='allow microphone image' width='100%'/>
-        <br />
-        <Button className={styles.enterBtn}
-          label={'Enter Session'}
-          size={'md'}
-          color={'primary'}
-          onClick={this.props.handleJoin}
-        />
-      </div>
-    );
-  }
-};
+import React from 'react';
+import Button from '/imports/ui/components/button/component';
+import styles from '../settings/styles.scss';
+
+export default class EnterAudio extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className={styles.half}>
+        Please note, a dialog will appear in your browser,
+        requiring you to accept sharing your microphone.
+        <br />
+        <img src='resources/images/allow-mic.png' alt='allow microphone image' width='100%'/>
+        <br />
+        <Button className={styles.enterBtn}
+          label={'Enter Session'}
+          size={'md'}
+          color={'primary'}
+          onClick={this.props.handleJoin}
+        />
+      </div>
+    );
+  }
+};

bigbluebutton-html5/imports/ui/components/enter-audio/container.jsx

@@ -1,22 +1,26 @@
-import React, { Component, PropTypes } from 'react';
-import { createContainer } from 'meteor/react-meteor-data';
-import {joinListenOnly, joinMicrophone} from '/imports/api/phone';
-import EnterAudio from './component';
-
-export default class EnterAudioContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      isFullAudio,
-    } = this.props;
-
-    let handleJoin = () => isFullAudio ? joinMicrophone() : joinListenOnly();
-
-    return (
-      <EnterAudio handleJoin={handleJoin} />
-    );
-  }
-}
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import {joinListenOnly, joinMicrophone} from '/imports/api/phone';
+import { clearModal } from '/imports/ui/components/app/service';
+import EnterAudio from './component';
+
+export default class EnterAudioContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      isFullAudio,
+    } = this.props;
+
+    let handleJoin = () => {
+      clearModal();
+      return isFullAudio ? joinMicrophone() : joinListenOnly();
+    };
+
+    return (
+      <EnterAudio handleJoin={handleJoin} />
+    );
+  }
+}