Added chat.

app/app.css

@@ -446,6 +446,25 @@ footer a:hover{
           transition-duration: 0.25s;
   font-weight: 300;
 }
+#chat-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  border: 1px solid rgba(83, 227, 166, 0.4);
+  background-color: rgba(83, 227, 166, 0.2);
+  width: 100%;
+  border-radius: 3px;
+  padding: 10px 15px;
+  margin: 1em auto 10px auto;
+  display: block;
+  text-align: left;
+  font-size: 18px;
+  color: #53e3a6;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  font-weight: 300;
+}
 .song-input-select{
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -631,4 +650,29 @@ footer a:hover{
 #return {
   display: block;
   margin: 0 auto 20px auto;
+}
+#chat {
+  margin-top: 100px;
+}
+#chat-container {
+  padding: 0;
+}
+.chat-message {
+  font-size: 20px;
+  color: #53e3a6;
+}
+#chat-ul {
+  max-height: 500px;
+  overflow-y: scroll;
+  border: 1px solid rgba(83, 227, 166, 0.4);
+}
+#submit-message {
+  background-color: #53e3a6;
+  color: white;
+}
+.chat-message:nth-child(even) {
+  background-color: white;
+}
+.chat-message:nth-child(odd) {
+  background-color: #F2F2F2;
 }

app/app.js

@@ -2,6 +2,7 @@ History = new Mongo.Collection("history");
 Playlists = new Mongo.Collection("playlists");
 Rooms = new Mongo.Collection("rooms");
 Queues = new Mongo.Collection("queues");
+Chat = new Mongo.Collection("chat");
 
 function htmlEntities(str) {
     return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
@@ -261,6 +262,10 @@ if (Meteor.isClient) {
         "click #close-modal": function(){
           $("#search-info").show();
           $("#add-info").hide();
+        },
+        "click #submit-message": function(){
+            var message = $("#chat-input").val();
+            Meteor.call("sendMessage", type, message);
         }
     });
 
@@ -290,6 +295,14 @@ if (Meteor.isClient) {
         },
         loaded: function() {
           return Session.get("loaded");
+        },
+        chat: function() {
+            var chatArr = Chat.find({type: type}).fetch();
+            if (chatArr.length === 0) {
+                return [];
+            } else {
+                return chatArr[0].messages;
+            }
         }
     });
 
@@ -330,7 +343,6 @@ if (Meteor.isClient) {
                         playerVars: {autoplay: 1, controls: 0, iv_load_policy: 3},
                         events: {
                             'onReady': function(event) {
-                                console.log("WOOH! Does it work?");
                                 event.target.playVideo();
                             }
                         }
@@ -396,6 +408,7 @@ if (Meteor.isClient) {
     });
 
     Meteor.subscribe("rooms");
+    Meteor.subscribe("chat");
 
     Template.room.onCreated(function () {
         var tag = document.createElement("script");
@@ -703,6 +716,10 @@ if (Meteor.isServer) {
         return Queues.find({});
     });
 
+    Meteor.publish("chat", function() {
+        return Chat.find({});
+    });
+
     Meteor.publish("isAdmin", function() {
         return Meteor.users.find({_id: this.userId, "profile.rank": "admin"});
     });
@@ -723,6 +740,12 @@ if (Meteor.isServer) {
             }
             return true;
         },
+        sendMessage: function(type, message) {
+            if (Chat.find({type: type}).count() === 0) {
+                Chat.insert({type: type, messages: []});
+            }
+            Chat.update({type: type}, {$push: {messages: {message: message, userid: "Kris"}}})
+        },
         addSongToQueue: function(type, songData) {
             type = type.toLowerCase();
             if (Rooms.find({type: type}).count() === 1) {

app/head.html

@@ -7,7 +7,6 @@
     <meta name=viewport content='width=700'>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
     <script type="application/javascript">
         addEventListener("load", function() {
             setTimeout(hideURLbar, 0);

app/templates/room.html

@@ -26,6 +26,22 @@
                 <button type="button" id="song-modal" class="button-nowidth col-md-4 col-sm-4 col-xs-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-4" data-toggle="modal" data-target="#myModal">Add songs</button>
             </div>
             {{> playlist}}
+
+            <div class="row" id="chat">
+                <div class="panel panel-success col-md-6 col-md-offset-3" id="chat-container">
+                    <div class="panel-heading">Chat</div>
+                    <div class="panel-body">
+                        <ul id="chat-ul">
+                            {{#each chat}}
+                                <li class="chat-message"><b class="bold">{{userid}}:</b> {{message}}</li>
+                            {{/each}}
+                        </ul>
+                        <input id="chat-input"/>
+                        <button id="submit-message" class="button-nowidth">Submit Message</button>
+                    </div>
+                </div>
+            </div>
+
             <!-- Modal -->
             <div id="myModal" class="modal fade" role="dialog">
               <div class="modal-dialog">
@@ -59,6 +75,8 @@
                         <input class="song-input" name="artist" id="artist" type="text" />
                         <label for="title" class="song-input-label">Song Title</label>
                         <input class="song-input" name="title" id="title" type="text" />
+                        <label for="img" class="song-input-label">Song Img</label>
+                        <input class="song-input" name="img" id="img" type="text" />
                         <button type="button" id="add-song-button" class="button">Add Song</button>
                     </div>
                       <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->