Improved how importing from spotify works

php/panel.php

@@ -133,7 +133,7 @@
     </ul>
 </li>
 
-<li class="no-padding remote-panel">
+<li class="no-padding">
     <ul class="collapsible collapsible-accordion">
         <li>
             <a class="collapsible-header bold waves-effect import-a">Import Playlist
@@ -201,14 +201,14 @@
                     </li>
                     <li class="white-bg">
                         <div class="input-field field-settings spotify_unauthenticated import-buttons">
-                            <a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import spotify playlist (BETA)">
+                            <a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import spotify playlist">
                               Spotify
                             </a>
                         </div>
                         <div class="input-field field-settings spotify_authenticated">
                             <form action="#" id="listImportSpotify">
                                 <i class="mdi-av-playlist-add import-icon"></i>
-                                <input title="Input Spotify-playlist url here! (BETA)" placeholder="(BETA) Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
+                                <input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
                                 <li id="playlist_loader_spotify" class="valign-wrapper hide">
                                       <div class="valign">
                                          <div class="preloader-wrapper small active">
@@ -257,6 +257,20 @@
                             </form>
                         </div>
                     </li>
+                    <li class="not-imported white-bg hide">
+                        <div class="center-align">Not imported</div>
+                            <ul class="input-field field-settings not-imported-container">
+                                <li class="white-bg not-imported-element">
+                                    <div class="extra-add-text truncate"></div>
+                                        <a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
+                                        <a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
+                                        <i class="mdi-action-search search-extra"></i></a>
+                                    </li>
+                                </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </li>
                 </ul>
             </div>
         </li>

static/css/style.css

@@ -14,6 +14,38 @@
   display:none;
 }
 
+.not-imported{
+  border-top: 1px solid lightgrey;
+  margin-top: 15px;
+  color:black;
+}
+
+.not-imported-element{
+  height:60px;
+}
+
+.extra-add-text{
+  width: 165px;
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+}
+
+.extra-button{
+  margin: 0 4px !important;
+  padding: 0px !important;
+  display: inline-block;
+  width: 37px;
+  height: 40px !important;
+  line-height: 40px !important;
+  color: white !important;
+}
+
+.search-extra{
+  height: 40px !important;
+  line-height: 40px !important;
+}
+
 .import-spotify-auth, .import-youtube{
   color:white !important;
   height:40px !important;
@@ -1149,7 +1181,7 @@ nav ul li:hover, nav ul li.active {
 #add-many i{ line-height: 36px !important;}
 #results{
     background-color: rgba(0,0,0,0.8);
-    margin-top: -27px;
+    margin-top: 0px;
     max-height: calc(100vh - 64px);
     overflow: overlay;
     overflow-x: hidden;

static/js/admin.js

@@ -9,7 +9,7 @@ var Admin = {
                 msg=Helper.rnd(["I added your song", "Your song has been added", "Yay, more songs!", "Thats a cool song!", "I added that song for you", "I see you like adding songs..."]);
                 break;
             case "addedplaylist":
-                msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songes!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]);
+                msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songs!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]);
                 document.getElementById("import").disabled = false;
                 $("#playlist_loader").addClass("hide");
                 $("#import").removeClass("hide");

static/js/listeners.js

@@ -30,6 +30,7 @@ var chat_unseen 		  = false;
 var blinking 			  = false;
 var access_token_data     = {};
 var spotify_authenticated = false;
