dragonflight/services/web-ui/public/data.jsx
opencode 04ce096e67 chore: 1.2 ship-prep sweep — close 38 issues
Frontend / UX / a11y
- Sidebar collapse/expand toggle with localStorage persistence (#142)
- Settings sections wrap inputs in <form> with Enter-to-submit + native
  validation; password autocomplete=new-password (#141, #138)
- Asset thumbnails get descriptive alt text (#140)
- Production deploy now precompiles JSX via esbuild and loads the
  production React UMD instead of dev builds + in-browser Babel (#139,
  #122)
- Search wrapper gets role=search; global search input gets aria-label,
  role=combobox, aria-controls/aria-expanded/aria-activedescendant
  wiring (#137, #135)
- Dashboard and Library no longer share the same nav icon (#136)
- Sidebar collapses off-canvas with a topbar menu button below 768 px;
  mobile default is collapsed (#134)
- --text-3 bumped to #8B92A0 for WCAG AA contrast on --bg-0 (#133)
- Schedule and Library routes were rendering empty inside the .main
  flex container — switched to flex:1 + min-height:0 (#131, #132,
  editor + asset detail get the same fix)
- Jobs nav badge now polls /jobs?status=active every 10 s and reflects
  the live count (#130, #113)
- aria-label sweep on every icon-only button (#126)
- Premiere panel release list moved to window.PREMIERE_RELEASES in
  data.jsx; Editor + Settings read from the same source (#125)
- Typo setPgMclips → setPgmClips (#124)
- Stray console.error / console.warn calls gated behind
  window.DF_LOG.{warn,error} (#123)
- Hardcoded /api/v1 paths route through window.ZAMPP_API_PREFIX (#115)
- Schedule rows no longer crash on null recorder_id (#117)
- EditorKeyboard guards against document.activeElement === null (#116)
- Unmount-safe timers for PasswordResetModal, Containers, Editor (#111)
- Player seek clamps below totalMs, server-side range clamping +
  uncached 416 on EOF, client-side EOF-stall watchdog (#143)
- Duration badge overlap fix on narrow asset cards (#52)

Backend / security / reliability
- GET /recorders fixed N+1: single LATERAL JOIN for live_asset_id;
  Docker inspects bounded to actually-recording rows (#121)
- Upload disk-storage (multer.diskStorage) streams parts to S3 instead
  of buffering 500 MB in RAM (#120)
- /assets list clamps limit to MAX_LIMIT=500 to prevent OOM (#119)
- SDK upload archive listing + post-extract sanitize block zip-slip /
  tar-slip and symlink escapes (#118)
- Migrations track applied state in schema_migrations, run in a
  transaction, and exit non-zero on failure (#107)
- node-agent BMD_COUNT override uses BMD_DEVICE_PREFIX; filesystem
  detection wins (#109, #127)
- GPU_COUNT override now merges with nvidia-smi enrichment (#108)
- /cluster/heartbeat requires a node-bound token or admin user;
  tokens carry bound_hostname (#106)
- /recorders/:id/start error responses no longer echo the Docker
  create payload — env vars stay out of client responses (#105)
- /recorders/probe restricts schemes (srt/rtmp/rtsp/udp/rtp), blocks
  private + loopback hosts for non-admins, denies common service
  ports (#104)
- Scheduler tick guarded by a Postgres advisory lock; pending/running
  rows claimed via UPDATE...RETURNING + FOR UPDATE SKIP LOCKED to
  survive multi-node deploys (#103)
- UUID validateUuid('id') param middleware on every /:id route (#102)
- Error handler scrubs Postgres error messages and 5xx detail (#101)
- Graceful SIGTERM/SIGINT shutdown — stops scheduler, drains the HTTP
  server, ends the pool, 25 s force-exit watchdog (#100)
- AMPP sync moved from fire-and-forget to a persisted retry queue
  (ampp_sync_status / attempts / next_attempt_at + scheduler retry
  loop with exponential backoff) (#77)

Migrations
- 019: api_tokens.bound_hostname (#106)
- 020: assets.ampp_sync_status + retry bookkeeping (#77)

Other
- Defer #92 Growing-files per-upload toggle, #80 Audio tab, #57
  Dashboard redesign, #56 Editor SPA polish phase 3, #114 S3
  migration tool to v1.3
2026-05-27 02:06:14 +00:00

317 lines
11 KiB
JavaScript

// data.jsx — API client; populates window.ZAMPP_DATA from real endpoints
const API = '/api/v1';
window.ZAMPP_API_PREFIX = API; // single source of truth (#115)
// Gated logger (#123). Production deploys ship muted; appending ?debug=1
// to the URL (or localStorage.df_debug = '1') re-enables full console output.
(function setupLogger() {
let enabled = false;
try {
enabled =
/(?:^|[?&])debug=1(?:&|$)/.test(location.search) ||
localStorage.getItem('df_debug') === '1' ||
location.hostname === 'localhost' || location.hostname === '127.0.0.1';
} catch {}
const noop = () => {};
window.DF_LOG = {
debug: enabled ? console.debug.bind(console) : noop,
warn: enabled ? console.warn.bind(console) : noop,
error: console.error.bind(console), // errors always surface
};
})();
// Premiere panel releases embedded in this deployment. Bumping the version
// here is the single source of truth — both the Editor download buttons and
// the Settings → Capture SDKs page read from this list (#125).
window.PREMIERE_RELEASES = [
{
version: '1.0.1',
zxp: '/downloads/dragonflight-premiere-panel-1.0.1.zxp',
installer: '/downloads/dragonflight-premiere-panel-1.0.1-windows-setup.exe',
notes: 'Latest — auto-relinking, growing-file support, batch trim',
latest: true,
},
{
version: '1.0.0',
zxp: '/downloads/dragonflight-premiere-panel-1.0.0.zxp',
installer: '/downloads/dragonflight-premiere-panel-1.0.0-windows-setup.exe',
notes: 'Initial release',
latest: false,
},
];
window.PREMIERE_LATEST = window.PREMIERE_RELEASES.find(r => r.latest) || window.PREMIERE_RELEASES[0];
window.ZAMPP_DATA = {
PROJECTS: [],
ASSETS: [],
RECORDERS: [],
JOBS: [],
NODES: [],
USERS: [],
BINS: [],
COMMENTS: [],
ME: null,
};
async function apiFetch(path, opts = {}) {
const res = await fetch(API + path, {
credentials: 'include',
...opts,
headers: { ...(opts.headers || {}), 'Content-Type': 'application/json' },
});
// 401 from any API call means there's no live session. Bounce to the
// login screen instead of leaving the app in a half-loaded state.
// While AUTH_ENABLED=false the server returns a synthetic /auth/me with
// 200 so this branch never fires; flipping AUTH_ENABLED=true is what
// activates the redirect end-to-end.
if (res.status === 401 && !location.pathname.endsWith('/login.html')) {
location.replace('/login.html');
throw new Error('Unauthenticated — redirecting to login');
}
if (!res.ok) throw new Error(res.status + ' ' + res.statusText);
return res.json();
}
function fmtDuration(ms) {
if (!ms) return '—';
const s = Math.round(ms / 1000);
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
const sec = s % 60;
if (h > 0) return h + ':' + String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
return m + ':' + String(sec).padStart(2, '0');
}
function fmtSize(bytes) {
if (!bytes) return '—';
if (bytes >= 1e12) return (bytes / 1e12).toFixed(1) + ' TB';
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
if (bytes >= 1e6) return Math.round(bytes / 1e6) + ' MB';
return Math.round(bytes / 1e3) + ' KB';
}
function fmtRelative(iso) {
if (!iso) return '—';
const diff = (Date.now() - new Date(iso)) / 1000;
if (diff < 60) return 'just now';
if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
return Math.floor(diff / 86400) + 'd ago';
}
const PROJECT_COLORS = ['#5B7CFA', '#2DD4A8', '#FF5B5B', '#F5A623', '#B57CFA', '#6B7280'];
window.PROJECT_COLORS = PROJECT_COLORS;
function normalizeAsset(a, projectMap) {
return {
...a,
name: a.display_name || a.filename || 'Untitled',
type: a.media_type || 'video',
duration: fmtDuration(a.duration_ms),
size: fmtSize(a.file_size),
res: a.resolution || '—',
updated: fmtRelative(a.updated_at),
project: (projectMap && projectMap[a.project_id]) || '',
comments: 0,
progress: 0,
tc: a.start_tc || null,
seed: a.id ? Array.from(a.id.replace(/-/g, '')).reduce((acc, c) => acc + c.charCodeAt(0), 0) % 6 : 1,
};
}
function normalizeRecorder(r) {
let elapsed = '—';
if (r.status === 'recording' && r.started_at) {
const s = Math.floor((Date.now() - new Date(r.started_at)) / 1000);
elapsed = String(Math.floor(s / 3600)).padStart(2, '0') + ':' +
String(Math.floor((s % 3600) / 60)).padStart(2, '0') + ':' +
String(s % 60).padStart(2, '0');
}
const cfg = r.source_config || {};
return {
...r,
source: r.source_type || '—',
url: cfg.url || cfg.address || cfg.srt_url || cfg.rtmp_url || r.source_type || '—',
codec: r.recording_codec || '—',
res: r.recording_resolution || '—',
node: r.node_id ? r.node_id.slice(0, 8) : 'primary',
elapsed,
bitrate: '—',
health: 100,
audio: false,
};
}
function normalizeJob(j) {
const statusMap = { waiting: 'queued', active: 'running', completed: 'done', failed: 'failed' };
const kindMap = { proxy: 'Proxy', thumbnail: 'Thumbnail', conform: 'Conform', transcode: 'Transcode' };
const meta = j.metadata || {};
return {
...j,
status: statusMap[j.status] || j.status,
kind: kindMap[j.type] || j.type || 'Job',
asset: j.asset_name || meta.filename || '—',
eta: '—',
node: meta.node || '—',
priority: meta.priority || 'normal',
error: j.error || null,
progress: j.progress || 0,
};
}
async function refreshAssets() {
const raw = await apiFetch('/assets?limit=500');
const list = Array.isArray(raw) ? raw : (raw.assets || []);
const projectMap = {};
(window.ZAMPP_DATA.PROJECTS || []).forEach(function(p) { projectMap[p.id] = p.name; });
const normalized = list.map(function(a) { return normalizeAsset(a, projectMap); });
window.ZAMPP_DATA.ASSETS = normalized;
if (window.ZAMPP_DATA.PROJECTS && window.ZAMPP_DATA.PROJECTS.length) {
const counts = {};
list.forEach(function(a) { if (a.project_id) counts[a.project_id] = (counts[a.project_id] || 0) + 1; });
window.ZAMPP_DATA.PROJECTS = window.ZAMPP_DATA.PROJECTS.map(function(p) {
return { ...p, assets: counts[p.id] || 0 };
});
}
return normalized;
}
async function loadData() {
const [projectsR, assetsR, recordersR, jobsR, clusterR, usersR, binsR, meR] = await Promise.allSettled([
apiFetch('/projects'),
apiFetch('/assets?limit=500'),
apiFetch('/recorders'),
apiFetch('/jobs'),
apiFetch('/cluster'),
apiFetch('/users'),
apiFetch('/bins'),
apiFetch('/auth/me'),
]);
const projectMap = {};
if (projectsR.status === 'fulfilled') {
window.ZAMPP_DATA.PROJECTS = (projectsR.value || []).map((p, i) => ({
...p,
color: PROJECT_COLORS[i % PROJECT_COLORS.length],
assets: 0,
updated: fmtRelative(p.updated_at),
}));
window.ZAMPP_DATA.PROJECTS.forEach(p => { projectMap[p.id] = p.name; });
}
if (assetsR.status === 'fulfilled') {
const raw = assetsR.value;
const list = Array.isArray(raw) ? raw : (raw.assets || []);
window.ZAMPP_DATA.ASSETS = list.map(a => normalizeAsset(a, projectMap));
const counts = {};
list.forEach(a => { if (a.project_id) counts[a.project_id] = (counts[a.project_id] || 0) + 1; });
window.ZAMPP_DATA.PROJECTS = window.ZAMPP_DATA.PROJECTS.map(p => ({ ...p, assets: counts[p.id] || 0 }));
}
if (recordersR.status === 'fulfilled') {
window.ZAMPP_DATA.RECORDERS = (recordersR.value || []).map(normalizeRecorder);
}
if (jobsR.status === 'fulfilled') {
window.ZAMPP_DATA.JOBS = (jobsR.value || []).map(normalizeJob);
}
if (clusterR.status === 'fulfilled') {
window.ZAMPP_DATA.NODES = clusterR.value || [];
}
if (usersR.status === 'fulfilled') {
window.ZAMPP_DATA.USERS = (usersR.value || []).map(u => ({
...u,
name: u.display_name || u.username || u.email || 'Unknown',
initials: (u.display_name || u.username || '?').slice(0, 2).toUpperCase(),
role: u.role || 'viewer',
joined: fmtRelative(u.created_at),
lastSeen: fmtRelative(u.last_seen || u.updated_at),
}));
}
if (binsR.status === 'fulfilled') {
window.ZAMPP_DATA.BINS = (binsR.value || []).map(b => ({
...b,
count: b.asset_count || 0,
icon: b.type || 'grid',
}));
}
if (meR.status === 'fulfilled' && meR.value) {
const me = meR.value;
const label = me.display_name || me.username || 'User';
window.ZAMPP_DATA.ME = {
id: me.id,
username: me.username,
name: label,
initials: label.slice(0, 2).toUpperCase(),
role: me.role || 'viewer',
// True when the server returned a synthetic user (AUTH_ENABLED=false).
// Surfaced as a small "auth off" hint in the sidebar so the operator
// understands why the corner shows the OS user instead of a login.
synthetic: !!me.synthetic,
};
}
}
// ── Sequence API ────────────────────────────────────────────────
async function getSequences(projectId) {
return apiFetch('/sequences?project_id=' + projectId);
}
async function createSequence(data) {
return apiFetch('/sequences', {
method: 'POST',
body: JSON.stringify(data),
});
}
async function getSequence(sequenceId) {
return apiFetch('/sequences/' + sequenceId);
}
async function updateSequence(sequenceId, data) {
return apiFetch('/sequences/' + sequenceId, {
method: 'PUT',
body: JSON.stringify(data),
});
}
async function deleteSequence(sequenceId) {
return apiFetch('/sequences/' + sequenceId, { method: 'DELETE' });
}
async function syncSequenceClips(sequenceId, clips) {
return apiFetch('/sequences/' + sequenceId + '/clips', {
method: 'PUT',
body: JSON.stringify(clips),
});
}
async function exportSequenceEDL(sequenceId, filename) {
const res = await fetch(API + '/sequences/' + sequenceId + '/export/edl', {
method: 'POST',
credentials: 'include',
});
if (!res.ok) throw new Error('EDL export failed: ' + res.status);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename || 'sequence.edl';
a.click();
URL.revokeObjectURL(url);
}
window.ZAMPP_API = {
fetch: apiFetch, loadData, refreshAssets, fmtDuration, fmtSize, fmtRelative,
getSequences, createSequence, getSequence, updateSequence,
deleteSequence, syncSequenceClips, exportSequenceEDL,
};
// Library re-renders after mutations: expose normalizeAsset so the screen
// can re-fetch /assets and produce rows with the same shape as the boot load.
window.normalizeAsset = normalizeAsset;