Added export to youtube and improved importing from YouTube

.htaccess

@@ -18,12 +18,12 @@ RewriteCond %{REQUEST_URI} !/static
 RewriteRule ^(.*)$ php/bot.php [L,NC,QSA]
 
 RewriteCond %{HTTP_HOST} ^zoff.no
-RewriteCond %{REQUEST_URI} /spotify_callback
+RewriteCond %{REQUEST_URI} /o_callback
-RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
+RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
 
 RewriteCond %{HTTP_HOST} ^localhost
-RewriteCond %{REQUEST_URI} /spotify_callback
+RewriteCond %{REQUEST_URI} /o_callback
-RewriteRule ^(.*)$ php/spotify.html [L,NC,QSA]
+RewriteRule ^(.*)$ php/callback.html [L,NC,QSA]
 
 
 #RewriteRule (?i)^remote/(.*) php/controller.php?id=$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', '!static/js/spotify.js'])
+    gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js', '!static/js/callback.js'])
         .pipe(uglify({
         	mangle: true,
             compress: true,
@@ -25,14 +25,14 @@ gulp.task('embed', function () {
         .pipe(gulp.dest('static/dist'));
 });
 
-gulp.task('spotify', function () {
+gulp.task('callback', function () {
-    gulp.src(['static/js/spotify.js'])
+    gulp.src(['static/js/callback.js'])
         .pipe(uglify({
             mangle: true,
             compress: true,
             enclose: true
         }))
-        .pipe(concat('spotify.min.js'))
+        .pipe(concat('callback.min.js'))
         .pipe(gulp.dest('static/dist'));
 });
 
@@ -62,7 +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/callback.js', 'static/js/helpers.js'], ['callback']);
     //gulp.watch('static/js/*.js', ['nochan']);
     gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
 });

index.php

@@ -100,7 +100,7 @@
                     </li>
                     <li>
                         <a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
-                            <i class="mdi-action-settings"></i>
+                            <i class="mdi-image-dehaze"></i>
                             <span class="hover-text">Conf</span>
                         </a>
                     </li>

php/panel.php

@@ -91,8 +91,6 @@
                             <input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
                             Remove
                         </label></div></li>
-
-
                       </ul>
                 </form>
             </div>
@@ -100,7 +98,7 @@
     </ul>
 </li>
 
-<li class="no-padding remote-panel">
+<li class="no-padding remote-panel hide-on-small-only">
     <ul class="collapsible collapsible-accordion">
         <li>
             <a class="collapsible-header bold waves-effect">Remote Control
@@ -124,7 +122,6 @@
                         </a>
                         <a>
                           You can control this Zöff instance from another device by going to <b>https://remote.zoff.no/</b>
-
                         </a>
                     </li>
                 </ul>
@@ -133,33 +130,36 @@
     </ul>
 </li>
 
-<li class="no-padding">
+
+<li class="no-padding hide-on-small-only">
     <ul class="collapsible collapsible-accordion">
         <li>
             <a class="collapsible-header bold waves-effect import-a">Import Playlist
-                <i class="mdi-communication-import-export"></i>
+                <i class="mdi-hardware-keyboard-arrow-down"></i>
             </a>
             <div class="collapsible-body">
                 <ul>
                     <li class="white-bg">
                         <div class="input-field field-settings youtube_unclicked import-buttons">
-                            <a class="modal-trigger waves-effect red btn import-youtube" title="Need help with the site?">
+                            <a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
                               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" />
+                                <input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
                                 <li id="playlist_loader" 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>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -167,9 +167,11 @@
                                             <div class="spinner-layer spinner-red">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -177,9 +179,11 @@
                                             <div class="spinner-layer spinner-yellow">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -187,9 +191,11 @@
                                             <div class="spinner-layer spinner-green">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -201,7 +207,7 @@
                     </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">
+                            <a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
                               Spotify
                             </a>
                         </div>
@@ -215,9 +221,11 @@
                                             <div class="spinner-layer spinner-blue">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -225,9 +233,11 @@
                                             <div class="spinner-layer spinner-red">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -235,9 +245,11 @@
                                             <div class="spinner-layer spinner-yellow">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -245,9 +257,11 @@
                                             <div class="spinner-layer spinner-green">
                                                 <div class="circle-clipper left">
                                                     <div class="circle"></div>
-                                            </div><div class="gap-patch">
+                                                </div>
+                                                <div class="gap-patch">
                                                     <div class="circle"></div>
-                                            </div><div class="circle-clipper right">
+                                                </div>
+                                                <div class="circle-clipper right">
                                                     <div class="circle"></div>
                                                 </div>
                                             </div>
@@ -267,9 +281,97 @@
                                 <i class="mdi-action-search search-extra"></i></a>
                             </li>
                         </ul>
+                    </li>
+                </ul>
             </div>
         </li>
     </ul>
+</li>
+
+
+<li class="no-padding hide-on-small-only">
+    <ul class="collapsible collapsible-accordion white-bg">
+        <li>
+            <a class="collapsible-header bold waves-effect export-a">Export Playlist
+                <i class="mdi-hardware-keyboard-arrow-up"></i>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li class="white-bg">
+                        <div class="input-field field-settings youtube_export_button export-buttons">
+                            <a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
+                              YouTube
+                            </a>
+                            <li id="playlist_loader_export" 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>
+                        </div>
+                        <div class="input-field field-settings">
+                        </div>
+                    </li>
+                    <!--<li class="white-bg">
+                        <div class="input-field field-settings spotify_unauthenticated export-buttons">
+                            <a class="modal-trigger waves-effect green lighten btn export-spotify-auth" id="listExportSpotify" title="Export to Spotify">
+                              Spotify
+                            </a>
+                        </div>
+                    </li>-->
+                    <li class="exported-list-container white-bg hide">
+                        <ul class="input-field field-settings white-bg">
+                            <li class="white-bg exported-list white-bg">
+
+                            </li>
+                        </ul>
                     </li>
                 </ul>
             </div>

php/spotify.html

@@ -1,10 +0,0 @@
-<!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

@@ -69,14 +69,14 @@
   line-height: 40px !important;
 }
 
-.import-spotify-auth, .import-youtube{
+.import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist{
   color:white !important;
   height:40px !important;
   line-height: 40px !important;
   margin: 0 4rem 0 0 !important;
 }
 
-.import-buttons{
+.import-buttons, .export-buttons{
   padding:10px;
 }
 
@@ -424,11 +424,11 @@ display: inline;
 }
 
 .white-bg{
-    background-color:white;
+    background-color:white !important;
 }
 
 .white-bg:hover{
-    background-color:white;
+    background-color:white !important;
 }
 
 .card .card-content {
@@ -960,8 +960,9 @@ ul #chat-log{
   margin-top:15px;
 }
 
-#playlist_loader, #playlist_loader_spotify {
+#playlist_loader, #playlist_loader_spotify, #playlist_loader_export {
   padding: 10px 0px 0px 70px;
+  background-color: white !important;
 }
 
 #search_loader:hover {
@@ -1542,6 +1543,7 @@ nav ul li:hover, nav ul li.active {
 
     .tabs_height{
       height:auto !important;
+      overflow:initial;
     }
 
     .brand-mobile{

static/dist/spotify.min.js

@@ -1 +1 @@
-!function(){function o(o){var i,t=o.substring(1).split("&"),a={};for(var n in t)i=t[n].split("="),2==i.length&&(a[i[0]]=i[1]);return a}window.addEventListener("load",function(){var i="b934ecdd173648f5bcd38738af529d58",t=window.location.protocol+"//"+window.location.hostname+"/spotify_callback",a="token",n="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="+i+"&scope="+n+"&show_dialog=false&response_type="+a+"&redirect_uri="+t;else{var e=o(window.location.hash);window.opener.callback(e)}})}();
+!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(){var t,o,n,a=e(window.location.hash);window.location.protocol+"//"+window.location.hostname+"/callback";if(a.spotify)t="b934ecdd173648f5bcd38738af529d58",o="token",n="playlist-read-private playlist-read-collaborative user-read-private",console.log("spotify");else if(a.youtube)t="",o="",n="",console.log("youtube");else{var i=e(window.location.hash);window.opener.callback(i)}})}();

static/js/list.js

@@ -179,6 +179,64 @@ var List = {
     	return true;
     },
 
+    exportToYoutube: function(){
+        var request_url = "https://www.googleapis.com/youtube/v3/playlists?part=snippet";
+        $.ajax({
+            type: "POST",
+            url: request_url,
+            headers: {
+                'Authorization': 'Bearer ' + access_token_data_youtube.access_token,
+                'Content-Type': 'application/json'
+            },
+            data: JSON.stringify({
+                    snippet: {
+                        title: chan.toLowerCase(),
+                        description: 'Playlist exported from zoff',
+                    }
+            }),
+            success: function(response){
+                var number_added = 0;
+                var playlist_id = response.id;
+                $.each(full_playlist, function(i, data){
+                    var request_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet";
+                    $.ajax({
+                        type: "POST",
+                        url: request_url,
+                        headers: {
+                            'Authorization': 'Bearer ' + access_token_data_youtube.access_token,
+                            'Content-Type': 'application/json'
+                        },
+                        data: JSON.stringify({
+                            'snippet': {
+                                'playlistId': playlist_id,
+                                'resourceId': {
+                                    'kind': 'youtube#video',
+                                    'videoId': data.id
+                                }
+                            }
+                        }),
+                        success: function(response){
+                            Helper.log("Added video: " + data.id + " to playlist id " + playlist_id);
+                            if(number_added == full_playlist.length - 1){
+                                Helper.log("All videoes added!");
+                                Helper.log("url: https://www.youtube.com/playlist?list=" + playlist_id);
+                                $(".exported-list").append("<h5>Exported URL:</h5>");
+                                $(".exported-list").append("<a target='_blank' class='btn orange exported-playlist' href='https://www.youtube.com/playlist?list=" + playlist_id + "'>" + chan + "</a>");
+                                $("#playlist_loader_export").addClass("hide");
+                                //$(".youtube_export_button").removeClass("hide");
+                                $(".exported-list-container").removeClass("hide");
+                            }
+                            number_added += 1;
+                        }
+                    });
+                });
+            },
+            error: function(response){
+                Helper.log(response);
+            }
+        });
+    },
+
     importOldList: function(chan){
         var ids="";
         var num=0;

static/js/listeners.js

@@ -35,6 +35,8 @@ var embed_height          = 300;
 var embed_width           = 600;
 var embed_autoplay        = "&autoplay";
 var connect_error         = false;
+var access_token_data_youtube = {};
+var youtube_authenticated = false;
 
 if(localStorage.debug === undefined){
 	var debug = false;
@@ -173,7 +175,6 @@ function init(){
 	}
 
 	if($("#alreadychannel").length === 0 || Helper.mobilecheck()){
-        Helper.log("ISAJODIJOQIJW");
 		setup_youtube_listener();
 		get_list_listener();
 		setup_suggested_listener();
@@ -314,6 +315,15 @@ function embed_code(autoplay, width, height){
     return '<embed src="https://zoff.no/embed.html#' + chan.toLowerCase() + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
 }
 
+function randomString(length){
+    var text = "";
+    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
+    for(var i = 0; i < length; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+}
+
 function spotify_is_authenticated(bool){
     if(bool){
         Helper.log("------------------------");
@@ -460,10 +470,45 @@ $("#clickme").click(function(){
 	Player.player.playVideo();
 });
 
+$(document).on("click", "#listExport", function(e){
+    e.preventDefault();
+    Helper.log(full_playlist);
+    $("#playlist_loader_export").removeClass("hide");
+    $(".youtube_export_button").addClass("hide");
+    if(!youtube_authenticated){
+        var nonce = randomString(29);
+        window.callback = function(data) {
+            access_token_data_youtube = data;
+            if(access_token_data_youtube.state == nonce){
+                youtube_authenticated = true;
+                setTimeout(function(){
+                    youtube_authenticated = false;
+                    access_token_data_youtube = {};
+                }, access_token_data_youtube.expires_in * 1000);
+                List.exportToYoutube();
+            } else {
+                access_token_data_youtube = "";
+                console.error("Nonce doesn't match");
+            }
+            youtube_window.close();
+            window.callback = "";
+        };
+        youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600");
+    } else {
+        List.exportToYoutube();
+    }
+});
+
+$(document).on("click", "#listExportSpotify", function(e){
+    e.preventDefault();
+    Helper.log(full_playlist);
+});
+
 $(document).on("submit", "#listImport", function(e){
     e.preventDefault();
-    if($("#import").val() !== ""){
+    var url = $("#import").val().split("https://www.youtube.com/playlist?list=");
-    	Search.importPlaylist(document.getElementById("import").value);
+    if($("#import").val() !== "" && url.length == 2){
+    	Search.importPlaylist(url[1]);
         document.getElementById("import").value = "";
         document.getElementById("import").disabled = true;
         $("#import").addClass("hide");
@@ -616,20 +661,27 @@ $(document).on("click", ".suggested-link", function(e){
 
 $(document).on("click", ".import-spotify-auth", function(e){
     e.preventDefault();
+    var nonce = randomString(29);
     window.callback = function(data) {
         access_token_data = data;
+        if(access_token_data.state == nonce){
             spotify_authenticated = true;
             spotify_is_authenticated(true);
             setTimeout(function(){
                 spotify_authenticated = false;
+                access_token_data = {};
                 spotify_is_authenticated(false);
                 $(".spotify_authenticated").css("display", "none");
                 $(".spotify_unauthenticated").css("display", "block");
             }, access_token_data.expires_in * 1000);
+        } else {
+            access_token_data = {};
+            console.error("States doesn't match");
+        }
         spotify_window.close();
         window.callback = "";
     };
-    spotify_window = window.open("/spotify_callback", "", "width=600, height=600");
+    spotify_window = window.open("/o_callback#spotify=true&nonce=" + nonce, "", "width=600, height=600");
 });
 
 $(document).on("click", ".import-youtube", function(e){

static/js/player.js

@@ -20,7 +20,7 @@ var Player = {
         } catch(e){}
         Helper.log("video_id variable: " + video_id);
         Helper.log("---------------------------------");
-        if(obj.length === 0){
+        if(!obj.np){
 
             document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
             $("#player_overlay").height($("#player").height());

static/js/search.js

@@ -227,11 +227,6 @@ var Search = {
                 }
             }
         });
-        if(current == totalNumber - 1){
-            document.getElementById("import_spotify").disabled = false;
-            $("#import_spotify").removeClass("hide");
-            $("#playlist_loader_spotify").addClass("hide");
-        }
     },
 
     readySubmit: function(found, obj){
@@ -247,6 +242,9 @@ var Search = {
             $.each(Search.submitArray, function(i, data){
                 Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1);
             });
+            document.getElementById("import_spotify").disabled = false;
+            $("#import_spotify").removeClass("hide");
+            $("#playlist_loader_spotify").addClass("hide");
             Search.submitArray = [];
             Search.submitArrayExpected = null;
         }
@@ -265,22 +263,60 @@ var Search = {
 
     importPlaylist: function(pId,pageToken){
       token = "";
+      var headers;
+      var datatype;
       if(pageToken !== undefined)
         token = "&pageToken="+pageToken;
       playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId+token;
+      if(youtube_authenticated){
+          datatype = "html";
+          headers = {
+              'Content-Type': 'application/json',
+              'Authorization': 'Bearer ' + access_token_data_youtube.access_token
+          };
+      } else {
+          headers = {};//'Content-Type': 'application/json'};
+          datatype = "jsonp";
+      }
       $.ajax({
         type: "GET",
         url: playlist_url,
-        dataType:"jsonp",
+        dataType: datatype,
+        //dataType:"jsonp",
+        headers: headers,
         success: function(response)
         {
             if(response.error){
+                if(response.error.errors[0].reason == "playlistItemsNotAccessible"){
+                    var nonce = randomString(29);
+                    window.callback = function(data) {
+                        access_token_data_youtube = data;
+                        if(access_token_data_youtube.state == nonce){
+                            youtube_authenticated = true;
+                            setTimeout(function(){
+                                youtube_authenticated = false;
+                                access_token_data_youtube = {};
+                            }, access_token_data_youtube.expires_in * 1000);
+                            Search.importPlaylist(pId, pageToken);
+                        } else {
+                            access_token_data_youtube = "";
+                            console.error("Nonce doesn't match");
+                        }
+                        youtube_window.close();
+                        window.callback = "";
+                    };
+                    youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600");
+                } else {
+                    Helper.log(response.error);
                     document.getElementById("import").disabled = false;
                     $("#playlist_loader").addClass("hide");
                     $("#import").removeClass("hide");
                     Materialize.toast("It seems you've entered a invalid url.", 4000);
+                }
+
             }  else {
               var ids="";
+              if(typeof(response) == "string") response = $.parseJSON(response);
               //Search.addVideos(response.items[0].contentDetails.videoId);
               //response.items.shift();
               $.each(response.items, function(i,data)

static/js/spotify.js

@@ -1,25 +0,0 @@
-window.addEventListener("load", function(){
-  var client_id = "b934ecdd173648f5bcd38738af529d58";
-  var redirect  = window.location.protocol + "//" + window.location.hostname + "/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;
-}