kryten-webqueue 0.28.0__tar.gz → 0.29.0__tar.gz

{kryten_webqueue-0.28.0 → kryten_webqueue-0.29.0}/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.29.0] — 2026-07-04
+
+### Changed
+
+- **Admin JavaScript moved to external static files.** All inline `{% block scripts %}` JavaScript has been extracted from the five admin templates into individual per-page files under `static/js/` (`admin.js`, `admin-playlists.js`, `admin-promos.js`, `admin-schedules.js`, `admin-queue-mgmt.js`). Shared utilities `showModal`/`closeModal` and `fmtDur` were promoted to `main.js` (previously only defined per-page). Duplicate `escapeHtml`/`fmtDur`/`showModal`/`closeModal` definitions are removed from per-page files. Each template now references its JS via a single `<script src="/static/js/...">` tag — no functional changes, better cacheability and maintainability.
+
+[0.29.0]: https://github.com/grobertson/kryten-webqueue/releases/tag/v0.29.0
+
 ## [0.28.0] — 2026-07-04
 
 ### Added

{kryten_webqueue-0.28.0 → kryten_webqueue-0.29.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: kryten-webqueue
-Version: 0.28.0
+Version: 0.29.0
 Summary: Netflix/Tubi-style catalog browser and pay-to-play queue management for CyTube
 Author: grobertson
 License-Expression: MIT

kryten_webqueue-0.28.0/kryten_webqueue/templates/admin/playlists.html → kryten_webqueue-0.29.0/kryten_webqueue/static/js/admin-playlists.js

@@ -1,83 +1,7 @@
-{% extends "base.html" %}
-{% block title %}Playlists - Admin{% endblock %}
-{% block body_class %}admin-page{% endblock %}
-
-{% block content %}
-<div class="admin-dashboard">
-    <h1>Playlists</h1>
-    <p><a href="/admin">&larr; Back to Admin</a></p>
-
-    <!-- LIST VIEW -->
-    <div id="list-view">
-        <div class="admin-section">
-            <div class="section-head">
-                <h2>Saved Playlists</h2>
-                <button class="btn btn-primary" onclick="showCreateModal()">+ New Playlist</button>
-            </div>
-            <div id="playlists-list">Loading…</div>
-        </div>
-    </div>
-
-    <!-- EDITOR VIEW -->
-    <div id="editor-view" class="hidden">
-        <div class="admin-section">
-            <div class="section-head">
-                <h2 id="editor-title">Edit Playlist</h2>
-                <div class="btn-group">
-                    <button class="btn btn-secondary" onclick="closeEditor()">&larr; Back</button>
-                    <button class="btn" onclick="editMeta()">Rename</button>
-                    <button class="btn btn-primary" onclick="saveItems()">Save Items</button>
-                    <button class="btn" onclick="importToLive()" title="Load this playlist into the live CyTube queue">Import to Live</button>
-                </div>
-            </div>
-            <p id="editor-meta" class="muted"></p>
-
-            <div class="editor-grid">
-                <!-- Working item list -->
-                <div>
-                    <h3>Items (<span id="item-count">0</span>)</h3>
-                    <ul id="editor-items" class="editor-list"></ul>
-                </div>
-
-                <!-- Add panel -->
-                <div>
-                    <h3>Add from Catalog</h3>
-                    <div class="search-form">
-                        <input type="text" id="cat-search" placeholder="Search catalog…" onkeydown="if(event.key==='Enter')catalogSearch()">
-                        <button class="btn btn-sm" onclick="catalogSearch()">Search</button>
-                    </div>
-                    <div id="cat-results" class="cat-results"></div>
-
-                    <h3 style="margin-top:1.5rem;">Bulk Text Import</h3>
-                    <p class="muted" style="font-size:0.8rem;">One entry per line: a <strong>dropsugar.co</strong> link, a <strong>YouTube</strong>/<strong>youtu.be</strong> link (playlist &amp; start-time args are stripped), <code>cm:token</code>, <code>yt:id</code>, or a bare catalog token. <code>#</code> starts a comment (whole-line or trailing). Unknown sites are skipped.</p>
-                    <textarea id="import-text" class="import-text" rows="5" placeholder="https://www.dropsugar.co/view?m=abc123def&#10;https://youtu.be/dQw4w9WgXcQ?t=42  # start time is stripped&#10;yt:dQw4w9WgXcQ&#10;abc123def"></textarea>
-                    <div class="btn-group" style="margin-top:0.25rem;">
-                        <button class="btn btn-sm" onclick="parseImport()">Append Parsed Items</button>
-                        <input type="file" id="import-file" accept=".txt,.csv,text/plain" style="display:none" onchange="loadImportFile(event)">
-                        <button class="btn btn-sm" onclick="document.getElementById('import-file').click()">Choose text file…</button>
-                    </div>
-                    <div id="import-errors" class="import-errors"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
 let editorId = null;
 let editorItems = [];   // working list: {media_type, media_id, title, duration_sec}
 let editorImmutable = false;
 
-function fmtDur(sec) {
-    sec = Math.floor(sec || 0);
-    const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60;
-    if (h > 0) return `${h}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
-    return `${m}:${s.toString().padStart(2,'0')}`;
-}
-function escapeHtml(str) { const d = document.createElement('div'); d.textContent = str == null ? '' : str; return d.innerHTML; }
-
 // ---------- LIST ----------
 async function loadPlaylists() {
     const resp = await fetch('/admin/playlists/');
@@ -327,16 +251,4 @@ async function saveMeta() {
 }
 
 // ---------- generic modal ----------
-function showModal(html) {
-    closeModal();
-    const o = document.createElement('div');
-    o.className = 'modal-overlay'; o.id = 'admin-modal';
-    o.innerHTML = `<div class="modal-box">${html}</div>`;
-    o.addEventListener('click', e => { if (e.target === o) closeModal(); });
-    document.body.appendChild(o);
-}
-function closeModal() { const m = document.getElementById('admin-modal'); if (m) m.remove(); }
-
-loadPlaylists();
-</script>
-{% endblock %}
+loadPlaylists();

kryten_webqueue-0.28.0/kryten_webqueue/templates/admin/promos.html → kryten_webqueue-0.29.0/kryten_webqueue/static/js/admin-promos.js

@@ -1,47 +1,3 @@
-{% extends "base.html" %}
-{% block title %}Promos - Admin{% endblock %}
-{% block body_class %}admin-page{% endblock %}
-
-{% block content %}
-<div class="admin-dashboard">
-    <h1>Promos</h1>
-    <p><a href="/admin">&larr; Back to Admin</a></p>
-
-    <!-- POOL DESIGNATION -->
-    <div class="admin-section">
-        <div class="section-head">
-            <h2>Promo Pools</h2>
-            <a href="/admin/playlists" class="btn btn-sm">Manage Playlist Items &rarr;</a>
-        </div>
-        <p class="muted">
-            Designate a saved playlist as a promo pool by choosing its type. Pool
-            items are hidden from the public catalog and excluded from pay-to-play,
-            and are drawn from automatically by the promo director. Edit a pool's
-            clips on the <a href="/admin/playlists">Playlists</a> page.
-        </p>
-        <div id="pools-list">Loading…</div>
-    </div>
-
-    <!-- SETTINGS (editable) -->
-    <div class="admin-section">
-        <div class="section-head">
-            <h2>Promo Settings</h2>
-            <span class="badge badge-accent" title="Saved to the service config file and applied live">editable</span>
-        </div>
-        <p class="muted">
-            Promo cadence and per-type behaviour. Changes are saved to the service
-            config file and applied to the running promo director immediately — no
-            restart required.
-        </p>
-        <form id="settings-form">
-            <div id="settings-view">Loading…</div>
-        </form>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
 const PROMO_TYPE_LABELS = {
     channel_identity: 'Channel Identity',
     event: 'Event',
@@ -53,8 +9,6 @@ const PROMO_TYPE_LABELS = {
 let ALL_PLAYLISTS = [];
 let PROMO_META = { promo_types: [], general_types: [], lead_in_types: [] };
 
-function escapeHtml(str) { const d = document.createElement('div'); d.textContent = str == null ? '' : str; return d.innerHTML; }
-
 function typeLabel(t) { return PROMO_TYPE_LABELS[t] || t; }
 
 // ---------- POOLS ----------
@@ -207,6 +161,4 @@ document.getElementById('settings-form').addEventListener('submit', async (e) =>
 });
 
 loadPools();
-loadSettings();
-</script>
-{% endblock %}
+loadSettings();

kryten_webqueue-0.28.0/kryten_webqueue/templates/admin/queue_mgmt.html → kryten_webqueue-0.29.0/kryten_webqueue/static/js/admin-queue-mgmt.js

@@ -1,47 +1,5 @@
-{% extends "base.html" %}
-{% block title %}Queue Management - Admin{% endblock %}
-{% block body_class %}admin-page{% endblock %}
-
-{% block content %}
-<div class="admin-dashboard">
-    <h1>Queue Management</h1>
-    <p><a href="/admin">&larr; Back to Admin</a></p>
-
-    <div class="admin-section">
-        <div class="section-head">
-            <h2>Live Queue</h2>
-            <div class="btn-group">
-                <button class="btn btn-sm" onclick="showAddModal()">+ Add Item</button>
-                <button class="btn btn-sm" onclick="loadQueue()">Refresh</button>
-                <button class="btn btn-sm btn-danger" onclick="clearAll()">Clear Queue</button>
-            </div>
-        </div>
-        <div id="np-line" class="muted" style="margin-bottom:0.75rem;"></div>
-        <div id="queue-table">Loading…</div>
-    </div>
-
-    <div class="admin-section">
-        <div class="section-head">
-            <h2>Catalog Sync</h2>
-            <button class="btn btn-sm" onclick="syncNow()">Sync Now</button>
-        </div>
-        <div id="sync-logs">Loading…</div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
 let refreshTimer = null;
 
-function escapeHtml(str) { const d = document.createElement('div'); d.textContent = str == null ? '' : str; return d.innerHTML; }
-function fmtDur(sec) {
-    sec = Math.floor(sec || 0);
-    const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60;
-    if (h > 0) return `${h}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
-    return `${m}:${s.toString().padStart(2,'0')}`;
-}
-
 async function loadQueue() {
     const resp = await fetch('/queue/state');
     const el = document.getElementById('queue-table');
@@ -168,19 +126,7 @@ async function loadSyncLogs() {
     </table>`;
 }
 
-function showModal(html) {
-    closeModal();
-    const o = document.createElement('div');
-    o.className = 'modal-overlay'; o.id = 'admin-modal';
-    o.innerHTML = `<div class="modal-box">${html}</div>`;
-    o.addEventListener('click', e => { if (e.target === o) closeModal(); });
-    document.body.appendChild(o);
-}
-function closeModal() { const m = document.getElementById('admin-modal'); if (m) m.remove(); }
-
 loadQueue();
 loadSyncLogs();
 refreshTimer = setInterval(loadQueue, 5000);
-window.addEventListener('beforeunload', () => clearInterval(refreshTimer));
-</script>
-{% endblock %}
+window.addEventListener('beforeunload', () => clearInterval(refreshTimer));

kryten_webqueue-0.28.0/kryten_webqueue/templates/admin/schedules.html → kryten_webqueue-0.29.0/kryten_webqueue/static/js/admin-schedules.js

@@ -1,32 +1,6 @@
-{% extends "base.html" %}
-{% block title %}Schedules - Admin{% endblock %}
-{% block body_class %}admin-page{% endblock %}
-
-{% block content %}
-<div class="admin-dashboard">
-    <h1>Schedules</h1>
-    <p><a href="/admin">&larr; Back to Admin</a></p>
-
-    <div id="lock-banner" class="lock-banner hidden"></div>
-    <div id="active-banner" class="schedule-info hidden" style="margin-bottom:1.5rem;"></div>
-
-    <div class="admin-section">
-        <div class="section-head">
-            <h2>Scheduled Events</h2>
-            <button class="btn btn-primary" onclick="showScheduleModal()">+ New Schedule</button>
-        </div>
-        <div id="schedules-list">Loading…</div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
 let playlistMap = {};
 let playlistRows = [];
 
-function escapeHtml(str) { const d = document.createElement('div'); d.textContent = str == null ? '' : str; return d.innerHTML; }
-
 async function loadPlaylistsForSelect() {
     const resp = await fetch('/admin/playlists/');
     if (!resp.ok) return [];
@@ -257,16 +231,6 @@ async function deleteSchedule(id, label) {
     loadSchedules();
 }
 
-function showModal(html) {
-    closeModal();
-    const o = document.createElement('div');
-    o.className = 'modal-overlay'; o.id = 'admin-modal';
-    o.innerHTML = `<div class="modal-box">${html}</div>`;
-    o.addEventListener('click', e => { if (e.target === o) closeModal(); });
-    document.body.appendChild(o);
-}
-function closeModal() { const m = document.getElementById('admin-modal'); if (m) m.remove(); }
-
 loadSchedules();
 
 // Keep the lock indicator and active-event banner fresh without a reload:
@@ -277,6 +241,4 @@ setInterval(() => {
         loadLockStatus();
         loadActive();
     }
-}, 15000);
-</script>
-{% endblock %}
+}, 15000);

kryten_webqueue-0.28.0/kryten_webqueue/templates/admin/index.html → kryten_webqueue-0.29.0/kryten_webqueue/static/js/admin.js

@@ -1,186 +1,3 @@
-{% extends "base.html" %}
-{% block title %}Admin{% endblock %}
-{% block body_class %}admin-page{% endblock %}
-
-{% block content %}
-<div class="admin-dashboard">
-    <h1>Admin Panel</h1>
-
-    <div class="admin-nav">
-        <a href="/admin/playlists" class="btn">Playlists</a>
-        <a href="/admin/schedules" class="btn">Schedules</a>
-        <a href="/admin/queue-mgmt" class="btn">Queue Management</a>
-        <a href="/admin/promos" class="btn">Promos</a>
-    </div>
-
-    <!-- Tabbed dashboard. The sub-pages above stay as their own pages for now;
-         these tabs cover the at-a-glance dashboard plus the feedback and movie
-         suggestion triage queues. The container is intentionally generic so the
-         sub-pages can later fold in as additional tabs. -->
-    <div class="admin-tabs-card">
-        <div class="tabs" role="tablist">
-            <button class="tab-btn active" data-tab="overview" role="tab" aria-selected="true">Overview</button>
-            <button class="tab-btn" data-tab="jobs" role="tab" aria-selected="false">Jobs</button>
-            <button class="tab-btn" data-tab="sync" role="tab" aria-selected="false">Sync Logs</button>
-            <button class="tab-btn" data-tab="feedback" role="tab" aria-selected="false">Feedback <span class="tab-badge" id="feedback-badge" hidden></span></button>
-            <button class="tab-btn" data-tab="suggestions" role="tab" aria-selected="false">Suggestions <span class="tab-badge" id="suggestions-badge" hidden></span></button>
-            <button class="tab-btn" data-tab="moderation" role="tab" aria-selected="false">Moderation</button>
-        </div>
-
-        <div class="tab-panel" id="tab-overview" role="tabpanel">
-            <div class="admin-section">
-                <h2>Quick Actions</h2>
-                <div class="quick-actions">
-                    <button class="btn btn-danger" onclick="clearQueue()">Clear Queue</button>
-                    <button class="btn btn-primary" onclick="triggerSync()">Sync Catalog</button>
-                    <button class="btn" onclick="clearActiveSchedule()">Clear Active Schedule</button>
-                </div>
-            </div>
-            <div class="admin-section">
-                <h2>Queue Status</h2>
-                <div id="queue-status">Loading...</div>
-            </div>
-        </div>
-
-        <div class="tab-panel" id="tab-jobs" role="tabpanel" hidden>
-            <div class="admin-section">
-                <h2>Jobs</h2>
-                <div id="jobs-list" class="jobs-list">Loading...</div>
-                <h3>Recent Job Runs</h3>
-                <div id="job-runs">Loading...</div>
-            </div>
-        </div>
-
-        <div class="tab-panel" id="tab-sync" role="tabpanel" hidden>
-            <div class="admin-section">
-                <h2>Sync Logs</h2>
-                <div id="sync-logs">Loading...</div>
-            </div>
-        </div>
-
-        <div class="tab-panel" id="tab-feedback" role="tabpanel" hidden>
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Feedback</h2>
-                    <div class="queue-head-actions">
-                        <label class="queue-filter"><input type="checkbox" id="feedback-unread-only"> Unread only</label>
-                        <button class="btn btn-sm" id="feedback-refresh">Refresh</button>
-                    </div>
-                </div>
-                <div id="feedback-list">Loading…</div>
-            </div>
-        </div>
-
-        <div class="tab-panel" id="tab-suggestions" role="tabpanel" hidden>
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Movie Suggestions</h2>
-                    <div class="queue-head-actions">
-                        <label class="queue-filter"><input type="checkbox" id="suggestions-unread-only"> Unread only</label>
-                        <button class="btn btn-sm" id="suggestions-refresh">Refresh</button>
-                    </div>
-                </div>
-                <div id="suggestions-list">Loading…</div>
-            </div>
-        </div>
-
-        <div class="tab-panel" id="tab-moderation" role="tabpanel" hidden>
-
-            <!-- Service status ------------------------------------------------>
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Service Status</h2>
-                    <button class="btn btn-sm" id="mod-status-refresh">Refresh</button>
-                </div>
-                <div id="mod-status-content">Loading…</div>
-            </div>
-
-            <!-- Moderation entries --------------------------------------------->
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Moderation List</h2>
-                    <div class="queue-head-actions">
-                        <div class="mod-filter-btns">
-                            <button class="btn btn-sm mod-filter-btn active" data-filter="">All</button>
-                            <button class="btn btn-sm mod-filter-btn" data-filter="ban">Ban</button>
-                            <button class="btn btn-sm mod-filter-btn" data-filter="smute">SMute</button>
-                            <button class="btn btn-sm mod-filter-btn" data-filter="mute">Mute</button>
-                        </div>
-                        <button class="btn btn-sm" id="mod-entries-refresh">Refresh</button>
-                    </div>
-                </div>
-                <div id="mod-entries-list">Loading…</div>
-                <details class="mod-add-details">
-                    <summary class="btn btn-sm">Add entry…</summary>
-                    <div class="mod-add-form">
-                        <label class="field"><span>Username</span>
-                            <input type="text" id="mod-add-username" placeholder="username" autocomplete="off">
-                        </label>
-                        <label class="field"><span>Action</span>
-                            <select id="mod-add-action">
-                                <option value="ban">Ban</option>
-                                <option value="smute">Soft mute (smute)</option>
-                                <option value="mute">Mute</option>
-                            </select>
-                        </label>
-                        <label class="field"><span>Reason (optional)</span>
-                            <input type="text" id="mod-add-reason" placeholder="reason" autocomplete="off">
-                        </label>
-                        <button class="btn btn-primary" onclick="submitAddModEntry()">Add</button>
-                    </div>
-                </details>
-            </div>
-
-            <!-- Patterns -------------------------------------------------------->
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Username Patterns</h2>
-                    <button class="btn btn-sm" id="mod-patterns-refresh">Refresh</button>
-                </div>
-                <div id="mod-patterns-list">Loading…</div>
-                <details class="mod-add-details">
-                    <summary class="btn btn-sm">Add pattern…</summary>
-                    <div class="mod-add-form">
-                        <label class="field"><span>Pattern</span>
-                            <input type="text" id="mod-pat-pattern" placeholder="e.g. spam|hate or ^bot\d+" autocomplete="off">
-                        </label>
-                        <label class="check"><input type="checkbox" id="mod-pat-regex"> Treat as regex</label>
-                        <label class="field"><span>Action</span>
-                            <select id="mod-pat-action">
-                                <option value="ban">Ban</option>
-                                <option value="smute">Soft mute (smute)</option>
-                                <option value="mute">Mute</option>
-                            </select>
-                        </label>
-                        <label class="field"><span>Description (optional)</span>
-                            <input type="text" id="mod-pat-desc" placeholder="e.g. Nazi hate symbol" autocomplete="off">
-                        </label>
-                        <button class="btn btn-primary" onclick="submitAddModPattern()">Add</button>
-                    </div>
-                </details>
-            </div>
-
-            <!-- Recent users ----------------------------------------------------->
-            <div class="admin-section">
-                <div class="queue-head">
-                    <h2>Recent Users</h2>
-                    <div class="queue-head-actions mod-recent-window-row">
-                        <span>Window:</span>
-                        <input type="number" id="mod-recent-window" value="60" min="1" max="10080">
-                        <span>min</span>
-                        <button class="btn btn-sm" onclick="loadRecentUsers()">Load</button>
-                    </div>
-                </div>
-                <div id="mod-recent-list"><p class="empty-state">Click Load to fetch recent users.</p></div>
-            </div>
-
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
 async function clearQueue() {
     if (!confirm('Clear the entire queue? All pay items will be refunded.')) return;
     const resp = await fetch('/admin/queue/clear', {method: 'POST'});
@@ -439,12 +256,6 @@ function connectAdminWebSocket() {
     }, 30000);
 }
 
-function escapeHtml(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-}
-
 // Summarize a job_runs.detail JSON blob for the history table. Prefers a
 // failure message, otherwise a compact success summary.
 function summarizeRunDetail(detail) {
@@ -817,6 +628,14 @@ async function submitAddModPattern() {
 
 document.getElementById('mod-patterns-refresh').addEventListener('click', loadModPatterns);
 
+// Delegated click listener for the "Moderate…" buttons in the recent-users
+// table. The table is rebuilt on each load so we delegate from the stable
+// container div instead of attaching per-row handlers.
+document.getElementById('mod-recent-list').addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-mod-username]');
+    if (btn) openModUserModal(btn.dataset.modUsername);
+});
+
 // -- Recent users --
 async function loadRecentUsers() {
     const el = document.getElementById('mod-recent-list');
@@ -839,7 +658,7 @@ function renderRecentUsers(el, users) {
                 : '<span class="muted">—</span>';
             const actionBtn = u.moderation_action
                 ? ''
-                : `<button class="btn btn-sm" onclick="openModUserModal(${JSON.stringify(u.username)})">Moderate…</button>`;
+                : `<button class="btn btn-sm" data-mod-username="${escapeHtml(u.username)}">Moderate…</button>`;
             return `<tr>
                 <td>${escapeHtml(u.username || '')}</td>
                 <td>${u.first_seen ? formatLocalDateTime(u.first_seen) : '—'}</td>
@@ -914,6 +733,4 @@ connectAdminWebSocket();
 // tab is visible to reflect running/finished status without a reload.
 setInterval(() => {
     if (document.visibilityState === 'visible') loadJobs();
-}, 5000);
-</script>
-{% endblock %}
+}, 5000);

{kryten_webqueue-0.28.0 → kryten_webqueue-0.29.0}/kryten_webqueue/static/js/main.js

@@ -265,3 +265,22 @@ function closeAdminQueueModal() {
     const existing = document.getElementById('admin-queue-modal');
     if (existing) existing.remove();
 }
+
+// ---------- generic admin modal ----------
+function showModal(html) {
+    closeModal();
+    const o = document.createElement('div');
+    o.className = 'modal-overlay'; o.id = 'admin-modal';
+    o.innerHTML = `<div class="modal-box">${html}</div>`;
+    o.addEventListener('click', e => { if (e.target === o) closeModal(); });
+    document.body.appendChild(o);
+}
+function closeModal() { const m = document.getElementById('admin-modal'); if (m) m.remove(); }
+
+// ---------- duration formatter ----------
+function fmtDur(sec) {
+    if (!sec && sec !== 0) return '';
+    const m = Math.floor(sec / 60);
+    const s = Math.round(sec % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}