gaugendre/DAVIDS
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #1 from PhilippeGeek/master

Browse source 
Works with Angular.js is better
This commit is contained in:
Gabriel Augendre 2016-04-17 23:37:50 +02:00
parent d9308a6ba1 b770b05a27
commit e42a630bdd
7 changed files with 200 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app.js
View file

@ -91,16 +91,9 @@ app.get('/callback', function (req, res) {
refresh_token = body.refresh_token;
// we can also pass the token to the browser to make requests from there
res.redirect('/#' +
querystring.stringify({
access_token: access_token,
refresh_token: refresh_token
}));
res.send('<script>window.token = { access_token: "'+access_token+'", refresh_token: "'+refresh_token+'" };</script>')
} else {
res.redirect('/#' +
querystring.stringify({
error: 'invalid_token'
}));
res.send('<script>window.token = { access_token: "", refresh_token: "" };</script>')
}
});
}

91
public/index.html
View file

@ -1,76 +1,47 @@
<!doctype html>
<html>
<html ng-app="app">
<head>
<title>Spotify Duplicate Finder</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>
<body>
<div class="container">
<h1>Duplicates finder
<button class="btn btn-default has-spinner" id="obtain-new-token">
Refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
</button>
<span id="login">
<a href="/login" class="btn btn-lg btn-success">Log in with Spotify</a>
</span>
</h1>
<div id="error"></div>
<div id="loggedin">
<div id="user-profile">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">DuplicateFinder</a>
</div>
<div class="media">
<div class="pull-left">
<h2 id="playlists-title">Playlists
<button class="btn btn-default has-spinner" id="get-playlists">
Refresh <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
</button>
</h2>
<div id="playlists">
</div>
</div>
<div class="media-body">
<div id="dups">
</div>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Finder</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl">
<li ng-if="access_token == ''">
<a ng-click="login()" href="#"><b>Login With Spotify</b></a>
</li>
<li ng-if="access_token != ''">
<a ng-click="refresh()" href="#">Refresh my token</a>
</li>
<li ng-if="access_token != ''">
<a ng-click="logout()" href="#"><b>Logout</b></a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<ui-view></ui-view>
</div>
<script id="playlists-template" type="text/x-handlebars-template">
{{#list playlists}}
<a class="pl_item list-group-item has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">
{{pl_name}}
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
{{/list}}
</script>
<script id="user-profile-template" type="text/x-handlebars-template">
Logged in as {{display_name}}
</script>
<script id="dups-template" type="text/x-handlebars-template">
<h2>Duplicates in {{pl_name}}</h2>
{{message}}
{{#list dups}}
<div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>
{{/list}}
</script>
<script id="error-template" type="text/x-handlebars-template">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<strong>{{err_title}}</strong> {{{err_content}}}.
</div>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"

8
public/partials/dups.html Normal file
View file

@ -0,0 +1,8 @@
<h2>Duplicates in {{playlistName}}</h2>
<div ng-if="loaded == false">Loading...</div>
<div ng-if="tracks.length == 0 && loaded">No duplicate found</div>
<div ng-if="tracks.length > 0 && loaded">
<div class="list-group-item" ng-repeat="t in tracks">
{{t.track.name}} - <span ng-repeat="artist in t.track.artists">{{artist == t.track.artists[0]?'':', '}}{{artist.name}}</span>
</div>
</div>

1
public/partials/home.html Normal file
View file

@ -0,0 +1 @@
<p>Please connect to Spotify to access to the app.</p>

4
public/partials/logged.html Normal file
View file

@ -0,0 +1,4 @@
<div class="container row">
<div class="col-md-3"><ui-view name="playlist"></ui-view></div>
<div class="col-md-9"><ui-view name="dups"></ui-view></div>
</div>

8
public/partials/playlist.html Normal file
View file

@ -0,0 +1,8 @@
<div class="clearfix">
<h2 class="pull-left">Playlist</h2>
</div>
<div class="list-group ">
<a ng-class="current.playlistId == playlist.id?'list-group-item active':'list-group-item'" ng-repeat="playlist in playlists" ng-click="open(playlist)">
{{playlist.name}}
</a>
</div>

318
public/script.js
View file

@ -1,182 +1,156 @@
'use strict';
var access_token;
var refresh_token;
var error;
(function(){
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
userProfileTemplate = Handlebars.compile(userProfileSource),
userProfilePlaceholder = document.getElementById('user-profile');
var app = angular.module('app',['ui.router', 'ngStorage']);
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 () {
/**
* 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 = "<div class='list-group'>";
for (var i = 0, l = items.length; i < l; i++) {
out = out + options.fn(items[i]);
}
return out + "</div>";
});
var params = getHashParams();
access_token = params.access_token;
refresh_token = params.refresh_token;
error = params.error;
if (error) {
errorPlaceholder.innerHTML = errorTemplate({
err_title: 'Error!',
err_content: 'There was an error during the authentication. Feel free to <a href="https://github.com/Crocmagnon/Spotify-Duplicate-Finder/issues" class="alert-link">open an issue</a>.'
});
} else {
if (access_token) {
getPersonnalInfo(true, userProfilePlaceholder, userProfileTemplate);
} else {
// render initial screen
$('#login').show();
$('#loggedin').hide();
}
document.getElementById('get-playlists').addEventListener('click', function () {
var button = $(this);
button.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
}
});
button.removeClass('loading');
$('#dups').hide();
playlistsPlaceholder.innerHTML = playlistsTemplate({
playlists: pl
});
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
$stateProvider
.state('finder_public',{
templateUrl:'partials/home.html',
url: '/',
controller: 'HomeCtrl'
})
}, 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();
.state('finder',{
abstract: true,
templateUrl:'partials/logged.html',
url: '/finder',
controller: 'MainCtrl'
})
});
$(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');
});
}
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();
$('#obtain-new-token').show();
$('#loggedin').show();
},
error: function (response) {
if (response.status == 401) {
if (first) {
refreshToken();
getPersonnalInfo(false, userProfilePlaceholder, userProfileTemplate);
.state('finder.playlist',{
url: '/playlist',
views: {
playlist:{
templateUrl: 'partials/playlist.html',
controller: 'PlaylistCtrl'
},
dups:{
template: ''
}
}
else {
errorPlaceholder.innerHTML = errorTemplate({
err_title: 'Error!',
err_content: 'Error while refreshing token. Please <a href="/" class="alert-link">return to login</a>.'
});
})
.state('finder.playlist.dups',{
url: '/:uid/:id/:playlist',
views: {
'dups@finder': {
templateUrl: 'partials/dups.html',
controller: 'DupsCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
}]);
app.run(['$rootScope', '$state', '$localStorage',function($rootScope, $state, $localStorage){
$rootScope.$storage = $localStorage.$default({
access_token: "",
refresh_token: ""
});
$rootScope.access_token = $rootScope.$storage.access_token;
$rootScope.refresh_token = $rootScope.$storage.refresh_token;
$rootScope.$watch('access_token', function(newVal, oldVal, scope){
$rootScope.$storage.access_token = $rootScope.access_token;
$rootScope.$storage.refresh_token = $rootScope.refresh_token;
if(oldVal == "" && newVal != ""){
$state.go('finder.playlist');
} else if (oldVal != "" && newVal == ""){
$state.go('finder_public');
}
});
$rootScope.$on('$stateChangeStart',
function (event, toState) {
if ((toState.name != "finder_public") && $rootScope.access_token == "") {
event.preventDefault();
$state.go('finder_public');
}
});
}]);
app.controller("HomeCtrl",['$scope',function($scope){
}]);
app.controller("MainCtrl",['$scope', '$state',function($scope, $state){
$scope.current = {playlistId: undefined};
}]);
app.controller("PlaylistCtrl",['$scope', '$http', '$state',function($scope, $http, $state){
$scope.playlists = [];
$scope.load = function(){
$http.get('/get_playlists', {
params:{
access_token: $scope.access_token
}
}).then(function(result){
var r = result.data;
if(r.data){
$scope.playlists = r.data;
}
})
};
$scope.open = function(playlist) {
$scope.current.playlistId = playlist.id;
$state.go('finder.playlist.dups',{uid: playlist.owner.id, id: playlist.id, playlist: encodeURIComponent(playlist.name)})
};
$scope.load();
}]);
app.controller("DupsCtrl",['$scope', '$stateParams', '$http',function($scope, $stateParams, $http){
$scope.uid = $stateParams['uid'];
$scope.id = $stateParams['id'];
$scope.playlistName = decodeURIComponent($stateParams.playlist);
$scope.current.playlistId = $scope.id;
$scope.tracks = [];
$scope.loaded = false;
$scope.load = function () {
$http.get('/pl/' + $scope.uid + '/' + $scope.id, {
params: {
access_token: $scope.access_token
}
}).then(function(result) {
var r = result.data;
$scope.tracks = r.data;
$scope.loaded = true;
});
};
$scope.load();
}]);
app.controller('AuthCtrl',['$scope', '$rootScope', '$interval', '$http', function($scope, $rootScope, $interval, $http){
$scope.login = function(){
var openUrl = '/login';
window.$windowScope = $scope;
$scope.popup = window.open(openUrl, "Authenticate Account", "width=500, height=500");
var checker = $interval(function(){
if($scope.popup.closed){
$interval.cancel(checker);
} else if ($scope.popup.token != undefined && $scope.popup.token != null) {
$rootScope.access_token = $scope.popup.token.access_token;
$rootScope.refresh_token = $scope.popup.token.refresh_token;
$scope.popup.close();
$interval.cancel(checker);
}
}, 500);
return false;
};
$scope.logout = function(){
$rootScope.refresh_token = "";
$rootScope.access_token = "";
};
$scope.refresh = function(){
if($rootScope.refresh_token)
$http.get('/refresh_token',{params: {refresh_token: $rootScope.refresh_token}})
.then(function(result){
$rootScope.access_token = result.data.access_token || "";
}, function(failResult){
$rootScope.access_token = "";
$rootScope.refresh_token = "";
});
return false;
}
});
}
}])
})();