From f475f5423c7d0e1f1bf7ba7d95753812dbcb7ca4 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 12:59:12 +0200 Subject: [PATCH 01/15] Add active class when clicking --- public/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/index.html b/public/index.html index 99ad836..f797fcc 100644 --- a/public/index.html +++ b/public/index.html @@ -207,6 +207,8 @@ $(document).on('click', '.pl_item', function (e) { e.preventDefault(); var pl_name = $(this).text(); + $('.pl_item').removeClass('active'); + $(this).addClass('active'); var target = document.getElementById('spin-dups'); var spinner = new Spinner(spinnerOpts).spin(target); $.ajax({ From bbeb352e04ee41c01606fa48fc58154b3f8cd9ea Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 15:35:54 +0200 Subject: [PATCH 02/15] Better spinning wheels --- public/index.html | 84 ++++++++++++++++++++++++++--------------------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/public/index.html b/public/index.html index f797fcc..1be1139 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ Spotify Duplicate Finder + @@ -28,15 +61,13 @@

Duplicates finder

- -
+
-
@@ -48,7 +79,7 @@

Logged in as {{display_name}}

- + - From 3d32a436ac4091a8f8320ebc3cba23fb174a5468 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 16:13:45 +0200 Subject: [PATCH 05/15] hide dups when loading + fix list display --- public/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 6995a14..f7fb78f 100644 --- a/public/index.html +++ b/public/index.html @@ -103,7 +103,7 @@ - - - From cf4d1ec7f21dc2cd36d501d4e5d36ccd16562575 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 17:38:58 +0200 Subject: [PATCH 09/15] Externalize JS --- public/index.html | 154 +--------------------------------------------- public/script.js | 153 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 153 deletions(-) create mode 100644 public/script.js diff --git a/public/index.html b/public/index.html index 5838608..e9dbe1e 100644 --- a/public/index.html +++ b/public/index.html @@ -63,159 +63,7 @@ - + diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..890ca95 --- /dev/null +++ b/public/script.js @@ -0,0 +1,153 @@ +'use strict'; + +var access_token; +var refresh_token; +var error; +(function () { + + /** + * Obtains parameters from the hash of the URL + * @return Object + */ + function getHashParams() { + var hashParams = {}; + var e, r = /([^&;=]+)=?([^&;]*)/g, + q = window.location.hash.substring(1); + while (e = r.exec(q)) { + hashParams[e[1]] = decodeURIComponent(e[2]); + } + return hashParams; + } + + Handlebars.registerHelper('list', function (items, options) { + var out = "
"; + + for (var i = 0, l = items.length; i < l; i++) { + out = out + options.fn(items[i]); + } + + return out + "
"; + }); + + var userProfileSource = document.getElementById('user-profile-template').innerHTML, + userProfileTemplate = Handlebars.compile(userProfileSource), + userProfilePlaceholder = document.getElementById('user-profile'); + + var playlistsSource = document.getElementById('playlists-template').innerHTML, + playlistsTemplate = Handlebars.compile(playlistsSource), + playlistsPlaceholder = document.getElementById('playlists'); + + var dupsSource = document.getElementById('dups-template').innerHTML, + dupsTemplate = Handlebars.compile(dupsSource), + dupsPlaceholder = document.getElementById('dups'); + + var params = getHashParams(); + + access_token = params.access_token; + refresh_token = params.refresh_token; + error = params.error; + + if (error) { + alert('There was an error during the authentication'); + } else { + if (access_token) { + $.ajax({ + url: 'https://api.spotify.com/v1/me', + headers: { + 'Authorization': 'Bearer ' + access_token + }, + success: function (response) { + userProfilePlaceholder.innerHTML = userProfileTemplate(response); + + $('#login').hide(); + $('#loggedin').show(); + } + }); + } else { + // render initial screen + $('#login').show(); + $('#loggedin').hide(); + } + + document.getElementById('get-playlists').addEventListener('click', function () { + var currentElement = $(this); + currentElement.addClass('loading'); + $.ajax({ + url: '/get_playlists', + data: { + 'access_token': access_token + } + }).done(function (data) { + var pl = data.data.map(function (item) { + return { + pl_uid: item.owner.id, + pl_name: item.name, + pl_id: item.id + } + }); + + currentElement.removeClass('loading'); + + playlistsPlaceholder.innerHTML = playlistsTemplate({ + playlists: pl + }); + }) + }, false); + + $(document).on('click', '.pl_item', function (e) { + e.preventDefault(); + var pl_name = $(this).text(); + $('.pl_item').removeClass('active'); + var currentElement = $(this); + currentElement.addClass('active'); + currentElement.addClass('loading'); + $('#dups').hide(); + $.ajax({ + url: $(this).attr('href'), + data: { + 'access_token': access_token + } + }).done(function (data) { + var dups = data.data.map(function (item) { + return { + dup_trackname: item.track.name, + dup_artist: item.track.artists[0].name + } + }); + currentElement.removeClass('loading'); + if (data.data.length > 0) { + dupsPlaceholder.innerHTML = dupsTemplate({ + dups: dups, + pl_name: pl_name + }); + } + else { + dupsPlaceholder.innerHTML = dupsTemplate({ + dups: [], + message: "No duplicate found.", + pl_name: pl_name + }); + } + $('#dups').show(); + }) + }); + + $(document).on('click', '#obtain-new-token', function () { + refreshToken(); + }); + } +})(); + +function refreshToken() { + var button = $('#obtain-new-token'); + button.addClass('loading'); + $.ajax({ + url: '/refresh_token', + data: { + 'refresh_token': refresh_token + } + }).done(function (data) { + access_token = data.access_token; + button.removeClass('loading'); + }); +} From 0c42e0b9b3fb6e4428b6d9ad692629eb5fdb192a Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 17:52:10 +0200 Subject: [PATCH 10/15] Try to refresh token when failure at startup --- public/script.js | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/public/script.js b/public/script.js index 890ca95..3072b40 100644 --- a/public/script.js +++ b/public/script.js @@ -51,18 +51,7 @@ var error; alert('There was an error during the authentication'); } else { if (access_token) { - $.ajax({ - url: 'https://api.spotify.com/v1/me', - headers: { - 'Authorization': 'Bearer ' + access_token - }, - success: function (response) { - userProfilePlaceholder.innerHTML = userProfileTemplate(response); - - $('#login').hide(); - $('#loggedin').show(); - } - }); + getPersonnalInfo(true, userProfilePlaceholder, userProfileTemplate); } else { // render initial screen $('#login').show(); @@ -151,3 +140,29 @@ function refreshToken() { button.removeClass('loading'); }); } + +function getPersonnalInfo(first, userProfilePlaceholder, userProfileTemplate) { + $.ajax({ + url: 'https://api.spotify.com/v1/me', + headers: { + 'Authorization': 'Bearer ' + access_token + }, + success: function (response) { + userProfilePlaceholder.innerHTML = userProfileTemplate(response); + + $('#login').hide(); + $('#loggedin').show(); + }, + error: function (response) { + if (response.status == 401) { + if (first) { + refreshToken(); + getPersonnalInfo(false, userProfilePlaceholder, userProfileTemplate); + } + else { + alert("Error getting personnal info"); + } + } + } + }); +} From 9d3aefbe1b623871e562a4495869e13cba197a46 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 18:11:05 +0200 Subject: [PATCH 11/15] Better errors --- public/index.html | 9 +++++++++ public/script.js | 40 ++++++++++++++++++++++++++-------------- 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/public/index.html b/public/index.html index e9dbe1e..d93ebb0 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,7 @@
+

This is an example of the Authorization Code flow

Log in with Spotify @@ -61,8 +62,16 @@ {{/list}} + + + diff --git a/public/script.js b/public/script.js index 3072b40..a3792ef 100644 --- a/public/script.js +++ b/public/script.js @@ -3,6 +3,23 @@ var access_token; var refresh_token; var error; + +var userProfileSource = document.getElementById('user-profile-template').innerHTML, + userProfileTemplate = Handlebars.compile(userProfileSource), + userProfilePlaceholder = document.getElementById('user-profile'); + +var playlistsSource = document.getElementById('playlists-template').innerHTML, + playlistsTemplate = Handlebars.compile(playlistsSource), + playlistsPlaceholder = document.getElementById('playlists'); + +var dupsSource = document.getElementById('dups-template').innerHTML, + dupsTemplate = Handlebars.compile(dupsSource), + dupsPlaceholder = document.getElementById('dups'); + +var errorSource = document.getElementById('error-template').innerHTML, + errorTemplate = Handlebars.compile(errorSource), + errorPlaceholder = document.getElementById('error'); + (function () { /** @@ -29,18 +46,6 @@ var error; return out + "
"; }); - var userProfileSource = document.getElementById('user-profile-template').innerHTML, - userProfileTemplate = Handlebars.compile(userProfileSource), - userProfilePlaceholder = document.getElementById('user-profile'); - - var playlistsSource = document.getElementById('playlists-template').innerHTML, - playlistsTemplate = Handlebars.compile(playlistsSource), - playlistsPlaceholder = document.getElementById('playlists'); - - var dupsSource = document.getElementById('dups-template').innerHTML, - dupsTemplate = Handlebars.compile(dupsSource), - dupsPlaceholder = document.getElementById('dups'); - var params = getHashParams(); access_token = params.access_token; @@ -48,7 +53,11 @@ var error; error = params.error; if (error) { - alert('There was an error during the authentication'); + + errorPlaceholder.innerHTML = errorTemplate({ + err_title: 'Error!', + err_content: 'There was an error during the authentication. Feel free to open an issue.' + }); } else { if (access_token) { getPersonnalInfo(true, userProfilePlaceholder, userProfileTemplate); @@ -160,7 +169,10 @@ function getPersonnalInfo(first, userProfilePlaceholder, userProfileTemplate) { getPersonnalInfo(false, userProfilePlaceholder, userProfileTemplate); } else { - alert("Error getting personnal info"); + errorPlaceholder.innerHTML = errorTemplate({ + err_title: 'Error!', + err_content: 'Error while refreshing token. Please return to login.' + }); } } } From 3d83406fffafe1fe784f4ddebb301fa777c6d180 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 18:24:58 +0200 Subject: [PATCH 12/15] Update login page --- public/index.html | 17 ++++++++++------- public/style.css | 4 ++++ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index d93ebb0..3100182 100644 --- a/public/index.html +++ b/public/index.html @@ -9,13 +9,13 @@
+

Duplicates finder + +

-
-

This is an example of the Authorization Code flow

- Log in with Spotify -
-

Duplicates finder

@@ -64,14 +64,17 @@ - + diff --git a/public/style.css b/public/style.css index 6845eab..ea731b2 100644 --- a/public/style.css +++ b/public/style.css @@ -2,6 +2,10 @@ display: none; } +#login { + display: inline-block; +} + .text-overflow { overflow: hidden; text-overflow: ellipsis; From 773a501e40866ea55e4c7f65a3b8f5a6c89ee4cd Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 18:33:32 +0200 Subject: [PATCH 13/15] Hide dups when refreshing playlists --- public/script.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/script.js b/public/script.js index a3792ef..d33c9fa 100644 --- a/public/script.js +++ b/public/script.js @@ -68,8 +68,8 @@ var errorSource = document.getElementById('error-template').innerHTML, } document.getElementById('get-playlists').addEventListener('click', function () { - var currentElement = $(this); - currentElement.addClass('loading'); + var button = $(this); + button.addClass('loading'); $.ajax({ url: '/get_playlists', data: { @@ -84,7 +84,8 @@ var errorSource = document.getElementById('error-template').innerHTML, } }); - currentElement.removeClass('loading'); + button.removeClass('loading'); + $('#dups').hide(); playlistsPlaceholder.innerHTML = playlistsTemplate({ playlists: pl From 884daa8930c11ea911c87aece1c9b08d8647f485 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 17 Apr 2016 19:04:17 +0200 Subject: [PATCH 14/15] Update refresh and login buttons --- public/index.html | 10 +++++----- public/script.js | 1 + public/style.css | 10 +--------- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/public/index.html b/public/index.html index 3100182..7b02799 100644 --- a/public/index.html +++ b/public/index.html @@ -10,9 +10,12 @@

Duplicates finder -
+ + Log in with Spotify -
+

@@ -49,9 +52,6 @@