From cb6dbab2bf3fc073ac787c43ac78d98aeb965641 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Wed, 28 Feb 2024 15:20:26 -0800
Subject: [PATCH] feat: now playing improvements

---
 package.json                                 |  2 +-
 src/_includes/partials/now-playing.liquid    |  5 ++-
 src/assets/scripts/components/now-playing.js | 47 ++++++++++----------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index bf951c8a..09886182 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "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.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/partials/now-playing.liquid b/src/_includes/partials/now-playing.liquid
index 7c9ae4d2..78d309a0 100644
--- a/src/_includes/partials/now-playing.liquid
+++ b/src/_includes/partials/now-playing.liquid
@@ -1,2 +1,5 @@
 <script type="module" src="/assets/scripts/components/now-playing.js"></script>
-<now-playing></now-playing>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/assets/scripts/components/now-playing.js b/src/assets/scripts/components/now-playing.js
index 51e69f59..38c69d97 100644
--- a/src/assets/scripts/components/now-playing.js
+++ b/src/assets/scripts/components/now-playing.js
@@ -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 {
-  static register(tagName) {
-    if ("customElements" in window) customElements.define(tagName || "now-playing", NowPlaying);
+  static tagName = 'now-playing'
+
+  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() {
-    this.append(this.template);
+    if (this.shadowRoot) return;
     const data = { ...(await this.data) };
-    const loading = this.querySelector('[data-key="loading"]')
-    const content = this.querySelector('[data-key="content"]')
+    let shadowroot = this.attachShadow({ mode: 'open' })
+    let slot = document.createElement('slot')
+    shadowroot.appendChild(slot)
+
+    const loading = this.querySelector('.loading')
+    const content = this.querySelector('.content')
     const value = data['content']
 
     if (!value) {
@@ -37,12 +40,8 @@ class NowPlaying extends HTMLElement {
     }
   }
 
-  get template() {
-    return document.getElementById(nowPlayingTemplate.id).content.cloneNode(true);
-  }
-
   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) => {})
   }
 }