Started on playlist view.

app/app.js

@@ -157,6 +157,12 @@ if (Meteor.isClient) {
           return Session.get("artist");
         }
     });
+    
+    Template.playlist.helpers({
+        playlist_songs: function() {
+            return [{title: "Foo", artist: "Bar"}, {title: "Ying", artist: "Yang"}];
+        }
+    });
 
     Template.room.onCreated(function () {
         var tag = document.createElement("script");

app/templates/playlist.html

@@ -0,0 +1,10 @@
+<template name="playlist">
+    <h4>Default Playlist</h4>
+    <ul id="playlist">
+        {{#each playlist_songs}}
+        <li class="playlist-song">
+            {{title}} - {{artist}}
+        </li>
+        {{/each}}
+    </ul>
+</template>

app/templates/room.html

@@ -6,10 +6,12 @@
         <div id="seeker-container">
             <div id="seeker-bar"></div>
         </div>
+        {{> playlist}}
         <input type="text" id="song-input">
         <button type="button" id="search-song" class="button">Search</button>
         <div id="song-results"></div>
         <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
+        
         <div width="960" height="540" id="player">
         </div>
         <ul class="bg-bubbles">