Made YouTube playlist import functional.

app/client/app.css

@@ -872,7 +872,13 @@ footer .fa {
 .hidden {
     visibility: hidden;
 }
-
+.hidden-2 {
+    visibility: hidden;
+    height: 0px;
+    width: 0px;
+    margin: 0;
+    padding: 0;
+}
 .footerButtons {
     background: none !important;
     border: none;
@@ -1582,3 +1588,19 @@ input[type="checkbox"]:checked + #two-label:after {
 #current-arrow {
     color: #0e90d2;
 }
+#import-progress-container {
+    width: 304px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 10px;
+    color: #50a3a2;
+}
+
+#add-youtube-playlist {
+    background-color: green;
+    color: white;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}

app/client/client.js

@@ -867,7 +867,10 @@ Template.room.events({
             $("#youtube-playlist-input").addClass("disabled");
             $("#playlist-import-queue").empty();
             $("#playlist-import-queue").hide();
-
+            $("#add-youtube-playlist").addClass("hidden-2");
+            $("#import-progress").attr("aria-valuenow", 0);
+            $("#import-progress").css({width: "0%"});
+            $("#import-progress").text("0%");
 
             function makeAPICall(playlist_id, nextPageToken){
                 if (nextPageToken !== undefined) {
@@ -877,31 +880,40 @@ Template.room.events({
                 }
                 $.ajax({
                     type: "GET",
-                    url: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=10&playlistId=" + playlist_id + nextPageToken + "&key=AIzaSyAgBdacEWrHCHVPPM4k-AFM7uXg-Q__YXY",
+                    url: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=" + playlist_id + nextPageToken + "&key=AIzaSyAgBdacEWrHCHVPPM4k-AFM7uXg-Q__YXY",
                     applicationType: "application/json",
                     contentType: "json",
                     success: function(data){
                         if (!ranOnce) {
                             ranOnce = true;
-                            console.log(data);
                             totalVideos = data.pageInfo.totalResults;
                         }
                         var nextToken = data.nextPageToken;
                         for(var i in data.items){
                             var item = data.items[i];
-                            console.log(item);
                             if (item.snippet.thumbnails !== undefined) {
-                                $("#playlist-import-queue").append(
-                                    "<div class='youtube-import-queue-item'>" +
-                                    "<img src='" + item.snippet.thumbnails.medium.url + "' class='song-result-thumbnail'/>" +
-                                    "<div>" +
-                                    "<span class='song-result-title'>" + item.snippet.title + "</span>" +
-                                    "<span class='song-result-channel'>" + item.snippet.channelTitle + "</span>" +
-                                    "</div>" +
-                                    "<i class='fa fa-times remove-import-song'></i>" +
-                                    "</div>"
-                                );
-                                ytImportQueue.push({title: item.snippet.title, id: item.id.videoId});
+                                var genre = Session.get("type");
+                                if (Playlists.find({type: genre, "songs.id": item.snippet.resourceId.videoId}, {songs: {$elemMatch: {id: item.snippet.resourceId.videoId}}}).count() !== 0) {
+                                    videosInPlaylist++;
+                                } else if (Queues.find({type: genre, "songs.id": item.snippet.resourceId.videoId}, {songs: {$elemMatch: {id: item.snippet.resourceId.videoId}}}).count() !== 0) {
+                                    videosInQueue++;
+                                } else {
+                                    $("#playlist-import-queue").append(
+                                        "<div class='youtube-import-queue-item'>" +
+                                        "<img src='" + item.snippet.thumbnails.medium.url + "' class='song-result-thumbnail'/>" +
+                                        "<div>" +
+                                        "<span class='song-result-title'>" + item.snippet.title + "</span>" +
+                                        "<span class='song-result-channel'>" + item.snippet.channelTitle + "</span>" +
+                                        "</div>" +
+                                        "<i class='fa fa-times remove-import-song'></i>" +
+                                        "</div>"
+                                    );
+                                    var percentage = ytImportQueue.length / (totalVideos - videosInvalid) * 100;
+                                    $("#import-progress").attr("aria-valuenow", percentage.toFixed(2));
+                                    $("#import-progress").css({width: percentage + "%"});
+                                    $("#import-progress").text(percentage.toFixed(1) + "%");
+                                    ytImportQueue.push({title: item.snippet.title, id: item.snippet.resourceId.videoId});
+                                }
                             } else {
                                 videosInvalid++;
                             }
@@ -910,11 +922,7 @@ Template.room.events({
                             makeAPICall(playlist_id, nextToken);
                         } else {
                             $("#playlist-import-queue > div > i").click(function(){
-                                console.log("I clicked!");
                                 var title =  $(this).parent().find("div > .song-result-title").text();
-                                console.log(title);
-                                console.log($(this));
-                                console.log($(this).parent());
                                 for(var i in ytImportQueue){
                                     if(ytImportQueue[i].title === title){
                                         ytImportQueue.splice(i, 1);
@@ -923,11 +931,16 @@ Template.room.events({
                                 $(this).parent().remove();
                             });
                             Session.set("importingPlaylist", false);
+                            $("#import-progress").attr("aria-valuenow", 100);
+                            $("#import-progress").css({width: "100%"});
+                            $("#import-progress").text("100%");
                             $("#youtube-playlist-button").removeAttr("disabled");
                             $("#youtube-playlist-button").removeClass("disabled");
                             $("#youtube-playlist-input").removeAttr("disabled");
                             $("#youtube-playlist-input").removeClass("disabled");
                             $("#playlist-import-queue").show();
+                            $("#add-youtube-playlist").removeClass("hidden-2");
+                            Session.set("YTImportQueue", ytImportQueue);
                         }
                     }
                 })
@@ -935,6 +948,35 @@ Template.room.events({
             makeAPICall(playlist_id);
         }
     },
+    "click #add-youtube-playlist": function() {
+        var YTImportQueue = Session.get("YTImportQueue");
+        $("#youtube-playlist-button").attr("disabled", "");
+        $("#youtube-playlist-button").addClass("disabled");
+        $("#youtube-playlist-input").attr("disabled", "");
+        $("#youtube-playlist-input").addClass("disabled");
+        $("#import-progress").attr("aria-valuenow", 0);
+        $("#import-progress").css({width: "0%"});
+        $("#import-progress").text("0%");
+        var failed = 0;
+        var success = 0;
+        var processed = 0;
+        var total = YTImportQueue.length;
+        YTImportQueue.forEach(function(song) {
+            var songData = {type: type, id: song.id, title: song.title, artist: "", img: ""};
+            Meteor.call("addSongToQueue", Session.get("type"), songData, function(err, res) {
+                if (err) {
+                    failed++;
+                } else {
+                    success++;
+                }
+                processed++;
+                var percentage = processed / total * 100;
+                $("#import-progress").attr("aria-valuenow", percentage.toFixed(2));
+                $("#import-progress").css({width: percentage + "%"});
+                $("#import-progress").text(percentage.toFixed(1) + "%");
+            });
+        });
+    },
     "click #chat-tab": function() {
         $("#chat-tab").removeClass("unread-messages");
     },
@@ -1229,11 +1271,11 @@ Template.room.events({
     "change #si_or_pl": function(){
         if($("#select_playlist").is(':selected')){
             $("#search-info").hide();
-            $("#playlist-buttons").show();
+            $("#playlist-import").show();
         }
         if($("#select_single").is(':selected')){
             $("#search-info").show();
-            $("#playlist-buttons").hide();
+            $("#playlist-import").hide();
         }
     },
     "click #close-modal-a": function(){

app/client/templates/room.html

@@ -198,11 +198,12 @@
                             </div>
 
                             <div id="playlist-import" style="display:none">
-                                <input type="text" id="youtube-playlist-input" class="song-input"/>
+                                <input type="text" id="youtube-playlist-input" class="song-input" placeholder="Playlist URL"/>
                                 <button id="youtube-playlist-button" class="button">Import YouTube Playlist</button>
-                                <div class="progress">
-                                    <div id="import-progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
-                                        0% imported
+                                <button id="add-youtube-playlist" class="button hidden-2">Add Songs To Queue</button>
+                                <div class="progress" id="import-progress-container">
+                                    <div id="import-progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; min-width: 2em;">
+                                        0%
                                     </div>
                                 </div>
                                 <div id="playlist-import-queue">