347 lines
18 KiB
HTML
347 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Linear Void Admin</title>
|
|
<link rel="stylesheet" href="../src/style.css" />
|
|
</head>
|
|
|
|
<body class="admin-body" data-admin-default-moderator="%VITE_PUBLIC_ADMIN_DEFAULT_MODERATOR%" data-admin-default-room="%VITE_PUBLIC_ADMIN_DEFAULT_ROOM%" data-admin-moderation-log-limit="%VITE_PUBLIC_ADMIN_MODERATION_LOG_LIMIT%">
|
|
<div class="admin-shell">
|
|
<aside class="admin-sidebar" aria-label="Primary">
|
|
<div class="brand-block">
|
|
<div class="brand-badge" aria-hidden="true">LV</div>
|
|
<div class="brand-text">Admin</div>
|
|
</div>
|
|
|
|
<button id="logout-btn" type="button" class="btn btn-secondary btn-block">Sign out</button>
|
|
|
|
<nav class="admin-nav" aria-label="Admin sections" role="tablist" aria-orientation="vertical">
|
|
<button type="button" id="tab-trigger-dashboard" role="tab" class="tab-trigger is-active" data-tab="dashboard" aria-controls="tab-dashboard" aria-selected="true">Dashboard</button>
|
|
<button type="button" id="tab-trigger-upload" role="tab" class="tab-trigger" data-tab="upload" aria-controls="tab-upload" aria-selected="false">Upload Video</button>
|
|
<button type="button" id="tab-trigger-playlist" role="tab" class="tab-trigger" data-tab="playlist" aria-controls="tab-playlist" aria-selected="false">Playlist</button>
|
|
<button type="button" id="tab-trigger-schedule" role="tab" class="tab-trigger" data-tab="schedule" aria-controls="tab-schedule" aria-selected="false">Schedule</button>
|
|
<button type="button" id="tab-trigger-moderation" role="tab" class="tab-trigger" data-tab="moderation" aria-controls="tab-moderation" aria-selected="false">Moderation</button>
|
|
<button type="button" id="tab-trigger-users" role="tab" class="tab-trigger" data-tab="users" aria-controls="tab-users" aria-selected="false">Users</button>
|
|
<button type="button" id="tab-trigger-analytics" role="tab" class="tab-trigger" data-tab="analytics" aria-controls="tab-analytics" aria-selected="false">Analytics</button>
|
|
<button type="button" id="tab-trigger-system" role="tab" class="tab-trigger" data-tab="system" aria-controls="tab-system" aria-selected="false">System</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="admin-main" id="admin-main" tabindex="-1">
|
|
<section id="tab-dashboard" class="tab-panel is-active" role="tabpanel" aria-labelledby="tab-trigger-dashboard">
|
|
<h1>Dashboard</h1>
|
|
<div class="stat-grid">
|
|
<article class="stat-card">
|
|
<h2>Concurrent Viewers</h2>
|
|
<p id="stat-viewers" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Stored Messages</h2>
|
|
<p id="stat-stored-messages" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Moderation Actions</h2>
|
|
<p id="stat-moderation-actions" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Media Runtime</h2>
|
|
<p id="stat-media-runtime" class="stat-value">00:00:00</p>
|
|
<p id="stat-media-count" class="stat-caption">0 files</p>
|
|
</article>
|
|
</div>
|
|
<p id="overview-status" class="status-line" aria-live="polite">Loading live admin overview...</p>
|
|
</section>
|
|
|
|
<section id="tab-upload" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-upload" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Upload Video</h1>
|
|
<p>Upload media files into the local media library mounted for playout.</p>
|
|
</div>
|
|
<button id="reload-media-btn" type="button" class="btn btn-secondary">Reload library</button>
|
|
</div>
|
|
|
|
<div id="upload-dropzone" class="upload-dropzone">
|
|
<input type="file" id="video-upload" accept="video/*,.mp4,.mov,.mkv,.webm" hidden />
|
|
<button id="upload-trigger-btn" type="button" class="btn btn-primary btn-large">Drag and Drop or Click to Upload</button>
|
|
<p class="small-muted">Resumable chunk upload enabled • up to 2GB per file.</p>
|
|
<div id="media-upload-progress-wrap" class="upload-progress" hidden>
|
|
<progress id="media-upload-progress" value="0" max="100"></progress>
|
|
<p id="media-upload-progress-text" class="small-muted">Uploading (0%)</p>
|
|
</div>
|
|
<p id="media-status" class="status-line" aria-live="polite">Loading media library...</p>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<div class="panel-header-row">
|
|
<h2>Media Library</h2>
|
|
<p id="media-generated-at" class="small-muted">loading...</p>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>File</th>
|
|
<th>Title</th>
|
|
<th>Runtime</th>
|
|
<th>Status</th>
|
|
<th>Size</th>
|
|
<th>Modified</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="media-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-schedule" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-schedule" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Schedule</h1>
|
|
<p>Read-only view of the currently configured playout order.</p>
|
|
</div>
|
|
<button id="reload-schedule-btn" type="button" class="btn btn-secondary">Reload schedule</button>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<p class="small-muted"><span id="schedule-matched-entries">0</span>/<span id="schedule-total-entries">0</span> matched • total runtime <span id="schedule-total-runtime">00:00:00</span></p>
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Label</th>
|
|
<th>Runtime</th>
|
|
<th>Status</th>
|
|
<th>Path</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="schedule-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<p id="schedule-status" class="status-line" aria-live="polite">Loading schedule...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-playlist" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-playlist" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Playlist</h1>
|
|
<p>Edit the active concat playlist used by the playout service.</p>
|
|
</div>
|
|
<div class="button-row">
|
|
<button id="reload-playlist-btn" type="button" class="btn btn-secondary">Reload</button>
|
|
<button id="save-playlist-btn" type="button" class="btn btn-primary">Save playlist</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<label for="playlist-content" class="sr-only">Playlist content</label>
|
|
<textarea id="playlist-content" class="text-input text-area" spellcheck="false"></textarea>
|
|
<p id="playlist-status" class="status-line" aria-live="polite">Loading playlist...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-moderation" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-moderation" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Moderation</h1>
|
|
<p>Create moderation actions and review the recent immutable audit log.</p>
|
|
</div>
|
|
<button id="reload-moderation-btn" type="button" class="btn btn-secondary">Reload logs</button>
|
|
</div>
|
|
|
|
<div class="moderation-grid">
|
|
<section class="panel-card">
|
|
<h2>New Action</h2>
|
|
<form id="moderation-form" class="form-stack">
|
|
<label>Action
|
|
<select id="mod-action" class="text-input">
|
|
<option value="mute">mute</option>
|
|
<option value="ban">ban</option>
|
|
<option value="delete">delete</option>
|
|
<option value="timeout">timeout</option>
|
|
</select>
|
|
</label>
|
|
<label>Target
|
|
<input id="mod-target" class="text-input" type="text" placeholder="username or message id" required />
|
|
</label>
|
|
<label>Moderator
|
|
<input id="mod-moderator" class="text-input" type="text" placeholder="admin" />
|
|
</label>
|
|
<label>Room
|
|
<input id="mod-room" class="text-input" type="text" placeholder="main" />
|
|
</label>
|
|
<label>Reason
|
|
<textarea id="mod-reason" class="text-input text-area" placeholder="Explain why this action is needed" required></textarea>
|
|
</label>
|
|
<button id="mod-submit" type="submit" class="btn btn-primary">Submit action</button>
|
|
<p id="moderation-status" class="status-line" aria-live="polite">Loading moderation logs...</p>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel-card">
|
|
<div class="panel-header-row">
|
|
<h2>Recent Audit Log</h2>
|
|
<p class="small-muted">Latest entries</p>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>When</th>
|
|
<th>Action</th>
|
|
<th>Target</th>
|
|
<th>Moderator</th>
|
|
<th>Reason</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="moderation-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-analytics" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-analytics" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Analytics</h1>
|
|
<p>Basic activity counters from chat history and moderation audit logs.</p>
|
|
</div>
|
|
<button id="reload-analytics-btn" type="button" class="btn btn-secondary">Reload analytics</button>
|
|
</div>
|
|
|
|
<div class="stat-grid">
|
|
<article class="stat-card">
|
|
<h2>Total Messages</h2>
|
|
<p id="analytics-total-messages" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Last 24 Hours</h2>
|
|
<p id="analytics-messages-24h" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Distinct Rooms</h2>
|
|
<p id="analytics-distinct-rooms" class="stat-value">0</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<h2>Moderation Actions</h2>
|
|
<p id="analytics-moderation-actions" class="stat-value">0</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<div class="panel-header-row">
|
|
<h2>Top Rooms</h2>
|
|
<p id="analytics-generated-at" class="small-muted">loading...</p>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Room</th>
|
|
<th>Messages</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="analytics-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<p id="analytics-status" class="status-line" aria-live="polite">Loading analytics...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-system" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-system" hidden>
|
|
<h1>System Configuration</h1>
|
|
<div class="panel-card split-grid">
|
|
<section>
|
|
<h2>Redis Stats</h2>
|
|
<dl class="kv-list">
|
|
<div>
|
|
<dt>Memory Used</dt>
|
|
<dd id="system-redis-memory">loading...</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Connected Clients</dt>
|
|
<dd id="system-redis-clients">0</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Redis Enabled</dt>
|
|
<dd id="system-redis-enabled">no</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
<section>
|
|
<h2>Storage</h2>
|
|
<dl class="kv-list">
|
|
<div>
|
|
<dt>Database Driver</dt>
|
|
<dd id="system-db-driver">loading...</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Stored Messages</dt>
|
|
<dd id="system-stored-messages">0</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Last Refresh</dt>
|
|
<dd id="system-generated-at">loading...</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Playlist Path</dt>
|
|
<dd id="system-playlist-path">loading...</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Playlist Present</dt>
|
|
<dd id="system-playlist-present">no</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<div class="panel-header-row">
|
|
<h2>Service Health</h2>
|
|
<button id="reload-system-btn" type="button" class="btn btn-secondary">Reload health</button>
|
|
</div>
|
|
<div id="system-services" class="service-list"></div>
|
|
<p id="system-status" class="status-line" aria-live="polite">Loading system summary...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-users" class="tab-panel" role="tabpanel" aria-labelledby="tab-trigger-users" hidden>
|
|
<div class="panel-header-row">
|
|
<div>
|
|
<h1>Users</h1>
|
|
<p>Current room presence derived from Redis presence keys.</p>
|
|
</div>
|
|
<button id="reload-users-btn" type="button" class="btn btn-secondary">Reload users</button>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Room</th>
|
|
<th>Online</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<p id="users-status" class="status-line" aria-live="polite">Loading active users...</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module" src="/src/admin.ts"></script>
|
|
</body>
|
|
|
|
</html> |