kryten-webqueue 0.7.5__tar.gz → 0.8.0__tar.gz

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.8.0] - 2026-06-08
+
+### Added
+
+- **Admin Playlists UI.** The placeholder is replaced with a full management page: list/create/delete saved playlists, a two-column item editor (catalog search-to-add, drag-and-drop plus up/down reorder, per-item remove), bulk text import (`cm:`/`type:id`/bare-token, with unresolved-line reporting), rename + immutable toggle, and "Import to Live" to load a playlist into the CyTube queue. A new stateless `POST /admin/playlists/parse-text` endpoint exposes the existing text parser so parsed items merge into the editor and persist via the existing `PUT /{id}/items`.
+- **Admin Schedules UI.** List of scheduled fires with playlist names, local fire times, lock window and status; create/edit/delete with `fire_at` (datetime-local → UTC), `pre_fire_lock_minutes`, `is_recurring`/`rrule`, and active toggle; "Fire Now"; and an active-schedule banner with "Clear Active".
+- **Admin Queue Management UI.** Live `queue_shadow` table (auto-refreshing) with pay/scheduled metadata, ETA, paid-by and Z cost; remove (auto-refund), jump, an admin add-item modal (catalog search + placement mode), and the catalog sync log with a "Sync Now" trigger.
+- **Upcoming-schedule announcement on the Queue page.** A public `GET /queue/next-schedule` feeds a banner with the next scheduled playlist, its fire time, and a live countdown (noting when pay-to-play is closed).
+- Shared admin CSS for section headers, forms, modals, badges, the playlist editor list, drag-reorder, and catalog-add results.
+
+### Changed
+
+- **Specific pre-fire-lock messaging.** Submitting during a lock window now returns `Pay-to-play is closed: "[event]" starts in N min.` instead of a generic locked error (surfaced in the existing toast).
+
 ## [0.7.5] - 2026-06-08
 
 ### Added

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/PKG-INFO

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

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/kryten_webqueue/catalog/db.py

