WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions
dragonflight/services/web-ui/public/recorders.html

914 lines
42 KiB
HTML
Raw Normal View History

Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
<!DOCTYPE html>
<html lang="en">
<head>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
feat(brand+home): swap sidebar to Wild Dragon logo, add favicon everywhere, fix home counters (status= not state=)
2026-05-18 10:13:08 -04:00
<link rel="icon" type="image/x-icon" href="favicon.ico">
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<title>Recorders — Z-AMPP</title>
<link rel="stylesheet" href="css/common.css?v=3">
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<style>
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
/* ── Recorders page · AMPP-aligned theme ── */
.main {
background:
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 266 / 0.35), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 266 / 0.18), transparent 65%),
var(--bg-base);
}
.page-content { padding: 24px 32px 48px; }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
.recorder-grid {
display: grid;
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 16px;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
.recorder-card {
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
position: relative;
background: oklch(13% 0.018 250 / 0.7);
border: 1px solid oklch(28% 0.04 260 / 0.5);
border-radius: 12px;
padding: 16px 18px 14px;
display: flex; flex-direction: column;
gap: 12px;
backdrop-filter: blur(6px);
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.recorder-card:hover { border-color: oklch(45% 0.20 266 / 0.4); }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
.recorder-card.recording {
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
border-color: oklch(62% 0.22 25 / 0.55);
background: oklch(15% 0.025 260 / 0.8);
box-shadow: 0 16px 40px -16px oklch(62% 0.22 25 / 0.25);
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
.recorder-card.error { border-color: oklch(62% 0.22 25 / 0.5); }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
.recorder-header {
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
.recorder-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
.recorder-name {
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
font-size: 15px; font-weight: 600;
letter-spacing: -0.005em;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recorder-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recorder-actions { display: flex; gap: 4px; flex-shrink: 0; }
.recorder-status-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.recorder-status-row .text-sm { font-size: 13px; font-weight: 500; }
.recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 266); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.recorder-card.recording .recorder-timer { color: oklch(62% 0.22 25); }
.signal-strip { position: relative; height: 4px; background: oklch(20% 0.04 260); border-radius: 2px; overflow: hidden; }
.signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 266), oklch(70% 0.18 266)); animation: signalSlide 2.4s linear infinite; }
.signal-strip--warn .signal-strip-fill { background: oklch(82% 0.15 90); }
.signal-strip--bad .signal-strip-fill { background: oklch(62% 0.22 25); animation: none; opacity: 0.4; }
.signal-strip--idle .signal-strip-fill { background: oklch(35% 0.04 260); animation: none; opacity: 0.4; }
@keyframes signalSlide { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
.recorder-preview { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid oklch(28% 0.04 260 / 0.5); }
.recorder-preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
.recorder-preview-stamp { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: oklch(10% 0.015 250 / 0.7); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 999px; border: 1px solid oklch(62% 0.22 25 / 0.5); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #fff; }
.recorder-preview-dot { width: 6px; height: 6px; background: oklch(62% 0.22 25); border-radius: 50%; animation: fsPulse 1.4s ease-in-out infinite; box-shadow: 0 0 8px oklch(62% 0.22 25); }
@keyframes fsPulse { 0%,100% { opacity: 0.7 } 50% { opacity: 1 } }
.recorder-source { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: oklch(11% 0.018 250 / 0.6); border: 1px solid oklch(28% 0.04 260 / 0.4); border-radius: 6px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); letter-spacing: 0.01em; }
.recorder-source svg { color: var(--text-tertiary); }
.recorder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid oklch(28% 0.04 260 / 0.4); }
.recorder-footer-meta { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.02em; }
.recorder-controls { display: flex; gap: 6px; }
/* Source-type + mode selectors — brand-blue tile feel */
.source-type-row, .mode-row { display: flex; gap: 8px; }
.source-type-btn, .mode-btn {
flex: 1; padding: 10px 12px;
background: oklch(13% 0.018 250 / 0.6);
border: 1px solid oklch(28% 0.04 260 / 0.45);
border-radius: 8px;
font-size: 13px; font-weight: 500;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
color: var(--text-secondary);
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
cursor: pointer; text-align: center;
letter-spacing: 0.04em;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
.source-type-btn:hover, .mode-btn:hover {
border-color: oklch(45% 0.20 266 / 0.5);
color: var(--text-primary);
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
.source-type-btn.active, .mode-btn.active {
border-color: oklch(55% 0.20 266 / 0.7);
background: oklch(20% 0.08 266 / 0.45);
color: oklch(78% 0.14 266);
font-weight: 600;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
.form-section-label {
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
color: var(--text-tertiary);
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
padding: 14px 0 8px;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
.recorder-connect-info { margin-top: 4px; }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
feat(recorders): align with home/projects aesthetic — brand-blue gradient, refreshed cards, tile selectors, slide-panel polish
2026-05-18 10:49:46 -04:00
/* Slide panel polish */
.slide-panel { background: oklch(11% 0.018 250 / 0.98); border-left: 1px solid oklch(28% 0.04 260 / 0.6); }
.slide-panel-header { border-bottom: 1px solid oklch(28% 0.04 260 / 0.4); padding: 18px 22px; }
.slide-panel-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.slide-panel-body { padding: 18px 22px; }
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</style>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
</head>
<body>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="shell">
<!-- Sidebar -->
<nav class="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
feat(brand+home): swap sidebar to Wild Dragon logo, add favicon everywhere, fix home counters (status= not state=)
2026-05-18 10:13:08 -04:00
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<span class="sidebar-brand-name">Z-AMPP</span>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
</div>
fix: remove Google Fonts, fix editor link to :47435, fix page titles - Remove @import Google Fonts from common.css (was blocking CSS on LAN) - Update Editor nav link on all pages to dynamically resolve to :47435 (OpenReel SPA) using inline script so it works on any hostname - Fix page titles from Wild Dragon -> Z-AMPP across all pages - Resolver: <a href="#" id="editor-nav-link"> + IIFE sets href at load
2026-05-18 22:56:51 -04:00
<nav class="sidebar-nav">
<a href="home.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7l6-5 6 5v7a1 1 0 0 1-1 1h-3v-5H6v5H3a1 1 0 0 1-1-1z"/></svg>
Home
</a>
<a href="index.html" class="nav-item">
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
Library
</a>
fix: remove Google Fonts, fix editor link to :47435, fix page titles - Remove @import Google Fonts from common.css (was blocking CSS on LAN) - Update Editor nav link on all pages to dynamically resolve to :47435 (OpenReel SPA) using inline script so it works on any hostname - Fix page titles from Wild Dragon -> Z-AMPP across all pages - Resolver: <a href="#" id="editor-nav-link"> + IIFE sets href at load
2026-05-18 22:56:51 -04:00
<a href="projects.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 4a1 1 0 0 1 1-1h4l2 2h5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/></svg>
Projects
</a>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<a href="upload.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg>
Ingest
</a>
<a href="recorders.html" class="nav-item active">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>
Recorders
</a>
<a href="capture.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>
Capture
</a>
<a href="jobs.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>
Jobs
</a>
feat: wire editor.html as primary editor, fix its sidebar/branding - All pages: Editor nav link now points to editor.html (in-house NLE) - Removes the :47435 OpenReel resolver script from all pages - editor.html: canonical Z-AMPP sidebar (all 10 nav items, correct icons) - editor.html: Z-AMPP brand logo, removes Wild Dragon SVG mark - editor.html: removes Google Fonts import - editor.html: adds auth-guard.js
2026-05-18 23:11:53 -04:00
<a href="editor.html" class="nav-item">
feat(editor): integrate openreel-video as services/editor with MAM hooks Vendored Augani/openreel-video (MIT) into services/editor and wired it to the MAM. Editor runs as its own container on port 47435. Library assets pull in via ?asset=<uuid>; render exports route back via POST /api/v1/upload/simple. Sidebar Editor link on every page; Edit button on every preview modal. See services/editor/INTEGRATION.md for the patch map.
2026-05-17 21:44:15 -04:00
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg>
Editor
</a>
fix: remove Google Fonts, fix editor link to :47435, fix page titles - Remove @import Google Fonts from common.css (was blocking CSS on LAN) - Update Editor nav link on all pages to dynamically resolve to :47435 (OpenReel SPA) using inline script so it works on any hostname - Fix page titles from Wild Dragon -> Z-AMPP across all pages - Resolver: <a href="#" id="editor-nav-link"> + IIFE sets href at load
2026-05-18 22:56:51 -04:00
<div class="sidebar-section-label">Admin</div>
<a href="users.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="5" r="2.5"/><path d="M1 13c0-2.8 2.2-5 5-5s5 2.2 5 5"/><circle cx="12" cy="5" r="2"/><path d="M15 12c0-1.9-1.3-3.5-3-4"/></svg>
Users
</a>
<a href="tokens.html" class="nav-item">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="10" r="3.5"/><path d="M8.7 7.3L13 3M11.5 3.5l1.5 1.5M13.5 2.5l1 1"/></svg>
Tokens
</a>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</nav>
fix: remove Google Fonts, fix editor link to :47435, fix page titles - Remove @import Google Fonts from common.css (was blocking CSS on LAN) - Update Editor nav link on all pages to dynamically resolve to :47435 (OpenReel SPA) using inline script so it works on any hostname - Fix page titles from Wild Dragon -> Z-AMPP across all pages - Resolver: <a href="#" id="editor-nav-link"> + IIFE sets href at load
2026-05-18 22:56:51 -04:00
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar" id="userAvatar">?</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name" id="userName">—</div>
<div class="sidebar-user-role" id="userRole"></div>
</div>
<button class="btn btn-ghost" id="logoutBtn" title="Sign out" style="padding:0;width:24px;height:24px;flex-shrink:0;">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M10 8H3M6 5l-3 3 3 3"/><path d="M7 3h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7"/></svg>
</button>
</div>
</div>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</nav>
<div class="main">
<header class="topbar">
<div class="topbar-left">
<span class="page-title">Recorders</span>
</div>
<div class="topbar-right">
<button class="btn btn-primary btn-sm" id="newRecorderBtn">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v12M2 8h12"/></svg>
New recorder
</button>
</div>
</header>
<div class="page-content">
<div id="recorderGrid" class="recorder-grid"></div>
<div id="recorderEmpty" class="empty-state" style="display:none;">
<div class="empty-state-icon">
<svg viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="9" width="26" height="22" rx="2"/><path d="M28 16l10-5v18l-10-5"/><circle cx="15" cy="20" r="4"/></svg>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
</div>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="empty-state-title">No recorders yet</div>
<div class="empty-state-body">Create a recorder to ingest live streams via SRT, RTMP, or SDI.</div>
<div class="empty-state-actions">
<button class="btn btn-primary btn-sm" onclick="openPanel()">New recorder</button>
</div>
</div>
</div>
</div>
</div>
<!-- Slide panel: new/edit recorder -->
<div class="slide-overlay" id="panelOverlay"></div>
<div class="slide-panel" id="recorderPanel">
<div class="slide-panel-header">
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
<span class="slide-panel-title" id="panelTitle">New recorder</span>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<button class="btn btn-ghost btn-sm" id="closePanelBtn" style="padding:0;width:28px;height:28px;">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3l10 10M13 3L3 13"/></svg>
</button>
</div>
<div class="slide-panel-body">
<!-- Name -->
<div class="form-group">
<label class="form-label" for="recName">Recorder name</label>
<input type="text" id="recName" placeholder="e.g. Studio A SRT">
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
</div>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<!-- Source type -->
<div class="form-group">
<label class="form-label">Source type</label>
<div class="source-type-row">
<button class="source-type-btn active" data-type="srt" onclick="setSourceType('srt')">SRT</button>
<button class="source-type-btn" data-type="rtmp" onclick="setSourceType('rtmp')">RTMP</button>
<button class="source-type-btn" data-type="sdi" onclick="setSourceType('sdi')">SDI</button>
</div>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<!-- Dynamic source config -->
<div id="sourceConfigFields" class="conditional-fields"></div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<!-- Recording settings -->
<div class="form-group">
<div class="form-section-label">Recording settings</div>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="form-row">
<div class="form-group">
<label class="form-label" for="recCodec">Codec</label>
<select id="recCodec">
<option value="prores_hq">ProRes HQ</option>
<option value="prores_422">ProRes 422</option>
<option value="prores_lt">ProRes LT</option>
<option value="h264">H.264</option>
<option value="dnxhd">DNxHD</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="recResolution">Resolution</label>
<select id="recResolution">
<option value="native">Native (source)</option>
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<option value="1920x1080">1920×1080</option>
<option value="1280x720">1280×720</option>
<option value="3840x2160">3840×2160</option>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</select>
</div>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="form-group">
<label class="toggle">
<input type="checkbox" id="proxyToggle">
<div class="toggle-track"></div>
<span class="toggle-label">Generate proxy on stop</span>
</label>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<!-- Proxy settings (shown when proxy enabled) -->
<div id="proxyFields" style="display:none;" class="form-row">
<div class="form-group">
<label class="form-label" for="proxyCodec">Proxy codec</label>
<select id="proxyCodec">
<option value="h264">H.264</option>
<option value="h265">H.265</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="proxyBitrate">Proxy bitrate</label>
<select id="proxyBitrate">
<option value="2000k">2 Mbps</option>
<option value="4000k">4 Mbps</option>
<option value="8000k">8 Mbps</option>
</select>
</div>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<!-- Project / bin -->
<div class="form-group">
<div class="form-section-label">Destination</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="recProject">Project</label>
<select id="recProject">
<option value="">None (manual assignment)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="recBin">Bin</label>
<select id="recBin">
<option value="">Project root</option>
</select>
</div>
</div>
</div>
<div class="slide-panel-footer">
<button class="btn btn-ghost" onclick="closePanel()">Cancel</button>
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
<button class="btn btn-secondary" id="probeBtn">Probe source</button>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<button class="btn btn-primary" id="saveRecorderBtn">Create recorder</button>
</div>
</div>
<div class="toast-container" id="toastContainer" aria-live="polite"></div>
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
<script src="js/api.js?v=6"></script>
feat(design): broadcast ops console redesign sweep Confirmed shape brief: ops-console direction, balanced density, blue committed accent, readability emphasized. Design system: surface scale to 5 steps tinted toward hue 266; text contrast lifted (secondary 62->72%, tertiary 44->52, added text-disabled); borders gained faint variant; status tokens renamed semantically (signal-good/warn/bad/idle); typography upgraded (Inter 400/500/600, JetBrains Mono for numerics, new 2xl/3xl/tc scale steps). New components: tc-display timecode classes with blue glow; tally-word with good/warn/bad/rec variants; signal-strip flutter bar with modifiers; chip dense monospaced pill; manifest table styles. Topbar status strip: new js/topbar-strip.js auto-injects a 28px strip on every page with wall clock, page name, live API latency, and system-pulse dot. Per-page: recorders gain live signal-strip above fps line; capture timecode bumped 38->64px with blue glow; ingest drop zone slimmed 200->88px side-by-side layout so manifest gets the real estate.
2026-05-17 19:04:38 -04:00
<script src="js/topbar-strip.js?v=1"></script>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<script>
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
const pState = { recorders: [], timers: {}, sourceType: 'srt', mode: 'caller', projects: [], signals: {}, editingId: null };
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.addEventListener('DOMContentLoaded', async () => {
await Promise.all([loadRecorders(), loadProjects()]);
setInterval(loadRecorders, 5000);
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
setInterval(pollRecordingSignals, 2000);
// Poll live signal info for every recorder currently in `recording` state
async function pollRecordingSignals() {
const active = pState.recorders.filter(r => r.status === "recording");
await Promise.all(active.map(async (rec) => {
try {
const resp = await fetch(`/api/v1/recorders/${rec.id}/status`, { credentials: "include" });
if (resp.ok) {
const j = await resp.json();
pState.signals[rec.id] = j;
updateSignalBadge(rec.id, j);
}
} catch (_) {}
}));
}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.getElementById('newRecorderBtn').onclick = openPanel;
document.getElementById('closePanelBtn').onclick = closePanel;
document.getElementById('panelOverlay').onclick = closePanel;
document.getElementById('saveRecorderBtn').onclick = handleSaveRecorder;
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
document.getElementById('probeBtn').onclick = handleProbe;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.getElementById('proxyToggle').onchange = e => {
document.getElementById('proxyFields').style.display = e.target.checked ? 'grid' : 'none';
};
document.getElementById('recProject').onchange = handleProjectChange;
updateSourceFields();
});
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// ── Load / render ─────────────────────────
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
async function loadRecorders() {
const r = await getRecorders();
if (!r.success) return;
pState.recorders = r.data;
renderRecorders();
}
function renderRecorders() {
const grid = document.getElementById('recorderGrid');
const empty = document.getElementById('recorderEmpty');
if (!pState.recorders.length) {
grid.innerHTML = ''; empty.style.display = 'flex'; return;
}
empty.style.display = 'none';
fix(recorders): kill the timer/status flap by computing live values inline + skipping unchanged DOM rebuilds
2026-05-18 09:47:03 -04:00
// Skip full DOM rebuild if structure is unchanged — the per-second timer
// and the signal poll will update the dynamic fields in place. Rebuilding
// every 5s was tearing down the live <video> element and the timer span.
const sig = pState.recorders.map(r => r.id + ':' + r.status + ':' + (r.live_asset_id || '') + ':' + (r.started_at || '')).join('|');
if (sig === pState._lastRenderSig && grid.children.length === pState.recorders.length) {
return;
}
pState._lastRenderSig = sig;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
grid.innerHTML = pState.recorders.map(rec => {
const isRecording = rec.status === 'recording';
const cfg = rec.source_config || {};
const sourceTypeKey = (rec.source_type || 'sdi').toLowerCase();
const badgeClass = { sdi:'badge-sdi', srt:'badge-srt', rtmp:'badge-rtmp' }[sourceTypeKey] || 'badge-idle';
const statusClass = isRecording ? 'recording' : rec.status === 'error' ? 'error' : '';
const statusDotClass = isRecording ? 'status-dot--recording' : rec.status === 'error' ? 'status-dot--error' : 'status-dot--idle';
let sourceDisplay = '';
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
if (cfg.url) {
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
sourceDisplay = cfg.url;
} else if (cfg.device !== undefined) {
sourceDisplay = `DeckLink ${cfg.device}`;
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
} else if (cfg.mode === 'listener') {
// legacy/listener data - display read-only but no longer creatable from UI
const port = cfg.listen_port || (sourceTypeKey === 'srt' ? 49001 : 41936);
sourceDisplay = `(legacy listener :${port})`;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
let connectBanner = '';
if (!isRecording && cfg.mode === 'listener') {
const serverIp = location.hostname || '10.0.0.25';
if (sourceTypeKey === 'srt') {
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
const port = cfg.listen_port || 49001;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
connectBanner = `<div class="info-banner recorder-connect-info">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
<span>Push to <code>srt://${serverIp}:${port}?mode=caller</code></span>
</div>`;
} else if (sourceTypeKey === 'rtmp') {
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
const port = cfg.listen_port || 41936;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
const key = cfg.stream_key || 'stream';
connectBanner = `<div class="info-banner recorder-connect-info">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="6"/><path d="M7 4v4M7 9.5v.5"/></svg>
<span>Push to <code>rtmp://${serverIp}:${port}/live/${key}</code></span>
</div>`;
}
}
const lastRec = rec.last_recording_at ? new Date(rec.last_recording_at).toLocaleString() : 'Never';
return `<div class="recorder-card ${statusClass}" data-id="${rec.id}">
<div class="recorder-header">
<div class="recorder-id">
<div class="recorder-name">${esc(rec.name)}</div>
<div class="recorder-badges">
<span class="badge ${badgeClass}">${sourceTypeKey.toUpperCase()}</span>
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
${rec.recording_codec ? `<span class="badge badge-idle">${esc(rec.recording_codec)}</span>` : ''}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</div>
</div>
<div class="recorder-actions">
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
${!isRecording ? `<button class="btn btn-ghost btn-sm" onclick="openEditPanel('${rec.id}')" title="Edit recorder" style="padding:0;width:28px;height:28px;">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg>
</button>` : ''}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<button class="btn btn-ghost btn-sm" onclick="handleDeleteRecorder('${rec.id}')" title="Delete recorder" style="padding:0;width:28px;height:28px;">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4v9h6V4"/></svg>
</button>
</div>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="recorder-status-row">
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
<span class="status-dot ${statusDotClass}" id="statusDot-${rec.id}"></span>
<span class="text-sm" id="statusText-${rec.id}" style="color:${isRecording ? 'var(--accent)' : rec.status === 'error' ? 'var(--status-red)' : 'var(--text-secondary)'}">
fix(recorders): kill the timer/status flap by computing live values inline + skipping unchanged DOM rebuilds
2026-05-18 09:47:03 -04:00
${(() => { if (rec.status === 'error') return 'Error'; if (!isRecording) return 'Idle'; const sg = (pState.signals[rec.id]||{}).signal; if (sg === 'lost') return 'Signal lost'; if (sg === 'error') return 'Connection error'; if (sg === 'connecting') return 'Connecting...'; return 'Recording'; })()}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</span>
fix(recorders): kill the timer/status flap by computing live values inline + skipping unchanged DOM rebuilds
2026-05-18 09:47:03 -04:00
${isRecording ? `<span class="recorder-timer" id="timer-${rec.id}">${rec.started_at ? formatDur(Math.max(0, Math.floor((Date.now() - new Date(rec.started_at).getTime())/1000))) : "00:00:00"}</span>` : ''}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</div>
fix(recorders): kill the timer/status flap by computing live values inline + skipping unchanged DOM rebuilds
2026-05-18 09:47:03 -04:00
${isRecording ? `<div class="signal-strip" id="signalStrip-${rec.id}"><div class="signal-strip-fill"></div></div><div class="recorder-status-row" style="font-size:var(--text-xs);"><span id="signal-${rec.id}" style="color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.02em">${(pState.signals[rec.id]||{}).signal === "lost" ? "No signal — stream dropped" : (pState.signals[rec.id]||{}).signal === "error" ? "Capture error" : "Receiving stream"}</span></div>` : ''}
feat(recorders): stable elapsed timer + live HLS preview on the card; optimistic signal default
2026-05-18 09:40:42 -04:00
${isRecording && rec.live_asset_id ? `<div class="recorder-preview"><video id="livevideo-${rec.id}" data-live-id="${rec.live_asset_id}" muted playsinline autoplay></video><div class="recorder-preview-stamp"><span class="recorder-preview-dot"></span>LIVE</div></div>` : ''}
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="recorder-source">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M2 4h10M2 8h7M2 12h5"/></svg>
<span>${esc(sourceDisplay)}</span>
</div>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
${connectBanner}
<div class="recorder-footer">
<span class="recorder-footer-meta">Last: ${lastRec}</span>
<div class="recorder-controls">
${isRecording
? `<button class="btn btn-danger btn-sm" onclick="handleStop('${rec.id}')">Stop</button>`
: `<button class="btn btn-record btn-sm" onclick="handleStart('${rec.id}')">
<svg viewBox="0 0 14 14" fill="currentColor" width="10" height="10"><circle cx="7" cy="7" r="5"/></svg>
Record
</button>`
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</div>
</div>
</div>`;
}).join('');
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// Start timers for recording recorders
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
pState.recorders.filter(r => r.status === 'recording').forEach(rec => {
if (!pState.timers[rec.id]) {
const startedAt = rec.started_at ? new Date(rec.started_at) : new Date();
pState.timers[rec.id] = setInterval(() => {
const el = document.getElementById(`timer-${rec.id}`);
if (!el) { clearInterval(pState.timers[rec.id]); delete pState.timers[rec.id]; return; }
const elapsed = Math.floor((Date.now() - startedAt) / 1000);
el.textContent = formatDur(elapsed);
}, 500);
}
});
Object.keys(pState.timers).forEach(id => {
if (!pState.recorders.find(r => r.id === id && r.status === 'recording')) {
clearInterval(pState.timers[id]); delete pState.timers[id];
}
});
feat(recorders): stable elapsed timer + live HLS preview on the card; optimistic signal default
2026-05-18 09:40:42 -04:00
// Attach an HLS source to each live-preview <video> on the page.
pState.recorders.filter(r => r.status === 'recording' && r.live_asset_id).forEach(rec => {
const v = document.getElementById('livevideo-' + rec.id);
if (!v || v.dataset.attached === '1') return;
const url = '/live/' + rec.live_asset_id + '/index.m3u8';
const attach = () => {
if (v.canPlayType('application/vnd.apple.mpegurl')) {
v.src = url; v.play().catch(() => {});
} else if (window.Hls && window.Hls.isSupported()) {
const hls = new Hls({ lowLatencyMode: true, liveSyncDuration: 2, liveMaxLatencyDuration: 6 });
hls.loadSource(url); hls.attachMedia(v);
hls.on(Hls.Events.MANIFEST_PARSED, () => v.play().catch(() => {}));
v._hls = hls;
}
v.dataset.attached = '1';
};
if (window.Hls) attach();
else {
const sc = document.createElement('script');
sc.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.0/dist/hls.min.js';
sc.onload = attach;
document.head.appendChild(sc);
}
});
document.querySelectorAll('video[data-live-id]').forEach(v => {
const id = v.id.replace('livevideo-', '');
const rec = pState.recorders.find(r => r.id === id);
if (!rec || rec.status !== 'recording') {
try { if (v._hls) { v._hls.destroy(); delete v._hls; } } catch (_) {}
v.removeAttribute('src');
}
});
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
function updateSignalBadge(rid, st) {
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
const el = document.getElementById('signal-' + rid);
const sig = st.signal || 'connecting';
if (el) {
const detail = {
connecting: 'Waiting for stream...',
receiving: 'Receiving • ' + (st.framesReceived || 0) + ' fr • ' + Math.round(st.currentFps || 0) + ' fps',
lost: 'No signal — stream dropped',
error: st.lastError ? st.lastError : 'Connection error',
stopped: 'Stopped',
};
const col = {
connecting: 'var(--status-yellow, oklch(82% 0.15 90))',
receiving: 'var(--status-green, oklch(68% 0.18 148))',
lost: 'var(--status-red, oklch(62% 0.22 25))',
error: 'var(--status-red, oklch(62% 0.22 25))',
stopped: 'var(--text-tertiary)',
};
el.textContent = detail[sig] || sig;
el.style.color = col[sig] || 'var(--text-tertiary)';
el.title = st.lastError || '';
}
const mainTxt = document.getElementById('statusText-' + rid);
const mainDot = document.getElementById('statusDot-' + rid);
if (mainTxt && mainDot) {
const mainLabel = { connecting: 'Connecting...', receiving: 'Recording', lost: 'Signal lost', error: 'Connection error' }[sig] || 'Recording';
const mainCol = { connecting: 'var(--status-yellow, oklch(82% 0.15 90))', receiving: 'var(--accent)', lost: 'var(--status-red, oklch(62% 0.22 25))', error: 'var(--status-red, oklch(62% 0.22 25))' }[sig] || 'var(--accent)';
mainTxt.textContent = mainLabel;
mainTxt.style.color = mainCol;
mainDot.style.background = mainCol;
}
feat(design): broadcast ops console redesign sweep Confirmed shape brief: ops-console direction, balanced density, blue committed accent, readability emphasized. Design system: surface scale to 5 steps tinted toward hue 266; text contrast lifted (secondary 62->72%, tertiary 44->52, added text-disabled); borders gained faint variant; status tokens renamed semantically (signal-good/warn/bad/idle); typography upgraded (Inter 400/500/600, JetBrains Mono for numerics, new 2xl/3xl/tc scale steps). New components: tc-display timecode classes with blue glow; tally-word with good/warn/bad/rec variants; signal-strip flutter bar with modifiers; chip dense monospaced pill; manifest table styles. Topbar status strip: new js/topbar-strip.js auto-injects a 28px strip on every page with wall clock, page name, live API latency, and system-pulse dot. Per-page: recorders gain live signal-strip above fps line; capture timecode bumped 38->64px with blue glow; ingest drop zone slimmed 200->88px side-by-side layout so manifest gets the real estate.
2026-05-17 19:04:38 -04:00
const strip = document.getElementById('signalStrip-' + rid);
if (strip) {
strip.classList.remove('signal-strip--warn', 'signal-strip--bad', 'signal-strip--idle');
if (sig === 'connecting') strip.classList.add('signal-strip--warn');
else if (sig === 'lost' || sig === 'error') strip.classList.add('signal-strip--bad');
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
function formatDur(s) {
const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
return [h, m, sec].map(v => String(v).padStart(2,'0')).join(':');
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// ── Controls ──────────────────────────────
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
async function handleStart(id) {
const r = await startRecorder(id);
if (r.success) { toast('Recording started', '', 'success'); loadRecorders(); }
else toast('Failed to start', r.error, 'error');
}
async function handleStop(id) {
const r = await stopRecorder(id);
if (r.success) { toast('Recording stopped', '', 'success'); loadRecorders(); }
else toast('Failed to stop', r.error, 'error');
}
async function handleDeleteRecorder(id) {
if (!confirm('Delete this recorder?')) return;
const r = await deleteRecorder(id);
if (r.success) { toast('Recorder deleted', '', 'success'); loadRecorders(); }
else toast('Delete failed', r.error, 'error');
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// ── Panel ─────────────────────────────────
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
function openPanel() {
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
pState.editingId = null;
document.getElementById('panelTitle').textContent = 'New recorder';
document.getElementById('saveRecorderBtn').textContent = 'Create recorder';
document.getElementById('probeBtn').style.display = '';
// Reset form to defaults
document.getElementById('recName').value = '';
document.getElementById('recCodec').value = 'prores_hq';
document.getElementById('recResolution').value = 'native';
document.getElementById('proxyToggle').checked = false;
document.getElementById('proxyFields').style.display = 'none';
document.getElementById('recProject').value = '';
document.getElementById('recBin').innerHTML = '<option value="">Project root</option>';
const pr = document.getElementById('probeResult');
if (pr) pr.remove();
pState.sourceType = 'srt';
document.querySelectorAll('.source-type-btn').forEach(b => b.classList.toggle('active', b.dataset.type === 'srt'));
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.getElementById('recorderPanel').classList.add('open');
document.getElementById('panelOverlay').classList.add('open');
updateSourceFields();
}
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
function openEditPanel(recId) {
const rec = pState.recorders.find(r => r.id === recId);
if (!rec) return;
if (rec.status === 'recording') {
toast('Cannot edit while recording', 'Stop the recorder first', 'warning');
return;
}
pState.editingId = recId;
document.getElementById('panelTitle').textContent = 'Edit recorder';
document.getElementById('saveRecorderBtn').textContent = 'Save changes';
document.getElementById('probeBtn').style.display = '';
const pr = document.getElementById('probeResult');
if (pr) pr.remove();
// Basic fields
document.getElementById('recName').value = rec.name || '';
document.getElementById('recCodec').value = rec.recording_codec || 'prores_hq';
document.getElementById('recResolution').value = rec.recording_resolution || 'native';
// Proxy
const proxyEnabled = !!rec.proxy_enabled;
document.getElementById('proxyToggle').checked = proxyEnabled;
document.getElementById('proxyFields').style.display = proxyEnabled ? 'grid' : 'none';
if (proxyEnabled) {
const pc = document.getElementById('proxyCodec');
if (pc) pc.value = rec.proxy_codec || 'h264';
const pb = document.getElementById('proxyBitrate');
// proxy_resolution stores a value like "4000k" (set from proxy bitrate select on create)
if (pb) pb.value = rec.proxy_resolution || '4000k';
}
// Source type
const srcType = (rec.source_type || 'srt').toLowerCase();
pState.sourceType = srcType;
document.querySelectorAll('.source-type-btn').forEach(b => b.classList.toggle('active', b.dataset.type === srcType));
updateSourceFields();
// Populate source-specific fields after updateSourceFields injects DOM nodes
setTimeout(() => {
const cfg = rec.source_config || {};
if (srcType === 'sdi') {
const d = document.getElementById('sdiDevice');
if (d) d.value = String(cfg.device ?? 0);
} else if (srcType === 'srt') {
const u = document.getElementById('srtUrl');
if (u) u.value = cfg.url || '';
} else if (srcType === 'rtmp') {
const u = document.getElementById('rtmpUrl');
if (u) u.value = cfg.url || '';
}
}, 0);
// Project / bin
const projSel = document.getElementById('recProject');
projSel.value = rec.project_id || '';
document.getElementById('recBin').innerHTML = '<option value="">Project root</option>';
if (rec.project_id) {
handleProjectChange().then(() => {
if (rec.bin_id) document.getElementById('recBin').value = rec.bin_id;
});
}
document.getElementById('recorderPanel').classList.add('open');
document.getElementById('panelOverlay').classList.add('open');
}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
function closePanel() {
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
pState.editingId = null;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.getElementById('recorderPanel').classList.remove('open');
document.getElementById('panelOverlay').classList.remove('open');
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
const pr = document.getElementById('probeResult');
if (pr) pr.remove();
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// ── Source type ───────────────────────────
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
function setSourceType(type) {
pState.sourceType = type;
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
pState.mode = 'caller';
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
document.querySelectorAll('.source-type-btn').forEach(b => b.classList.toggle('active', b.dataset.type === type));
updateSourceFields();
}
function updateSourceFields() {
const container = document.getElementById('sourceConfigFields');
const type = pState.sourceType;
container.innerHTML = '';
if (type === 'sdi') {
container.innerHTML = `
<div class="form-group">
<label class="form-label" for="sdiDevice">DeckLink device</label>
<select id="sdiDevice">
<option value="0">DeckLink Card 1</option>
<option value="1">DeckLink Card 2</option>
</select>
</div>`;
} else if (type === 'srt') {
container.innerHTML = `
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<div id="srtCallerFields">
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="form-group">
<label class="form-label" for="srtUrl">Source URL</label>
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<input type="url" id="srtUrl" placeholder="srt://192.168.1.100:4200">
<div class="form-hint">The recorder will connect out to this URL (caller mode). <code>?mode=caller</code> is appended automatically.</div>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</div>
</div>`;
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// Wire port input to update banner
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
setTimeout(() => {
const portIn = document.getElementById('srtPort');
if (portIn) portIn.addEventListener('input', () => {
const el = document.getElementById('srtConnectStr');
if (el) el.textContent = `srt://${location.hostname || '10.0.0.25'}:${portIn.value}?mode=caller`;
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
});
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}, 0);
} else if (type === 'rtmp') {
container.innerHTML = `
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<div id="rtmpCallerFields">
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
<div class="form-group">
<label class="form-label" for="rtmpUrl">Source URL</label>
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
<input type="url" id="rtmpUrl" placeholder="rtmp://server/live/streamkey">
<div class="form-hint">The recorder will pull this RTMP stream. Must be an existing published stream on an RTMP server.</div>
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
</div>
</div>`;
setTimeout(() => {
const portIn = document.getElementById('rtmpPort');
const keyIn = document.getElementById('rtmpKey');
const update = () => {
const el = document.getElementById('rtmpConnectStr');
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
if (el) el.textContent = `rtmp://${location.hostname || '10.0.0.25'}:${portIn?.value || 41936}/live/${keyIn?.value || 'stream'}`;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
};
portIn?.addEventListener('input', update);
keyIn?.addEventListener('input', update);
}, 0);
}
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
function setMode(_mode) {
// Listener mode UI was removed - all recorders are caller (pull) mode now.
pState.mode = 'caller';
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
// ── Projects for recorder destination ─────
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
async function loadProjects() {
const r = await getProjects();
if (!r.success) return;
pState.projects = r.data;
const sel = document.getElementById('recProject');
sel.innerHTML = '<option value="">None (manual assignment)</option>' +
r.data.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join('');
}
async function handleProjectChange() {
const projectId = document.getElementById('recProject').value;
const binSel = document.getElementById('recBin');
binSel.innerHTML = '<option value="">Project root</option>';
if (!projectId) return;
const r = await getBins(projectId);
if (r.success) r.data.forEach(b => binSel.innerHTML += `<option value="${b.id}">${esc(b.name)}</option>`);
}
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
// ── Save recorder (create or update) ──────
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
async function handleProbe() {
const btn = document.getElementById('probeBtn');
btn.disabled = true; btn.textContent = 'Probing...';
// Build payload from current form state
const type = pState.sourceType;
const payload = { source_type: type };
if (type === 'srt' && document.getElementById('srtUrl')) {
payload.source_url = document.getElementById('srtUrl').value.trim();
} else if (type === 'rtmp' && document.getElementById('rtmpUrl')) {
payload.source_url = document.getElementById('rtmpUrl').value.trim();
} else if (type === 'sdi') {
const d = document.getElementById('sdiDevice');
if (d) payload.device = parseInt(d.value || '0', 10);
}
try {
const r = await fetch('/api/v1/recorders/probe', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify(payload),
});
const data = await r.json();
renderProbeResult(data);
} catch (err) {
renderProbeResult({ ok: false, error: 'Network error: ' + err.message });
} finally {
btn.disabled = false; btn.textContent = 'Probe source';
}
}
function renderProbeResult(d) {
let host = document.getElementById('probeResult');
if (!host) {
host = document.createElement('div');
host.id = 'probeResult';
host.style.cssText = 'margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-surface);font-size:var(--text-xs)';
const footer = document.querySelector('.slide-panel-footer');
footer.parentElement.insertBefore(host, footer);
}
if (!d.ok) {
host.style.borderColor = 'oklch(62% 0.22 25 / 0.5)';
host.style.background = 'oklch(62% 0.22 25 / 0.08)';
fix(recorders): escape d.error in renderProbeResult to prevent XSS
2026-05-19 00:46:12 -04:00
host.innerHTML = '<div style="color:var(--status-red);font-weight:500;margin-bottom:4px">No signal detected</div><div style="color:var(--text-secondary);white-space:pre-wrap">' + esc(d.error || 'Unknown error') + '</div>';
feat(recorders): probe sources + reflect real signal in main status Two things that together stop bogus URLs from masquerading as a recording: PROBE BUTTON in the New Recorder panel. Before you commit to record, hit Probe Source - the capture container runs ffprobe with a 10s timeout against the URL and returns the parsed streams. UI shows green Signal Detected with codec/resolution/fps/audio, or red No Signal Detected with the actual ffprobe error message. For SDI it lists DeckLink devices. Listener-mode sources cannot be probed standalone (would block waiting for a publisher) and the UI says so. MAIN STATUS LABEL ON THE RECORDING CARD now mirrors the live signal instead of hardcoding Recording. So a recorder pointed at a dead URL goes Connecting... -> Connection error (red) instead of looking like everything is fine. When frames actually start arriving the label flips to Recording (blue) and the dot turns blue. If a previously-good stream drops the label switches to Signal lost (red). API: * capture: POST /capture/probe runs ffprobe and returns { ok, streams, format, error? } * mam-api: POST /api/v1/recorders/probe proxies through to the capture sidecar with a 15s outer timeout
2026-05-17 18:39:09 -04:00
return;
}
host.style.borderColor = 'oklch(68% 0.18 148 / 0.5)';
host.style.background = 'oklch(68% 0.18 148 / 0.08)';
renderProbeOk(host, d);
}
function renderProbeOk(host, d) {
if (d.source_type === 'sdi') {
host.innerHTML = '<div style="color:var(--status-green);font-weight:500;margin-bottom:6px">DeckLink devices found</div><ul style="margin:0;padding-left:18px;color:var(--text-primary)">' + (d.devices || []).map(n => '<li>' + esc(n) + '</li>').join('') + '</ul>';
return;
}
const v = (d.streams || []).find(s => s.codec_type === 'video');
const a = (d.streams || []).find(s => s.codec_type === 'audio');
let html = '<div style="color:var(--status-green);font-weight:500;margin-bottom:6px">Signal detected</div><div style="color:var(--text-primary);line-height:1.6">';
if (v) html += '<div><strong>Video:</strong> ' + esc(v.codec_name || '?') + ' ' + (v.width || '?') + 'x' + (v.height || '?') + ' • ' + esc(v.r_frame_rate || v.avg_frame_rate || '?') + ' fps • ' + esc(v.pix_fmt || '?') + '</div>';
if (a) html += '<div><strong>Audio:</strong> ' + esc(a.codec_name || '?') + ' • ' + (a.sample_rate || '?') + ' Hz • ' + (a.channels || '?') + ' ch</div>';
html += '</div>';
host.innerHTML = html;
}
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
async function handleSaveRecorder() {
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
const name = document.getElementById('recName').value.trim();
if (!name) { toast('Enter a recorder name', '', 'warning'); return; }
const type = pState.sourceType;
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
const recording_codec = document.getElementById('recCodec').value;
const recording_resolution = document.getElementById('recResolution').value;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
const projectId = document.getElementById('recProject').value || null;
let sourceConfig = {};
if (type === 'sdi') {
sourceConfig.device = parseInt(document.getElementById('sdiDevice')?.value || '0');
} else if (type === 'srt') {
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
sourceConfig.mode = 'caller';
sourceConfig.url = document.getElementById('srtUrl')?.value;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
} else if (type === 'rtmp') {
fix: library + caller-only recorders + live signal indicator Three problems blocked the end-to-end flow: 1) Library always rendered empty because /assets returns {assets,total} but index.html (and capture.html) assumed r.data was an array. Fixed in api.js by unwrapping r.data.assets centrally; total is kept on r.total. 2) SRT/RTMP caller mode pulled audio only. ffmpeg opened the network input before the H264 SPS arrived, marked the video stream as pix_fmt=none, and silently dropped it from the stream map. Added -probesize 32M -analyzeduration 10M -fflags +genpts and explicit -map 0:v:0?/0:a:0? so each track survives independently of when it appears. 3) Hitting Record gave no feedback about whether a stream was actually arriving. capture-manager now parses ffmpeg progress lines (frame=... fps=...) and tracks framesReceived, currentFps, lastFrameAt, lastError. getStatus() returns a derived signal enum (connecting | receiving | lost | error | stopped). The recorder controller gives each spawned container a stable network alias `recorder-<id>` and the GET /recorders/:id/status endpoint proxies the live capture status through. recorders.html polls that every 2s and renders the badge under each active card with the running frame/fps counter or the ffmpeg error. Also: * recorders.html: dropped the listener-mode UI entirely. All new recorders are caller-mode (pull). The MAM is no longer offered as an RTMP/SRT server. Legacy listener records still render but read-only.
2026-05-17 07:39:19 -04:00
sourceConfig.mode = 'caller';
sourceConfig.url = document.getElementById('rtmpUrl')?.value;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
const proxy_enabled = document.getElementById('proxyToggle').checked;
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
const payload = {
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
name,
source_type: type,
source_config: sourceConfig,
recording_codec,
recording_resolution,
project_id: projectId,
proxy_enabled,
proxy_codec: proxy_enabled ? document.getElementById('proxyCodec').value : undefined,
proxy_resolution: proxy_enabled ? document.getElementById('proxyBitrate').value : undefined,
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
};
feat(recorders): add Edit Recorder panel with PATCH support - Edit (pencil) button appears on idle recorder cards; hidden while recording - openEditPanel() pre-populates all form fields from existing recorder state - openPanel() resets editingId and restores "New recorder" defaults - closePanel() clears editingId and removes any stale probe result - handleSaveRecorder() dispatches PATCH /recorders/:id in edit mode, POST otherwise - Fix field name bugs in create path: codec→recording_codec, resolution→recording_resolution, proxy_config object→proxy_enabled/proxy_codec/proxy_resolution flat fields - Badge in card now reads rec.recording_codec (correct DB field) instead of rec.codec - Bump api.js cache-buster to v=6
2026-05-18 23:35:16 -04:00
if (pState.editingId) {
const r = await patchRecorder(pState.editingId, payload);
if (r.success) {
toast('Recorder updated', name, 'success');
closePanel();
await loadRecorders();
} else toast('Failed to update recorder', r.error, 'error');
} else {
const r = await createRecorder(payload);
if (r.success) {
toast('Recorder created', name, 'success');
closePanel();
await loadRecorders();
} else toast('Failed to create recorder', r.error, 'error');
}
feat: redesign recorders.html with new design system
2026-05-16 13:57:20 -04:00
}
function toast(title, msg, type = 'info') {
const el = document.createElement('div');
el.className = `toast toast--${type}`;
el.innerHTML = `<div class="toast-body"><div class="toast-title">${esc(title)}</div>${msg ? `<div class="toast-msg">${esc(msg)}</div>` : ''}</div>`;
document.getElementById('toastContainer').appendChild(el);
setTimeout(() => el.remove(), 4000);
}
function esc(s) {
if (!s) return '';
return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
Replace inline auth script with shared auth-guard.js in recorders.html
2026-05-18 13:41:52 -04:00
<script src="js/auth-guard.js"></script>
Phase 2: services/web-ui/public/recorders.html
2026-04-07 22:05:43 -04:00
</body>
</html>
Reference in a new issue Copy permalink