From 4fff4ff1245d4d064df034e24b8e1193cc071df9 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 20 Feb 2024 11:11:39 -0800 Subject: [PATCH] chore: improve now-playing loading --- package.json | 2 +- src/_data/json/mbid-patches.js | 1 + src/_includes/partials/now/playing.liquid | 4 +- src/assets/scripts/components/now-playing.js | 65 +++++++++++++------- src/assets/styles/components/pagefind.css | 6 +- src/assets/styles/index.css | 11 ++++ 6 files changed, 64 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index fa86fd6c..5e881c19 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "6.4.1", + "version": "6.4.2", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_data/json/mbid-patches.js b/src/_data/json/mbid-patches.js index 9793cd06..1063994b 100644 --- a/src/_data/json/mbid-patches.js +++ b/src/_data/json/mbid-patches.js @@ -36,6 +36,7 @@ export default { rush: '534ee493-bfac-4575-a44a-0ae41e2c3fe4', 'soul blind': '94dba818-73e7-4ee1-a8ed-894cef10552b', sovereign: '8e5bd67e-9e31-4e2f-ad18-a3f6508f495e', + svartidauði: '5b67060c-6ec8-4ee8-9783-2207c169402d', 'sunday valley': 'f71d08b7-8cee-48a8-acf0-95c9d6cf8fb9', undergang: '6853b4ec-8cd4-46a4-b970-8331d4587c43', 'wolves in the throne room': 'e9452446-7702-4853-96ce-5dfe6748d3fb', diff --git a/src/_includes/partials/now/playing.liquid b/src/_includes/partials/now/playing.liquid index 7c9ae4d2..f0dcd6ba 100644 --- a/src/_includes/partials/now/playing.liquid +++ b/src/_includes/partials/now/playing.liquid @@ -1,2 +1,4 @@ - \ No newline at end of file +
+ +
\ 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 64750bc3..0f47e57f 100644 --- a/src/assets/scripts/components/now-playing.js +++ b/src/assets/scripts/components/now-playing.js @@ -1,12 +1,10 @@ const nowPlayingTemplate = document.createElement('template') nowPlayingTemplate.innerHTML = ` -

- - - +

+ 🎧 Album by Artist - +

` @@ -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; } } diff --git a/src/assets/styles/components/pagefind.css b/src/assets/styles/components/pagefind.css index 3f0358c1..3bbcde4e 100644 --- a/src/assets/styles/components/pagefind.css +++ b/src/assets/styles/components/pagefind.css @@ -21,6 +21,10 @@ font-size: var(--font-size-base) !important; } +.pagefind-ui__result-excerpt { + word-break: break-word !important; +} + .pagefind-ui__form:before { opacity: 1 !important; top: calc(19px * var(--pagefind-ui-scale)) !important; @@ -96,4 +100,4 @@ .pagefind-ui__button:focus { color: var(--color-lightest) !important; background-color: var(--accent-color-hover) !important; -} \ No newline at end of file +} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index b387508a..a8de24fe 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -463,6 +463,17 @@ li { text-align: center !important; } +.text--blurred { + color: transparent; + text-shadow: 0 0 6px var(--text-color); +} + +.fade { + transition-property: opacity; + transition-timing-function: var(--transition-ease-in-out); + transition-duration: var(--transition-duration-default); +} + .flex--centered { display: flex; flex-direction: row;