redesign music widget

.gitignore

@@ -28,3 +28,5 @@ pnpm-debug.log*
 
 # wrangler local state (miniflare KV/D1/etc.)
 .wrangler/
+
+scripts/spotify-auth.mjs

scripts/spotify-auth.mjs

@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+import { createServer } from "node:http";
+import { appendFileSync, readFileSync, writeFileSync, existsSync } from "node:fs";
+
+const [clientId, clientSecret] = process.argv.slice(2);
+if (!clientId || !clientSecret) {
+  console.error("usage: node scripts/spotify-auth.mjs <CLIENT_ID> <CLIENT_SECRET>");
+  process.exit(1);
+}
+
+const REDIRECT = "http://127.0.0.1:8888/callback";
+const SCOPE = "user-read-currently-playing user-read-recently-played user-top-read";
+
+const authUrl =
+  "https://accounts.spotify.com/authorize?" +
+  new URLSearchParams({
+    client_id: clientId,
+    response_type: "code",
+    redirect_uri: REDIRECT,
+    scope: SCOPE,
+  });
+
+console.log("\n1. open this in your browser and approve:\n\n" + authUrl + "\n");
+console.log("2. waiting for the redirect on " + REDIRECT + " ...\n");
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, "http://127.0.0.1:8888");
+  if (url.pathname !== "/callback") {
+    res.writeHead(404).end();
+    return;
+  }
+  const code = url.searchParams.get("code");
+  const err = url.searchParams.get("error");
+  if (err || !code) {
+    res.writeHead(400).end("no code (" + (err || "missing") + ")");
+    server.close();
+    process.exit(1);
+  }
+
+  const tokenRes = await fetch("https://accounts.spotify.com/api/token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization: "Basic " + Buffer.from(`${clientId}:${clientSecret}`).toString("base64"),
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code,
+      redirect_uri: REDIRECT,
+    }),
+  });
+  const data = await tokenRes.json();
+
+  if (!data.refresh_token) {
+    res.writeHead(500).end("token exchange failed: " + JSON.stringify(data));
+    console.error("\ntoken exchange failed:\n", data);
+    server.close();
+    process.exit(1);
+  }
+
+  const block =
+    `\nSPOTIFY_CLIENT_ID=${clientId}\n` +
+    `SPOTIFY_CLIENT_SECRET=${clientSecret}\n` +
+    `SPOTIFY_REFRESH_TOKEN=${data.refresh_token}\n`;
+
+  
+  if (existsSync(".dev.vars")) {
+    const cur = readFileSync(".dev.vars", "utf8").replace(/^SPOTIFY_[A-Z_]+=.*$/gm, "").replace(/\n{3,}/g, "\n\n");
+    writeFileSync(".dev.vars", cur.trimEnd() + "\n" + block);
+  } else {
+    appendFileSync(".dev.vars", block);
+  }
+
+  res.writeHead(200, { "Content-Type": "text/plain" }).end("done — you can close this tab.");
+  console.log("wrote SPOTIFY_CLIENT_ID / SPOTIFY_CLIENT_SECRET / SPOTIFY_REFRESH_TOKEN to .dev.vars\n");
+  console.log("for prod, run:");
+  console.log("  npx wrangler secret put SPOTIFY_CLIENT_ID");
+  console.log("  npx wrangler secret put SPOTIFY_CLIENT_SECRET");
+  console.log("  npx wrangler secret put SPOTIFY_REFRESH_TOKEN\n");
+  server.close();
+  process.exit(0);
+});
+
+server.listen(8888, "127.0.0.1");

src/components/Music.astro

@@ -13,7 +13,16 @@
     data-umami-event="music-open"
     hidden
   >
-    <span class="music__note" aria-hidden="true">&#9835;</span>
+    <img
+      class="music__art"
+      id="music-art"
+      alt=""
+      width="30"
+      height="30"
+      decoding="async"
+      hidden
+    />
+    <span class="music__eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
     <span class="music__label" id="music-label">now playing</span>
     <span class="music__arw" aria-hidden="true">&#8594;</span>
   </button>
@@ -84,39 +93,72 @@
   .music__trigger {
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
+    gap: 0.6rem;
-    padding: 0.35rem 0;
+    padding: 0.3rem 0.6rem 0.3rem 0.35rem;
-    background: none;
+    background: var(--paper-2);
-    border: 0;
+    border: 1px solid var(--line);
+    border-radius: 7px;
     cursor: pointer;
     font-family: var(--mono);
-    font-size: 0.78rem;
+    font-size: 0.76rem;
     letter-spacing: 0.02em;
     color: var(--muted);
-    transition: color 0.18s ease;
+    transition:
+      border-color 0.18s ease,
+      color 0.18s ease;
   }
   .music__trigger:hover {
-    color: var(--accent-2);
+    border-color: var(--faint);
+    color: var(--ink);
   }
   .music__trigger:focus-visible {
     outline: 2px solid var(--accent);
-    outline-offset: 4px;
+    outline-offset: 3px;
+  }
+  .music__art {
+    width: 30px;
+    height: 30px;
+    flex: none;
+    object-fit: cover;
+    border: 1px solid var(--line);
     border-radius: 3px;
   }
-  .music__note {
+  .music__eq {
-    color: var(--accent);
+    display: inline-flex;
-    font-size: 0.9rem;
+    align-items: flex-end;
+    gap: 2px;
+    height: 15px;
+    flex: none;
+    padding: 0 0.1rem;
   }
-  .music__trigger--live .music__note {
+  .music__eq i {
-    animation: music-pulse 1.6s ease-in-out infinite;
+    width: 2.5px;
+    height: 28%;
+    background: var(--accent);
+    border-radius: 1px;
   }
-  @keyframes music-pulse {
+  .music__trigger--live .music__eq i {
-    50% {
+    animation: music-eq 0.95s ease-in-out infinite alternate;
-      opacity: 0.35;
+  }
+  .music__eq i:nth-child(2) {
+    animation-delay: -0.4s;
+  }
+  .music__eq i:nth-child(3) {
+    animation-delay: -0.68s;
+  }
+  .music__eq i:nth-child(4) {
+    animation-delay: -0.2s;
+  }
+  @keyframes music-eq {
+    from {
+      height: 18%;
+    }
+    to {
+      height: 100%;
     }
   }
   .music__label {
-    max-width: 22ch;
+    max-width: 26ch;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -399,8 +441,9 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .music__trigger--live .music__note {
+    .music__trigger--live .music__eq i {
       animation: none;
+      height: 55%;
     }
   }
 </style>

src/scripts/music.ts

@@ -148,13 +148,22 @@ async function load(): Promise<void> {
   if (trigger && (data.nowPlaying || (Array.isArray(data.top) && data.top.length))) {
     trigger.hidden = false;
     const label = $("music-label");
+    const artEl = $("music-art") as HTMLImageElement | null;
     const np = data.nowPlaying as NP | null;
-    if (label && np) {
+    const cover = np?.art || (data.top as Track[] | undefined)?.[0]?.art || null;
-      if (np.isPlaying) {
+
+    if (artEl && cover) {
+      artEl.src = cover;
+      artEl.hidden = false;
+    }
+    if (label) {
+      if (np?.isPlaying) {
         trigger.classList.add("music__trigger--live");
-        label.textContent = np.title;
+        label.textContent = `${np.title} · ${np.artist}`;
-      } else if (np.playedAt) {
+      } else if (np?.playedAt) {
-        label.textContent = "last played";
+        label.textContent = `last played · ${np.title}`;
+      } else {
+        label.textContent = "top tracks";
       }
     }
   }