started to work on playlist view

app/client/scripts/events.js

@@ -295,12 +295,14 @@ Template.playlist.events({
         } else {
             $(".pl-item").hide();
             var input = $("#search-playlist").val().toLowerCase();
-            $(".pl-item strong").each(function(i, el){
+            $(".pl-item .pl-title").each(function(i, el){
+                console.log($(el).text());
                 if($(el).text().toLowerCase().indexOf(input) !== -1){
                     $(el).parent(".pl-item").show();
                 }
             })
             $(".pl-item #pl-artist").each(function(i, el){
+                console.log($(el).text());
                 if($(el).text().toLowerCase().indexOf(input) !== -1){
                     $(el).parent(".pl-item").show();
                 }

app/client/scripts/helpers.js

@@ -118,9 +118,9 @@ Template.playlist.helpers({
         parts = location.href.split('/');
         id = parts.pop();
         type = id.toLowerCase();
-        var data = Playlists.findOne({type: type});
+        var data = Songs.find({"genres": type}).fetch();
         if (data !== undefined) {
-            data.songs.map(function (song) {
+            data.map(function (song) {
                 if (Session.get("currentSong") !== undefined && song.mid === Session.get("currentSong").mid) {
                     song.current = true;
                 } else {
@@ -128,7 +128,7 @@ Template.playlist.helpers({
                 }
                 return song;
             });
-            return data.songs;
+            return data;
         } else {
             return [];
         }

app/client/stylesheets/app.css

@@ -363,6 +363,16 @@ hr{
     overflow-y: scroll;
 }
 
+.pl-item:hover{
+    background-color: inherit;
+}
+
+.pl-title{
+    margin: 0;
+    font-size: 1.4em;
+    line-height: 25px;
+}
+
 /*Media queries stay on the bottom*/
 @media screen and (max-width: 990px){
     .card i{

app/client/templates/playlist.html

@@ -1,12 +1,21 @@
 <template name="playlist">
-    <input type="text" id="search-playlist" placeholder="Search playlist..."  onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search playlist...'" />
+    <div class="input-field">
+        <input type="text" id="search-playlist" style="padding-right: 10px;"/>
+        <label for="search-playlist">Search playlist by song/artist</label>
+    </div>
     <ul id="playlist-ul">
       {{#each playlist_songs}}
+        {{#if current}}
+            <li style="color: rgb(107, 197, 164) !important" class="pl-item">
+                <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
+                <p class="pl-title">{{title}}</p>
+                <p id="pl-artist" style="margin-top: -10px">{{artist}}</p>
+            </li>
+        {{/if}}
         <li class="pl-item">
-            {{#if current}}<i class="fa fa-arrow-right" id="current-arrow"></i>{{/if}}
-            <p style="float:right;padding-right:10px;font-weight:900">{{formatTime duration}}</p>
-            <strong>{{title}}</strong>
-            <p id="pl-artist">{{artist}}</p>
+            <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
+            <p class="pl-title">{{title}}</p>
+            <p id="pl-artist" style="margin-top: -10px">{{artist}}</p>
         </li>
       {{/each}}
     </ul>

app/client/templates/room.html

@@ -92,6 +92,7 @@
     <!--Playlist slideout-->
     <div id="playlist-slide-out" class="side-nav room-slideout">
         <h5>Playlist</h5>
+        {{> playlist}}
     </div>
     <!--Admin room controls-->
     <ul id='admin-dropdown' style="background-color: #00bfa5 !important; display: none">