Added volume slider to admin preview, improved admin song preview.

app/app.css

@@ -835,10 +835,23 @@ footer a:hover{
   height: 100%;
   background-color: #97D8C8;
 }
-.slider {
+#volume-container > .slider {
   top: 40%;
   transform: translateY(-40%);
   padding-right: 12px;
   padding-left: 12px;
   margin-left: 12px;
+}
+
+#volume-container-admin {
+  display: inline-block;
+  width: 174px;
+  margin-left: 10px;
+}
+
+#volume-container-admin > .slider {
+  width: 150px !important;
+  padding-left: 12px;
+  padding-right: 12px;
+  margin-left: 12px;
 }

app/app.js

@@ -434,11 +434,23 @@ if (Meteor.isClient) {
                         height: 540,
                         width: 568,
                         videoId: id,
-                        playerVars: {autoplay: 1, controls: 0, iv_load_policy: 3},
+                        playerVars: {autoplay: 1, controls: 0, iv_load_policy: 3, showinfo: 0},
                         events: {
                             'onReady': function(event) {
                                 event.target.playVideo();
                                 event.target.setVolume(volume);
+                            },
+                            'onStateChange': function(event){
+                                if (event.data == YT.PlayerState.PAUSED) {
+                                    event.target.playVideo();
+                                }
+                                if (event.data == YT.PlayerState.PLAYING) {
+                                    $("#play").attr("disabled", true);
+                                    $("#stop").attr("disabled", false);
+                                } else {
+                                    $("#play").attr("disabled", false);
+                                    $("#stop").attr("disabled", true);
+                                }
                             }
                         }
                     });
@@ -498,6 +510,29 @@ if (Meteor.isClient) {
                 $("#stop").attr("disabled", true);
             }
         });
+        $(document).ready(function() {
+            function makeSlider(){
+                var slider = $("#volume-slider").slider();
+                var volume = localStorage.getItem("volume") || 20;
+                $("#volume-slider").slider("setValue", volume);
+                if (slider.length === 0) {
+                    Meteor.setTimeout(function() {
+                        makeSlider();
+                    }, 500);
+                } else {
+                    slider.on("slide", function(val) {
+                        localStorage.setItem("volume", val.value);
+                        if (yt_player !== undefined) {
+                            yt_player.setVolume(val.value);
+                        } else if (_sound !== undefined) {
+                            var volume = val.value / 100;
+                            _sound.setVolume(volume);
+                        }
+                    });
+                }
+            }
+            makeSlider();
+        });
     });
 
     Template.playlist.helpers({
@@ -517,7 +552,6 @@ if (Meteor.isClient) {
     Template.room.onCreated(function () {
         yt_player = undefined;
         _sound = undefined;
-        console.log("Room created!");
         Session.set("videoShown", false);
         var tag = document.createElement("script");
         tag.src = "https://www.youtube.com/iframe_api";
@@ -687,7 +721,6 @@ if (Meteor.isServer) {
     Meteor.users.deny({remove: function () { return true; }});
 
     function getSongDuration(query, artistName){
-        console.log(artistName);
         var duration;
         var search = query;
         query = query.toLowerCase().split(" ").join("%20");
@@ -705,7 +738,6 @@ if (Meteor.isServer) {
     }
 
     function getSongAlbumArt(query, artistName){
-        console.log(artistName);
         var albumart;
         var search = query;
         query = query.toLowerCase().split(" ").join("%20");

app/templates/admin.html

@@ -64,6 +64,9 @@
                         <div width="960" height="540" id="previewPlayer"></div>
                         <button id="play" class="btn btn-success"><i class="fa fa-play"></i></button>
                         <button id="stop" class="btn btn-danger" disabled><i class="fa fa-stop"></i></button>
+                        <div id="volume-container-admin">
+                            <input type="text" id="volume-slider" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>