@@ -881,6 +881,21 @@ class Database:
         """)
         return row is not None
 
+    async def get_active_pre_fire_lock(self) -> dict | None:
+        """Return the schedule whose pre-fire lock window is currently active.
+
+        Used to give users a specific "pay-to-play closes before [event]"
+        message instead of a generic locked error.
+        """
+        return await self._fetch_one("""
+            SELECT * FROM playlist_schedules
+            WHERE is_active = 1
+              AND datetime(fire_at, '-' || pre_fire_lock_minutes || ' minutes') <= datetime('now')
+              AND fire_at > datetime('now')
+            ORDER BY fire_at
+            LIMIT 1
+        """)
+
     async def get_next_schedule(self) -> dict | None:
         return await self._fetch_one(
             "SELECT * FROM playlist_schedules WHERE is_active=1 AND fire_at > datetime('now') ORDER BY fire_at LIMIT 1"

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/kryten_webqueue/routes/admin_playlists.py

@@ -96,3 +96,18 @@ async def import_to_live(request: Request, playlist_id: int, user: dict = Depend
     )
     result = await importer.import_playlist(playlist_id)
     return result
+
+
+@router.post("/parse-text")
+async def parse_text(request: Request, user: dict = Depends(require_admin)):
+    """Parse the plain-text playlist import format into resolved items.
+
+    Stateless: returns {items, errors} for the editor to merge into its working
+    list. Persistence happens via PUT /{id}/items when the admin saves.
+    """
+    from ..playlists.importer import import_playlist_text
+
+    body = await request.json()
+    text = body.get("text", "")
+    db = request.app.state.db
+    return await import_playlist_text(db, text)

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/kryten_webqueue/routes/queue.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter, Request, Depends, HTTPException
+from datetime import datetime, UTC
 
 from ..auth.session import get_current_user
 from ..queue.ordering import insert_pay_queue, insert_pay_playnext
@@ -6,6 +7,25 @@ from ..queue.ordering import insert_pay_queue, insert_pay_playnext
 router = APIRouter(prefix="/queue", tags=["queue"])
 
 
+async def _pre_fire_lock_detail(db) -> str:
+    """Build a specific 'pay-to-play closes before [event]' message.
+
+    Falls back to a generic message if the locking schedule can't be read.
+    """
+    lock = await db.get_active_pre_fire_lock()
+    if not lock:
+        return "Queue is locked: a scheduled playlist is firing soon."
+    label = lock.get("label") or "a scheduled event"
+    try:
+        fire_at = datetime.fromisoformat(lock["fire_at"])
+        if fire_at.tzinfo is None:
+            fire_at = fire_at.replace(tzinfo=UTC)
+        minutes = max(0, round((fire_at - datetime.now(UTC)).total_seconds() / 60))
+        return f'Pay-to-play is closed: "{label}" starts in {minutes} min. Try again after the event.'
+    except Exception:
+        return f'Pay-to-play is closed ahead of "{label}". Try again after the event.'
+
+
 @router.get("/state")
 async def get_queue_state(request: Request, user: dict = Depends(get_current_user)):
     """Get current queue state."""
@@ -30,7 +50,7 @@ async def add_to_queue(request: Request, user: dict = Depends(get_current_user))
 
     # Check pre-fire lock
     if await db.is_pre_fire_lock_active():
-        raise HTTPException(423, "Queue is locked: scheduled playlist firing soon")
+        raise HTTPException(423, await _pre_fire_lock_detail(db))
 
     # Look up catalog item
     item = await db.get_item(friendly_token)
@@ -86,7 +106,7 @@ async def play_next(request: Request, user: dict = Depends(get_current_user)):
 
     # Check pre-fire lock
     if await db.is_pre_fire_lock_active():
-        raise HTTPException(423, "Queue is locked: scheduled playlist firing soon")
+        raise HTTPException(423, await _pre_fire_lock_detail(db))
 
     # Look up catalog item
     item = await db.get_item(friendly_token)
@@ -187,3 +207,21 @@ async def queue_history(request: Request, user: dict = Depends(get_current_user)
     db = request.app.state.db
     history = await db.get_user_queue_history(user["username"])
     return {"items": history}
+
+
+@router.get("/next-schedule")
+async def next_schedule(request: Request, user: dict = Depends(get_current_user)):
+    """Public-facing info about the next scheduled playlist (for the queue page
+    announcement banner). Returns {} when nothing is scheduled.
+    """
+    db = request.app.state.db
+    sched = await db.get_next_schedule()
+    if not sched:
+        return {}
+    lock_active = await db.is_pre_fire_lock_active()
+    return {
+        "label": sched.get("label"),
+        "fire_at": sched.get("fire_at"),
+        "pre_fire_lock_minutes": sched.get("pre_fire_lock_minutes"),
+        "lock_active": lock_active,
+    }

{kryten_webqueue-0.7.5 → kryten_webqueue-0.8.0}/kryten_webqueue/static/css/main.css

@@ -61,7 +61,7 @@ a:hover {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 2rem;
+    padding: 0.35rem 2rem;
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border);
     position: sticky;
@@ -351,10 +351,10 @@ a:hover {
 /* Title spans the full width of the card. */
 .np-title {
     margin: 0;
-    font-size: 1.4rem;
-    line-height: 1.25;
+    font-size: 1rem;
+    line-height: 1.1;
     overflow-wrap: anywhere;
-    padding-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--border);
 }
 /* Image + time display sit side by side. */
@@ -522,10 +522,10 @@ a:hover {
 }
 /* Description + category/tag chips sit below the image / time row. */
 .np-description {
-    font-size: 0.9rem;
-    line-height: 1.5;
+    font-size: 0.7rem;
+    line-height: 1.1;
     color: var(--text-secondary);
-    padding-top: 0.75rem;
+    padding-top: 0.5rem;
     border-top: 1px solid var(--border);
     white-space: pre-line;
     overflow-wrap: anywhere;
@@ -982,3 +982,134 @@ a.np-chip {
     font-size: 0.85rem;
 }
 
+/* ===== Admin management UIs (playlists / schedules / queue) ===== */
+.section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+.section-head h2 { margin-bottom: 0; }
+.btn-group {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+.btn-xs {
+    padding: 0.15rem 0.45rem;
+    font-size: 0.72rem;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    cursor: pointer;
+}
+.btn-xs:hover { background: var(--bg-hover); }
+.btn-xs:disabled { opacity: 0.4; cursor: not-allowed; }
+.row-actions {
+    display: flex;
+    gap: 0.4rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+.muted { color: var(--text-secondary); font-size: 0.85rem; }
+
+/* Badges */
+.badge {
+    display: inline-block;
+    font-size: 0.7rem;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+}
+.badge-warn { background: rgba(253, 203, 110, 0.15); border-color: var(--warning); color: var(--warning); }
+.badge-accent { background: rgba(108, 92, 231, 0.2); border-color: var(--accent); color: var(--text-primary); }
+
+/* Modal form fields */
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    margin-bottom: 0.85rem;
+}
+.field > span { font-size: 0.8rem; color: var(--text-secondary); }
+.field input, .field select, .field textarea {
+    padding: 0.5rem 0.65rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font: inherit;
+    width: 100%;
+}
+.check {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    margin-bottom: 0.85rem;
+    cursor: pointer;
+}
+
+/* Playlist editor */
+.editor-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+    gap: 2rem;
+}
+@media (max-width: 800px) { .editor-grid { grid-template-columns: 1fr; } }
+.editor-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    margin: 0;
+    padding: 0;
+}
+.editor-row {
+    display: grid;
+    grid-template-columns: 1.2rem 1.6rem minmax(0, 1fr) auto auto auto;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.45rem 0.6rem;
+    background: var(--bg-card);
+    border-radius: var(--radius);
+    border: 1px solid transparent;
+}
+.editor-row:hover { border-color: var(--border); }
+.drag-handle { cursor: grab; color: var(--text-secondary); user-select: none; }
+.editor-row .pos { color: var(--text-secondary); font-size: 0.8rem; }
+.ed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ed-type, .ed-dur { font-size: 0.78rem; color: var(--text-secondary); }
+.ed-move { display: flex; gap: 0.25rem; }
+
+/* Catalog add results */
+.cat-results { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; max-height: 340px; overflow-y: auto; }
+.cat-result {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.6rem;
+    padding: 0.4rem 0.6rem;
+    background: var(--bg-card);
+    border-radius: var(--radius);
+}
+.import-text {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-family: monospace;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+    resize: vertical;
+}
+.import-errors { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem; }
+.import-errors code { color: var(--warning); }
+

kryten_webqueue-0.8.0/kryten_webqueue/templates/admin/playlists.html

@@ -0,0 +1,303 @@
+{% 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 token per line. <code>cm:token</code>, <code>yt:id</code>, or a bare catalog token. <code>#</code> comments allowed.</p>
+                    <textarea id="import-text" class="import-text" rows="5" placeholder="abc123def&#10;yt:dQw4w9WgXcQ"></textarea>
+                    <button class="btn btn-sm" onclick="parseImport()">Append Parsed Items</button>
+                    <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/');
+    const el = document.getElementById('playlists-list');
+    if (!resp.ok) { el.innerHTML = '<p class="empty-state">Failed to load.</p>'; return; }
+    const rows = await resp.json();
+    if (!rows.length) { el.innerHTML = '<p class="empty-state">No playlists yet.</p>'; return; }
+    el.innerHTML = `<table class="admin-table">
+        <tr><th>Name</th><th>Reserved</th><th>Created by</th><th></th></tr>
+        ${rows.map(p => `
+            <tr>
+                <td><a href="#" onclick="openEditor(${p.id});return false;">${escapeHtml(p.name)}</a>
+                    ${p.description ? `<div class="muted">${escapeHtml(p.description)}</div>` : ''}</td>
+                <td>${p.is_immutable ? '<span class="badge badge-warn">Immutable</span>' : '—'}</td>
+                <td>${escapeHtml(p.created_by || '')}</td>
+                <td class="row-actions">
+                    <button class="btn btn-sm" onclick="openEditor(${p.id})">Edit</button>
+                    <button class="btn btn-sm btn-danger" onclick="deletePlaylist(${p.id}, '${escapeHtml(p.name)}')">Delete</button>
+                </td>
+            </tr>`).join('')}
+    </table>`;
+}
+
+function showCreateModal() {
+    showModal(`
+        <h3>New Playlist</h3>
+        <label class="field"><span>Name</span><input type="text" id="pl-name"></label>
+        <label class="field"><span>Description</span><input type="text" id="pl-desc"></label>
+        <label class="check"><input type="checkbox" id="pl-immut"> Immutable (reserve items — hidden from public catalog)</label>
+        <div class="modal-actions">
+            <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+            <button class="btn btn-primary" onclick="createPlaylist()">Create</button>
+        </div>`);
+}
+
+async function createPlaylist() {
+    const name = document.getElementById('pl-name').value.trim();
+    if (!name) { showToast('Name required', 'error'); return; }
+    const body = {
+        name,
+        description: document.getElementById('pl-desc').value.trim() || null,
+        is_immutable: document.getElementById('pl-immut').checked,
+    };
+    const resp = await fetch('/admin/playlists/', {
+        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)
+    });
+    closeModal();
+    if (resp.ok) { const d = await resp.json(); showToast('Created'); loadPlaylists(); openEditor(d.id); }
+    else showToast('Create failed', 'error');
+}
+
+async function deletePlaylist(id, name) {
+    if (!confirm(`Delete playlist "${name}"? This cannot be undone.`)) return;
+    const resp = await fetch(`/admin/playlists/${id}`, {method: 'DELETE'});
+    showToast(resp.ok ? 'Deleted' : 'Delete failed', resp.ok ? 'success' : 'error');
+    loadPlaylists();
+}
+
+// ---------- EDITOR ----------
+async function openEditor(id) {
+    const resp = await fetch(`/admin/playlists/${id}`);
+    if (!resp.ok) { showToast('Load failed', 'error'); return; }
+    const pl = await resp.json();
+    editorId = id;
+    editorImmutable = !!pl.is_immutable;
+    editorItems = (pl.items || []).map(i => ({
+        media_type: i.media_type, media_id: i.media_id, title: i.title, duration_sec: i.duration_sec
+    }));
+    document.getElementById('editor-title').textContent = pl.name;
+    document.getElementById('editor-meta').textContent =
+        `${pl.is_immutable ? 'Immutable (reserved) · ' : ''}${pl.description || ''}`;
+    document.getElementById('list-view').classList.add('hidden');
+    document.getElementById('editor-view').classList.remove('hidden');
+    document.getElementById('cat-results').innerHTML = '';
+    document.getElementById('import-errors').innerHTML = '';
+    renderEditorItems();
+}
+
+function closeEditor() {
+    document.getElementById('editor-view').classList.add('hidden');
+    document.getElementById('list-view').classList.remove('hidden');
+    editorId = null; editorItems = [];
+    loadPlaylists();
+}
+
+function renderEditorItems() {
+    document.getElementById('item-count').textContent = editorItems.length;
+    const el = document.getElementById('editor-items');
+    if (!editorItems.length) { el.innerHTML = '<li class="muted">No items. Add from the catalog or text import.</li>'; return; }
+    el.innerHTML = editorItems.map((it, i) => `
+        <li class="editor-row" draggable="true" data-i="${i}"
+            ondragstart="dragStart(event,${i})" ondragover="event.preventDefault()" ondrop="dropOn(event,${i})">
+            <span class="drag-handle" title="Drag to reorder">⠿</span>
+            <span class="pos">${i + 1}</span>
+            <span class="ed-title">${escapeHtml(it.title || it.media_id)}</span>
+            <span class="ed-type">${escapeHtml(it.media_type)}</span>
+            <span class="ed-dur">${it.duration_sec ? fmtDur(it.duration_sec) : '—'}</span>
+            <span class="ed-move">
+                <button class="btn btn-xs" onclick="moveItem(${i},-1)" ${i===0?'disabled':''}>↑</button>
+                <button class="btn btn-xs" onclick="moveItem(${i},1)" ${i===editorItems.length-1?'disabled':''}>↓</button>
+                <button class="btn btn-xs btn-danger" onclick="removeItem(${i})">✕</button>
+            </span>
+        </li>`).join('');
+}
+
+function moveItem(i, dir) {
+    const j = i + dir;
+    if (j < 0 || j >= editorItems.length) return;
+    [editorItems[i], editorItems[j]] = [editorItems[j], editorItems[i]];
+    renderEditorItems();
+}
+function removeItem(i) { editorItems.splice(i, 1); renderEditorItems(); }
+
+let dragSrc = null;
+function dragStart(e, i) { dragSrc = i; e.dataTransfer.effectAllowed = 'move'; }
+function dropOn(e, i) {
+    e.preventDefault();
+    if (dragSrc === null || dragSrc === i) return;
+    const [moved] = editorItems.splice(dragSrc, 1);
+    editorItems.splice(i, 0, moved);
+    dragSrc = null;
+    renderEditorItems();
+}
+
+async function catalogSearch() {
+    const q = document.getElementById('cat-search').value.trim();
+    if (!q) return;
+    const resp = await fetch(`/catalog/search?q=${encodeURIComponent(q)}`);
+    const el = document.getElementById('cat-results');
+    if (!resp.ok) { el.innerHTML = '<p class="muted">Search failed.</p>'; return; }
+    const data = await resp.json();
+    const items = data.items || [];
+    if (!items.length) { el.innerHTML = '<p class="muted">No results.</p>'; return; }
+    el.innerHTML = items.map(it => `
+        <div class="cat-result">
+            <span class="ed-title">${escapeHtml(it.title)}</span>
+            <span class="ed-dur">${it.duration_sec ? fmtDur(it.duration_sec) : ''}</span>
+            <button class="btn btn-xs btn-primary"
+                onclick='addCatalogItem(${JSON.stringify(it).replace(/'/g, "&#39;")})'>Add</button>
+        </div>`).join('');
+}
+
+function addCatalogItem(it) {
+    editorItems.push({
+        media_type: 'cm',
+        media_id: it.manifest_url || it.friendly_token,
+        title: it.title,
+        duration_sec: it.duration_sec,
+    });
+    renderEditorItems();
+    showToast('Added');
+}
+
+async function parseImport() {
+    const text = document.getElementById('import-text').value;
+    if (!text.trim()) return;
+    const resp = await fetch('/admin/playlists/parse-text', {
+        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({text})
+    });
+    if (!resp.ok) { showToast('Parse failed', 'error'); return; }
+    const data = await resp.json();
+    (data.items || []).forEach(it => editorItems.push(it));
+    renderEditorItems();
+    const errEl = document.getElementById('import-errors');
+    if ((data.errors || []).length) {
+        errEl.innerHTML = `<p class="muted">${data.errors.length} unresolved:</p><ul>` +
+            data.errors.map(e => `<li>Line ${e.line}: <code>${escapeHtml(e.token)}</code> (${e.reason})</li>`).join('') + '</ul>';
+    } else { errEl.innerHTML = ''; }
+    showToast(`Appended ${(data.items || []).length} item(s)`);
+    document.getElementById('import-text').value = '';
+}
+
+async function saveItems() {
+    if (editorId === null) return;
+    const resp = await fetch(`/admin/playlists/${editorId}/items`, {
+        method: 'PUT', headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({items: editorItems.map((it, i) => ({...it, position: i}))})
+    });
+    showToast(resp.ok ? 'Saved' : 'Save failed', resp.ok ? 'success' : 'error');
+}
+
+async function importToLive() {
+    if (editorId === null) return;
+    if (!confirm('Load this playlist into the live CyTube queue now?')) return;
+    const resp = await fetch(`/admin/playlists/${editorId}/import`, {method: 'POST'});
+    const data = await resp.json().catch(() => ({}));
+    if (resp.ok && data.success) showToast(`Imported ${data.added} item(s)${data.errors ? `, ${data.errors} errors` : ''}`);
+    else showToast(data.error || 'Import failed', 'error');
+}
+
+function editMeta() {
+    showModal(`
+        <h3>Rename Playlist</h3>
+        <label class="field"><span>Name</span><input type="text" id="em-name" value="${escapeHtml(document.getElementById('editor-title').textContent)}"></label>
+        <label class="check"><input type="checkbox" id="em-immut" ${editorImmutable ? 'checked' : ''}> Immutable (reserve items)</label>
+        <div class="modal-actions">
+            <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+            <button class="btn btn-primary" onclick="saveMeta()">Save</button>
+        </div>`);
+}
+
+async function saveMeta() {
+    const name = document.getElementById('em-name').value.trim();
+    const is_immutable = document.getElementById('em-immut').checked;
+    if (!name) { showToast('Name required', 'error'); return; }
+    const resp = await fetch(`/admin/playlists/${editorId}`, {
+        method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name, is_immutable})
+    });
+    closeModal();
+    if (resp.ok) { editorImmutable = is_immutable; document.getElementById('editor-title').textContent = name; showToast('Saved'); }
+    else showToast('Save failed', 'error');
+}
+
+// ---------- 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 %}