Merge pull request #3730 from KDSBrowne/action-buttons-center

Actions Bar Positioning

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

@@ -18,17 +18,17 @@ const intlMessages = defineMessages({
 class JoinAudioOptions extends React.Component {
   render() {
     const {
-      close,
       intl,
       isInAudio,
       isInListenOnly,
-      open,
+      handleJoinAudio,
+      handleCloseAudio,
     } = this.props;
 
     if (isInAudio || isInListenOnly) {
       return (
         <Button
-          onClick={close}
+          onClick={handleCloseAudio}
           label={intl.formatMessage(intlMessages.leaveAudio)}
           color={'danger'}
           icon={'audio_off'}
@@ -40,7 +40,7 @@ class JoinAudioOptions extends React.Component {
 
     return (
       <Button
-        onClick={open}
+        onClick={handleJoinAudio}
         label={intl.formatMessage(intlMessages.joinAudio)}
         color={'primary'}
         icon={'audio_on'}

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

@@ -20,7 +20,7 @@ export default createContainer((params) => {
   return {
     isInAudio: user.voiceUser.joined,
     isInListenOnly: user.listenOnly,
-    open: params.open,
+    handleJoinAudio: params.handleJoinAudio,
-    close: params.close,
+    handleCloseAudio: params.handleCloseAudio,
   };
 }, JoinAudioOptionsContainer);

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

@@ -1,15 +1,10 @@
 import React, { Component, PropTypes } from 'react';
-import { showModal } from '/imports/ui/components/app/service';
-import Audio from '/imports/ui/components/audio-modal/component';
 import Button from '/imports/ui/components/button/component';
 import styles from './styles.scss';
 import EmojiContainer from './emoji-menu/container';
 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';
 import JoinVideo from './video-button/component';
 
 export default class ActionsBar extends Component {
@@ -17,10 +12,6 @@ export default class ActionsBar extends Component {
     super(props);
   }
 
-  openJoinAudio() {
-    return showModal(<Audio handleJoinListenOnly={this.props.handleJoinListenOnly} />)
-  }
-
   renderForPresenter() {
     return (
       <div className={styles.actionsbar}>
@@ -30,14 +21,15 @@ export default class ActionsBar extends Component {
         <div className={styles.center}>
           <MuteAudioContainer />
           <JoinAudioOptionsContainer
-            open={this.openJoinAudio.bind(this)}
+            handleJoinAudio={this.props.handleOpenJoinAudio}
-            close={() => {exitAudio();}}
+            handleCloseAudio={this.props.handleExitAudio}
 
           />
           {/*<JoinVideo />*/}
           <EmojiContainer />
         </div>
-        <div className={styles.right}>
+        <div className={styles.hidden}>
+          <ActionsDropdown />
         </div>
       </div>
     );
@@ -49,15 +41,13 @@ export default class ActionsBar extends Component {
         <div className={styles.center}>
           <MuteAudioContainer />
           <JoinAudioOptionsContainer
-            open={this.openJoinAudio.bind(this)}
+            handleJoinAudio={this.props.handleOpenJoinAudio}
-            close={() => {exitAudio();}}
+            handleCloseAudio={this.props.handleExitAudio}
 
           />
           {/*<JoinVideo />*/}
           <EmojiContainer />
         </div>
-        <div className={styles.right}>
-        </div>
       </div>
     );
   }

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

@@ -1,8 +1,7 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import ActionsBar from './component';
 import Service from './service';
-import { joinListenOnly } from '/imports/api/phone';
 
 class ActionsBarContainer extends Component {
   constructor(props) {
@@ -10,19 +9,23 @@ class ActionsBarContainer extends Component {
   }
 
   render() {
-    const handleJoinListenOnly = () => joinListenOnly();
-
     return (
       <ActionsBar
-       handleJoinListenOnly={handleJoinListenOnly}
+        {...this.props}>
-      {...this.props}>
+          {this.props.children}
-        {this.props.children}
       </ActionsBar>
     );
   }
 }
 
 export default createContainer(() => {
-  let data = Service.isUserPresenter();
+  const isPresenter = Service.isUserPresenter();
-  return data;
+  const handleExitAudio = () => Service.handleExitAudio();
+  const handleOpenJoinAudio = () => Service.handleJoinAudio();
+
+  return {
+    isUserPresenter: isPresenter,
+    handleExitAudio: handleExitAudio,
+    handleOpenJoinAudio: handleOpenJoinAudio,
+  };
 }, ActionsBarContainer);

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

@@ -6,10 +6,13 @@ export default class MuteAudio extends React.Component {
 
   render() {
     const { isInAudio, isMuted, callback, isTalking} = this.props;
+
+    if (!isInAudio) return null;
+    
     let label = !isMuted ? 'Mute' : 'Unmute';
     let icon = !isMuted ? 'unmute' : 'mute';
-    let className = !isInAudio ? styles.invisible : null;
     let tabIndex = !isInAudio ? -1 : 0;
+    let className = null;
 
     if (isInAudio && isTalking) {
       className = styles.circleGlow;

bigbluebutton-html5/imports/ui/components/actions-bar/service.js

@@ -1,5 +1,9 @@
 import AuthSingleton from '/imports/ui/services/auth/index.js';
 import Users from '/imports/api/users';
+import { joinListenOnly } from '/imports/api/phone';
+import { showModal } from '/imports/ui/components/app/service';
+import { exitAudio } from '/imports/api/phone';
+import Audio from '/imports/ui/components/audio-modal/component';
 
 let isUserPresenter = () => {
 
@@ -13,6 +17,17 @@ let isUserPresenter = () => {
   };
 };
 
+const handleExitAudio = () => {
+  return exitAudio();
+}
+
+const handleJoinAudio = () => {
+  const handleJoinListenOnly = () => joinListenOnly();
+  return showModal(<Audio handleJoinListenOnly={handleJoinListenOnly} />);
+}
+
 export default {
   isUserPresenter,
+  handleJoinAudio,
+  handleExitAudio,
 };

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

@@ -7,7 +7,8 @@
 
 .left,
 .right,
-.center {
+.center,
+.hidden {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -19,7 +20,8 @@
 }
 
 .left,
-.right {
+.right,
+.hidden {
   flex: 0;
 }
 
@@ -27,7 +29,7 @@
   flex: 1;
 }
 
-.invisible {
+.hidden {
   visibility: hidden;
 }