Worked on room page. Added title, artist, duration, volume slider, seekerbar, image and room title.

app/client/scripts/events.js

@@ -1511,10 +1511,10 @@ Template.room.onCreated(function () {
     Session.set("reportAudio", false);
     Session.set("reportAlbumart", false);
     Session.set("reportOther", false);
-    if (resizeSeekerbarInterval !== undefined) {
+    /*if (resizeSeekerbarInterval !== undefined) {
         Meteor.clearInterval(resizeSeekerbarInterval);
         resizeSeekerbarInterval = undefined;
-    }
+    }*/
     YTPlayer = undefined;
     Session.set("videoHidden", false);
     var tag = document.createElement("script");

app/client/stylesheets/app.css

@@ -9,10 +9,6 @@ main {
     flex: 1 0 auto;
 }
 
-main h3{
-    margin-left: 10px;
-}
-
 main h4.thin{
     margin-left: 10px;
 }

app/client/templates/room.html

@@ -1,40 +1,53 @@
 <template name="room">
     {{> alerts}}
     {{#if loaded}}
-      <header>
-        <nav>
-          <div class="nav-wrapper teal accent-4">
-            <ul class="left hide-on-med-and-down">
-              <li><a href="/"><i class="material-icons">home</i></a></li>
-              <li><a href="#add_song_modal"><i class="material-icons">playlist_add</i></a></li>
-              <li><a href="#bug_report_modal"><i class="material-icons">bug_report</i></a></li>
-              <li><a href="#vote_to_skip" id="skip_vote"><i class="material-icons">skip_next</i></a></li>
-            </ul>
-            <ul class="right hide-on-med-and-down">
-              <li><a href="#"><i class="material-icons">queue_music</i></a></li>
-              <li><a href="#"><i class="material-icons">chat</i></a></li>
-            </ul>
-          </div>
-        </nav>
-      </header>
+        <header>
+            <nav>
+                <div class="nav-wrapper teal accent-4">
+                    <ul class="left hide-on-med-and-down">
+                        <li><a href="/"><i class="material-icons">home</i></a></li>
+                        <li><a href="#add_song_modal"><i class="material-icons">playlist_add</i></a></li>
+                        <li><a href="#bug_report_modal"><i class="material-icons">bug_report</i></a></li>
+                        <li><a href="#vote_to_skip" id="skip_vote"><i class="material-icons">skip_next</i></a></li>
+                    </ul>
+                    <span class="brand-logo center">{{type}}</span>
+                    <ul class="right hide-on-med-and-down">
+                        <li><a href="#"><i class="material-icons">queue_music</i></a></li>
+                        <li><a href="#"><i class="material-icons">chat</i></a></li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
 
-      <main>
-        <div class="container">
-          <div class="row">
-            <div class="col s12 m10 l8 offset-l2 offset-m1" id="media-container">
-              <div class="video-container">
-                <div id="player"></div>
-              </div>
-              <div class="media-info-container">
+        <main>
+            <div class="container">
                 <div class="row">
-                  <div class="s4">
-                    Hello
-                  </div>
+                    <div class="col s12 m10 l8 offset-l2 offset-m1" id="media-container">
+                        <div class="video-container">
+                            <div id="player"></div>
+                        </div>
+                    </div>
+                    <div class="col s12 m10 l8 offset-l2 offset-m1">
+                        <div class="row">
+                            <div class="col s12 m12 l8">
+                                <h3>{{{title}}} - {{{artist}}}</h3>
+                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
+                                <div class="row">
+                                    <form action="#" class="col s4 m4 l4">
+                                        <p class="range-field" style="margin-top: 0">
+                                            <input type="range" id="volume_slider" min="0" max="100" />
+                                        </p>
+                                    </form>
+                                </div>
+                                <div class="seeker-bar-container white" id="preview-progress">
+                                    <div class="seeker-bar teal" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <img alt="Not loading" class="song-img col s12 m12 l4" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
-        </div>
-      </main>
+        </main>
     {{/if}}
 </template>