Merge remote-tracking branch 'origin/master'

Conflicts:
	app/client/app.css

app/client/app.css

@@ -892,12 +892,12 @@ footer .fa {
 }
 
 ul#playlist{
-    margin-top: 10px;
+    margin-top: 50px;
+    padding-left: 5px;
 }
 
 #playlist {
     margin: 0;
-    padding: 0 0 0 5px;
     color: white;
     font-size: 21px;
     max-height: 100%;
@@ -1212,6 +1212,23 @@ nav form input[type="image"]{
     background-color: transparent;
     color:#ffffff;
 }
+#doorbell-button{
+    margin-right: 30em;
+}
+#search-playlist{
+    position: absolute;
+    outline: 0;
+    border: none;
+    border-bottom: 3px solid rgba(255, 255, 255, 0.4);
+    background-color: #50a3a2;
+    width: 100%;
+    padding: 10px 15px;
+    margin: 0 auto 10px auto;
+    display: block;
+    text-align: center;
+    font-size: 18px;
+    color: white;
+}
 
 /* https://css-tricks.com/custom-scrollbars-in-webkit/ */
 

app/client/client.js

@@ -915,6 +915,22 @@ Template.playlist.helpers({
     }
 });
 
+Template.playlist.events({
+    "keyup #search-playlist": function(){
+        console.log($("#search-playlist").val());
+        if($("#search-playlist").val().length === 0){
+            $(".pl-item").show();
+        } else {
+            $(".pl-item").hide();
+            var input = $("#search-playlist").val().toLowerCase();
+            $(".pl-item strong").each(function(i, el){
+                if($(el).text().toLowerCase().indexOf(input) !== -1){
+                    $(el).parent(".pl-item").show();
+                }
+            })
+        }
+    }
+})
 
 Meteor.subscribe("rooms");
 

app/client/templates/playlist.html

@@ -1,7 +1,8 @@
 <template name="playlist">
+    <input type="text" id="search-playlist" placeholder="Search for a song..."  onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search playlist...'" />
     <ul id="playlist">
       {{#each playlist_songs}}
-        <li>
+        <li class="pl-item">
             {{#if current}}<i class="fa fa-arrow-right"></i>{{/if}}
             <p style="float:right;padding-right:10px;font-weight:900">{{formatTime duration}}</p>
             <strong>{{title}}</strong>