cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: improve now-playing loading

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-20 11:11:39 -08:00
parent 45bcc0a89b
commit 4fff4ff124
No known key found for this signature in database
6 changed files with 64 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/assets/scripts/components/now-playing.js
View file

@ -1,12 +1,10 @@
const nowPlayingTemplate = document.createElement('template')
nowPlayingTemplate.innerHTML = `
<p class="now-playing client-side">
<span class="icon--spin" data-key="loading">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a9 9 0 1 0 9 9" /></svg>
</span>
<p class="client-side">
<span class="text--blurred" data-key="loading">🎧 Album by Artist</span>
<span>
<span data-key="content"></span>
<span data-key="content" style="opacity:0"></span>
</span>
</p>
`
@ -24,18 +22,48 @@ class NowPlaying extends HTMLElement {
async connectedCallback() {
this.append(this.template);
const data = { ...(await this.data), ...this.linkData };
const data = { ...(await this.data) };
const populateNowPlaying = (component, data, cache) => {
component.querySelectorAll("[data-key]").forEach(async (slot) => {
const { key } = slot.dataset
const value = data[key]
this.querySelectorAll("[data-key]").forEach(async (slot) => {
const { key } = slot.dataset;
const value = data[key];
if (cache) {
if (key === 'loading') {
slot.style.opacity = '0'
slot.style.display = 'none'
} else if (key === 'content') {
slot.innerHTML = value
slot.style.opacity = '1'
}
}
if (key === 'loading') {
slot.style.display = 'none'
} else if (key === 'content') {
slot.innerHTML = value;
}
})
if (!cache) {
if (key === 'loading') {
slot.classList.add('fade')
slot.style.opacity = '0'
setTimeout(() => {
slot.style.display = 'none'
}, 300);
} else if (key === 'content') {
slot.classList.add('fade')
setTimeout(() => {
slot.innerHTML = value
slot.style.opacity = '1'
}, 300);
}
}
})
}
try {
const cache = JSON.parse(localStorage.getItem('now-playing'))
if (cache) populateNowPlaying(this, cache, true)
} catch (e) {}
populateNowPlaying(this, data)
try {
localStorage.setItem('now-playing', JSON.stringify(data))
} catch (e) {}
}
get template() {
@ -45,10 +73,6 @@ class NowPlaying extends HTMLElement {
}
get data() {
try {
const cache = JSON.parse(localStorage.getItem('now-playing'))
if (cache) populateNowPlaying(cache)
} catch (e) {}
const data = fetch('/api/now-playing', {
type: 'json',
})
@ -56,9 +80,6 @@ class NowPlaying extends HTMLElement {
.catch(() => {
loading.style.display = 'none'
})
try {
localStorage.setItem('now-playing', JSON.stringify(data))
} catch (e) {}
return data;
}
}