spotify-turntable 0.0.0-stage → 0.1.0

package/src/client/Turntable.js

@@ -0,0 +1,230 @@
+"use client";
+/* global process -- read only inside try; bundlers inline process.env.NODE_ENV */
+import { createElement as h, Fragment, useEffect, useId, useRef, useState } from "react";
+import { useNowPlaying } from "./useNowPlaying.js";
+import { formatMs, timeAgo } from "./format.js";
+
+export const DEFAULT_LABELS = {
+  loading: "Warming up the needle",
+  playing: "Now spinning",
+  rotation: "House rotation",
+  paused: "On pause",
+  recent: "Last spun",
+  idle: "Nothing on the platter",
+  unconfigured: "Not connected",
+  offline: "Turntable offline",
+};
+
+const IS_DEV = (() => {
+  try {
+    if (import.meta.env) return !!import.meta.env.DEV;
+  } catch {
+    /* not Vite */
+  }
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+})();
+
+function embedFor(track, playlist) {
+  if (track?.id && (track.type === "track" || track.type === "episode")) {
+    return { src: `https://open.spotify.com/embed/${track.type}/${track.id}?utm_source=generator`, what: track.title };
+  }
+  if (playlist?.id) return { src: `https://open.spotify.com/embed/playlist/${playlist.id}?utm_source=generator`, what: playlist.name };
+  return null;
+}
+
+const svg = (props, ...children) => h("svg", { "aria-hidden": "true", focusable: "false", ...props }, ...children);
+const cross = (width) => h("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: width, strokeLinecap: "round" });
+
+function Vinyl({ track, empty }) {
+  const id = useId().replace(/:/g, "");
+  const grooves = [45, 41, 37, 33.5, 30, 26.5, 23].map((r) =>
+    h("circle", { key: r, cx: 52, cy: 52, r, fill: "none", stroke: "#fff", strokeOpacity: 0.06, strokeWidth: 0.5 }),
+  );
+  return svg(
+    { className: "deck-svg", viewBox: "0 0 120 104" },
+    h(
+      "defs",
+      null,
+      h("radialGradient", { id: `${id}-v` }, h("stop", { offset: 0.35, stopColor: "#1d1d1d" }), h("stop", { offset: 1, stopColor: "#090909" })),
+      h("clipPath", { id: `${id}-l` }, h("circle", { cx: 52, cy: 52, r: 16 })),
+    ),
+    h(
+      "g",
+      { className: `deck-record${empty ? " is-empty" : ""}` },
+      h("circle", { cx: 52, cy: 52, r: 50, fill: `url(#${id}-v)` }),
+      ...grooves,
+      h("circle", { cx: 52, cy: 52, r: 16, fill: "var(--deck-label, #e9dfcf)" }),
+      track?.albumArt &&
+        h("image", { href: track.albumArt, x: 36, y: 36, width: 32, height: 32, clipPath: `url(#${id}-l)`, preserveAspectRatio: "xMidYMid slice" }),
+      h("circle", { cx: 52, cy: 52, r: 1.6, fill: "#f5f1ea" }),
+    ),
+    // Static sheen so the spin reads as light moving over grooves.
+    h("path", { d: "M17 32 A41 41 0 0 1 36 14", stroke: "#fff", strokeOpacity: 0.14, strokeWidth: 3, fill: "none", strokeLinecap: "round" }),
+    h("path", { d: "M87 72 A41 41 0 0 1 68 90", stroke: "#fff", strokeOpacity: 0.08, strokeWidth: 3, fill: "none", strokeLinecap: "round" }),
+    h(
+      "g",
+      { className: "deck-arm" },
+      h("circle", { cx: 108, cy: 12, r: 6, fill: "#d9d3c8" }),
+      h("circle", { cx: 108, cy: 12, r: 2.5, fill: "#8f877a" }),
+      h("path", { d: "M108 12 L108 58 L95 74", fill: "none", stroke: "#bdb5a8", strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round" }),
+      h("rect", { x: 88, y: 70, width: 10, height: 7, rx: 1.5, transform: "rotate(-48 93 73.5)", fill: "#2b2b2b" }),
+    ),
+  );
+}
+
+/**
+ * A record-player card for whatever your Spotify account is playing.
+ *
+ *   <Turntable floating />                       // polls /api/now-playing, pinned top-right
+ *   <Turntable endpoint="/api/np" labels={{ rotation: "Felix's rotation" }} />
+ *   <Turntable np={useNowPlaying()} />           // share one poller with other widgets
+ */
+export function Turntable({
+  np: external,
+  endpoint,
+  demo = null,
+  pollMs,
+  labels,
+  fallbackUrl = "https://open.spotify.com",
+  setupHint = "Run npx spotify-turntable auth",
+  floating = false,
+  className = "",
+}) {
+  const own = useNowPlaying({ endpoint, demo, pollMs, enabled: !external });
+  const { state, track, playedAt, playlist, progressMs, demo: isDemo } = external || own;
+  const text = { ...DEFAULT_LABELS, ...labels };
+
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const playRef = useRef(null);
+  const closeRef = useRef(null);
+  const popId = useId();
+
+  const moving = state === "playing" || state === "rotation";
+  const pct = track?.durationMs ? Math.min(1, progressMs / track.durationMs) : 0;
+  const href = track?.url || playlist?.url || fallbackUrl;
+  const embed = embedFor(track, state === "rotation" ? playlist : null);
+  const playlistName = state === "rotation" && playlist?.name ? playlist.name : null;
+
+  let status = text[state] || text.idle;
+  if (state === "recent" && playedAt) status = `${text.recent} · ${timeAgo(playedAt)}`;
+  const aria = track
+    ? `${status}${playlistName ? ` from ${playlistName}` : ""}: ${track.title} by ${track.artist}. Open in Spotify.`
+    : `${status}. Open Spotify.`;
+
+  useEffect(() => {
+    if (!open) return;
+    closeRef.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        playRef.current?.focus();
+      }
+    };
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [open]);
+
+  const hasEmbed = !!embed;
+  useEffect(() => {
+    if (!hasEmbed) setOpen(false);
+  }, [hasEmbed]);
+
+  const close = () => {
+    setOpen(false);
+    playRef.current?.focus();
+  };
+
+  const ticket = h(
+    "span",
+    { className: "deck-ticket", "aria-hidden": "true" },
+    h(
+      "span",
+      { className: "deck-status", title: playlistName || undefined },
+      h("i", { className: "deck-led" }),
+      h("span", { className: "deck-status-text" }, status, isDemo && " (demo)"),
+    ),
+    track
+      ? h(
+          Fragment,
+          null,
+          h("span", { className: "deck-title" }, track.title),
+          h("span", { className: "deck-artist" }, track.artist),
+          moving &&
+            track.durationMs > 0 &&
+            h(
+              "span",
+              { className: "deck-time" },
+              h("span", { className: "deck-bar" }, h("span", { style: { transform: `scaleX(${pct})` } })),
+              h("span", { className: "deck-clock" }, `${formatMs(progressMs)} / ${formatMs(track.durationMs)}`),
+            ),
+        )
+      : h("span", { className: "deck-artist deck-note" }, state === "unconfigured" && IS_DEV && setupHint ? setupHint : "Check back soon"),
+  );
+
+  const card = h(
+    "div",
+    {
+      ref: rootRef,
+      className: `deck is-${state}${moving ? " is-moving" : ""}${embed ? " has-play" : ""}${className ? ` ${className}` : ""}`,
+    },
+    h("a", { className: "deck-link", href, target: "_blank", rel: "noreferrer", "aria-label": aria }, h(Vinyl, { track, empty: !track }), ticket),
+    embed &&
+      h(
+        "button",
+        {
+          ref: playRef,
+          type: "button",
+          className: "deck-play",
+          "aria-expanded": open,
+          "aria-controls": open ? popId : undefined,
+          "aria-label": open ? "Close Spotify player" : `Listen to ${embed.what} here`,
+          onClick: () => setOpen((v) => !v),
+        },
+        svg({ viewBox: "0 0 16 16" }, open ? cross(1.8) : h("path", { d: "M5 3.2v9.6L13 8z", fill: "currentColor" })),
+      ),
+    open &&
+      embed &&
+      h(
+        "div",
+        { id: popId, className: "deck-pop", role: "dialog", "aria-label": "Spotify player" },
+        h(
+          "div",
+          { className: "deck-pop-head" },
+          h("span", { className: "deck-pop-title" }, playlistName || "Listen on Spotify"),
+          h(
+            "button",
+            { ref: closeRef, type: "button", className: "deck-pop-close", onClick: close, "aria-label": "Close player" },
+            svg({ viewBox: "0 0 16 16" }, cross(1.6)),
+          ),
+        ),
+        h("iframe", {
+          className: "deck-embed",
+          title: `Spotify player: ${embed.what}`,
+          src: embed.src,
+          width: "100%",
+          height: 152,
+          loading: "lazy",
+          allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
+        }),
+        state === "rotation" &&
+          playlist?.url &&
+          h("a", { className: "deck-pop-link", href: playlist.url, target: "_blank", rel: "noreferrer" }, "Open the whole rotation ↗"),
+      ),
+  );
+
+  return floating ? h("div", { className: "deck-slot" }, card) : card;
+}
+
+export default Turntable;

package/src/client/format.js

@@ -0,0 +1,16 @@
+export function timeAgo(iso) {
+  if (!iso) return "";
+  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 60) return "just now";
+  const m = s / 60;
+  if (m < 60) return `${Math.round(m)} min ago`;
+  const h = m / 60;
+  if (h < 24) return `${Math.round(h)} hr ago`;
+  const d = Math.round(h / 24);
+  return d === 1 ? "yesterday" : `${d} days ago`;
+}
+
+export function formatMs(ms) {
+  const t = Math.max(0, Math.floor((ms || 0) / 1000));
+  return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
+}

package/src/client/index.js

@@ -0,0 +1,4 @@
+"use client";
+export { Turntable, DEFAULT_LABELS, default } from "./Turntable.js";
+export { useNowPlaying } from "./useNowPlaying.js";
+export { formatMs, timeAgo } from "./format.js";

package/src/client/useNowPlaying.js

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from "react";
+
+const POLL_MS = 15000;
+const MAX_AGE_MS = 30000;
+
+function stateOf(data, error) {
+  if (!data) return error ? "offline" : "loading";
+  if (!data.configured) return "unconfigured";
+  const mode = data.mode || (data.isPlaying ? "live" : data.track ? "recent" : "idle");
+  if (mode === "live") return data.track ? "playing" : "idle";
+  if (mode === "error") return "offline";
+  if (["rotation", "paused", "recent"].includes(mode)) return data.track ? mode : "idle";
+  return "idle";
+}
+
+function demoQuery(demo) {
+  if (!demo) return "";
+  return demo === "rotation" ? "?demo=rotation" : "?demo=1";
+}
+
+/**
+ * Polls the now-playing endpoint. Progress is extrapolated locally between polls so the record
+ * and bar move smoothly, and the next poll is scheduled for when the current track ends.
+ *
+ * Returns { state, track, playedAt, playlist, progressMs, demo } where state is one of
+ * loading | playing | rotation | paused | recent | idle | unconfigured | offline.
+ */
+export function useNowPlaying({ endpoint = "/api/now-playing", demo = null, pollMs = POLL_MS, enabled = true } = {}) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(false);
+  const base = useRef({ at: 0, progress: 0 });
+  const url = `${endpoint}${demoQuery(demo)}`;
+
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    let timer;
+
+    const load = async () => {
+      let next = pollMs;
+      try {
+        const res = await fetch(url, { headers: { accept: "application/json" } });
+        if (!res.ok) throw new Error(String(res.status));
+        const json = await res.json();
+        if (!alive) return;
+        const now = Date.now();
+        const moving = json.mode === "rotation" || json.isPlaying;
+        // Responses can sit in a CDN for a few seconds; catch up using the server timestamp.
+        const age = moving && json.fetchedAt ? Math.min(MAX_AGE_MS, Math.max(0, now - json.fetchedAt)) : 0;
+        base.current = { at: now, progress: (json.track?.progressMs || 0) + age };
+        if (moving && json.track?.durationMs) {
+          const remaining = json.track.durationMs - base.current.progress;
+          next = Math.max(2000, Math.min(pollMs, remaining + 1500));
+        }
+        setData(json);
+        setError(false);
+      } catch {
+        if (alive) setError(true);
+      }
+      if (alive) timer = setTimeout(load, document.hidden ? pollMs * 4 : next);
+    };
+
+    const onVisible = () => {
+      if (!document.hidden) {
+        clearTimeout(timer);
+        load();
+      }
+    };
+
+    load();
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      alive = false;
+      clearTimeout(timer);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [url, pollMs, enabled]);
+
+  const state = stateOf(data, error);
+  const moving = state === "playing" || state === "rotation";
+
+  const [, tick] = useState(0);
+  useEffect(() => {
+    if (!moving) return;
+    const id = setInterval(() => tick((n) => n + 1), 1000);
+    return () => clearInterval(id);
+  }, [moving]);
+
+  const track = data?.track || null;
+  let progressMs = track?.progressMs || 0;
+  if (moving && track) {
+    progressMs = Math.min(track.durationMs, base.current.progress + (Date.now() - base.current.at));
+  }
+
+  return {
+    state,
+    track,
+    playedAt: data?.playedAt || null,
+    playlist: data?.playlist || null,
+    progressMs,
+    demo: !!data?.demo,
+  };
+}

