1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
const clamp = (v) => Math.max(0, Math.min(1, v));
async function post(action, body = {}) {
try {
await fetch(`/api/obs/${action}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
} catch {
// the next poll shows the real state
}
}
function button(label) {
const b = document.createElement("button");
b.textContent = label;
return b;
}
export default {
title: "OBS",
interval: 1,
mount(el) {
const wrap = document.createElement("div");
wrap.className = "obs";
wrap.innerHTML = `
<div class="row obs-controls"></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);
},
update(state, el) {
const controls = el.querySelector(".obs-controls");
const scenes = el.querySelector(".obs-scenes");
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 = "";
return;
}
controls.textContent = "";
const rec = button(state.recording ? "Stop recording" : "Record");
rec.classList.toggle("on", state.recording);
rec.onclick = () => post("record", { on: !state.recording });
const stream = button(state.streaming ? "Stop stream" : "Stream");
stream.classList.toggle("on", state.streaming);
stream.onclick = () => post("stream", { on: !state.streaming });
controls.append(rec, stream);
if (state.transitions?.length) {
const sel = document.createElement("select");
for (const t of state.transitions) {
const o = document.createElement("option");
o.value = o.textContent = t;
if (t === state.transition) o.selected = true;
sel.append(o);
}
sel.onchange = () => post("transition", { name: sel.value });
const trigger = button("Transition");
trigger.onclick = () => post("trigger");
controls.append(sel, trigger);
}
scenes.textContent = "";
for (const name of state.scenes ?? []) {
const b = button(name);
b.classList.toggle("on", name === state.currentScene);
b.onclick = () => post("scene", { scene: name });
scenes.append(b);
}
audio.textContent = "";
for (const inp of state.inputs ?? []) {
const row = document.createElement("div");
row.className = "row";
const label = document.createElement("span");
label.textContent = inp.name;
const mute = button(inp.muted ? "Unmute" : "Mute");
mute.classList.toggle("on", inp.muted);
mute.onclick = () => post("mute", { input: inp.name, muted: !inp.muted });
const down = button("−");
down.onclick = () => post("volume", { input: inp.name, level: clamp(inp.volume - 0.1) });
const up = button("+");
up.onclick = () => post("volume", { input: inp.name, level: clamp(inp.volume + 0.1) });
row.append(label, mute, down, up);
audio.append(row);
}
sources.textContent = "";
for (const s of state.sources ?? []) {
const b = button(s.name);
b.classList.toggle("on", s.on);
b.onclick = () => post("source", { scene: state.currentScene, id: s.id, on: !s.on });
sources.append(b);
}
},
};
|
