Merge remote-tracking branch 'origin/february_release' into february_release

Conflicts:
	app/client/stylesheets/app.css
	app/client/templates/room.html

app/client/scripts/events.js

@@ -153,8 +153,8 @@ function sendMessage() {
 }
 
 function sendMessageGlobal() {
-    var message = $("#global-chat-input").val();
-    if (!$("#global-chat-input").hasClass("disabled")) {
+    var message = $("#chat-message").val();
+    if (!$("#chat-message").hasClass("disabled")) {
         if (message.length > 0 && message[0] !== " ") {
             if (message[0] === "/") {
                 message = message.split("");
@@ -164,19 +164,15 @@ function sendMessageGlobal() {
                 var command = params.shift();
                 command = command.replace(/\r?\n|\r/g, "");
                 if (executeCommand(command, params)) {
-                    $("#global-chat-input").val("");
+                    $("#chat-message").val("");
                 } else {
-                    $("#global-chat-input").val("");
+                    $("#chat-message").val("");
                 }
             } else {
-                $("#global-chat-input").addClass("disabled");
-                $("#global-chat-input").attr("disabled", "");
                 Meteor.call("sendMessage", "global", message, function (err, res) {
                     if (res) {
-                        $("#global-chat-input").val("");
+                        $("#chat-message").val("");
                     }
-                    $("#global-chat-input").removeClass("disabled");
-                    $("#global-chat-input").removeAttr("disabled");
                 });
             }
         }
@@ -1356,9 +1352,6 @@ Template.room.events({
         Session.set("songResults", []);
         Session.set("YTImportQueue", [])
     },
-    "click #chat-tab": function () {
-        $("#chat-tab").removeClass("unread-messages");
-    },
     "click #global-chat-tab": function () {
         $("#global-chat-tab").removeClass("unread-messages");
     },
@@ -1380,46 +1373,19 @@ Template.room.events({
     "click #unlock": function () {
         Meteor.call("unlockRoom", Session.get("type"));
     },
-    "click #chat-tab": function (e) {
-        Meteor.setTimeout(function () {
-            $("#chat-ul").scrollTop(100000);
-        }, 1);
-    },
-    "click #global-chat-tab": function (e) {
-        Meteor.setTimeout(function () {
-            $("#global-chat-ul").scrollTop(100000);
-        }, 1);
-    },
     "click #submit": function () {
-        sendMessage();
-        Meteor.setTimeout(function () {
-            $("#chat-ul").scrollTop(100000);
-        }, 1000)
-    },
-    "click #global-submit": function () {
         sendMessageGlobal();
         Meteor.setTimeout(function () {
-            $("#global-chat-ul").scrollTop(100000);
+            $(".chat-ul").scrollTop(100000);
         }, 1000)
     },
-    "keyup #chat-input": function (e) {
+    "keyup #chat-message": function (e) {
         if (e.type === "keyup" && e.which === 13) {
             e.preventDefault();
-            if (!$('#chat-input').data('dropdownshown')) {
-                sendMessage();
-                Meteor.setTimeout(function () {
-                    $("#chat-ul").scrollTop(100000);
-                }, 1000)
-            }
-        }
-    },
-    "keyup #global-chat-input": function (e) {
-        if (e.type === "keyup" && e.which === 13) {
-            e.preventDefault();
-            if (!$('#global-chat-input').data('dropdownshown')) {
+            if (!$('#chat-message').data('dropdownshown')) {
                 sendMessageGlobal();
                 Meteor.setTimeout(function () {
-                    $("#global-chat-ul").scrollTop(100000);
+                    $(".chat-ul").scrollTop(100000);
                 }, 1000)
             }
         }
@@ -1608,6 +1574,11 @@ Template.room.events({
         $("#select_single").attr("selected", true);
         $("#search-info").show();
         $("#playlist-import").hide();
+    },
+    "click #admin-dropdown a": function(){
+        Meteor.setTimeout(function(){
+            $(".dropdown-button").click();
+        }, 1);
     }
 });
 // Settings Template

app/client/scripts/onCreated.js

@@ -345,6 +345,30 @@ Template.room.onCreated(function () {
             }, 500)
         }
     });
+    Meteor.setTimeout(function(){
+        $("#chat-slideout").on("click", function(e){
+            $("#chat-slideout").attr("disabled", true);
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            $(".chat-ul").scrollTop(1000000);
+            $(".container").css("margin-right", "370px")
+            if($("#slide-out").css("right") === "0px"){
+                $(".container").css("margin-right", marginRightWidth);
+            }
+        });
+        $("body").on("click", function(){
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            var interval = Meteor.setInterval(function(){
+                if($("#slide-out").css("right") < "0px"){
+                    $(".container").css("margin-right", marginRightWidth);
+                    Meteor.clearInterval(interval);
+                }
+            }, 10);
+        });
+        $(window).on("resize", function(){
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            $(".container").css("margin-right", marginRightWidth);
+        })
+    }, 1000);
 });
 
 Template.settings.onCreated(function() {

app/client/scripts/routes.js

@@ -95,6 +95,10 @@ Router.route("/project", {
     template: "project"
 })
 
+Router.route("/donate", {
+    template: "donate"
+})
+
 Router.route("/admin", {
     waitOn: function() {
         return [Meteor.subscribe("isModerator", Meteor.userId()), Meteor.subscribe("isAdmin", Meteor.userId())];

app/client/stylesheets/app.css

@@ -38,6 +38,14 @@ textarea{
     color: white;
 }
 
+hr{
+    margin: 0;
+}
+
+.container{
+    transition: all 0.1s;
+}
+
 .brand-logo {
     margin-left: 10px;
     font-weight: 300 !important;
@@ -176,6 +184,11 @@ textarea{
     overflow: hidden;
 }
 
+#time-display{
+    margin-top: 30px;
+    float: right;
+}
+
 #preview-time {
     margin-top: -9px;
 }
@@ -283,6 +296,58 @@ textarea{
     vertical-align: middle;
 }
 
+#sidenav-overlay{
+    background-color: initial !important;
+    z-index: 0 !important;
+}
+
+.room-slideout{
+    top: 64px;
+    height: 100%;
+}
+
+.room-slideout h5{
+    text-align: center;
+    background-color: #028A77 !important;
+    margin: 0;
+    color: white;
+}
+
+.chat-ul{
+    height: 70%;
+    overflow-y: scroll;
+}
+
+.chat-message:hover{
+    background-color: white !important;
+}
+
+.chat-message small{
+    float: left;
+}
+
+.chat-message a{
+    width: 50px;
+    height: 50px;
+}
+
+#submit{
+    color: white;
+    height: 36px;
+    line-height: 36px;
+    margin: 0 10px !important;
+}
+
+@media screen and (max-width: 990px){
+    .card i{
+        line-height: 1.8em;
+    }
+}
+
+.vote_count {
+  vertical-align: middle;
+}
+
 .dropdown-content {
     z-index: 5 !important;
 }

app/client/templates/donate.html

@@ -0,0 +1,51 @@
+<template name="donate">
+    {{> header}}
+    <div class="container">
+        <div class="row">
+            <h1 class="center-align
+            ">Why to donate?</h1>
+            <div class="col s12 m4">
+                <div class="icon-block">
+                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h5 class="center">Curabitur vitae malesuada quam</h5>
+
+                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
+                </div>
+            </div>
+
+            <div class="col s12 m4">
+                <div class="icon-block">
+                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h5 class="center">Curabitur vitae malesuada quam</h5>
+
+                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
+                </div>
+            </div>
+
+            <div class="col s12 m4">
+                <div class="icon-block">
+                    <h2 class="center teal-text text-accent-4"><i class="material-icons">grade</i></h2>
+                    <h5 class="center">Curabitur vitae malesuada quam</h5>
+
+                    <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim ex orci, at viverra justo volutpat non. Nunc eu sapien fermentum, ullamcorper est at, porta enim. Vivamus vehicula dolor sodales purus volutpat, sed suscipit libero condimentum. Suspendisse potenti. Maecenas vestibulum diam ex, vel semper ante varius sit amet. Integer sit amet imperdiet dolor. Quisque sed sagittis dolor. Morbi bibendum hendrerit velit, a ultrices mauris volutpat in. Nam porta, risus ut molestie cursus, neque ipsum hendrerit sapien, id rutrum odio ex molestie mauris. Nullam eleifend tempor dictum. Donec et commodo nisl, non tincidunt odio. Nunc aliquam sollicitudin urna, non dignissim felis interdum id. Pellentesque facilisis sagittis diam, in convallis lectus euismod at.</p>
+                </div>
+            </div>
+        </div>
+        <br />
+        <div class="row center">
+            <a href="#stripeModal" class="btn-large waves-effect waves-light teal accent-4">I want to Donate!</a>
+            <p>By donating to musare.com you agree to the <a href="/terms">TERMS OF SERVICE</a> and <a href="/privacy">PRIVACY POLICY!</a> (Make sure you read it!)</p>
+        </div>
+    </div>
+    {{> footer}}
+
+    <div id="stripeModal" class="modal">
+
+    </div>
+    <script>
+        $(document).ready(function(){
+            // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+            $('.modal-trigger').leanModal();
+        });
+    </script>
+</template>

app/client/templates/faq.html

@@ -6,12 +6,21 @@
             <ul class="collapsible popout" data-collapsible="accordion">
                 <h5>Account Access & Login</h5>
                 <li>
-                    <div class="collapsible-header"><i class="material-icons">help</i>How do I log in or sign up?</div>
-                    <div class="collapsible-body"><p>TO ADD</p></div>
+                    <div class="collapsible-header active"><i class="material-icons">help</i>How do I log in or sign up?</div>
+                    <div class="collapsible-body">
+                        <p><b>Log in:</b>
+                        <br />
+                        You can choose to log in on Musare by going to <a href="www.musare.com/login">musare.com/login</a>
+                        <br />
+                        <b>Sign up:</b>
+                        <br />
+                        If you do not have an account, simply go directly to <a href="www.musare.com/register">musare.com/register</a>, fill out the form, then click Sign Up
+                        </p>
+                    </div>
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>What happens to my old username if I change it?</div>
-                    <div class="collapsible-body"><p>When you change your username your old username will be available for someone else to use, so choose wisely!</p></div>
+                    <div class="collapsible-body"><p>When you change your username your old username will be available for someone else to use!</p></div>
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>I cannot access my account and/or I don’t remember my password. How do I regain access to my account?</div>
@@ -27,7 +36,7 @@
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>Can I change my username?</div>
-                    <div class="collapsible-body"><p>TO ADD</p></div>
+                    <div class="collapsible-body"><p>Right now you can NOT change your username, but soon you will be able to.</p></div>
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>How can I deactivate my account?</div>
@@ -36,7 +45,7 @@
                 <h5>Chat</h5>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>Why do some people have Badges?</div>
-                    <div class="collapsible-body"><p>TO ADD</p></div>
+                    <div class="collapsible-body"><p>Badges are a way to show you what rank that user is. A, is for admin, M is for moderator. There is also some donor badges</p></div>
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>How can I add those little pictures/faces (emoji) into my chat messages?</div>
@@ -71,12 +80,20 @@
                     <div class="collapsible-body"><p>TO ADD</p></div>
                 </li>
                 <h5>Playlist</h5>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Can I create private rooms/stations??</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Can I skip a song from the playlist?</div>
+                    <div class="collapsible-body"><p>Yes, and no. You can vote on skipping a song. You can click the blue skip button. When the counter hits 3, the song will be skipped. Admins and mods can skip songs without needing to vote, but please do not ask us to skip songs.</p></div>
+                </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>I added a song but I can't find it in the Playlist, where is it?</div>
                     <div class="collapsible-body"><p>When you request a song to be added to a playlist, an admin or moderator first needs to review, edit and then either accept or deny that song.</p></div>
                 </li>
                 <li>
-                    <div class="collapsible-header active"><i class="material-icons">help</i>How can I add a song?</div>
+                    <div class="collapsible-header"><i class="material-icons">help</i>How can I add a song?</div>
                     <div class="collapsible-body"><p>You can add a song if you are logged in, by clicking on the Add Song button under the video in the station you want to add your song in. That will open up a modal where you can search search for a song by putting a search query there or by putting a link in there and clicking the Search Song button. You can then edit some more information, like the artist and title. It's helpful for us if you fill those in so we don't have to research every song, but you are not required to. You can also import playlists from YouTube.</p></div>
                 </li>
                 <h5>Social Media</h5>
@@ -84,10 +101,22 @@
                     <div class="collapsible-header"><i class="material-icons">help</i>Where else can I connect with the musare community?</div>
                     <div class="collapsible-body"><p>TO ADD</p></div>
                 </li>
-                <h5>Usage:</h5>
+                <h5>Technical</h5>
                 <li>
-                    <div class="collapsible-header"><i class="material-icons">help</i>Can I skip a song?</div>
-                    <div class="collapsible-body"><p>Yes, and no. You can vote on skipping a song. You can click the blue skip button. When the counter hits 3, the song will be skipped. Admins and mods can skip songs without needing to vote, but please do not ask us to skip songs.</p></div>
+                    <div class="collapsible-header"><i class="material-icons">help</i>Why is the song info wrong?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>The site wont load</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>I found a bug/I got an idea for the site!</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
+                </li>
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">help</i>I do not need the video playing, can I turn it off?</div>
+                    <div class="collapsible-body"><p>TO ADD</p></div>
                 </li>
                 <li>
                     <div class="collapsible-header"><i class="material-icons">help</i>Is there an API?</div>

app/client/templates/header.html

@@ -3,7 +3,7 @@
         <!-- Dropdown Structure -->
         <ul id="contributeDrop" class="dropdown-content">
             <li><a href="https://www.github.com/Musare/Musare" target="_blank" class="grey-text text-darken-4">Github</a></li>
-            <li><a href="donate.html" class="grey-text text-darken-4">Donate</a></li>
+            <li><a href="/donate" class="grey-text text-darken-4">Donate</a></li>
             <li><a href="/feedback" class="grey-text text-darken-4">Feedback</a></li>
         </ul>
         <ul id="aboutDrop" class="dropdown-content">
@@ -56,7 +56,7 @@
                             </div>
                             <div class="collapsible-body black-text">
                                 <a href="https://www.github.com/Musare/Musare" target="_blank">Github</a>
-                                <a href="donate.html">Donate</a>
+                                <a href="/donate">Donate</a>
                                 <a href="/feedback">Feedback</a>
                             </div>
                         </li>
@@ -85,8 +85,8 @@
                     </ul>
                     <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
                     <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-                    <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-                  --></ul>
+                    <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>-->
+                </ul>
             </div>
         </nav>
         <script>

app/client/templates/landing.html

@@ -7,105 +7,8 @@
         <a href="/" class="waves-effect waves-light btn">Continue without logging in</a>
     </div>
     <div class="album-art-row">
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
-        <img src="http://c.directlyrics.com/img/upload/fall-out-boy-sixth-album-cover.jpg"/>
+        {{#each songs}}
+            <img src={{img}} />
+        {{/each}}
     </div>
 </template>

app/client/templates/room.html

@@ -5,17 +5,18 @@
                 <div class="nav-wrapper teal accent-4">
                     <ul class="left hide-on-med-and-down">
                         <li><a href="/"><i class="material-icons">home</i></a></li>
-                        <li><a href="#add_song_modal" id="add-song-modal-button"><i
-                                class="material-icons">playlist_add</i></a></li>
-                        <li><a href="#report_modal" id="report-modal-button"><i class="material-icons">flag</i></a></li>
-                        <li><a href="#" id="vote-skip"><i class="material-icons">skip_next</i> <span
-                                class="new badge">{{votes}}</span></a></li>
+                        <li><a href="#add_song_modal" id="add-song-modal-button"><i class="material-icons">playlist_add</i></a></li>
+                        <li><a href="#bug_report_modal"><i class="material-icons">flag</i></a></li>
+                        <li><a href="#"><i class="material-icons left">skip_next</i>{{votes}}</a></li>
+                        {{#if isAdmin}}
+                            <li><a class='dropdown-button' data-activates='admin-dropdown'><i class="material-icons">control_point</i></a></li>
+                        {{/if}}
                     </ul>
                     <span class="brand-logo center">{{type}}</span>
                     <ul class="right hide-on-med-and-down">
                         <li><a href="#"><i class="material-icons">queue_music</i></a></li>
-                        <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a>
-                        </li>
+                        <!-- <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li> -->
+                        <li><a href="#" id="chat-slideout" data-activates="slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
                     </ul>
                     <div id='chat' class='dropdown-content right'>
                         <ul id="chat-ul">
@@ -69,9 +70,9 @@
                     <div class="col s12 m10 l8 offset-l2 offset-m1">
                         <div class="row">
                             <div class="col s12 m12 l8">
-                                <h3>{{{title}}} - {{{artist}}}</h3>
-                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span>
-                                </h4>
+                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
+                                <h3>{{{title}}}</h3>
+                                <h4 class="thin" style="margin-left: 0">{{{artist}}}</h4>
                                 <div class="row">
                                     <form action="#" class="left col s4 m4 l4">
                                         <p class="range-field" style="margin-top: 0">
@@ -95,7 +96,7 @@
                             </div>
                             <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
                                  onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
-                                 id="song-img"/>
+                                 id="song-img" style="margin-top: 10px !important"/>
                         </div>
                     </div>
                 </div>
@@ -284,6 +285,37 @@
                 </div>
             </div>
         </main>
+        <div id="slide-out" class="side-nav room-slideout">
+            <h5>Chat</h5>
+            <ul class="chat-ul">
+                {{#each globalChat}}
+                    {{#emojione}}
+                        <li class="chat-message">
+                            <span title="{{time}}" style="float: right;">{{rtime time}}</span>
+                            <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
+                            <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
+                            <p style="clear: both; line-height: initial;">{{this.message}}</p>
+                        </li>
+                    {{/emojione}}
+                    <hr>
+                {{/each}}
+            </ul>
+            <div>
+                <div class="row">
+                    <div class="input-field col s12">
+                      <input id="chat-message" type="text">
+                      <label for="chat-message">Send a message</label>
+                    </div>
+                </div>
+                <a id="submit" class="waves-effect waves-light btn">Send</a>
+            </div>
+        </div>
+        <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">
+            <li><a><i class="material-icons">pause</i></a></li>
+            <li><a><i class="material-icons">skip_next</i></a></li>
+            <li><a><i class="material-icons">shuffle</i></a></li>
+            <li><a><i class="material-icons">lock_outline</i></a></li>
+        </ul>
         <script>
             $("#add-song-modal-button").leanModal({
                 dismissible: true,
@@ -300,9 +332,13 @@
             });
             $(".dropdown-button").dropdown({
                 belowOrigin: true,
-                alignment: 'right'
+                hover: true
             });
             $('select').material_select();
+            $(".header-collapse").sideNav({
+                menuWidth: 350,
+                edge: 'right'
+            });
         </script>
     {{/if}}
 </template>

app/server/server.js

@@ -771,24 +771,7 @@ Meteor.methods({
             var time = new Date();
             var rawrank = user.profile.rank;
             var username = user.profile.username;
-            var profanity = false;
-            var mentionUsername;
-            var isCurUserMentioned;
-            if (message.indexOf("@") !== -1) {
-                var messageArr = message.split(" ");
-                for (var i in messageArr) {
-                    if (messageArr[i].indexOf("@") !== -1) {
-                        var mention = messageArr[i];
-                    }
-                }
-                Meteor.users.find().forEach(function (user) {
-                    if (mention.indexOf(user.profile.username) !== -1) {
-                        mentionUsername = true;
-                        isCurUserMentioned = Meteor.user().profile.username === user.profile.username;
-                    }
-                    ;
-                })
-            }
+            var profanity = false
             if (!message.replace(/\s/g, "").length > 0) {
                 throw new Meteor.Error(406, "Message length cannot be 0.");
             }
@@ -805,8 +788,6 @@ Meteor.methods({
                             rawrank: rawrank,
                             rank: "[A]",
                             message: message,
-                            curUserMention: isCurUserMentioned,
-                            isMentioned: mentionUsername,
                             time: time,
                             username: username
                         });
@@ -839,7 +820,7 @@ Meteor.methods({
                         Chat.insert({
                             type: type,
                             rawrank: rawrank,
-                            rank: "",
+                            rank: "[D]",
                             message: message,
                             time: time,
                             username: username