117 lines
4.6 KiB
JavaScript
117 lines
4.6 KiB
JavaScript
{
|
|
// API key is provided to the script via the `data-api-key` attribute on the <script> element
|
|
const api_key = document.currentScript.dataset.apiKey;
|
|
if (!api_key) {
|
|
throw new Error('album-art: provide an API key to the <script> tag with the "data-api-key" attribute');
|
|
}
|
|
|
|
const API_URL = 'https://ws.audioscrobbler.com/2.0/';
|
|
|
|
// utility function to make a key for use in localStorage, unique to a given album/artist query
|
|
function make_key(artist, album) {
|
|
return `${album}\n${artist}`;
|
|
}
|
|
|
|
// obtain the lastfm entry for the given album, either via fetch
|
|
// or from cached entry in localStorage
|
|
async function get_lastfm_entry(artist, album) {
|
|
const local_storage_key = make_key(artist, album);
|
|
let entry = null;
|
|
try {
|
|
// get the JSON from localStorage and parse it into an object
|
|
const json = window.localStorage.getItem(local_storage_key);
|
|
entry = JSON.parse(json);
|
|
} catch {
|
|
// pass (if parse fails, we just refetch)
|
|
}
|
|
if (entry) {
|
|
// successfully pulled entry from localStorage
|
|
return entry;
|
|
} else {
|
|
// query parameters for our request to last.fm API
|
|
const search = new URLSearchParams({
|
|
method: 'album.getinfo',
|
|
format: 'json',
|
|
api_key,
|
|
artist,
|
|
album,
|
|
}).toString();
|
|
// call last.fm API with these query parameters
|
|
return fetch(`${API_URL}?${search}`)
|
|
.then(response => response.json())
|
|
.then(lastfm => {
|
|
if (lastfm.error) {
|
|
throw lastfm.error;
|
|
} else {
|
|
// pull the specific property we care about from the response object (listing of image URLs for the album)
|
|
const entry = lastfm.album.image;
|
|
// cache it in localStorage for next time this album/artist pair gets called
|
|
window.localStorage.setItem(local_storage_key, JSON.stringify(entry));
|
|
return entry;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// fetch album art according to artist/album query and put it into the given <img> element
|
|
async function fetch_album_art(artist, album, img, is_retry) {
|
|
try {
|
|
// get the array of image URLs from last.fm or cache
|
|
const arts = await get_lastfm_entry(artist, album);
|
|
// choose a size appropriate to the <img> element
|
|
// fallthrough case is 'mega'
|
|
let target_size = 'mega';
|
|
let img_size = Math.max(img.width, img.height);
|
|
// we want the image to be slightly higher-resolution than the screen size,
|
|
// to look OK on high-density displays,
|
|
// so we set our thresholds at 0.75 times the respective image size
|
|
if (img_size <= 25) { // 34 * 0.75
|
|
target_size = 'small';
|
|
} else if (img_size <= 48) { // 64 * 0.75
|
|
target_size = 'medium';
|
|
} else if (img_size <= 130) { // 174 * 0.75
|
|
target_size = 'large';
|
|
} else if (img_size <= 225) { // 300 * 0.75
|
|
target_size = 'extralarge';
|
|
} // otherwise 'mega'
|
|
// find the corresponding image, or just use the last one if that fails
|
|
const art = arts.find(({size}) => size === target_size) ?? arts[arts.length - 1];
|
|
const url = art['#text'];
|
|
if (url) {
|
|
// set URL on <img> element
|
|
img.src = url;
|
|
// if this image fails to load, the cached last.fm entry is consdered no longer valid
|
|
img.addEventListener('error', () => {
|
|
// get rid of the bad cache entry
|
|
window.localStorage.removeItem(make_key(artist, album));
|
|
// we'll retry fetching it one time
|
|
if (!is_retry) {
|
|
// call this function again, with the retry flag set so we don't recurse forever
|
|
fetch_album_art(album, artist, img, true);
|
|
} else {
|
|
// if we've already retried, set the error on the <img> element
|
|
img.dataset.error = 'Failed to load image source after retry';
|
|
}
|
|
});
|
|
} else {
|
|
throw new Error('Image unavailable');
|
|
}
|
|
} catch (error) {
|
|
if (error.message === 'Image unavailable') {
|
|
// this is our error message, so we want to keep it as-is
|
|
throw error;
|
|
}
|
|
throw new Error('Image fetch failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// the actual entrypoint of the script
|
|
// iterate through all <img> elements with the needed data attributes defined
|
|
for (const img of document.querySelectorAll('img[data-album][data-artist]')) {
|
|
// run the function to populate this <img> element
|
|
// upon error, put the error message in the "data-error" attribute on the <img> element
|
|
fetch_album_art(img.dataset.artist, img.dataset.album, img)
|
|
.catch(e => img.dataset.error = e.message);
|
|
}
|
|
}
|