Shows main setting options based on role

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx

@@ -4,7 +4,7 @@ import styles from '../styles';
 
 import { showModal } from '/imports/ui/components/app/service';
 import LogoutConfirmation from '/imports/ui/components/logout-confirmation/component';
-import Settings from '/imports/ui/components/settings/component';
+import SettingsMenuContainer from '/imports/ui/components/settings/container';
 
 import Button from '/imports/ui/components/button/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
@@ -81,7 +81,7 @@ const toggleFullScreen = () => {
   }
 };
 
-const openSettings = () => showModal(<Settings />);
+const openSettings = () => showModal(<SettingsMenuContainer  />);
 
 const openLogoutConfirmation = () => showModal(<LogoutConfirmation />);
 

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

@@ -14,29 +14,57 @@ export default class Settings extends React.Component {
   constructor(props) {
     super(props);
     this.submenus = [];
+    this.state = { activeSubmenu: 0, focusSubmenu: 0 };
   }
 
-  componentWillMount() {
-    /* activeSubmenu represents the submenu in the submenus array to be displayed to the user,
-     * initialized to 0
-     */
-    this.setState({ activeSubmenu: 0 });
-    /* focusSubmenu represents the submenu in the submenus array which currently has focus,
-     * initialized to 0
-     */
-    this.setState({ focusSubmenu: 0 });
+  renderSettings(){
+    const { isPresenter, role } = this.props;
+    this.submenus = [];
+
     this.submenus.push({ componentName: AudioMenu, tabIndex: 3,
       props: { title: 'Audio', prependIconName: 'icon-', icon: 'bbb-audio', }, });
     this.submenus.push({ componentName: VideoMenu, tabIndex: 4,
       props: { title: 'Video', prependIconName: 'icon-', icon: 'bbb-video', }, });
     this.submenus.push({ componentName: ApplicationMenu, tabIndex: 5,
       props: { title: 'Application', prependIconName: 'icon-', icon: 'bbb-application', }, });
-    this.submenus.push({ componentName: UsersMenu, tabIndex: 6,
-      props: { title: 'Participants', prependIconName: 'icon-', icon: 'bbb-user', }, });
+
+    if(isPresenter){
+        this.submenus.push({ componentName: UsersMenu, tabIndex: 6,
+          props: { title: 'Participants', prependIconName: 'icon-', icon: 'bbb-user', }, });
+    }
+
+    return(
+      <div className={styles.full} role='presentation'>
+        <div className={styles.settingsMenuLeft}>
+          <ul className={styles.settingsSubmenu} role='menu'>
+            {this.submenus.map((value, index) => (
+              <li key={index} ref={'submenu' + index} role='menuitem' tabIndex={value.tabIndex}
+                onClick={this.clickSubmenu.bind(this, index)}
+                onKeyDown={this.handleKeyDown.bind(this)}
+                onFocus={this.handleFocus.bind(this, index)}
+                className={classNames(styles.settingsSubmenuItem,
+                  index == this.state.activeSubmenu ? styles.settingsSubmenuItemActive : null)}>
+                <Icon key={index} prependIconName={value.props.prependIconName}
+                  iconName={value.props.icon} title={value.props.title}/>
+                <span className={styles.settingsSubmenuItemText}>{value.props.title}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className={styles.settingsMenuRight} role='presentation'>
+          {this.createMenu()}
+        </div>
+      </div>
+    );
   }
 
+
   createMenu() {
-    const curr = this.state.activeSubmenu === undefined ? 0 : this.state.activeSubmenu;
+    let curr = this.state.activeSubmenu === undefined ? 0 : this.state.activeSubmenu;
+
+    if(!this.submenus[curr]){
+      curr = (this.state.activeSubmenu - 1);
+    }
 
     let props = {
       title: this.submenus[curr].props.title,
@@ -174,27 +202,7 @@ export default class Settings extends React.Component {
           label: 'Cancel',
           description: 'Discart the changes and close the settings menu',
         }}>
-        <div className={styles.full} role='presentation'>
-          <div className={styles.settingsMenuLeft}>
-            <ul className={styles.settingsSubmenu} role='menu'>
-              {this.submenus.map((value, index) => (
-                <li key={index} ref={'submenu' + index} role='menuitem' tabIndex={value.tabIndex}
-                  onClick={this.clickSubmenu.bind(this, index)}
-                  onKeyDown={this.handleKeyDown.bind(this)}
-                  onFocus={this.handleFocus.bind(this, index)}
-                  className={classNames(styles.settingsSubmenuItem,
-                    index == this.state.activeSubmenu ? styles.settingsSubmenuItemActive : null)}>
-                  <Icon key={index} prependIconName={value.props.prependIconName}
-                    iconName={value.props.icon} title={value.props.title}/>
-                  <span className={styles.settingsSubmenuItemText}>{value.props.title}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className={styles.settingsMenuRight} role='presentation'>
-            {this.createMenu()}
-          </div>
-        </div>
+          {this.renderSettings()}
       </Modal>
     );
   }

bigbluebutton-html5/imports/ui/components/settings/container.jsx

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+
+import Settings from './component';
+import Service from './service';
+
+class SettingsMenuContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Settings {...this.props}>
+        {this.props.children}
+      </Settings>
+    );
+  }
+}
+
+export default createContainer(() => {
+  let data = Service.checkUserRoles();
+  return data;
+}, SettingsMenuContainer);

bigbluebutton-html5/imports/ui/components/settings/service.js

@@ -0,0 +1,17 @@
+import Users from '/imports/api/users';
+import AuthSingleton from '/imports/ui/services/auth/index.js';
+
+checkUserRoles = () => {
+  const user = Users.findOne({
+     userId: AuthSingleton.getCredentials().requesterUserId,
+   }).user;
+
+  return {
+    isPresenter: user.presenter,
+    role: user.role,
+  };
+};
+
+export default {
+  checkUserRoles,
+};