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

feat: now playing improvements

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-28 15:20:26 -08:00
parent 2f401d4954
commit cb6dbab2bf
No known key found for this signature in database
3 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "6.6.4", "version": "6.7.0",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {

5
src/_includes/partials/now-playing.liquid
View file

@ -1,2 +1,5 @@
<script type="module" src="/assets/scripts/components/now-playing.js"></script> <script type="module" src="/assets/scripts/components/now-playing.js"></script>
<now-playing></now-playing> <now-playing api-url="/api/now-playing">
<p class="loading text--blurred fade">🎧 Loading...</p>
<p class="content fade" style="opacity:0"></p>
</now-playing>

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

@ -1,27 +1,30 @@
const nowPlayingTemplate = document.createElement('template')
nowPlayingTemplate.innerHTML = `
<p>
<span class="text--blurred fade" data-key="loading">🎧 Album by Artist</span>
<span>
<span class="fade" data-key="content" style="opacity:0"></span>
</span>
</p>
`
nowPlayingTemplate.id = "now-playing-template"
if (!document.getElementById(nowPlayingTemplate.id)) document.body.appendChild(nowPlayingTemplate)
class NowPlaying extends HTMLElement { class NowPlaying extends HTMLElement {
static register(tagName) { static tagName = 'now-playing'
if ("customElements" in window) customElements.define(tagName || "now-playing", NowPlaying);
static register(tagName, registry) {
if(!registry && ('customElements' in globalThis)) {
registry = globalThis.customElements;
}
registry?.define(tagName || this.tagName, this);
}
static attr = {
url: 'api-url'
}
get url() {
return this.getAttribute(NowPlaying.attr.url) || '';
} }
async connectedCallback() { async connectedCallback() {
this.append(this.template); if (this.shadowRoot) return;
const data = { ...(await this.data) }; const data = { ...(await this.data) };
const loading = this.querySelector('[data-key="loading"]') let shadowroot = this.attachShadow({ mode: 'open' })
const content = this.querySelector('[data-key="content"]') let slot = document.createElement('slot')
shadowroot.appendChild(slot)
const loading = this.querySelector('.loading')
const content = this.querySelector('.content')
const value = data['content'] const value = data['content']
if (!value) { if (!value) {
@ -37,12 +40,8 @@ class NowPlaying extends HTMLElement {
} }
} }
get template() {
return document.getElementById(nowPlayingTemplate.id).content.cloneNode(true);
}
get data() { get data() {
return fetch('/api/now-playing', { type: 'json' }).then((data) => data.json()).catch((e) => {}) return fetch(this.url, { type: 'json' }).then((data) => data.json()).catch((e) => {})
} }
} }