Added option to see YouTube video.

app/app.css

@@ -513,6 +513,10 @@ footer a:hover{
   cursor: pointer;
 }
 #player {
+  margin-left: auto;
+  margin-right: auto;
+}
+.hidden {
   visibility: hidden;
   height: 0;
 }
@@ -678,4 +682,7 @@ footer a:hover{
 }
 .admin-queue-panel:first-child {
   margin-top: 100px;
+}
+#songs {
+  margin-bottom: 20px;
 }

app/app.js

@@ -207,6 +207,19 @@ if (Meteor.isClient) {
                 console.log(err, res);
             });
         },
+        "click #toggle-video": function(e){
+            e.preventDefault();
+            Session.set("videoShown", !Session.get("videoShown"))
+            if (Session.get("videoShown")) {
+                $("#player").removeClass("hidden");
+                $("#toggle-video").text("Hide video");
+                var player = document.getElementById("player");
+                player.style.height = (player.offsetWidth / 16 * 9) + "px";
+            } else {
+                $("#player").addClass("hidden");
+                $("#toggle-video").text("Show video");
+            }
+        },
         "click #return": function(e){
             $("#add-info").hide();
             $("#search-info").show();
@@ -313,6 +326,13 @@ if (Meteor.isClient) {
         }
     });
 
+    Template.room.onRendered(function() {
+        $(window).resize(function() {
+            var player = document.getElementById("player");
+            player.style.height = (player.offsetWidth / 16 * 9) + "px";
+        });
+    });
+
     Template.room.helpers({
         type: function() {
           var parts = location.href.split('/');
@@ -464,6 +484,7 @@ if (Meteor.isClient) {
     Meteor.subscribe("chat");
 
     Template.room.onCreated(function () {
+        Session.set("videoShown", false);
         var tag = document.createElement("script");
         tag.src = "https://www.youtube.com/iframe_api";
         var firstScriptTag = document.getElementsByTagName('script')[0];

app/templates/room.html

@@ -3,26 +3,30 @@
     <div class="landing">
         {{#if loaded}}
             <h1 class="room-name">{{{type}}}</h1>
-            <div class="row">
+            <div class="row" id="songs">
                 <div class="col-md-3 col-sm-6 col-xs-12" id="s1">
                     <img class="song-img" id="song-img"/>
                     <h2 class="room-title">{{{title}}}</h2>
                     <h2 class="room-artist">{{{artist}}}</h2>
                 </div>
-                <div class="col-md-3 col-sm-6 col-xs-12" id="s2">
+                <div class="col-md-3 col-sm-6" id="s2">
                     <img class="song-img" id="song-img-next"/>
                     <h2 class="room-title">{{{title_next}}}</h2>
                     <h2 class="room-artist">{{{artist_next}}}</h2>
                 </div>
-                <div class="col-md-3 col-sm-6 col-xs-12" id="s3">
+                <div class="col-md-3" id="s3">
                     <img class="song-img" id="song-img-after"/>
                     <h2 class="room-title">{{{title_after}}}</h2>
                     <h2 class="room-artist">{{{artist_after}}}</h2>
                 </div>
+                <div width="960" height="540" id="player" class="hidden col-md-3 col-sm-12 col-xs-12"></div>
             </div>
             <div id="seeker-container">
                 <div id="seeker-bar"></div>
             </div>
+            <div class="row">
+                <button type="button" id="toggle-video" class="button-nowidth col-md-4 col-sm-4 col-xs-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-4" >Show video</button>
+            </div>
             <div class="row">
                 <button type="button" id="song-modal" class="button-nowidth col-md-4 col-sm-4 col-xs-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-4" data-toggle="modal" data-target="#myModal">Add songs</button>
             </div>
@@ -89,10 +93,6 @@
 
               </div>
             </div>
-            <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
-
-            <div width="960" height="540" id="player">
-            </div>
         {{else}}
             {{> loading}}
         {{/if}}