2 files changed, 31 insertions, 6 deletions
diff --git a/static/deck.css b/static/deck.css
index ee2be1f..6f3fa97 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -379,7 +379,9 @@ select {
   border: 1px solid var(--udt-surface2);
   color: var(--udt-subtext0);
 }
+.tile { position: relative; }
 .tile .ico { width: 22px; height: 22px; flex: none; }
+.tile .gear { position: absolute; right: 6px; top: 4px; font-style: normal; font-size: 11px; opacity: .6; }
 .tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tile.on {
   background: var(--udt-accent);
diff --git a/static/modules/obs.js b/static/modules/obs.js
index 9430ee5..ae9e31b 100644
--- a/static/modules/obs.js
+++ b/static/modules/obs.js
@@ -52,14 +52,34 @@ function renderTransport(box, s) {
   box.append(rec, stream, trigger);
 }
 
-function renderTiles(box, items, onPick) {
+function renderTiles(box, items, onPick, onLong) {
   box.textContent = "";
   for (const item of items) {
     const b = document.createElement("button");
     b.className = `tile${item.on ? " on" : ""}`;
-    b.innerHTML = `${item.icon ? icon(item.icon) : ""}<span></span>`;
+    b.innerHTML = `${item.icon ? icon(item.icon) : ""}<span></span>${onLong ? '<i class="gear">⚙</i>' : ""}`;
     b.querySelector("span").textContent = item.label;
-    b.onclick = () => onPick(item);
+    let timer = null;
+    let longFired = false;
+    if (onLong) {
+      const host = () => b.closest(".tab-content");
+      b.addEventListener("pointerdown", () => {
+        if (host()) host()._pressing = true;
+        longFired = false;
+        timer = setTimeout(() => { longFired = true; onLong(item); }, 600);
+      });
+      const cancel = () => {
+        if (timer) { clearTimeout(timer); timer = null; }
+        if (host()) host()._pressing = false;
+      };
+      b.addEventListener("pointerup", cancel);
+      b.addEventListener("pointercancel", cancel);
+      b.addEventListener("pointerleave", cancel);
+    }
+    b.onclick = () => {
+      if (longFired) { longFired = false; return; }
+      onPick(item);
+    };
     box.append(b);
   }
 }
@@ -129,9 +149,12 @@ export default {
     renderTiles(el.querySelector(".scenes"),
       (state.scenes ?? []).map((name) => ({ label: name, icon: "scene", on: name === state.currentScene })),
       (item) => post("scene", { scene: item.label }));
-    renderTiles(el.querySelector(".sources"),
-      (state.sources ?? []).map((src) => ({ label: src.name, icon: src.on ? "eye" : "eyeOff", on: src.on, id: src.id })),
-      (item) => post("source", { scene: state.currentScene, id: item.id, on: !item.on }));
+    if (!el._pressing) {
+      renderTiles(el.querySelector(".sources"),
+        (state.sources ?? []).map((src) => ({ label: src.name, icon: src.on ? "eye" : "eyeOff", on: src.on, id: src.id })),
+        (item) => post("source", { scene: state.currentScene, id: item.id, on: !item.on }),
+        (item) => post("properties", { source: item.label }));
+    }
     renderTiles(el.querySelector(".transitions"),
       (state.transitions ?? []).map((name) => ({ label: name, on: name === state.transition })),
       (item) => post("transition", { name: item.label }));