feat: card headers, music art/seek, clearer build card

1 files changed, 6 insertions, 3 deletions

diff --git a/static/modules/obs.js b/static/modules/obs.js
index 9c5c34c..7270f87 100644
--- a/static/modules/obs.js
+++ b/static/modules/obs.js
@@ -27,9 +27,9 @@ export default {
     wrap.className = "obs";
     wrap.innerHTML = `
       <div class="row obs-controls"></div>
-      <div class="obs-scenes"></div>
-      <div class="obs-audio"></div>
-      <div class="obs-sources"></div>`;
+      <div class="section-label">Scenes</div><div class="obs-scenes"></div>
+      <div class="section-label">Audio</div><div class="obs-audio"></div>
+      <div class="section-label">Sources</div><div class="obs-sources"></div>`;
     el.append(wrap);
   },
 
@@ -39,6 +39,9 @@ export default {
     const audio = el.querySelector(".obs-audio");
     const sources = el.querySelector(".obs-sources");
 
+    el.querySelectorAll(".section-label").forEach((label) => {
+      label.style.display = state.connected ? "" : "none";
+    });
     if (!state.connected) {
       controls.textContent = state.error ? `OBS offline: ${state.error}` : "OBS offline";
       scenes.textContent = audio.textContent = sources.textContent = "";