feat: now playing display

2023-08-24 17:20:30 -07:00 · 2023-08-24 17:20:30 -07:00 · f6b007356b
commit f6b007356b
parent 8e93412d7a
6 changed files with 105 additions and 0 deletions
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@ -69,5 +69,11 @@
  </head>
  <body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800 scrollbar-thin scrollbar-thumb-purple-500 scrollbar-track-purple-100">
    {{ content }}
+    {% capture js %}
+      {% render "../assets/scripts/script.js" %}
+    {% endcapture %}
+    <script>
+      {{ js }}
+    </script>
  </body>
 </html>
--- a/src/_includes/partials/now-topper.liquid
+++ b/src/_includes/partials/now-topper.liquid
@ -15,5 +15,12 @@
      <span class="pt-1 md:pt-0 mr-1">{{ status.emoji }}</span>
      <span>{{ status.content }}</span>
    </p>
+    <p id="now-playing" class="mb-0 flex flex-row items-start md:items-center">
+      <span id="now-playing-loading" class="text--blur">Loading...</span>
+      <span id="now-playing-display">
+        <span id="now-playing-emoji" class="pt-1 md:pt-0 mr-1"></span>
+        <span id="now-playing-content"></span>
+      </span>
+    </p>
  </div>
 </div>
--- a/src/assets/scripts/script.js
+++ b/src/assets/scripts/script.js
@ -0,0 +1,40 @@
+;(async function () {
+  const nowPlaying = document.getElementById('now-playing')
+  if (nowPlaying) {
+    const emoji = document.getElementById('now-playing-emoji')
+    const content = document.getElementById('now-playing-content')
+    const loading = document.getElementById('now-playing-loading')
+
+    try {
+      const cache = JSON.parse(localStorage.getItem('now-playing'))
+      if (cache) {
+        loading.style.display = 'none'
+        emoji.innerText = cache.emoji
+        content.innerText = `${cache.title} by ${cache.artist}`
+        emoji.classList.remove('hidden')
+        content.classList.remove('hidden')
+      }
+    } catch (e) {
+      /* quiet catch */
+    }
+
+    const res = await fetch('/api/now-playing', {
+      type: 'json',
+    }).catch()
+    const data = await res.json()
+
+    try {
+      localStorage.setItem('now-playing', JSON.stringify(data))
+    } catch (e) {
+      /* quiet catch */
+    }
+
+    if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove()
+
+    loading.style.display = 'none'
+    emoji.innerText = data.emoji
+    content.innerText = `${data.title} by ${data.artist}`
+    emoji.classList.remove('hidden')
+    content.classList.remove('hidden')
+  }
+})()