added static seeker bar to room template

app/app.css

@@ -345,3 +345,23 @@ footer a:hover{
   display: block;
   text-align: center;
 }
+.room-name{
+  font-size: 3.5em;
+  color: white;
+  font-weight: 600;
+  text-align: center;
+}
+.player{
+  width: 100%;
+  height: 60px;
+  border-top: 2px solid white;
+  position: absolute;
+  bottom: 0;
+}
+.seeker-bar{
+  width: 60%;
+  height: 5px;
+  margin: auto;
+  margin-top: 30px;
+  background-color: black;
+}

app/app.html

@@ -51,7 +51,7 @@
 <template name="dashboard">
   <div class="landing">
     <div class="station">
-      
+
     </div>
 
     <ul class="bg-bubbles">
@@ -81,7 +81,7 @@
 </template>
 
 
-<template name="Home">
+<template name="home">
     {{#if currentUser}}
     <div id="dashboard">
       {{> dashboard}}
@@ -94,6 +94,7 @@
       <div id="register-view" style="display:none">
         {{> register}}
       </div>
+
       <ul class="bg-bubbles">
         <li></li>
         <li></li>
@@ -106,14 +107,30 @@
         <li></li>
         <li></li>
       </ul>
-      {{> footer}}
     </div>
   {{/if}}
 </template>
 
-<template name="Room">
-    <h1>{{{type}}}</h1>
-
-    <h2>{{duration}}</h2>
-    <h2>{{song}}</h2>
+<template name="room">
+  <div class="landing">
+    <h1 class="room-name">{{{type}}}</h1>
+    <h2>{{{duration}}}</h2>
+    <div class="player">
+      <div class="seeker-bar">
+        <i id="dot" class="fa fa-circle"></i>
+      </div>
+    </div>
+    <ul class="bg-bubbles">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+  </div>
 </template>

app/app.js

@@ -93,18 +93,18 @@ if (Meteor.isClient) {
         }
     });
 
-    Template.Room.helpers({
+    Template.room.helpers({
         type: function() {
-            var parts = location.href.split('/');
-            var id = parts.pop();
-            return id;
+          var parts = location.href.split('/');
+          var id = parts.pop();
+          return id.toUpperCase();
         },
-        duration: function() {
-            return Session.get("duration");
+        duration: function(){
+          return Session.get("duration");
         }
     });
-    
-    Template.Room.onCreated(function () {
+
+    Template.room.onCreated(function () {
         var currentSong = undefined;
         var _sound = undefined;
         var size = 0;
@@ -122,7 +122,8 @@ if (Meteor.isClient) {
                 SC.stream("/tracks/" + currentSong.song.id + "/", function(sound){
                     _sound = sound;
                     sound._player._volume = 0.3;
-                    sound.play();
+                    //sound.play();
+                    Session.set("duration", currentSong.song.duration);
                     setTimeout(function() { // HACK, otherwise seek doesn't work.
                         sound._player.seek(getTimeElapsed());
                     }, 500);
@@ -202,9 +203,9 @@ if (Meteor.isServer) {
 }
 
 Router.route("/", {
-    template: "Home"
+    template: "home"
 });
 
 Router.route("/:type", {
-    template: "Room"
+    template: "room"
 });