improved the playlist view

app/client/scripts/helpers.js

@@ -115,9 +115,9 @@ Template.home.helpers({
 
 Template.playlist.helpers({
     playlist_songs: function () {
-        parts = location.href.split('/');
-        id = parts.pop();
-        type = id.toLowerCase();
+        var parts = location.href.split('/');
+        var id = parts.pop();
+        var type = id.toLowerCase();
         var data = Songs.find({"genres": type}).fetch();
         if (data !== undefined) {
             data.map(function (song) {
@@ -132,6 +132,22 @@ Template.playlist.helpers({
         } else {
             return [];
         }
+    },
+    currentSong: function(){
+        var parts = location.href.split('/');
+        var id = parts.pop();
+        var type = id.toLowerCase();
+        var data = Songs.find({"genres": type}).fetch();
+        for(var i = 0; i < data.length; i++){
+            if(data[i].mid === Session.get("currentSong").mid){
+                if(i === data.length - 1){
+                    Session.set("nextSong", [data[0]]);
+                } else{
+                    Session.set("nextSong", [data[i+1]]);
+                }
+            }
+        };
+        return Session.get("nextSong");
     }
 });
 

app/client/stylesheets/app.css

@@ -363,8 +363,8 @@ hr{
     overflow-y: scroll;
 }
 
-.pl-item:hover{
-    background-color: inherit;
+.pl-item{
+    pointer-events: none;
 }
 
 .pl-title{

app/client/templates/playlist.html

@@ -1,22 +1,26 @@
 <template name="playlist">
     <div class="input-field">
-        <input type="text" id="search-playlist" style="padding-right: 10px;"/>
+        <input type="text" id="search-playlist" style="padding-left: 10px;"/>
         <label for="search-playlist">Search playlist by song/artist</label>
     </div>
+    <ul style="max-height: 65%; overflow-y: scroll">
+        {{#each currentSong}}
+            <p style="margin: -20px 0 0 15px; font-weight: 300;">Up Next</p>
+            <li class="pl-item" style="color: rgb(107, 197, 164) !important;">
+                <img src={{img}} style="width: 80px; float: left; margin: 0 10px 10px 0;">
+                <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
+                <p class="pl-title" style="font-size: 1.2em">{{title}}</p>
+                <p id="pl-artist" style="margin-top: -20px; font-size: 0.7em">{{artist}}</p>
+            </li>
+        {{/each}}
+    </ul>
     <ul id="playlist-ul">
-      {{#each playlist_songs}}
-        {{#if current}}
-            <li style="color: rgb(107, 197, 164) !important" class="pl-item">
+        {{#each playlist_songs}}
+            <li class="pl-item" style="clear: both">
                 <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">
-            <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}}
+        {{/each}}
     </ul>
 </template>

app/client/templates/room.html

@@ -13,8 +13,8 @@
                 </ul>
                 <span class="brand-logo center">{{type}}</span>
                 <ul class="right hide-on-med-and-down">
-                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Open playlist" id="playlist-slideout" data-activates="playlist-slide-out" class="tooltipped header-collapse"><i class="material-icons">queue_music</i></a></li>
-                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Open chat" id="chat-slideout" data-activates="chat-slide-out" class="tooltipped header-collapse"><i class="material-icons">chat</i></a></li>
+                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Playlist" id="playlist-slideout" data-activates="playlist-slide-out" class="tooltipped header-collapse"><i class="material-icons">queue_music</i></a></li>
+                    <li><a href="#" data-position="bottom" data-delay="50" data-tooltip="Chat" id="chat-slideout" data-activates="chat-slide-out" class="tooltipped header-collapse"><i class="material-icons">chat</i></a></li>
                 </ul>
             </div>
         </nav>