78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
var enableMusic = true;
|
|
|
|
document.getElementById('music').addEventListener('mouseover', function() { musicHover(); });
|
|
|
|
function musicHover() {
|
|
if (!enableMusic) {
|
|
return;
|
|
}
|
|
let icon = document.getElementById('music-icon');
|
|
icon.style.width = '8rem';
|
|
icon.style.height = '8rem';
|
|
icon.style.borderRadius = '500px 0 0 500px';
|
|
let div = document.getElementById('music-expand');
|
|
div.style.display = 'flex';
|
|
div.style.width = '20rem';
|
|
div.style.height = '8rem';
|
|
let title = document.getElementById('music-title');
|
|
title.style.display = 'block';
|
|
let info = document.getElementById('music-info');
|
|
info.style.display = 'block';
|
|
let progress = document.getElementById('music-progress');
|
|
progress.style.display = 'block';
|
|
}
|
|
|
|
document.getElementById('music').addEventListener('mouseout', function() { musicOut(); });
|
|
|
|
function musicOut() {
|
|
let icon = document.getElementById('music-icon');
|
|
icon.style.width = '1.5rem';
|
|
icon.style.height = '1.5rem';
|
|
icon.style.borderRadius = '50%';
|
|
let div = document.getElementById('music-expand');
|
|
div.style = '';
|
|
let title = document.getElementById('music-title');
|
|
title.style.display = 'none';
|
|
let info = document.getElementById('music-info');
|
|
info.style.display = 'none';
|
|
let progress = document.getElementById('music-progress');
|
|
progress.style.display = 'none';
|
|
}
|
|
|
|
function fetchData() {
|
|
// allow cors
|
|
let data = fetch('https://alfieking.dev/api/nowplaying')
|
|
.then(response => response.json()).then(data => { return data; })
|
|
.catch(error => { return null;});
|
|
return data;
|
|
}
|
|
|
|
function updateUi(data) {
|
|
enableMusic = true;
|
|
document.getElementById('music').style.display = 'flex';
|
|
document.getElementById('music-icon').src = data.item.album.images[0].url;
|
|
document.getElementById('music-title').innerText = data.item.name;
|
|
document.getElementById('music-info').innerText = data.item.artists[0].name + ' - ' + data.item.album.name;
|
|
let progress = data.progress_ms / data.item.duration_ms * 100;
|
|
document.getElementById('music-progress').style.width = progress + '%';
|
|
}
|
|
|
|
function hideUi() {
|
|
enableMusic = false;
|
|
document.getElementById('music').style.display = 'none';
|
|
}
|
|
|
|
function update() {
|
|
fetchData().then(data => {
|
|
console.log(data);
|
|
if (data.item != null) {
|
|
updateUi(data);
|
|
}
|
|
else {
|
|
hideUi();
|
|
}
|
|
});
|
|
}
|
|
|
|
update();
|
|
setInterval(update, 3000); |