diff --git a/source/js/listenbrainz.js b/source/js/listenbrainz.js index eaa3b3e..37dc7cf 100644 --- a/source/js/listenbrainz.js +++ b/source/js/listenbrainz.js @@ -1,12 +1,41 @@ window.addEventListener('DOMContentLoaded', async () => { document.querySelector('.page-main').insertAdjacentHTML('beforeend', '
'); - const loop = async () => insertHtml(await getCurrentListen()); + const loop = async () => { + const listen = await getCurrentListen(); + const image = await getCoverArt(listen); + insertHtml(listen, image); + }; + await loop(); - setInterval(loop, 60 * 1000); + setInterval(loop, 5 * 60 * 1000); }); +async function getCoverArt(listen) { + const releaseMbid = listen.track_metadata.additional_info?.release_mbid; + if (releaseMbid === undefined) { + return; + } + + const result = await window.fetch(`https://coverartarchive.org/release/${releaseMbid}`, { + headers: { + Accept: 'application/json', + }, + }); + if (!result.ok) { + return; + } + + const data = await result.json(); + if (data.images[0]?.thumbnails === undefined) { + return; + } + + const thumbnails = data.images[0].thumbnails; + return thumbnails.small ?? thumbnails['250'] ?? thumbnails['500'] ?? undefined; +} + async function getCurrentListen() { const result = await window.fetch('https://api.listenbrainz.org/1/user/BaukeXYZ/playing-now'); if (!result.ok) { @@ -22,7 +51,7 @@ async function getCurrentListen() { return data.payload.listens[0]; } -function insertHtml(listen) { +function insertHtml(listen, image) { if (listen === null) { return; } @@ -32,11 +61,16 @@ function insertHtml(listen) { existing.remove(); } + const text = `${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name}`; + const alt = image === undefined ? 'ListenBrainz Logo' : `${text} Cover Art`; + + image = image ?? 'https://listenbrainz.org/static/img/logo_big.svg'; + const listenHtml = `- + - ${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name} + ${text}
`;