Worked on playlist importer.

app/client/app.css

@@ -806,7 +806,7 @@ footer .fa {
     margin: 0 auto;
 }
 
-#song-results {
+#song-results, #youtube-import-queue {
     margin: 0 auto;
     color: white;
     margin-top: 1em;
@@ -814,6 +814,10 @@ footer .fa {
     text-align: center;
 }
 
+.youtube-import-queue-item {
+    position: relative !important;
+}
+
 #song-results > div {
     margin: 0;
     padding: 5px;
@@ -1556,4 +1560,15 @@ input[type="checkbox"]:checked + #two-label:after {
     margin-left: auto;
     color: rgba(253, 253, 254, 1);
     display: block;
+}
+
+.remove-import-song {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+
+.remove-import-song:hover {
+    color: #0e90d2;
+    cursor: pointer;
 }

app/client/client.js

@@ -13,6 +13,18 @@ Meteor.startup(function() {
     });
 });
 
+// Way to get paramater from url.
+// Taken from http://stackoverflow.com/a/979997/4670703
+// gup('q', 'http://example.com/?q=abc') returns abc.
+function gup( name, url ) {
+    if (!url) url = location.href;
+    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+    var regexS = "[\\?&]"+name+"=([^&#]*)";
+    var regex = new RegExp( regexS );
+    var results = regex.exec( url );
+    return results == null ? null : results[1];
+}
+
 /* Global Helpers */
 Handlebars.registerHelper("isAdmin", function(argument){
   if (Meteor.user() && Meteor.user().profile) {
@@ -649,6 +661,92 @@ function sendMessageGlobal() {
 }
 
 Template.room.events({
+    "click #youtube-playlist-button": function() {
+        if (!Session.get("importingPlaylist")) {
+            var playlist_link = $("#youtube-playlist-input").val();
+            var playlist_id = gup("list", playlist_link);
+            var ytImportQueue = [];
+            var totalVideos = 0;
+            var videosInvalid = 0;
+            var videosInQueue = 0;
+            var videosInPlaylist = 0;
+            var ranOnce = false;
+
+            Session.set("importingPlaylist", true);
+            $("#youtube-playlist-button").attr("disabled", "");
+            $("#youtube-playlist-button").addClass("disabled");
+            $("#youtube-playlist-input").attr("disabled", "");
+            $("#youtube-playlist-input").addClass("disabled");
+            $("#playlist-import-queue").empty();
+            $("#playlist-import-queue").hide();
+
+
+            function makeAPICall(playlist_id, nextPageToken){
+                if (nextPageToken !== undefined) {
+                    nextPageToken = "&pageToken=" + nextPageToken;
+                } else {
+                    nextPageToken = "";
+                }
+                $.ajax({
+                    type: "GET",
+                    url: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=10&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});
+                            } else {
+                                videosInvalid++;
+                            }
+                        }
+                        if (nextToken !== undefined) {
+                            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);
+                                    }
+                                }
+                                $(this).parent().remove();
+                            });
+                            Session.set("importingPlaylist", false);
+                            $("#youtube-playlist-button").removeAttr("disabled");
+                            $("#youtube-playlist-button").removeClass("disabled");
+                            $("#youtube-playlist-input").removeAttr("disabled");
+                            $("#youtube-playlist-input").removeClass("disabled");
+                            $("#playlist-import-queue").show();
+                        }
+                    }
+                })
+            }
+            makeAPICall(playlist_id);
+        }
+    },
     "click #chat-tab": function() {
         $("#chat-tab").removeClass("unread-messages");
     },
@@ -943,10 +1041,10 @@ Template.room.events({
     "change #si_or_pl": function(){
         if($("#select_playlist").is(':selected')){
             $("#search-info").hide();
-            $("#playlist-buttons").show();
+            $("#playlist-import").show();
         } else{
             $("#search-info").show();
-            $("#playlist-buttons").hide();
+            $("#playlist-import").hide();
         }
     }
 });

app/client/templates/room.html

@@ -169,7 +169,7 @@
                                 <option name="single" id="select_single" title="Add a single video to the queue.">Single Video</option>
                                 <option name="playlist" id="select_playlist" title="Add all video's in a playlist to the queue.">Playlist</option>
                             </select>
-
+                            <hr>
                             <div id="search-info">
                                 <select name="type" id="search_type" class="song-input-select">
                                     <option name="youtube" id="search_youtube">YouTube</option>
@@ -197,8 +197,17 @@
                                 <button type="button" id="add-song-button" class="button">Add Song</button>
                             </div>
 
-                            <div id="playlist-buttons" style="display:none">
+                            <div id="playlist-import" style="display:none">
+                                <input type="text" id="youtube-playlist-input" class="song-input"/>
                                 <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
+                                    </div>
+                                </div>
+                                <div id="playlist-import-queue">
+
+                                </div>
                             </div>
 
                             <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->