Change file names and adds status icon

bigbluebutton-html5/app/client/main.html

@@ -50,9 +50,7 @@
     {{#if isDisconnected}}
       {{>status}}
     {{else}}
-      <div class="userlistMenu">
-        <h3 class="meetingTitle">DEMO</h3>
-        <div id="users" class="component"></div>
+      <div id="userListSidebar" class="userlistMenu">
       </div>
       <div class="settingsMenu">
         {{> menu id="menu"}}

bigbluebutton-html5/app/client/main.jsx

@@ -90,7 +90,7 @@ Template.menu.events({
 });
 
 Template.main.rendered = function() {
-  ReactDOM.render(<UserListContainer />, document.getElementById("users"));
+  ReactDOM.render(<UserListContainer />, document.getElementById("userListSidebar"));
 
   let lastOrientationWasLandscape;
   $("#dialog").dialog({

bigbluebutton-html5/app/client/react/components/UserList/UserItem.jsx

@@ -1,4 +1,4 @@
-UserItem = React.createClass({
+UserItem = class UserItem extends React.Component {
   statusicons(user){
     if(user.isPresenter){
       return (
@@ -18,7 +18,7 @@ UserItem = React.createClass({
         </div>
       )
     }
-    else{
+    else if(this.props.currentUserModerator){
       return (
         <div className="status">
           <span className="setPresenter" rel="tooltip" data-placement="bottom" title={"set " + user.name + " as presenter"}>
@@ -27,7 +27,13 @@ UserItem = React.createClass({
         </div>
       )
     }
-  },
+    else{
+      return (
+        <div className="status">
+        </div>  
+      )
+    }
+  };
 
   render() {
     return (
@@ -39,4 +45,4 @@ UserItem = React.createClass({
       </div>
     );
   }
-})
+}

bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx

@@ -0,0 +1,9 @@
+UserList = class UserList extends React.Component {
+  render() {
+    return (
+      <div className="userlist ScrollableWindowY">
+        {this.props.users.map((user) => <UserItem key={user.id} user={user} currentUserModerator={this.props.currentUserModerator}/>)}
+      </div>
+    );
+  }
+}

bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx

@@ -0,0 +1,42 @@
+UserListContainer = React.createClass({
+  mixins: [ReactMeteorData],
+  getMeteorData() {
+    const currentUser = BBB.getCurrentUser();
+    const isCurrentUserModerator = currentUser.user.role === "MODERATOR";
+    const currentUserId = currentUser.userId;
+
+    console.log(currentUser);
+    return {
+      // All this mapping should be on a service and not on the component itself
+      currentUserModerator: isCurrentUserModerator,
+      users: Meteor.Users.find().fetch().map(u => u.user).map(u => {
+        return {
+          id: u.userid,
+          name: u.name,
+          isCurrent: u.userid === currentUserId,
+          isPresenter: u.presenter,
+          isModerator: u.role === "MODERATOR",
+          emoji: u.emoji_status,
+          sharingStatus: {
+            isLocked: true, //TODO: Migrate blaze logic
+            isWebcamOpen: u.webcam_stream.length,
+            isListenOnly: u.listenOnly,
+            isMuted: u.voiceUser.muted,
+            isTalking: u.voiceUser.talking
+          }
+        };
+      })
+    };
+  },
+
+  render() {
+    return (
+      <div id="users" className="component">
+        <h3 className="meetingTitle">DEMO</h3>
+        <div id="user-contents">
+          <UserList users={this.data.users} currentUserModerator={this.data.currentUserModerator}/>
+        </div>
+      </div>
+    );
+  }
+})

bigbluebutton-html5/app/client/react/components/userList/userList.jsx

@@ -1,9 +0,0 @@
-UserList = React.createClass({
-  render() {
-    return (
-      <div className="userlist ScrollableWindowY">
-        {this.props.users.map((user) => <UserItem user={user}/>)}
-      </div>
-    );
-  }
-})

bigbluebutton-html5/app/client/react/components/userListContainer.jsx

@@ -1,37 +0,0 @@
-UserListContainer = React.createClass({
-  mixins: [ReactMeteorData],
-  getMeteorData() {
-    const currentUserId = BBB.getCurrentUser().userId;
-
-    return {
-      // All this mapping should be on a service and not on the component itself
-      users: Meteor.Users.find()
-        .fetch()
-        .map(u => u.user)
-        .map(u => {
-          return {
-            name: u.name,
-            isCurrent: u.userid === currentUserId,
-            isPresenter: u.presenter,
-            isModerator: u.role === "MODERATOR",
-            emoji: u.emoji_status,
-            sharingStatus: {
-              isLocked: true, //TODO: Migrate blaze logic
-              isWebcamOpen: u.webcam_stream.length,
-              isListenOnly: u.listenOnly,
-              isMuted: u.voiceUser.muted,
-              isTalking: u.voiceUser.talking,
-            }
-          };
-        })
-    };
-  },
-
-  render() {
-    return (
-      <div id="user-contents">
-        <UserList users={this.data.users}/>
-      </div>
-    );
-  }
-})