-
Notifications
You must be signed in to change notification settings - Fork 24
/
script.js
45 lines (39 loc) · 1.45 KB
/
script.js
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
var mainContainer = document.getElementById('js-main-container'),
loginContainer = document.getElementById('js-login-container'),
loginButton = document.getElementById('js-btn-login'),
background = document.getElementById('js-background');
var spotifyPlayer = new SpotifyPlayer({
exchangeHost: 'http://localhost:5000'
});
var template = function (data) {
return `
<div class="main-wrapper">
<img class="now-playing__img" src="${data.item.album.images[0].url}">
<div class="now-playing__side">
<div class="now-playing__name">${data.item.name}</div>
<div class="now-playing__artist">${data.item.artists[0].name}</div>
<div class="now-playing__status">${data.is_playing ? 'Playing' : 'Paused'}</div>
<div class="progress">
<div class="progress__bar" style="width:${data.progress_ms * 100 / data.item.duration_ms}%"></div>
</div>
</div>
</div>
<div class="background" style="background-image:url(${data.item.album.images[0].url})"></div>
`;
};
spotifyPlayer.on('update', response => {
mainContainer.innerHTML = template(response);
});
spotifyPlayer.on('login', user => {
if (user === null) {
loginContainer.style.display = 'block';
mainContainer.style.display = 'none';
} else {
loginContainer.style.display = 'none';
mainContainer.style.display = 'block';
}
});
loginButton.addEventListener('click', () => {
spotifyPlayer.login();
});
spotifyPlayer.init();