Working on room page more. Started work on chat slide in/drop down.

app/client/scripts/events.js

@@ -1204,34 +1204,6 @@ Template.room.events({
                     );
                     songs.push({title: item.snippet.title, id: item.id.videoId});
                 }
-                $("#song-results > div").click(function () {
-                    $("#search-info").hide();
-                    $("#add-info").show();
-                    var title = $(this).find("div > .song-result-title").text();
-                    for (var i in songs) {
-                        if (songs[i].title === title) {
-                            var songObj = {
-                                id: songs[i].id,
-                                title: songs[i].title,
-                                type: "youtube"
-                            };
-                            $("#title").val(songObj.title);
-                            $("#artist").val("");
-                            $("#id").val(songObj.id);
-                            getSpotifyInfo(songObj.title.replace(/\[.*\]/g, ""), function (data) {
-                                if (data.tracks.items.length > 0) {
-                                    $("#title").val(data.tracks.items[0].name);
-                                    var artists = [];
-                                    $("#img").val(data.tracks.items[0].album.images[2].url);
-                                    data.tracks.items[0].artists.forEach(function (artist) {
-                                        artists.push(artist.name);
-                                    });
-                                    $("#artist").val(artists.join(", "));
-                                }
-                            });
-                        }
-                    }
-                })
             }
         })
     },
@@ -1258,8 +1230,10 @@ Template.room.events({
         Meteor.call("shufflePlaylist", type);
     },
     "change input": function (e) {
+      console.log(e, e.target, e.target.id, "hello");
         if (e.target && e.target.id) {
             var partsOfId = e.target.id.split("-");
+            console.log(partsOfId);
             partsOfId[1] = partsOfId[1].charAt(0).toUpperCase() + partsOfId[1].slice(1);
             var camelCase = partsOfId.join("");
             Session.set(camelCase, e.target.checked);

app/client/stylesheets/app.css

@@ -201,3 +201,22 @@ textarea{
 .feedback-message{
     word-wrap: break-word;
 }
+
+.brand-logo{
+	font-weight:900;
+}
+
+.dropdown-content {
+  background-color: #FFFFFF;
+  margin: 0;
+  display: none;
+  min-width: 300px; /* Changed this to accomodate content width */
+  height: 100vh;
+	margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
+  overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
+  opacity: 0;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
+  will-change: width, height;
+}

app/client/templates/room.html

@@ -13,8 +13,36 @@
                     <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="#"><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>
                     </ul>
+                    <div id='chat' class='dropdown-content right'>
+                      <ul id="chat-ul">
+                                {{#each chat}}
+                                    {{#emojione}}
+                                        <li class="chat-message"><small class="rank-{{this.rawrank}}">{{this.rank}}</small> <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b class="bold">{{this.username}}</b></a> <span title="{{time}}" style="float: right;">{{rtime time}}</span> <br/>
+                                        {{#if this.isMentioned}}
+                                            {{#if this.curUserMention}}
+                                                <span style="background-color: lightblue">{{this.message}}</span>
+                                            {{else}}
+                                                {{this.message}}
+                                            {{/if}}
+                                        {{else}}
+                                            {{this.message}}
+                                        {{/if}}
+                                        </li>
+                                    {{/emojione}}
+                                    <hr>
+                                {{/each}}
+                            </ul>
+                            <div id="chat-input-div">
+                                {{#if currentUser}}
+                                    <textarea id="chat-input" placeholder="Type a message..."></textarea>
+                                {{else}}
+                                    <input id="chat-input" placeholder="Please register and login to chat." disabled>
+                                {{/if}}
+                                <div id="submit"><button class="btn btn-primary btn-block">Submit<i id="submit-message" class="fa fa-paper-plane-o"></i></button></div>
+                            </div>
+                    </div>
                 </div>
             </nav>
         </header>
@@ -55,26 +83,42 @@
                 </div>
             </div>
             <div id="add_song_modal" class="modal">
-              <div class="center modal-content">
+              <div class="center modal-content container">
                 <div class="row">
-                  <a class="dropdown-button btn" href="#" data-activates="type_dropdown">Select import type</a>
-                  <ul id="type_dropdown" class="dropdown-content">
-                    <li><a href="#!">Single Song</a></li>
-                    <li><a href="#!">Import Playlist</a></li>
-                  </ul>
-                </div>
-                <div class="row">
-                  <a class="dropdown-button btn" href="#" data-activates="source_dropdown">Select music source</a>
-                  <ul id="source_dropdown" class="dropdown-content">
-                    <li><a href="#!">YouTube</a></li>
-                    <li><a href="#!">SoundCloud</a></li>
-                  </ul>
+                  <form class="black-text" id="search-info">
+                    <div class="row">
+                      <div class="input-field">
+                        <select>
+                          <option value="" disabled selected>Select import type</option>
+                          <option value="singleSong">Single Song</option>
+                          <option value="importPlaylist">Import Playlist</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="input-field">
+                        <input id="song-input" type="text" class="validate">
+                        <label for="search_for_song">Search for song</label>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <a class="waves-effect waves-light btn" id="search-song"><i class="material-icons left">search</i>Search</a>
+                    </div>
+                  </form>
+                  <div id="song-results"></div>
                 </div>
                 <div class="row">
-                  <div class="input-field">
-                    <input id="search_for_song" type="text" class="validate black-text">
-                    <label for="search_for_song">Search for song</label>
-                  </div>
+                  <form class="black-text hide" id="add-info">
+                    <div class="row">
+                      <div class="input-field">
+                        <input id="song-id" type="text" class="validate">
+                        <label for="song-id">Song ID</label>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <a class="waves-effect waves-light btn" id="add-song-button"><i class="material-icons left">playlist_add</i>Request Song</a>
+                    </div>
+                  </form>
                 </div>
               </div>
 
@@ -92,8 +136,10 @@
             out_duration: 200
           });
           $(".dropdown-button").dropdown({
-            constrain_width: true
+            belowOrigin: true,
+            alignment: 'right'
           });
+          $('select').material_select();
         </script>
     {{/if}}
 </template>