package/src/env-file.js

@@ -0,0 +1,37 @@
+// Tiny .env reader/writer used by the auth CLI.
+
+export function parseEnv(text) {
+  const out = {};
+  for (const line of text.split(/\r?\n/)) {
+    const m = line.match(/^\s*(?:export\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*)\s*$/);
+    if (!m) continue;
+    let value = m[2].trim();
+    if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) value = value.slice(1, -1);
+    out[m[1]] = value;
+  }
+  return out;
+}
+
+
+
+/** Updates KEY=value lines in place and appends the ones that are missing. */
+export function upsertEnv(text, values) {
+  const lines = text ? text.split(/\r?\n/) : [];
+  const done = new Set();
+  const next = lines.map((line) => {
+    const m = line.match(/^\s*(?:export\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*=/);
+    if (m && m[1] in values) {
+      done.add(m[1]);
+      return `${m[1]}=${values[m[1]]}`;
+    }
+    return line;
+  });
+  while (next.length && next[next.length - 1] === "") next.pop();
+  const missing = Object.keys(values).filter((k) => !done.has(k));
+  if (missing.length) {
+    if (next.length) next.push("");
+    next.push("# Spotify turntable (npx spotify-turntable auth)");
+    for (const k of missing) next.push(`${k}=${values[k]}`);
+  }
+  return next.join("\n") + "\n";
+}

package/src/server/index.js

@@ -0,0 +1,66 @@
+import { getNowPlaying, parseDemo } from "./spotify.js";
+
+export { getNowPlaying, parseDemo, parsePlaylistId, pickRotation, mapItem, resetSpotifyCache, LIKED, ROTATION_EPOCH } from "./spotify.js";
+
+const getEnv = () => (typeof process !== "undefined" ? process.env : {});
+
+/** Cache-Control that lets a CDN absorb traffic without making the turntable feel stale. */
+export function cacheControlFor(data, demo) {
+  if (demo) return "no-store";
+  if (data.mode === "error") return "public, max-age=0, s-maxage=5";
+  return "public, max-age=0, s-maxage=10, stale-while-revalidate=20";
+}
+
+async function load(env, demoValue) {
+  const demo = parseDemo(demoValue);
+  let data;
+  try {
+    data = await getNowPlaying(env, { demo });
+  } catch (err) {
+    data = { configured: true, mode: "error", isPlaying: false, track: null, playedAt: null, playlist: null, fetchedAt: Date.now(), error: err?.message };
+  }
+  return { data, demo };
+}
+
+/**
+ * Node-style handler: `(req, res) => void`.
+ * Works as a Vercel function, an Express / Connect route, or plain `http.createServer`.
+ *   export default nowPlayingHandler();            // api/now-playing.js on Vercel
+ *   app.get("/api/now-playing", nowPlayingHandler()); // Express
+ */
+export function nowPlayingHandler({ env, cacheControl = cacheControlFor } = {}) {
+  return async function handler(req, res) {
+    if (req.method && req.method !== "GET" && req.method !== "HEAD") {
+      res.statusCode = 405;
+      res.setHeader("Allow", "GET, HEAD");
+      res.end();
+      return;
+    }
+    let value = req.query?.demo;
+    if (value === undefined && req.url) value = new URL(req.url, "http://x").searchParams.get("demo") ?? undefined;
+    const { data, demo } = await load(env || getEnv(), value);
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "application/json; charset=utf-8");
+    res.setHeader("Cache-Control", cacheControl(data, demo));
+    res.end(req.method === "HEAD" ? undefined : JSON.stringify(data));
+  };
+}
+
+/**
+ * Web-standard handler: `(Request) => Response`.
+ * For Next.js route handlers, Netlify / Cloudflare / Deno / Bun.
+ *   export const GET = nowPlayingFetchHandler();   // app/api/now-playing/route.js
+ */
+export function nowPlayingFetchHandler({ env, cacheControl = cacheControlFor } = {}) {
+  return async function handler(request) {
+    if (request.method !== "GET" && request.method !== "HEAD") {
+      return new Response(null, { status: 405, headers: { Allow: "GET, HEAD" } });
+    }
+    const value = new URL(request.url).searchParams.get("demo") ?? undefined;
+    const { data, demo } = await load(env || getEnv(), value);
+    return new Response(request.method === "HEAD" ? null : JSON.stringify(data), {
+      status: 200,
+      headers: { "Content-Type": "application/json; charset=utf-8", "Cache-Control": cacheControl(data, demo) },
+    });
+  };
+}