+var not_import_html       = "";
 
 if(localStorage.debug === undefined){
 	var debug = false;
@@ -132,8 +133,9 @@ function init(){
 
     result_html 	   	  = $("#temp-results-container");
 	empty_results_html 	  = $("#empty-results-container").html();
+    not_import_html       = $(".not-imported-container").html();
+    $(".not-imported-container").empty();
 
-    //awdwad
     $(".video-container").resizable({
     	start: function(event, ui) {
         	$('iframe').css('pointer-events','none');
@@ -331,6 +333,20 @@ $(document).on('click', '#cookieok', function() {
     });
 });
 
+$(document).on("click", ".extra-button-search", function(e){
+    e.preventDefault();
+    $("#search").val($(this).attr("data-text"));
+    Search.search($(this).attr("data-text"));
+});
+
+$(document).on("click", ".extra-button-delete", function(e){
+    e.preventDefault();
+    $(this).parent().remove();
+    if($(".not-imported-container").children().length == 0){
+        $(".not-imported").toggleClass("hide");
+    }
+})
+
 $(document).on("click", "#closePlayer", function(e){
   	e.preventDefault();
 	socket.emit("change_channel");

static/js/search.js

@@ -21,9 +21,9 @@ var Search = {
         empty_results_html    = $("#empty-results-container").html();
       }
       $(".search_results").html('');
-      if(window.search_input !== ""){
+      if(search_input !== ""){
         searching = true;
-        var keyword= encodeURIComponent(window.search_input);
+        var keyword= encodeURIComponent(search_input);
         //response= x
         var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25";
         yt_url+="&q="+keyword;
@@ -129,8 +129,8 @@ var Search = {
         yt_url+="&q="+keyword;
         var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
         artist = artist.split(" ");
-        var temptitle = title.toLowerCase().replace(" the ", "").replace(" a ", "").replace("the ", "");
+        var temptitle = title.split("-");
-        temptitle = temptitle.split(" ");
+        temptitle = temptitle.join(" ").split(" ");
         $.ajax({
             type: "GET",
             url: yt_url,
@@ -142,13 +142,15 @@ var Search = {
                     {
                         var acceptable_track = true;
                         //console.log(data.snippet.title.toLowerCase().indexOf("cover"));
-                        $.each(artist, function(i, data_artist){
+                        //$.each(artist, function(i, data_artist){
-                            if(data.snippet.title.toLowerCase().indexOf(data_artist.toLowerCase()) == -1){
+                            if(data.snippet.title.toLowerCase().indexOf(artist[0].toLowerCase()) == -1 &&
+                            (data.snippet.channelTitle.toLowerCase().indexOf(artist[0].toLowerCase()) == -1 &&
+                            data.snippet.channelTitle.toLowerCase().indexOf("vevo") == -1)){
                                 acceptable_track = false;
                                 return false;
                             }
-                        });
+                        //});
-                        if(data.snippet.title.toLowerCase().indexOf("cover") == -1 && acceptable_track) {
+                        if(data.snippet.title.toLowerCase().indexOf("cover") == -1 && acceptable_track && title.toLowerCase().indexOf("cover") == -1) {
                             vid_url += data.id.videoId+",";
                         }
                     });
@@ -164,21 +166,28 @@ var Search = {
                                   //console.log(data);
                                  //var title = data.snippet.title;
                                  var duration = Search.durationToSeconds(data.contentDetails.duration);
-                                 var not_matched = 0;
+                                 var not_matched = false;
                                  $.each(temptitle, function(i, data_title){
                                     if(data.snippet.title.toLowerCase().indexOf(data_title.toLowerCase()) == -1)
-                                        not_matched += 1;
+                                        not_matched = true;
-                                 });
-                                 if(((data.snippet.title.toLowerCase() == artist.join(" ").toLowerCase() + " - " + title.toLowerCase()) ||
-                                 (data.snippet.title.toLowerCase() == artist.join(" ").toLowerCase() + "-" + title.toLowerCase()) ||
-                                 (data.snippet.title.toLowerCase() == title.toLowerCase() + " - " + artist.join(" ").toLowerCase()) ||
-                                 (data.snippet.title.toLowerCase() == title.toLowerCase() + "-" + artist.join(" ").toLowerCase())) ||
-                                 (duration == length) ||
-                                 ((data.snippet.title.toLowerCase().indexOf("lyric") > -1) ||
-                                 (data.snippet.title.toLowerCase().indexOf("music video") > -1) ||
-                                 (data.snippet.title.toLowerCase().indexOf("official video"))) && not_matched != temptitle.length - 1) {
-                                     matched = true;
 
+                                        return false;
+                                 });
+
+                                 if(
+                                     (!not_matched //&&
+                                         //(duration + 1 > length && duration - 1 < length)
+                                     )
+                                 ){
+                                     matched = true;
+                                     /*console.log("------------------------------");
+                                     console.log("MATCH FOR:");
+                                     console.log("YouTube title: " + data.snippet.title);
+                                     console.log("YouTube Channel: " + data.snippet.channelTitle);
+                                     console.log("YouTube duration: " + duration);
+                                     console.log("Spotify title: " + title + " " + artist.join(" "));
+                                     console.log("Spotify length: " + length);
+                                     console.log("------------------------------");*/
                                      Search.submit(data.id,data.snippet.title, duration, true, current, totalNumber);
                                      return false;
                                  }
@@ -191,6 +200,12 @@ var Search = {
                                       console.log("Spotify length: " + length);
                                       console.log("------------------------------");
                                   }
+                                  var not_added_song = $("<div>" + not_import_html + "</div>");
+                                  not_added_song.find(".extra-add-text").text(title + " - " + artist.join(" "));
+                                  not_added_song.find(".extra-add-text").attr("title", title + " - " + artist.join(" "));
+                                  not_added_song.find(".extra-button-search").attr("data-text", title + " - " + artist.join(" "));
+                                  $(".not-imported-container").append(not_added_song.html());
+                                  $(".not-imported").removeClass("hide");
                               }
                           }
                       }