380 lines
17 KiB
HTML
380 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Home — Z-AMPP</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="css/common.css">
|
||
|
|
<style>
|
||
|
|
.home-main {
|
||
|
|
flex: 1;
|
||
|
|
overflow: auto;
|
||
|
|
background:
|
||
|
|
radial-gradient(ellipse 80% 60% at 50% 0%, oklch(22% 0.04 260 / 0.65), transparent 60%),
|
||
|
|
radial-gradient(ellipse 40% 30% at 50% 100%, oklch(45% 0.20 266 / 0.10), transparent 60%),
|
||
|
|
var(--bg-base);
|
||
|
|
}
|
||
|
|
.home-hero {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: minmax(300px, 1fr) minmax(300px, 460px);
|
||
|
|
gap: 48px;
|
||
|
|
align-items: center;
|
||
|
|
padding: 64px 56px 56px;
|
||
|
|
max-width: 1280px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.home-hero-text { display: flex; flex-direction: column; gap: 18px; }
|
||
|
|
.home-eyebrow {
|
||
|
|
display: inline-flex; align-items: center; gap: 10px;
|
||
|
|
width: max-content;
|
||
|
|
padding: 6px 14px 6px 12px;
|
||
|
|
background: oklch(15% 0.020 250);
|
||
|
|
border: 1px solid oklch(35% 0.08 260 / 0.4);
|
||
|
|
border-radius: 999px;
|
||
|
|
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
|
||
|
|
text-transform: uppercase; color: var(--accent-strong);
|
||
|
|
}
|
||
|
|
.home-eyebrow-dot {
|
||
|
|
width: 6px; height: 6px; background: var(--accent);
|
||
|
|
border-radius: 50%; box-shadow: 0 0 10px var(--accent);
|
||
|
|
}
|
||
|
|
.home-title {
|
||
|
|
font-size: 44px; font-weight: 600; line-height: 1.05;
|
||
|
|
letter-spacing: -0.02em; color: var(--text-primary);
|
||
|
|
}
|
||
|
|
.home-title .accent { color: var(--accent-strong); }
|
||
|
|
.home-subtitle {
|
||
|
|
font-size: 16px; line-height: 1.55;
|
||
|
|
color: var(--text-secondary); max-width: 52ch;
|
||
|
|
}
|
||
|
|
.home-meta {
|
||
|
|
display: flex; gap: 24px; margin-top: 8px;
|
||
|
|
font-size: 12px; color: var(--text-tertiary);
|
||
|
|
font-family: var(--font-mono); letter-spacing: 0.04em;
|
||
|
|
}
|
||
|
|
.home-meta-item { display: flex; align-items: center; gap: 8px; }
|
||
|
|
.home-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-good); box-shadow: 0 0 8px var(--signal-good); }
|
||
|
|
|
||
|
|
.home-portrait {
|
||
|
|
position: relative;
|
||
|
|
aspect-ratio: 3/2;
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
background:
|
||
|
|
radial-gradient(ellipse at 40% 35%, oklch(35% 0.18 266 / 0.30), transparent 65%),
|
||
|
|
linear-gradient(135deg, oklch(15% 0.025 250), oklch(8% 0.015 250));
|
||
|
|
border: 1px solid oklch(28% 0.04 260 / 0.6);
|
||
|
|
box-shadow: 0 30px 60px -20px oklch(0% 0 0 / 0.6),
|
||
|
|
inset 0 1px 0 oklch(100% 0 0 / 0.05);
|
||
|
|
}
|
||
|
|
.home-portrait img {
|
||
|
|
position: absolute; inset: 0;
|
||
|
|
width: 100%; height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
filter: drop-shadow(0 20px 30px oklch(0% 0 0 / 0.5));
|
||
|
|
}
|
||
|
|
.home-portrait::after {
|
||
|
|
content: ''; position: absolute; inset: 0;
|
||
|
|
background: radial-gradient(ellipse at 50% 100%, oklch(0% 0 0 / 0.3), transparent 50%);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.home-portrait-stamp {
|
||
|
|
position: absolute; bottom: 16px; left: 16px;
|
||
|
|
display: inline-flex; align-items: center; gap: 8px;
|
||
|
|
background: oklch(8% 0.015 250 / 0.75);
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
padding: 6px 12px;
|
||
|
|
border-radius: 999px;
|
||
|
|
border: 1px solid oklch(35% 0.08 260 / 0.3);
|
||
|
|
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
|
||
|
|
color: var(--text-primary); text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.home-portrait-stamp .dot {
|
||
|
|
width: 6px; height: 6px; border-radius: 50%;
|
||
|
|
background: var(--accent); box-shadow: 0 0 8px var(--accent);
|
||
|
|
animation: pulse 1.6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
@keyframes pulse { 0%,100% { opacity: 0.7 } 50% { opacity: 1 } }
|
||
|
|
|
||
|
|
.home-tiles-wrap {
|
||
|
|
max-width: 1280px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 8px 56px 64px;
|
||
|
|
}
|
||
|
|
.home-tiles-header {
|
||
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
padding: 0 4px;
|
||
|
|
}
|
||
|
|
.home-tiles-title {
|
||
|
|
font-size: 11px; font-weight: 600;
|
||
|
|
letter-spacing: 0.18em; text-transform: uppercase;
|
||
|
|
color: var(--text-tertiary);
|
||
|
|
}
|
||
|
|
.home-tiles-hint {
|
||
|
|
font-size: 11px; color: var(--text-tertiary);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
}
|
||
|
|
.home-tiles {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.home-tile {
|
||
|
|
position: relative;
|
||
|
|
display: flex; flex-direction: column; gap: 14px;
|
||
|
|
padding: 24px 22px;
|
||
|
|
background: oklch(13% 0.018 250 / 0.6);
|
||
|
|
border: 1px solid oklch(28% 0.04 260 / 0.5);
|
||
|
|
border-radius: 14px;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--text-primary);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.home-tile::before {
|
||
|
|
content: ''; position: absolute; inset: 0;
|
||
|
|
background: linear-gradient(135deg, oklch(45% 0.20 266 / 0.05), transparent 50%);
|
||
|
|
opacity: 0; transition: opacity 200ms ease;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.home-tile:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
border-color: oklch(45% 0.20 266 / 0.5);
|
||
|
|
background: oklch(15% 0.025 250 / 0.8);
|
||
|
|
}
|
||
|
|
.home-tile:hover::before { opacity: 1; }
|
||
|
|
.home-tile-icon {
|
||
|
|
width: 40px; height: 40px;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
background: oklch(20% 0.04 260);
|
||
|
|
border: 1px solid oklch(35% 0.08 260 / 0.4);
|
||
|
|
border-radius: 10px;
|
||
|
|
color: var(--accent-strong);
|
||
|
|
}
|
||
|
|
.home-tile-icon svg { width: 20px; height: 20px; }
|
||
|
|
.home-tile-title {
|
||
|
|
font-size: 16px; font-weight: 600;
|
||
|
|
letter-spacing: -0.005em;
|
||
|
|
}
|
||
|
|
.home-tile-desc {
|
||
|
|
font-size: 12px; line-height: 1.5;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
.home-tile-meta {
|
||
|
|
display: flex; align-items: center; gap: 6px;
|
||
|
|
margin-top: auto;
|
||
|
|
font-size: 11px; font-family: var(--font-mono);
|
||
|
|
letter-spacing: 0.04em;
|
||
|
|
color: var(--text-tertiary);
|
||
|
|
}
|
||
|
|
.home-tile-meta-num {
|
||
|
|
color: var(--text-primary); font-weight: 600;
|
||
|
|
}
|
||
|
|
.home-tile-arrow {
|
||
|
|
position: absolute; top: 22px; right: 22px;
|
||
|
|
color: var(--text-tertiary);
|
||
|
|
transition: transform 160ms ease, color 160ms ease;
|
||
|
|
}
|
||
|
|
.home-tile:hover .home-tile-arrow {
|
||
|
|
color: var(--accent-strong);
|
||
|
|
transform: translateX(3px);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 900px) {
|
||
|
|
.home-hero { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
|
||
|
|
.home-tiles-wrap { padding: 8px 24px 48px; }
|
||
|
|
.home-title { font-size: 32px; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="shell">
|
||
|
|
<nav class="sidebar" aria-label="Main navigation">
|
||
|
|
<div class="sidebar-brand">
|
||
|
|
<img src="img/ampp-safe.png?v=hardhat2" alt="Z-AMPP" class="sidebar-logo">
|
||
|
|
<span class="sidebar-brand-name">Z-AMPP</span>
|
||
|
|
</div>
|
||
|
|
<nav class="sidebar-nav">
|
||
|
|
<a href="home.html" class="nav-item active">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
<a href="#" class="nav-item" onclick="window.open(location.protocol + '//' + location.hostname + ':47435/', '_blank'); return false;">
|
||
|
|
<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>
|
||
|
|
</nav>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="main home-main">
|
||
|
|
<header class="topbar">
|
||
|
|
<div class="topbar-left"><span class="page-title">Home</span></div>
|
||
|
|
<div class="topbar-right">
|
||
|
|
<button class="btn btn-ghost btn-sm" onclick="location.href='settings.html'" title="Settings">
|
||
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M15 8h-2M3 8H1M12.5 3.5L11 5M5 11l-1.5 1.5M12.5 12.5L11 11M5 5L3.5 3.5"/></svg>
|
||
|
|
Settings
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="home-hero">
|
||
|
|
<div class="home-hero-text">
|
||
|
|
<span class="home-eyebrow"><span class="home-eyebrow-dot"></span>AMPP Safe</span>
|
||
|
|
<h1 class="home-title">Z<span class="accent">-</span>AMPP<br><span style="color:var(--text-secondary);font-weight:500">Operator Console</span></h1>
|
||
|
|
<p class="home-subtitle">Self-hosted media asset management for broadcast operations. Pull a feed, monitor the queue, edit on the web, hand off to Premiere. All from one place.</p>
|
||
|
|
<div class="home-meta">
|
||
|
|
<span class="home-meta-item"><span class="home-meta-dot"></span><span id="systemStatus">All systems nominal</span></span>
|
||
|
|
<span class="home-meta-item" id="liveCount" style="display:none"><span class="home-meta-dot" style="background:oklch(62% 0.22 25);box-shadow:0 0 8px oklch(62% 0.22 25)"></span><span id="liveCountText">0 live</span></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-portrait">
|
||
|
|
<img src="img/ampp-safe.png?v=hardhat2" alt="Zac in hardhat">
|
||
|
|
<div class="home-portrait-stamp"><span class="dot"></span>On Duty</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="home-tiles-wrap">
|
||
|
|
<div class="home-tiles-header">
|
||
|
|
<span class="home-tiles-title">Workspaces</span>
|
||
|
|
<span class="home-tiles-hint" id="updateTime">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="home-tiles">
|
||
|
|
<a href="index.html" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="9" height="9" rx="1"/><rect x="13" y="2" width="9" height="9" rx="1"/><rect x="2" y="13" width="9" height="9" rx="1"/><rect x="13" y="13" width="9" height="9" rx="1"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Library</div>
|
||
|
|
<div class="home-tile-desc">Browse, organize, and preview every asset across all projects.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span class="home-tile-meta-num" id="assetCount">--</span><span>assets</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="projects.html" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 5a1 1 0 0 1 1-1h6l3 3h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Projects</div>
|
||
|
|
<div class="home-tile-desc">Create projects, organize bins, and manage who owns what footage.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span class="home-tile-meta-num" id="projectCount">--</span><span>projects</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="upload.html" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M3 20h18"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Ingest</div>
|
||
|
|
<div class="home-tile-desc">Upload finished files. MOV, MP4, MXF, ProRes — drop them, we proxy them.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span class="home-tile-meta-num" id="ingestCount">--</span><span>processing</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="recorders.html" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="15" height="12" rx="1"/><path d="M17 10l5-3v10l-5-3"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Recorders</div>
|
||
|
|
<div class="home-tile-desc">Pull SRT, RTMP, and SDI feeds straight to ProRes with a live HLS preview.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span class="home-tile-meta-num" id="recorderCount">--</span><span>recording</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="capture.html" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9.5"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Capture</div>
|
||
|
|
<div class="home-tile-desc">DeckLink SDI capture with manual scene control and per-device routing.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span id="captureStatus">Idle</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" onclick="window.open(location.protocol + '//' + location.hostname + ':47435/', '_blank'); return false;" class="home-tile">
|
||
|
|
<div class="home-tile-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 19l2-5L16 3l5 5L10 19l-5 2zM15 5l4 4"/></svg></div>
|
||
|
|
<div>
|
||
|
|
<div class="home-tile-title">Editor</div>
|
||
|
|
<div class="home-tile-desc">Pull a clip from the library into the in-browser editor. Trim, cut, export.</div>
|
||
|
|
</div>
|
||
|
|
<div class="home-tile-meta"><span>Web editor</span><span style="margin-left:auto;color:var(--accent-strong);font-weight:600">↗</span></div>
|
||
|
|
<svg class="home-tile-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M5 3l5 5-5 5"/></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="js/api.js"></script>
|
||
|
|
<script src="js/topbar-strip.js"></script>
|
||
|
|
<script>
|
||
|
|
async function loadStats() {
|
||
|
|
try {
|
||
|
|
const [aRes, pRes, rRes, jRes] = await Promise.allSettled([
|
||
|
|
fetch('/api/v1/assets?limit=1', { credentials: 'include' }),
|
||
|
|
fetch('/api/v1/projects', { credentials: 'include' }),
|
||
|
|
fetch('/api/v1/recorders', { credentials: 'include' }),
|
||
|
|
fetch('/api/v1/jobs?state=active', { credentials: 'include' }),
|
||
|
|
]);
|
||
|
|
|
||
|
|
if (aRes.status === 'fulfilled' && aRes.value.ok) {
|
||
|
|
const j = await aRes.value.json();
|
||
|
|
document.getElementById('assetCount').textContent = j.total ?? (j.assets?.length ?? '--');
|
||
|
|
}
|
||
|
|
if (pRes.status === 'fulfilled' && pRes.value.ok) {
|
||
|
|
const j = await pRes.value.json();
|
||
|
|
const arr = Array.isArray(j) ? j : (j.projects ?? []);
|
||
|
|
document.getElementById('projectCount').textContent = arr.length;
|
||
|
|
}
|
||
|
|
if (rRes.status === 'fulfilled' && rRes.value.ok) {
|
||
|
|
const j = await rRes.value.json();
|
||
|
|
const arr = Array.isArray(j) ? j : [];
|
||
|
|
const recording = arr.filter(r => r.status === 'recording').length;
|
||
|
|
document.getElementById('recorderCount').textContent = recording;
|
||
|
|
if (recording > 0) {
|
||
|
|
document.getElementById('liveCount').style.display = 'flex';
|
||
|
|
document.getElementById('liveCountText').textContent = recording + ' live';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (jRes.status === 'fulfilled' && jRes.value.ok) {
|
||
|
|
const j = await jRes.value.json();
|
||
|
|
const arr = Array.isArray(j) ? j : (j.jobs ?? []);
|
||
|
|
document.getElementById('ingestCount').textContent = arr.length;
|
||
|
|
}
|
||
|
|
} catch (_) { /* leave dashes */ }
|
||
|
|
document.getElementById('updateTime').textContent = 'Updated ' + new Date().toLocaleTimeString();
|
||
|
|
}
|
||
|
|
loadStats();
|
||
|
|
setInterval(loadStats, 15000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|