feat: CLI flags, dynamic status, HTML panel, session timer, notes
This commit is contained in:
parent
6882e654d5
commit
b49e1abf17
2 changed files with 256 additions and 0 deletions
196
src/TeamsISO.App/Services/ControlPanelHtml.cs
Normal file
196
src/TeamsISO.App/Services/ControlPanelHtml.cs
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
namespace TeamsISO.App.Services;
|
||||
|
||||
/// <summary>
|
||||
/// The HTML / CSS / JS for the embedded control panel served at
|
||||
/// <c>GET /ui</c>. Single self-contained string — no external CDN deps, no
|
||||
/// build step, no React. Just enough to give operators a phone-friendly
|
||||
/// remote that connects via WebSocket to <c>/ws</c> and posts to the
|
||||
/// existing REST endpoints.
|
||||
///
|
||||
/// Visual language matches the WPF host: dark canvas, cyan accent, mono
|
||||
/// font for codey labels. Keeping the styling minimal so a future iteration
|
||||
/// can swap in a fancier UI without breaking operator workflows that already
|
||||
/// bookmark the URL.
|
||||
/// </summary>
|
||||
internal static class ControlPanelHtml
|
||||
{
|
||||
private const string Html = @"<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<title>TeamsISO Control</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #141414;
|
||||
--surface-elev: #1c1c1c;
|
||||
--border: #262626;
|
||||
--text: #f5f5f5;
|
||||
--text-2: #a3a3a3;
|
||||
--text-3: #6b6b6b;
|
||||
--cyan: #97edf0;
|
||||
--cyan-mute: #1b3537;
|
||||
--coral: #fb819c;
|
||||
--green: #4ade80;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; background: var(--bg); color: var(--text);
|
||||
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body { padding: 16px; max-width: 720px; margin: 0 auto; }
|
||||
h1 {
|
||||
font-size: 13px; letter-spacing: 0.12em; font-weight: 600;
|
||||
text-transform: uppercase; color: var(--text-3); margin: 0 0 18px;
|
||||
}
|
||||
.card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 14px; margin-bottom: 12px;
|
||||
}
|
||||
.row { display: flex; align-items: center; gap: 10px; }
|
||||
.row + .row { margin-top: 10px; }
|
||||
.grow { flex: 1; }
|
||||
button {
|
||||
background: var(--surface-elev); color: var(--text); border: 1px solid var(--border);
|
||||
border-radius: 8px; padding: 10px 14px; cursor: pointer;
|
||||
font: inherit; font-size: 13px;
|
||||
transition: background 80ms ease;
|
||||
}
|
||||
button:hover { background: #242424; }
|
||||
button.primary { background: var(--cyan-mute); color: var(--cyan); border-color: var(--cyan); }
|
||||
button.danger { background: #3a1922; color: var(--coral); border-color: var(--coral); }
|
||||
button.live { background: var(--cyan-mute); color: var(--cyan); border-color: var(--cyan); }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||||
.dot.cyan { background: var(--cyan); }
|
||||
.dot.coral { background: var(--coral); }
|
||||
.dot.green { background: var(--green); }
|
||||
.dot.gray { background: var(--text-3); }
|
||||
.name { font-weight: 500; }
|
||||
.sub { color: var(--text-3); font-size: 11px;
|
||||
font-family: 'JetBrains Mono', 'Cascadia Mono', monospace; }
|
||||
.status {
|
||||
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
|
||||
font-family: 'JetBrains Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 11px; color: var(--text-3);
|
||||
}
|
||||
.status .ok { color: var(--green); }
|
||||
.status .err { color: var(--coral); }
|
||||
.empty { color: var(--text-3); font-size: 12px; padding: 16px; text-align: center; }
|
||||
details summary { cursor: pointer; color: var(--text-2); font-size: 12px; }
|
||||
details summary::marker { color: var(--text-3); }
|
||||
.global-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||||
@media (min-width: 480px) { .global-actions { grid-template-columns: repeat(4, 1fr); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TeamsISO control surface</h1>
|
||||
|
||||
<div class='card'>
|
||||
<div class='status'>
|
||||
<span><span id='conn' class='dot gray'></span> <span id='conn-text'>connecting…</span></span>
|
||||
<span id='count' class='sub'></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='card'>
|
||||
<div class='global-actions'>
|
||||
<button onclick='post(""/teams/mute"")'>Mute</button>
|
||||
<button onclick='post(""/teams/camera"")'>Camera</button>
|
||||
<button onclick='post(""/teams/share"")'>Share</button>
|
||||
<button onclick='post(""/teams/leave"")'>Leave</button>
|
||||
<button onclick='post(""/recording/marker"")'>Marker</button>
|
||||
<button onclick='dropNote()'>Note…</button>
|
||||
<button onclick='post(""/presets/refresh-discovery"")'>Refresh</button>
|
||||
<button class='danger' onclick='post(""/presets/stop-all"")'>Stop all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='participants'></div>
|
||||
|
||||
<script>
|
||||
const list = document.getElementById('participants');
|
||||
const conn = document.getElementById('conn');
|
||||
const connText = document.getElementById('conn-text');
|
||||
const count = document.getElementById('count');
|
||||
|
||||
function setConn(state, text) {
|
||||
conn.className = 'dot ' + state;
|
||||
connText.textContent = text;
|
||||
}
|
||||
|
||||
async function post(path, body) {
|
||||
try {
|
||||
const opts = { method: 'POST' };
|
||||
if (body) { opts.headers = { 'Content-Type': 'application/json' }; opts.body = JSON.stringify(body); }
|
||||
await fetch(path, opts);
|
||||
} catch (e) { console.warn(e); }
|
||||
}
|
||||
|
||||
function dropNote() {
|
||||
const text = prompt('Note (will be timestamped in the day file):');
|
||||
if (text && text.trim()) post('/notes', { text: text.trim() });
|
||||
}
|
||||
|
||||
function render(participants) {
|
||||
if (!participants || participants.length === 0) {
|
||||
list.innerHTML = ""<div class='card empty'>No participants visible. Discover or invite into a Teams meeting.</div>"";
|
||||
count.textContent = '';
|
||||
return;
|
||||
}
|
||||
const live = participants.filter(p => p.isEnabled).length;
|
||||
count.textContent = live + ' / ' + participants.length + ' live';
|
||||
list.innerHTML = '';
|
||||
for (const p of participants) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'card';
|
||||
const dotColor = p.isEnabled ? 'cyan' : (p.isOnline ? 'gray' : 'coral');
|
||||
row.innerHTML =
|
||||
""<div class='row'>"" +
|
||||
""<span class='dot "" + dotColor + ""'></span>"" +
|
||||
""<div class='grow'>"" +
|
||||
""<div class='name'></div>"" +
|
||||
""<div class='sub'></div>"" +
|
||||
""</div>"" +
|
||||
""<button class='"" + (p.isEnabled ? 'live' : '') + ""'></button>"" +
|
||||
""</div>"";
|
||||
row.querySelector('.name').textContent = p.displayName;
|
||||
row.querySelector('.sub').textContent =
|
||||
(p.stateLabel || (p.isOnline ? 'online' : 'offline')) +
|
||||
(p.customName ? ' · ' + p.customName : '');
|
||||
const btn = row.querySelector('button');
|
||||
btn.textContent = p.isEnabled ? '● LIVE' : 'Enable';
|
||||
btn.onclick = () => post('/participants/iso', {
|
||||
displayName: p.displayName,
|
||||
enabled: !p.isEnabled,
|
||||
});
|
||||
list.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
setConn('gray', 'connecting…');
|
||||
const ws = new WebSocket(
|
||||
(location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws');
|
||||
ws.onopen = () => setConn('green', 'live');
|
||||
ws.onmessage = (ev) => {
|
||||
try {
|
||||
const m = JSON.parse(ev.data);
|
||||
if (m.type === 'participants') render(m.participants);
|
||||
} catch (e) { console.warn(e); }
|
||||
};
|
||||
ws.onclose = () => {
|
||||
setConn('coral', 'disconnected — retry in 3s');
|
||||
setTimeout(connect, 3000);
|
||||
};
|
||||
ws.onerror = () => setConn('coral', 'error');
|
||||
}
|
||||
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
public static string Get() => Html;
|
||||
}
|
||||
60
src/TeamsISO.App/Services/NotesService.cs
Normal file
60
src/TeamsISO.App/Services/NotesService.cs
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
using System.IO;
|
||||
using System.Text;
|
||||
|
||||
namespace TeamsISO.App.Services;
|
||||
|
||||
/// <summary>
|
||||
/// Append-only show-notes log. Each call writes a timestamped line to a daily
|
||||
/// markdown file at <c>%LOCALAPPDATA%\TeamsISO\Notes\<YYYY-MM-DD>.md</c>.
|
||||
/// Operators stamp notes via the REST <c>POST /notes</c> endpoint or the OSC
|
||||
/// <c>/teamsiso/notes "..."</c> address — typically wired to a Stream Deck
|
||||
/// button so a note can be left without leaving the show.
|
||||
///
|
||||
/// We deliberately don't surface the notes inside the WPF UI: the file is
|
||||
/// trivial to open in any editor, and inline note-taking would be a much
|
||||
/// bigger feature (textarea, scrollback, autosave). The endpoint is the
|
||||
/// minimum-viable affordance for live note capture.
|
||||
/// </summary>
|
||||
public static class NotesService
|
||||
{
|
||||
private static readonly object _gate = new();
|
||||
|
||||
private static string NotesDirectory =>
|
||||
Path.Combine(
|
||||
Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
|
||||
"TeamsISO", "Notes");
|
||||
|
||||
/// <summary>Today's notes file path (created lazily on first append).</summary>
|
||||
public static string TodayPath =>
|
||||
Path.Combine(NotesDirectory, $"{DateTimeOffset.Now:yyyy-MM-dd}.md");
|
||||
|
||||
/// <summary>
|
||||
/// Append a single timestamped line. Concurrent callers serialize through
|
||||
/// the static gate so we don't end up with interleaved writes from the
|
||||
/// REST handler thread vs. the OSC dispatcher.
|
||||
/// </summary>
|
||||
public static bool Append(string text)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(text)) return false;
|
||||
try
|
||||
{
|
||||
lock (_gate)
|
||||
{
|
||||
Directory.CreateDirectory(NotesDirectory);
|
||||
var path = TodayPath;
|
||||
var line = $"- **{DateTimeOffset.Now:HH:mm:ss}** — {text.Trim()}{Environment.NewLine}";
|
||||
if (!File.Exists(path))
|
||||
{
|
||||
var header = $"# TeamsISO show notes — {DateTimeOffset.Now:yyyy-MM-dd}{Environment.NewLine}{Environment.NewLine}";
|
||||
File.WriteAllText(path, header, Encoding.UTF8);
|
||||
}
|
||||
File.AppendAllText(path, line, Encoding.UTF8);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
catch
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue