Added gui for importing youtube playlists

php/panel.php

@@ -122,3 +122,25 @@
         </li>
     </ul>
 </li>
+
+<li class="no-padding remote-panel">
+    <ul class="collapsible collapsible-accordion">
+        <li>
+            <a class="collapsible-header bold waves-effect">Import Playlist
+                <i class="mdi-communication-import-export"></i>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li class="white-bg">
+                        <div class="input-field field-settings">
+                            <form action="#" id="listImport" onsubmit="return false;">
+                                <i class="mdi-av-playlist-add import-icon"></i>
+                                <input title="Only works with 49 or less songs.." placeholder="Enter YouTube-list ID" id="import" type="text" class="validate" />
+                            </form>
+                        </div>
+                    </li>   
+                </ul>
+            </div>
+        </li>
+    </ul>
+</li>

static/css/style.css

@@ -68,7 +68,18 @@ input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([
 	color: rgb(68,68,68);
 }
 
+.import-icon{
+  position: absolute;
+}
+
+#import{
+  width:65%;
+  margin-left:10px;
+  color:rgb(68,68,68);
+}
+
 #password{
+  width:70%;
 	margin-left:10px;
 }
 

static/js/listeners.js

@@ -149,28 +149,6 @@ $(document).ready(function()
 				i = 0;
 				timer=100;
 			}
-		}else if(event.keyCode == 13)
-		{
-			pId = search_input.split("list=");
-			if(pId.length > 1)
-			{
-				playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=40&key="+api_key+"&playlistId="+pId[1];
-				$.ajax({
-					type: "GET",
-					url: playlist_url,
-					dataType:"jsonp",
-					success: function(response)
-					{
-						var ids="";
-						$.each(response.items, function(i,data)
-						{
-							ids+=data.contentDetails.videoId+",";
-						});
-						addVideos(ids);
-						document.getElementById("search").value = "";
-					}
-				});
-			}
 		}
 
 
@@ -236,6 +214,10 @@ $('input[class=conf]').change(function()
     Admin.save();
 });
 
+$('#listImport').on("submit", function(){
+	Search.importPlaylist(document.getElementById("import").value);
+});
+
 $(window).focus(function(){
   if(unseen)
   {

static/js/search.js

@@ -113,6 +113,25 @@ var Search = {
     	$(".main").removeClass("clickthrough");
     },
 
+    importPlaylist: function(pId){
+      playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId;
+      $.ajax({
+        type: "GET",
+        url: playlist_url,
+        dataType:"jsonp",
+        success: function(response)
+        {
+          var ids="";
+          $.each(response.items, function(i,data)
+          {
+            ids+=data.contentDetails.videoId+",";
+          });
+          Search.addVideos(ids);
+          document.getElementById("import").value = "";
+        }
+      });
+    },
+
     addVideos: function(ids){
     	var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=***REMOVED***&id=";
     	request_url += ids;