81 lines
2.5 KiB
JavaScript
81 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() {
|
||
|
let data = fetch('https://alfieking.dev/api/v1/current_song')
|
||
|
.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.image;
|
||
|
document.getElementById('music-title').innerText = data.title;
|
||
|
document.getElementById('music-info').innerText = data.artist + ' - ' + data.album;
|
||
|
let progress = data.progress / data.length * 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 != null) {
|
||
|
if (data.idle) {
|
||
|
hideUi();
|
||
|
} else {
|
||
|
updateUi(data);
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
hideUi();
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
update();
|
||
|
setInterval(update, 10000);
|