39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
import Stateful from './silver.min.js';
|
|
|
|
const musicMeta = new Stateful({
|
|
artworkURL: 'https://arimelody.space/uploads/musicart/free2play.png',
|
|
title: 'falling asleep - house version',
|
|
artist: 'ari melody',
|
|
album: 'free2play',
|
|
});
|
|
|
|
const elArtwork = document.getElementById('artwork');
|
|
const elTitle = document.getElementById('title');
|
|
const elArtistAlbum = document.getElementById('artist-album');
|
|
const elMetadata = document.getElementById('metadata');
|
|
|
|
function setMetadata(artworkURL, title, artist, album) {
|
|
musicMeta.set({ artworkURL, title, artist, album });
|
|
}
|
|
|
|
document.addEventListener('readystatechange', () => {
|
|
musicMeta.onUpdate(value => {
|
|
elArtwork.src = value.artworkURL;
|
|
elTitle.innerText = value.title;
|
|
elArtistAlbum.innerText = `${value.artist} • ${value.album}`;
|
|
document.title = `Now playing: ${value.artist} - ${value.title}`;
|
|
console.log(`Now playing: ${value.artist} - ${value.title}`);
|
|
|
|
const maxWidth = elMetadata.getBoundingClientRect().width;
|
|
elTitle.classList.remove('marquee');
|
|
elArtistAlbum.classList.remove('marquee');
|
|
if (elTitle.getBoundingClientRect().width > maxWidth) {
|
|
elTitle.classList.add('marquee');
|
|
}
|
|
if (elArtistAlbum.getBoundingClientRect().width > maxWidth) {
|
|
elArtistAlbum.classList.add('marquee');
|
|
}
|
|
});
|
|
});
|
|
|
|
window.setMetadata = setMetadata;
|