Added spotify import, somewhat still in beta

.htaccess

@@ -17,6 +17,10 @@ RewriteCond %{HTTP_HOST} ^bot.zoff.no
 RewriteCond %{REQUEST_URI} !/static
 RewriteRule ^(.*)$ php/bot.php [L,NC,QSA]
 
+RewriteCond %{HTTP_HOST} ^localhost
+RewriteCond %{REQUEST_URI} /spotify_callback
+RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
+
 #RewriteCond %{HTTP_HOST} ^(remote\.)?zoff\.no
 #RewriteCond %{REQUEST_URI} !remote/
 #RewriteRule ^(.*)$ remote/$1 [L]

gulpfile.js

@@ -4,7 +4,7 @@ var gulp    = require('gulp'),
 	concat  = require('gulp-concat');
 
 gulp.task('js', function () {
-    gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js'])
+    gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js', '!static/js/spotify.js'])
         .pipe(uglify({
         	mangle: true,
             compress: true,
@@ -25,6 +25,17 @@ gulp.task('embed', function () {
         .pipe(gulp.dest('static/dist'));
 });
 
+gulp.task('spotify', function () {
+    gulp.src(['static/js/spotify.js'])
+        .pipe(uglify({
+            mangle: true,
+            compress: true,
+            enclose: true
+        }))
+        .pipe(concat('spotify.min.js'))
+        .pipe(gulp.dest('static/dist'));
+});
+
 /*
 gulp.task('nochan', function () {
     gulp.src(['static/js/nochan.js', 'static/js/helpers.js'])
@@ -51,6 +62,7 @@ gulp.task('remotecontroller', function () {
 gulp.task('default', function(){
     gulp.watch('static/js/*.js', ['js']);
     gulp.watch('static/js/*.js', ['embed']);
+    gulp.watch(['static/js/spotify.js', 'static/js/helpers.js'], ['spotify']);
     //gulp.watch('static/js/*.js', ['nochan']);
     gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
 });

php/panel.php

@@ -142,8 +142,13 @@
             <div class="collapsible-body">
                 <ul>
                     <li class="white-bg">
-                        <div class="input-field field-settings">
+                        <div class="input-field field-settings youtube_unclicked import-buttons">
-                            <form action="#" id="listImport" onsubmit="return false;">
+                            <a class="modal-trigger waves-effect red btn import-youtube" title="Need help with the site?">
+                              YouTube
+                            </a>
+                        </div>
+                        <div class="input-field field-settings youtube_clicked">
+                            <form action="#" id="listImport">
                                 <i class="mdi-av-playlist-add import-icon"></i>
                                 <input title="Input YouTube-playlist id here!" placeholder="Enter YouTube-list ID" id="import" type="text" class="validate" autocomplete="off" />
                                 <li id="playlist_loader" class="valign-wrapper hide">
@@ -194,6 +199,64 @@
                             </form>
                         </div>
                     </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)">
+                              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" />
+                                <li id="playlist_loader_spotify" class="valign-wrapper hide">
+                                      <div class="valign">
+                                         <div class="preloader-wrapper small active">
+                                          <div class="spinner-layer spinner-blue">
+                                            <div class="circle-clipper left">
+                                              <div class="circle"></div>
+                                            </div><div class="gap-patch">
+                                              <div class="circle"></div>
+                                            </div><div class="circle-clipper right">
+                                              <div class="circle"></div>
+                                            </div>
+                                          </div>
+
+                                          <div class="spinner-layer spinner-red">
+                                            <div class="circle-clipper left">
+                                              <div class="circle"></div>
+                                            </div><div class="gap-patch">
+                                              <div class="circle"></div>
+                                            </div><div class="circle-clipper right">
+                                              <div class="circle"></div>
+                                            </div>
+                                          </div>
+
+                                          <div class="spinner-layer spinner-yellow">
+                                            <div class="circle-clipper left">
+                                              <div class="circle"></div>
+                                            </div><div class="gap-patch">
+                                              <div class="circle"></div>
+                                            </div><div class="circle-clipper right">
+                                              <div class="circle"></div>
+                                            </div>
+                                          </div>
+
+                                          <div class="spinner-layer spinner-green">
+                                            <div class="circle-clipper left">
+                                              <div class="circle"></div>
+                                            </div><div class="gap-patch">
+                                              <div class="circle"></div>
+                                            </div><div class="circle-clipper right">
+                                              <div class="circle"></div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      </li>
+                            </form>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </li>

php/spotify.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Zöff Spotify Importer</title>
+    <script type="text/javascript" src="/static/dist/spotify.min.js"></script>
+    <meta charset="UTF-8"/>
+  </head>
+  <body>
+  </body>
+</html>

static/css/style.css

@@ -14,6 +14,25 @@
   display:none;
 }
 
+.import-spotify-auth, .import-youtube{
+  color:white !important;
+  height:40px !important;
+  line-height: 40px !important;
+  margin: 0 4rem 0 0 !important;
+}
+
+.import-buttons{
+  padding:10px;
+}
+
+.spotify_authenticated{
+  display: none;
+}
+
+.youtube_clicked{
+  display: none;
+}
+
 #chatPlaylist{
   overflow: hidden;
 }
@@ -239,10 +258,12 @@ input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([
   position: absolute;
 }
 
-#import{
+#import, #import_spotify{
   width:65%;
-  margin-left:10px;
+  padding-left:35px;
   color:rgb(68,68,68);
+  border-bottom: 1px solid lightgrey;
+  padding-bottom: 10px;
 }
 
 #password{
@@ -883,7 +904,7 @@ ul #chat-log{
   margin-top:15px;
 }
 
-#playlist_loader {
+#playlist_loader, #playlist_loader_spotify {
   padding: 10px 0px 0px 70px;
 }
 

static/dist/spotify.min.js

@@ -0,0 +1 @@
+!function(){function e(e){var t,o=e.substring(1).split("&"),n={};for(var a in o)t=o[a].split("="),2==t.length&&(n[t[0]]=t[1]);return n}window.addEventListener("load",function(){console.log("hello");var t="b934ecdd173648f5bcd38738af529d58",o="http://localhost/spotify_callback",n="token",a="playlist-read-private playlist-read-collaborative user-read-private";if(window.location.hash.length<=0)window.location.href="https://accounts.spotify.com/authorize?client_id="+t+"&scope="+a+"&show_dialog=false&response_type="+n+"&redirect_uri="+o;else{var i=e(window.location.hash);window.opener.callback(i)}})}();

static/js/list.js

@@ -58,7 +58,7 @@ var List = {
         List.sortList();
 		$("#wrapper").empty();
 
-        if(localStorage.debug) {
+        if(localStorage.debug === "true") {
             console.log("---------------------------");
             console.log("---------FULL PLAYLIST-----");
             console.log(full_playlist);
@@ -153,7 +153,7 @@ var List = {
         full_playlist[0].guids              = [];
         full_playlist[0].added              = time;
         full_playlist[length].now_playing   = false;
-        if(localStorage.debug) {
+        if(localStorage.debug === "true") {
             console.log("---------------------------");
             console.log("---SONG ON FIRST INDEX-----");
             console.log(full_playlist[0]);

static/js/listeners.js

@@ -28,6 +28,8 @@ var durationBegun 	      = false;
 var chat_active 		  = false;
 var chat_unseen 		  = false;
 var blinking 			  = false;
+var access_token_data     = {};
+var spotify_authenticated = false;
 
 if(localStorage.debug === undefined){
 	var debug = false;
@@ -125,6 +127,9 @@ function init(){
     $('.collapsible').collapsible({
       accordion : true // A setting that changes the collapsible behavior to expandable instead of the default accordion style
     });
+
+    spotify_is_authenticated(spotify_authenticated);
+
     result_html 	   	  = $("#temp-results-container");
 	empty_results_html 	  = $("#empty-results-container").html();
 
@@ -275,6 +280,29 @@ function disable_debug(){
 	localStorage.debug = false;
 }
 
+function spotify_is_authenticated(bool){
+    if(bool){
+        if(localStorage.debug === "true"){
+            console.log("------------------------");
+            console.log("Spotify is authenticated");
+            console.log("access_token: " + access_token_data.access_token);
+            console.log("token_type:" + access_token_data.token_type);
+            console.log("expires_in: " + access_token_data.expires_in);
+            console.log("------------------------");
+        }
+        $(".spotify_authenticated").css("display", "block");
+        $(".spotify_unauthenticated").css("display", "none");
+    } else {
+        if(localStorage.debug === "true"){
+            console.log("----------------------------");
+            console.log("Spotify is not authenticated");
+            console.log("----------------------------");
+            $(".spotify_authenticated").css("display", "none");
+            $(".spotify_unauthenticated").css("display", "block");
+        }
+    }
+}
+
 window.enable_debug = enable_debug;
 window.disable_debug = disable_debug;
 
@@ -366,12 +394,34 @@ $("#clickme").click(function(){
 	Player.ytplayer.playVideo();
 });
 
-$(document).on("submit", "#listImport", function(){
+$(document).on("submit", "#listImport", function(e){
+    e.preventDefault();
+    if($("#import").val() !== ""){
     	Search.importPlaylist(document.getElementById("import").value);
         document.getElementById("import").value = "";
         document.getElementById("import").disabled = true;
         $("#import").addClass("hide");
         $("#playlist_loader").removeClass("hide");
+    }
+});
+
+$(document).on("submit", "#listImportSpotify", function(e){
+    e.preventDefault();
+    if(spotify_authenticated && $("#import_spotify").val() !== ""){
+        //console.log("Import this playlist: " + document.getElementById("import_spotify").value);
+        var url = $("#import_spotify").val().split("https://open.spotify.com/user/");
+        if(url.length == 2) {
+            url = url[1].split("/");
+            var user = url[0];
+            var playlist_id = url[2];
+
+            Search.importSpotifyPlaylist('https://api.spotify.com/v1/users/' + user + '/playlists/' + playlist_id + '/tracks');
+        }
+    }
+    document.getElementById("import_spotify").value = "";
+    document.getElementById("import_spotify").disabled = true;
+    $("#import_spotify").addClass("hide");
+    $("#playlist_loader_spotify").removeClass("hide");
 });
 
 $(window).focus(function(){
@@ -494,6 +544,30 @@ $(document).on("click", ".suggested-link", function(e){
 	$("#suggestions").css("display", "block");
 });
 
+$(document).on("click", ".import-spotify-auth", function(e){
+    e.preventDefault();
+    window.callback = function(data) {
+        access_token_data = data;
+        spotify_authenticated = true;
+        spotify_is_authenticated(true);
+        setTimeout(function(){
+            spotify_authenticated = false;
+            spotify_is_authenticated(false);
+            $(".spotify_authenticated").css("display", "none");
+            $(".spotify_unauthenticated").css("display", "block");
+        }, access_token_data.expires_in * 1000);
+        spotify_window.close();
+        window.callback = "";
+    };
+    spotify_window = window.open("/spotify_callback", "", "width=600, height=600");
+});
+
+$(document).on("click", ".import-youtube", function(e){
+    e.preventDefault();
+    $(".youtube_unclicked").css("display", "none");
+    $(".youtube_clicked").css("display", "block");
+});
+
 $(document).on("submit", "#chatForm", function(e){
 	e.preventDefault();
   Chat.chat(document.getElementById("chatForm").input);

static/js/player.js

@@ -9,7 +9,7 @@ var Player = {
     youtube_listener: function(obj)
     {
         Player.loaded      = false;
-        if(localStorage.debug){
+        if(localStorage.debug === "true"){
             console.log("--------youtube_listener--------");
 
             console.log("Received: ");
@@ -95,7 +95,7 @@ var Player = {
     },
 
     onPlayerStateChange: function(newState) {
-        if(localStorage.debug){
+        if(localStorage.debug === "true"){
             console.log("-------onPlayerStateChange------");
             console.log("New state\nState: ");
             console.log(newState);

static/js/search.js

@@ -123,6 +123,89 @@ var Search = {
       }
     },
 
+    backgroundSearch: function(title, artist, length, totalNumber, current){
+        var keyword= encodeURIComponent(title + " " + artist);
+        var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id,snippet&fields=items(id,snippet)&type=video&order=relevance&safeSearch=none&maxResults=5";
+        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 ", "");
+        temptitle = temptitle.split(" ");
+        $.ajax({
+            type: "GET",
+            url: yt_url,
+            dataType:"jsonp",
+            success: function(response){
+                //console.log(response);
+                if(response.items.length > 0) {
+                    $.each(response.items, function(i,data)
+                    {
+                        var acceptable_track = true;
+                        //console.log(data.snippet.title.toLowerCase().indexOf("cover"));
+                        $.each(artist, function(i, data_artist){
+                            if(data.snippet.title.toLowerCase().indexOf(data_artist.toLowerCase()) == -1){
+                                acceptable_track = false;
+                                return false;
+                            }
+                        });
+                        if(data.snippet.title.toLowerCase().indexOf("cover") == -1 && acceptable_track) {
+                            vid_url += data.id.videoId+",";
+                        }
+                    });
+
+                    $.ajax({
+                      type: "GET",
+                      url: vid_url,
+                      dataType:"jsonp",
+                      success: function(response){
+                          if(response.items.length > 0) {
+                              var matched = false;
+                              $.each(response.items, function(i, data){
+                                  //console.log(data);
+                                 //var title = data.snippet.title;
+                                 var duration = Search.durationToSeconds(data.contentDetails.duration);
+                                 var not_matched = 0;
+                                 $.each(temptitle, function(i, data_title){
+                                    if(data.snippet.title.toLowerCase().indexOf(data_title.toLowerCase()) == -1)
+                                        not_matched += 1;
+                                 });
+                                 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;
+
+                                     Search.submit(data.id,data.snippet.title, duration, true, current, totalNumber);
+                                     return false;
+                                 }
+                              });
+                              if(!matched){
+                                  if(localStorage.debug === "true") {
+                                      console.log("------------------------------");
+                                      console.log("NO MATCH FOR:");
+                                      console.log("Spotify title: " + title + " " + artist.join(" "));
+                                      console.log("Spotify length: " + length);
+                                      console.log("------------------------------");
+                                  }
+                              }
+                          }
+                      }
+                  });
+
+                }
+            }
+        });
+        if(current == totalNumber - 1){
+            document.getElementById("import_spotify").disabled = false;
+            $("#import_spotify").removeClass("hide");
+            $("#playlist_loader_spotify").addClass("hide");
+        }
+    },
+
     submitAndClose: function(id,title,duration){
     	Search.submit(id,title, duration, false, 0, 1);
     	$("#results").html('');
@@ -159,6 +242,27 @@ var Search = {
       });
     },
 
+    importSpotifyPlaylist: function(url){
+        $.ajax({
+           url: url,
+           headers: {
+               'Authorization': 'Bearer ' + access_token_data.access_token
+           },
+           success: function(response) {
+               console.log(response);
+               $.each(response.items, function(i,data)
+               {
+                 //ids+=data.contentDetails.videoId+",";
+                 Search.backgroundSearch(data.track.name, data.track.artists.map(function(elem){return elem.name;}).join(" "), Math.floor(data.track.duration_ms/1000), response.total, i + response.offset);
+
+               });
+               if(response.next){
+                   Search.importSpotifyPlaylist(response.next);
+               }
+           }
+        });
+    },
+
     addVideos: function(ids, playlist){
     	var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=***REMOVED***&id=";
     	request_url += ids;

static/js/spotify.js

@@ -0,0 +1,26 @@
+window.addEventListener("load", function(){
+  console.log("hello");
+  var client_id = "b934ecdd173648f5bcd38738af529d58";
+  var redirect  = "http://localhost/spotify_callback";
+  var response  = "token";
+  var scope     = "playlist-read-private playlist-read-collaborative user-read-private";
+  if(window.location.hash.length <= 0){
+    window.location.href = "https://accounts.spotify.com/authorize?client_id=" + client_id + "&scope=" + scope + "&show_dialog=false&response_type=" + response + "&redirect_uri=" + redirect;
+  } else {
+    var query_parameters = getQueryHash(window.location.hash);
+    window.opener.callback(query_parameters);
+  }
+});
+
+function getQueryHash(url){
+  var temp_arr = url.substring(1).split("&");
+  var done_obj = {};
+  var splitted;
+  for(var i in temp_arr) {
+    splitted = temp_arr[i].split("=");
+    if(splitted.length == 2) {
+      done_obj[splitted[0]] = splitted[1];
+    }
+  }
+  return done_obj;
+}