Made queues functional.

app/client/app.css

@@ -410,6 +410,7 @@ form button:hover {
     z-index: 1;
     margin: 0px;
     pointer-events: none;
+    overflow: hidden;
 }
 
 .bg-bubbles li {

app/client/client.js

@@ -1230,6 +1230,188 @@ Template.stations.events({
     }
 });
 
+Template.queues.events({
+    "click .preview-button": function(e){
+        Session.set("song", this);
+    },
+    "click #previewImageButton": function() {
+        $("#preview-image").attr("src", Session.get("song").img);
+    },
+    "click .edit-queue-button": function(e){
+        Session.set("song", this);
+        Session.set("genre", $(e.toElement).data("genre"));
+        Session.set("type", "queue");
+        $("#type").val(this.type);
+        $("#mid").val(this.mid);
+        $("#artist").val(this.artist);
+        $("#title").val(this.title);
+        $("#img").val(this.img);
+        $("#id").val(this.id);
+        $("#likes").val(this.likes);
+        $("#dislikes").val(this.dislikes);
+        $("#duration").val(this.duration);
+        $("#skip-duration").val(this.skipDuration);
+    },
+    "click .add-song-button": function(e){
+        var genre = $(e.toElement).data("genre") || $(e.toElement).parent().data("genre");
+        Meteor.call("addSongToPlaylist", genre, this);
+    },
+    "click .deny-song-button": function(e){
+        var genre = $(e.toElement).data("genre") || $(e.toElement).parent().data("genre");
+        console.log(genre);
+        Meteor.call("removeSongFromQueue", genre, this.mid);
+    },
+    "click #play": function() {
+        $("#play").attr("disabled", true);
+        $("#stop").attr("disabled", false);
+        var song = Session.get("song");
+        var id = song.id;
+        var type = song.type;
+        var volume = localStorage.getItem("volume") || 20;
+
+        if (type === "YouTube") {
+            if (yt_player === undefined) {
+                yt_player = new YT.Player("previewPlayer", {
+                    height: 540,
+                    width: 568,
+                    videoId: id,
+                    playerVars: {autoplay: 1, controls: 0, iv_load_policy: 3, showinfo: 0},
+                    events: {
+                        'onReady': function(event) {
+                            event.target.seekTo(Number(song.skipDuration));
+                            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);
+                            }
+                        }
+                    }
+                });
+            } else {
+                yt_player.loadVideoById(id);
+                yt_player.seekTo(Number(song.skipDuration));
+            }
+            $("#previewPlayer").show();
+        } else if (type === "SoundCloud") {
+            SC.stream("/tracks/" + song.id, function(sound) {
+                _sound = sound;
+                sound.setVolume(volume / 100);
+                sound.play();
+            });
+        }
+
+        if (previewEndSongTimeout !== undefined) {
+            Meteor.clearTimeout(previewEndSongTimeout);
+        }
+        previewEndSongTimeout = Meteor.setTimeout(function() {
+            if (yt_player !== undefined) {
+                yt_player.stopVideo();
+            }
+            if (_sound !== undefined) {
+                _sound.stop();
+            }
+            $("#play").attr("disabled", false);
+            $("#stop").attr("disabled", true);
+            $("#previewPlayer").hide();
+        }, song.duration * 1000);
+    },
+    "click #stop": function() {
+        $("#play").attr("disabled", false);
+        $("#stop").attr("disabled", true);
+        if (previewEndSongTimeout !== undefined) {
+            Meteor.clearTimeout(previewEndSongTimeout);
+        }
+        if (yt_player !== undefined) {
+            yt_player.stopVideo();
+        }
+        if (_sound !== undefined) {
+            _sound.stop();
+        }
+    },
+    "click #forward": function() {
+        console.log(yt_player);
+        console.log(Session.get("song"));
+        var error = false;
+        if (yt_player !== undefined) {
+            var duration = Number(Session.get("song").duration) | 0;
+            var skipDuration = Number(Session.get("song").skipDuration) | 0;
+            if (yt_player.getDuration() < duration + skipDuration) {
+                alert("The duration of the YouTube video is smaller than the duration.");
+                error = true;
+            } else {
+                yt_player.seekTo(skipDuration + duration - 10);
+            }
+        }
+        if (_sound !== undefined) {
+            _sound.seekTo((skipDuration + duration - 10) * 1000);
+        }
+        if (!error) {
+            if (previewEndSongTimeout !== undefined) {
+                Meteor.clearTimeout(previewEndSongTimeout);
+            }
+            previewEndSongTimeout = Meteor.setTimeout(function() {
+                if (yt_player !== undefined) {
+                    yt_player.stopVideo();
+                }
+                if (_sound !== undefined) {
+                    _sound.stop();
+                }
+                $("#play").attr("disabled", false);
+                $("#stop").attr("disabled", true);
+                $("#previewPlayer").hide();
+            }, 10000);
+        }
+    },
+    "click #get-spotify-info": function() {
+        var search = $("#title").val();
+        var artistName = $("#artist").val();
+        getSpotifyInfo(search, function(data) {
+            for(var i in data){
+                for(var j in data[i].items){
+                    if(search.indexOf(data[i].items[j].name) !== -1 && artistName.indexOf(data[i].items[j].artists[0].name) !== -1){
+                        $("#img").val(data[i].items[j].album.images[1].url);
+                        $("#duration").val(data[i].items[j].duration_ms / 1000);
+                        return;
+                    }
+                }
+            }
+        }, artistName);
+    },
+    "click #save-song-button": function() {
+        var newSong = {};
+        newSong.id = $("#id").val();
+        newSong.likes = Number($("#likes").val());
+        newSong.dislikes = Number($("#dislikes").val());
+        newSong.title = $("#title").val();
+        newSong.artist = $("#artist").val();
+        newSong.img = $("#img").val();
+        newSong.type = $("#type").val();
+        newSong.duration = Number($("#duration").val());
+        newSong.skipDuration = $("#skip-duration").val();
+        if(newSong.skipDuration === undefined){
+            newSong.skipDuration = 0;
+        };
+        if (Session.get("type") === "playlist") {
+            Meteor.call("updatePlaylistSong", Session.get("genre"), Session.get("song"), newSong, function() {
+                $('#editModal').modal('hide');
+            });
+        } else {
+            Meteor.call("updateQueueSong", Session.get("genre"), Session.get("song"), newSong, function() {
+                $('#editModal').modal('hide');
+            });
+        }
+    }
+});
+
 Template.stations.onCreated(function() {
     var tag = document.createElement("script");
     tag.src = "https://www.youtube.com/iframe_api";
@@ -1237,6 +1419,13 @@ Template.stations.onCreated(function() {
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 });
 
+Template.queues.onCreated(function() {
+    var tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+});
+
 Template.stations.onRendered(function() {
     $("#previewModal").on("hidden.bs.modal", function() {
         if (previewEndSongTimeout !== undefined) {
@@ -1278,6 +1467,48 @@ Template.stations.onRendered(function() {
     });
 });
 
+Template.queues.onRendered(function() {
+    $("#previewModal").on("hidden.bs.modal", function() {
+        if (previewEndSongTimeout !== undefined) {
+            Meteor.clearTimeout(previewEndSongTimeout);
+        }
+        $("#play").attr("disabled", false);
+        $("#stop").attr("disabled", true);
+        if (yt_player !== undefined) {
+            $("#previewPlayer").hide();
+            yt_player.seekTo(0);
+            yt_player.stopVideo();
+        }
+        if (_sound !== undefined) {
+            _sound.stop();
+        }
+    });
+    $(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({
     playlist_songs: function() {
         parts = location.href.split('/');

app/client/templates/queues.html

@@ -49,17 +49,87 @@
               </div>
           {{/each}}
         </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 id="previewModal" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+                <!-- Modal content-->
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Preview</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div width="960" height="540" id="previewPlayer"></div>
+                        <button id="play" title="Play video" class="btn btn-success"><i class="fa fa-play"></i></button>
+                        <button id="stop" title="Stop video" class="btn btn-danger" disabled><i class="fa fa-stop"></i></button>
+                        <button id="forward" title="Go to the last 10 seconds of the video" class="btn btn-primary"><i class="fa fa-fast-forward"></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>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="previewImageModal" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+                <!-- Modal content-->
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Preview Image</h4>
+                    </div>
+                    <div class="modal-body">
+                        <img alt="Not loading" id="preview-image" height="210px" width="210px" src=""/>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="editModal" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+                <!-- Modal content-->
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Edit</h4>
+                    </div>
+                    <div class="modal-body">
+                        <label for="type" class="song-input-label">Song Type</label>
+                        <select name="type" id="type" class="song-input-select">
+                            <option name="youtube" id="youtube">YouTube</option>
+                            <option name="soundcloud" id="soundcloud">SoundCloud</option>
+                        </select>
+                        <label for="mid" class="song-input-label">Song MID</label>
+                        <input class="song-input" name="mid" id="mid" type="text" />
+                        <label for="id" class="song-input-label">Song ID</label>
+                        <input class="song-input" name="id" id="id" type="text" />
+                        <label for="id" class="song-input-label">Song Artist</label>
+                        <input class="song-input" name="artist" id="artist" type="text" />
+                        <label for="title" class="song-input-label">Song Title</label>
+                        <input class="song-input" name="title" id="title" type="text" />
+                        <label for="title" class="song-input-label">Song Duration</label>
+                        <input class="song-input" name="duration" id="duration" type="number" />
+                        <label for="skip-duration" class="song-input-label">Skip Duration</label>
+                        <input class="song-input" id="skip-duration" type="number" />
+                        <label for="likes" class="song-input-label">Likes</label>
+                        <input class="song-input" id="likes" type="number"/>
+                        <label for="dislikes" class="song-input-label">Dislikes</label>
+                        <input class="song-input" id="dislikes" type="number"/>
+                        <label for="img" class="song-input-label">Song Image</label>
+                        <input class="song-input" name="img" id="img" type="text" />
+                        <button type="button" id="get-spotify-info" class="button">Get Spotify Data</button>
+                        <button type="button" id="save-song-button" class="button">Save Changes</button>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>