-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tpl
104 lines (84 loc) · 1.96 KB
/
index.tpl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
<head>
<style>
.album-container img{
float: left;
margin-right: 20px;
height: 150px;
}
.album-container {
font-size: 30px;
overflow: auto;
background: #cecece;
margin: 0.5em;
padding: 4px;
font-family: sans-serif;
}
.album-list li a{
text-decoration: none;
color: #5e5e5e;
}
.artist {
margin-top: 1em;
margin-bottom: 0.5em;
}
.album {
font-weight: 700;
}
</style>
<script src="/static/spotify-web-api.js"></script>
<script>
function getAlbumNode(album_info, uri) {
var artists = [];
for (var i=0;i<album_info.artists.length;i++) {
artists.push(album_info.artists[i].name);
}
var artist = "";
if (artists.length > 0) {
artist = artists.join(", ");
}
var name = album_info.name;
var image = undefined;
for (var i=0;i<album_info.images.length;i++) {
var img = album_info.images[i];
console.log(img);
if (img.height > 500) {
image = img.url;
}
}
if (image) {
image = '<img src="' + image + '">';
} else {
image = "";
}
return '<div class="album-container">' + image + '<div class="artist">' + artist + '</div>' + '<div class="album">' + name + '</div></div>';
};
</script>
</head>
<body>
<h1>Faux Vinyl</h1>
% if message:
<h2>{{message}}</h2>
% end
<ul class="album-list">
% for album in albums:
<li><a href="/play/{{album.uri}}" class="js-spotify-album" data-id="{{album.id}}">{{album.uri}}</a></li>
% end
</ul>
<script>
var spotifyApi = new SpotifyWebApi();
var uris = [];
var albums = document.getElementsByClassName('js-spotify-album');
for (var i=0;i<albums.length;i++) {
var el = albums[i];
var uri = el.getAttribute("data-id");
spotifyApi.getAlbum(uri).then(function(data) {
this.innerHTML = getAlbumNode(data, uri);
console.log('Album information', data);
}.bind(el), function(err) {
console.error(err);
});
}
</script>
</body>
</html>