added 'users in room' slideout

app/client/scripts/helpers.js

@@ -492,6 +492,9 @@ Template.room.helpers({
     votes: function () {
         console.log(Rooms.findOne({type: Session.get("type")}).votes);
         return Rooms.findOne({type: Session.get("type")}).votes;
+    },
+    usersInRoom: function(){
+        return Rooms.findOne({type: Session.get("type")}).userList;
     }
 });
 

app/client/scripts/onCreated.js

@@ -351,6 +351,9 @@ Template.room.onCreated(function () {
             if($("#chat-slide-out").css("right") === "0px"){
                 $("#chat-slideout").sideNav("hide");
             }
+            if($("#users-slide-out").css("right") === "0px"){
+                $("#users-slideout").sideNav("hide");
+            }
             var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
             $(".room-container").css("margin-right", "370px")
             if($("#playlist-slide-out").css("right") === "0px"){
@@ -361,6 +364,9 @@ Template.room.onCreated(function () {
             if($("#playlist-slide-out").css("right") === "0px"){
                 $("#playlist-slideout").sideNav("hide");
             }
+            if($("#users-slide-out").css("right") === "0px"){
+                $("#users-slideout").sideNav("hide");
+            }
             var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
             $(".chat-ul").scrollTop(1000000);
             $(".room-container").css("margin-right", "370px")
@@ -368,6 +374,19 @@ Template.room.onCreated(function () {
                 $(".room-container").css("margin-right", marginRightWidth);
             }
         });
+        $("#users-slideout").on("click", function(){
+            if($("#playlist-slide-out").css("right") === "0px"){
+                $("#playlist-slideout").sideNav("hide");
+            }
+            if($("#chat-slide-out").css("right") === "0px"){
+                $("#chat-slideout").sideNav("hide");
+            }
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            $(".room-container").css("margin-right", "370px")
+            if($("#users-slide-out").css("right") === "0px"){
+                $(".room-container").css("margin-right", marginRightWidth);
+            }
+        });
         $("body").on("click", function(e){
 
         });

app/client/templates/room.html

@@ -15,6 +15,7 @@
                 <ul class="right hide-on-med-and-down">
                     <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Playlist" id="playlist-slideout" data-activates="playlist-slide-out" class="tooltipped header-collapse"><i class="material-icons">queue_music</i></a></li>
                     <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Chat" id="chat-slideout" data-activates="chat-slide-out" class="tooltipped header-collapse"><i class="material-icons">chat</i></a></li>
+                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Users" id="users-slideout" data-activates="users-slide-out" class="tooltipped header-collapse"><i class="material-icons">people</i></a></li>
                 </ul>
             </div>
         </nav>
@@ -93,6 +94,14 @@
         <h5>Playlist</h5>
         {{> playlist}}
     </div>
+    <div id="users-slide-out" class="side-nav room-slideout">
+        <h5>Users In Room</h5>
+        <ul>
+            {{#each usersInRoom}}
+                <li><a href=/u/{{this}} target="_blank">{{this}}</a></li>
+            {{/each}}
+        </ul>
+    </div>
     <!--Admin room controls-->
     <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
         <li><a id="pause"><i class="material-icons">pause</i></a></li>
@@ -505,6 +514,10 @@
             menuWidth: 350,
             edge: 'right'
         });
+        $("#users-slideout").sideNav({
+            menuWidth: 350,
+            edge: 'right'
+        });
         $('.tooltipped').tooltip({delay: 50});
     </script>
 </template>