fix: add stats, music and windows panels

1 files changed, 48 insertions, 0 deletions

diff --git a/static/modules/music.js b/static/modules/music.js
new file mode 100644
index 0000000..de9df7f
--- /dev/null
+++ b/static/modules/music.js
@@ -0,0 +1,48 @@
+async function post(action) {
+  try {
+    await fetch(`/api/music/${action}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+  } catch {
+    // the next poll shows the real state
+  }
+}
+
+function button(label, action) {
+  const b = document.createElement("button");
+  b.textContent = label;
+  b.onclick = () => post(action);
+  return b;
+}
+
+export default {
+  title: "Music",
+  interval: 2,
+
+  mount(el) {
+    const box = document.createElement("div");
+    box.className = "music";
+    box.innerHTML = `
+      <div class="now"><b class="title">—</b><span class="artist muted"></span></div>
+      <div class="row controls"></div>
+      <div class="row vol"></div>`;
+    box.querySelector(".controls").append(
+      button("⏮", "prev"), button("⏯", "play"), button("⏭", "next"));
+    box.querySelector(".vol").append(
+      button("Vol−", "voldown"), button("Mute", "mute"), button("Vol+", "volup"));
+    el.append(box);
+  },
+
+  update(st, el) {
+    const box = el.querySelector(".music");
+    box.querySelector(".title").textContent = st.title || "Nothing playing";
+    box.querySelector(".artist").textContent = st.artist || "";
+    box.querySelector(".controls button:nth-child(2)").textContent =
+      st.status === "Playing" ? "⏸" : "▶";
+    const mute = box.querySelector(".vol button:nth-child(2)");
+    mute.classList.toggle("on", Boolean(st.volume?.muted));
+    mute.textContent = st.volume?.muted ? "Unmute" : "Mute";
+  },
+};