73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
let widgetNode = document.getElementById('widget');
|
|
let musicPlayerNode = document.getElementById('player');
|
|
let musicPlayerTitleNode = document.getElementById('title');
|
|
let musicPlayerArtistNode = document.getElementById('artist');
|
|
let musicPlayerBackgroundNode = document.getElementById('background_img');
|
|
let musicPlayerProgress = document.getElementById('progressbar');
|
|
let pausedAt = null;
|
|
let trackDuration = 0;
|
|
let trackProgress = 0;
|
|
let trackEnd = new Date();
|
|
|
|
window.addEventListener('message', function (event) {
|
|
let message = event.detail;
|
|
let data = message.data;
|
|
widgetNode.classList.add('active');
|
|
|
|
if (data == null) {
|
|
musicPlayerNode.classList.remove('active');
|
|
return;
|
|
};
|
|
|
|
if (!data.is_playing && !pausedAt) {
|
|
pausedAt = new Date();
|
|
};
|
|
|
|
if (data.is_playing) {
|
|
musicPlayerNode.classList.add('active');
|
|
pausedAt = null;
|
|
};
|
|
|
|
trackDuration = data.track.duration;
|
|
trackProgress = data.progress;
|
|
trackEnd = new Date().getTime() + data.track.duration - data.progress;
|
|
|
|
musicPlayerTitleNode.innerText = data.track.name;
|
|
musicPlayerArtistNode.innerText = data.track.artists.join(', ');
|
|
|
|
if (musicPlayerBackgroundNode.src != data.track.cover) {
|
|
musicPlayerBackgroundNode.src = data.track.cover;
|
|
};
|
|
});
|
|
|
|
function delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
};
|
|
|
|
async function update() {
|
|
if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
|
|
player.classList.remove('active');
|
|
|
|
await delay(100);
|
|
return update();
|
|
};
|
|
|
|
var progress;
|
|
if (pausedAt) {
|
|
progress = trackProgress / trackDuration * 100;
|
|
} else {
|
|
progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
|
|
};
|
|
|
|
if (progress >= 100) {
|
|
progress = 100;
|
|
};
|
|
|
|
musicPlayerProgress.style.setProperty('--progress', `${progress}%`);
|
|
|
|
await delay(100);
|
|
update();
|
|
};
|
|
|
|
update();
|