kryten-webqueue 0.1.1__py3-none-any.whl

kryten_webqueue/templates/admin/index.html

@@ -0,0 +1,98 @@
+{% 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>
+    </div>
+
+    <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 class="admin-section">
+        <h2>Sync Logs</h2>
+        <div id="sync-logs">Loading...</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'});
+    const data = await resp.json();
+    showToast(resp.ok ? `Cleared! ${data.refunded} items refunded.` : 'Failed', resp.ok ? 'success' : 'error');
+}
+
+async function triggerSync() {
+    const resp = await fetch('/admin/queue/sync-now', {method: 'POST'});
+    showToast(resp.ok ? 'Sync started' : 'Failed', resp.ok ? 'success' : 'error');
+}
+
+async function clearActiveSchedule() {
+    const resp = await fetch('/admin/schedules/clear-active', {method: 'POST'});
+    showToast(resp.ok ? 'Active schedule cleared' : 'Failed', resp.ok ? 'success' : 'error');
+}
+
+async function loadAdminData() {
+    // Queue status
+    const qResp = await fetch('/queue/state');
+    if (qResp.ok) {
+        const state = await qResp.json();
+        document.getElementById('queue-status').innerHTML = `
+            <p>Items in queue: ${(state.items || []).length}</p>
+            <p>Now playing: ${state.now_playing ? escapeHtml(state.now_playing.title || 'Unknown') : 'Nothing'}</p>
+        `;
+    }
+
+    // Sync logs
+    const sResp = await fetch('/admin/queue/sync-logs');
+    if (sResp.ok) {
+        const logs = await sResp.json();
+        const el = document.getElementById('sync-logs');
+        if (logs.length > 0) {
+            el.innerHTML = `<table class="admin-table">
+                <tr><th>Started</th><th>Status</th><th>New</th><th>Updated</th><th>Errors</th></tr>
+                ${logs.slice(0, 5).map(l => `
+                    <tr>
+                        <td>${l.started_at || ''}</td>
+                        <td>${l.status || ''}</td>
+                        <td>${l.items_new || 0}</td>
+                        <td>${l.items_updated || 0}</td>
+                        <td>${l.errors || 0}</td>
+                    </tr>
+                `).join('')}
+            </table>`;
+        } else {
+            el.innerHTML = '<p>No sync logs yet</p>';
+        }
+    }
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+loadAdminData();
+</script>
+{% endblock %}

kryten_webqueue/templates/auth/login.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% block title %}Login{% endblock %}
+{% block body_class %}auth-page{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <h1>Login</h1>
+    <p>Enter your CyTube username to receive a one-time code via PM.</p>
+
+    <div id="otp-request" class="auth-form">
+        <input type="text" id="username" placeholder="CyTube username" autocomplete="username" maxlength="50">
+        <button id="request-otp-btn" class="btn btn-primary">Send Code</button>
+    </div>
+
+    <div id="otp-verify" class="auth-form hidden">
+        <p class="otp-sent-msg">Code sent! Check your PMs from Kryten.</p>
+        <input type="text" id="otp-code" placeholder="6-digit code" maxlength="6" inputmode="numeric" autocomplete="one-time-code">
+        <button id="verify-otp-btn" class="btn btn-primary">Verify</button>
+    </div>
+
+    <div id="auth-error" class="error-msg hidden"></div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.getElementById('request-otp-btn').addEventListener('click', async () => {
+    const username = document.getElementById('username').value.trim();
+    if (!username) return;
+    const errEl = document.getElementById('auth-error');
+    errEl.classList.add('hidden');
+
+    const resp = await fetch('/auth/otp/request', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({username})
+    });
+    if (resp.ok) {
+        document.getElementById('otp-request').classList.add('hidden');
+        document.getElementById('otp-verify').classList.remove('hidden');
+    } else {
+        const data = await resp.json();
+        errEl.textContent = data.detail || 'Failed to send OTP';
+        errEl.classList.remove('hidden');
+    }
+});
+
+document.getElementById('verify-otp-btn').addEventListener('click', async () => {
+    const username = document.getElementById('username').value.trim();
+    const code = document.getElementById('otp-code').value.trim();
+    if (!code) return;
+    const errEl = document.getElementById('auth-error');
+    errEl.classList.add('hidden');
+
+    const resp = await fetch('/auth/otp/verify', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({username, code})
+    });
+    if (resp.ok) {
+        window.location.href = '/catalog/browse';
+    } else {
+        const data = await resp.json();
+        errEl.textContent = data.detail || 'Invalid code';
+        errEl.classList.remove('hidden');
+    }
+});
+</script>
+{% endblock %}

kryten_webqueue/templates/base.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Queue{% endblock %} — DropSugar</title>
+    <link rel="stylesheet" href="/static/css/main.css">
+    {% block head %}{% endblock %}
+</head>
+<body class="{% block body_class %}{% endblock %}">
+    <nav class="navbar">
+        <div class="nav-brand">
+            <a href="/catalog/browse">DropSugar Queue</a>
+        </div>
+        <div class="nav-links">
+            <a href="/catalog/browse">Browse</a>
+            <a href="/queue">Queue</a>
+            {% if user %}
+                <a href="/user/dashboard">{{ user.username }}</a>
+                {% if user.rank >= 3 %}
+                    <a href="/admin">Admin</a>
+                {% endif %}
+                <a href="#" id="logout-btn">Logout</a>
+            {% else %}
+                <a href="/auth/login">Login</a>
+            {% endif %}
+        </div>
+    </nav>
+
+    <main class="container">
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="footer">
+        <p>&copy; DropSugar — Powered by kryten-webqueue</p>
+    </footer>
+
+    <script src="/static/js/main.js"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

kryten_webqueue/templates/catalog/browse.html

@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+{% block title %}Browse{% endblock %}
+{% block body_class %}catalog-page{% endblock %}
+
+{% block content %}
+<div class="catalog-header">
+    <h1>Browse Catalog</h1>
+    <div class="catalog-controls">
+        <form class="search-form" action="/catalog/search" method="get">
+            <input type="text" name="q" placeholder="Search movies & shows..." value="{{ query or '' }}">
+            <button type="submit" class="btn btn-sm">Search</button>
+        </form>
+        <div class="category-filter">
+            <select id="category-select" onchange="filterCategory(this.value)">
+                <option value="">All Categories</option>
+                {% for cat in categories %}
+                    <option value="{{ cat.slug }}" {% if active_category == cat.slug %}selected{% endif %}>{{ cat.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </div>
+</div>
+
+<div class="catalog-grid">
+    {% for item in items %}
+    <div class="catalog-card" data-token="{{ item.friendly_token }}">
+        <div class="card-poster">
+            {% if item.cover_art_path %}
+                <img src="/static/images/{{ item.cover_art_path }}/400.webp"
+                     srcset="/static/images/{{ item.cover_art_path }}/200.webp 200w,
+                             /static/images/{{ item.cover_art_path }}/400.webp 400w,
+                             /static/images/{{ item.cover_art_path }}/800.webp 800w"
+                     sizes="(max-width: 600px) 200px, 400px"
+                     alt="{{ item.title }}" loading="lazy">
+            {% else %}
+                <div class="card-poster-placeholder">
+                    <span>{{ item.title[:1] }}</span>
+                </div>
+            {% endif %}
+        </div>
+        <div class="card-info">
+            <h3 class="card-title">{{ item.title }}</h3>
+            <span class="card-duration">{{ (item.duration_sec // 60) }}m</span>
+        </div>
+        <div class="card-actions">
+            <button class="btn btn-sm btn-queue" onclick="queueItem('{{ item.friendly_token }}')">Queue</button>
+            <button class="btn btn-sm btn-playnext" onclick="playNext('{{ item.friendly_token }}')">Play Next</button>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+{% if not items %}
+<div class="empty-state">
+    <p>No items found.</p>
+</div>
+{% endif %}
+
+<div class="pagination">
+    {% if page > 1 %}
+        <a href="?page={{ page - 1 }}{% if active_category %}&category={{ active_category }}{% endif %}" class="btn btn-sm">← Prev</a>
+    {% endif %}
+    <span class="page-num">Page {{ page }}</span>
+    {% if items | length == 24 %}
+        <a href="?page={{ page + 1 }}{% if active_category %}&category={{ active_category }}{% endif %}" class="btn btn-sm">Next →</a>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function filterCategory(slug) {
+    const url = slug ? `/catalog/browse?category=${slug}` : '/catalog/browse';
+    window.location.href = url;
+}
+
+async function queueItem(token) {
+    const resp = await fetch('/queue/add', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({friendly_token: token, tier: 'queue'})
+    });
+    const data = await resp.json();
+    if (resp.ok) {
+        showToast('Added to queue!');
+    } else {
+        showToast(data.detail || 'Failed to queue', 'error');
+    }
+}
+
+async function playNext(token) {
+    const resp = await fetch('/queue/playnext', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({friendly_token: token})
+    });
+    const data = await resp.json();
+    if (resp.ok) {
+        showToast('Playing next!');
+    } else {
+        showToast(data.detail || 'Failed', 'error');
+    }
+}
+</script>
+{% endblock %}

kryten_webqueue/templates/queue/index.html

@@ -0,0 +1,126 @@
+{% extends "base.html" %}
+{% block title %}Queue{% endblock %}
+{% block body_class %}queue-page{% endblock %}
+
+{% block content %}
+<div class="queue-layout">
+    <div class="now-playing-section">
+        <h2>Now Playing</h2>
+        <div id="now-playing" class="now-playing-card">
+            <p class="empty-state">Nothing playing</p>
+        </div>
+    </div>
+
+    <div class="queue-section">
+        <h2>Up Next</h2>
+        <div id="queue-list" class="queue-list">
+            <p class="empty-state">Queue is empty</p>
+        </div>
+    </div>
+
+    <div class="queue-info-sidebar">
+        <div id="schedule-info" class="schedule-info hidden">
+            <h3>Scheduled Playlist</h3>
+            <p id="schedule-label"></p>
+            <p id="schedule-time"></p>
+        </div>
+        <div class="queue-stats">
+            <p>Connected: <span id="ws-status" class="ws-disconnected">●</span></p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let ws = null;
+let reconnectTimer = null;
+
+function connectWebSocket() {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    ws = new WebSocket(`${proto}//${location.host}/ws`);
+
+    ws.onopen = () => {
+        document.getElementById('ws-status').className = 'ws-connected';
+        document.getElementById('ws-status').title = 'Connected';
+    };
+
+    ws.onclose = () => {
+        document.getElementById('ws-status').className = 'ws-disconnected';
+        reconnectTimer = setTimeout(connectWebSocket, 3000);
+    };
+
+    ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'queue_state' || msg.type === 'queue_update') {
+            renderQueue(msg.data);
+        } else if (msg.type === 'pong') {
+            // keepalive ack
+        } else if (msg.type === 'schedule_fired') {
+            showToast(`Scheduled playlist loaded: ${msg.data.playlist_name}`);
+        }
+    };
+
+    // Keepalive
+    setInterval(() => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({type: 'ping'}));
+        }
+    }, 30000);
+}
+
+function renderQueue(state) {
+    const npEl = document.getElementById('now-playing');
+    const qlEl = document.getElementById('queue-list');
+
+    if (state.now_playing) {
+        const np = state.now_playing;
+        npEl.innerHTML = `
+            <div class="np-info">
+                <h3>${escapeHtml(np.title || 'Unknown')}</h3>
+                <div class="np-progress">
+                    <div class="progress-bar" style="width: ${((np.currentTime || 0) / (np.duration || 1) * 100)}%"></div>
+                </div>
+                <span class="np-time">${formatTime(np.currentTime || 0)} / ${formatTime(np.duration || 0)}</span>
+            </div>
+        `;
+    } else {
+        npEl.innerHTML = '<p class="empty-state">Nothing playing</p>';
+    }
+
+    if (state.items && state.items.length > 0) {
+        qlEl.innerHTML = state.items.map((item, i) => `
+            <div class="queue-item ${item.is_pay ? 'queue-item-paid' : ''}" data-uid="${item.uid}">
+                <span class="qi-pos">${i + 1}</span>
+                <span class="qi-title">${escapeHtml(item.title || 'Unknown')}</span>
+                <span class="qi-duration">${formatTime(item.duration_sec || 0)}</span>
+                ${item.is_pay ? `<span class="qi-badge badge-paid">${item.tier}</span>` : ''}
+                ${item.paid_by ? `<span class="qi-user">${escapeHtml(item.paid_by)}</span>` : ''}
+                <span class="qi-eta">${item.estimated_start_at ? formatEta(item.estimated_start_at) : ''}</span>
+            </div>
+        `).join('');
+    } else {
+        qlEl.innerHTML = '<p class="empty-state">Queue is empty</p>';
+    }
+}
+
+function formatTime(sec) {
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+function formatEta(isoStr) {
+    const d = new Date(isoStr);
+    return d.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+connectWebSocket();
+</script>
+{% endblock %}

kryten_webqueue/templates/user/dashboard.html

@@ -0,0 +1,87 @@
+{% extends "base.html" %}
+{% block title %}Dashboard{% endblock %}
+{% block body_class %}user-page{% endblock %}
+
+{% block content %}
+<div class="user-dashboard">
+    <h1>{{ user.username }}</h1>
+
+    <div class="dashboard-grid">
+        <div class="balance-card">
+            <h2>Balance</h2>
+            <p class="balance-amount" id="balance-amount">Loading...</p>
+        </div>
+
+        <div class="history-card">
+            <h2>Queue History</h2>
+            <div id="queue-history">
+                <p class="empty-state">Loading...</p>
+            </div>
+        </div>
+
+        <div class="transactions-card">
+            <h2>Recent Transactions</h2>
+            <div id="transactions">
+                <p class="empty-state">Loading...</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+async function loadDashboard() {
+    // Balance
+    const balResp = await fetch('/user/balance');
+    if (balResp.ok) {
+        const bal = await balResp.json();
+        document.getElementById('balance-amount').textContent = `${bal.balance || 0} Z`;
+    }
+
+    // Queue history
+    const histResp = await fetch('/queue/history');
+    if (histResp.ok) {
+        const hist = await histResp.json();
+        const el = document.getElementById('queue-history');
+        if (hist.items && hist.items.length > 0) {
+            el.innerHTML = hist.items.slice(0, 20).map(h => `
+                <div class="history-item">
+                    <span class="hi-title">${escapeHtml(h.title || 'Unknown')}</span>
+                    <span class="hi-cost">${h.z_cost} Z</span>
+                    <span class="hi-tier badge-${h.tier}">${h.tier}</span>
+                </div>
+            `).join('');
+        } else {
+            el.innerHTML = '<p class="empty-state">No queue history yet</p>';
+        }
+    }
+
+    // Transactions
+    const txResp = await fetch('/user/transactions');
+    if (txResp.ok) {
+        const tx = await txResp.json();
+        const el = document.getElementById('transactions');
+        const items = tx.transactions || tx.items || [];
+        if (items.length > 0) {
+            el.innerHTML = items.slice(0, 20).map(t => `
+                <div class="tx-item">
+                    <span class="tx-desc">${escapeHtml(t.description || t.type || '')}</span>
+                    <span class="tx-amount ${t.amount > 0 ? 'tx-credit' : 'tx-debit'}">${t.amount > 0 ? '+' : ''}${t.amount} Z</span>
+                </div>
+            `).join('');
+        } else {
+            el.innerHTML = '<p class="empty-state">No transactions</p>';
+        }
+    }
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+loadDashboard();
+</script>
+{% endblock %}

kryten_webqueue/ws/handler.py

@@ -0,0 +1,59 @@
+import json
+import logging
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+import jwt
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter()
+
+
+@router.websocket("/ws")
+async def websocket_endpoint(ws: WebSocket):
+    """WebSocket endpoint. Authenticates via session cookie on upgrade."""
+    # Authenticate from cookie
+    token = ws.cookies.get("session")
+    if not token:
+        await ws.close(code=4001, reason="Not authenticated")
+        return
+
+    config = ws.app.state.config
+    try:
+        payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
+        username = payload["sub"]
+    except jwt.InvalidTokenError:
+        await ws.close(code=4001, reason="Invalid session")
+        return
+
+    await ws.accept()
+    manager = ws.app.state.ws_manager
+    shadow = ws.app.state.shadow
+
+    await manager.connect(username, ws)
+
+    # Send current queue state on connect
+    try:
+        state = shadow.get_queue_state()
+        await ws.send_text(json.dumps({"type": "queue_state", "data": state}))
+    except Exception:
+        await manager.disconnect(username)
+        return
+
+    # Message loop
+    try:
+        while True:
+            text = await ws.receive_text()
+            try:
+                msg = json.loads(text)
+            except json.JSONDecodeError:
+                continue
+
+            msg_type = msg.get("type")
+            if msg_type == "ping":
+                await ws.send_text(json.dumps({"type": "pong"}))
+    except WebSocketDisconnect:
+        pass
+    except Exception as e:
+        logger.warning(f"WS error for {username}: {e}")
+    finally:
+        await manager.disconnect(username)

kryten_webqueue/ws/manager.py

@@ -0,0 +1,57 @@
+import asyncio
+import json
+import logging
+from fastapi import WebSocket
+
+logger = logging.getLogger(__name__)
+
+
+class WebSocketManager:
+    """Manages active WebSocket connections and broadcasts."""
+
+    def __init__(self):
+        self._connections: dict[str, WebSocket] = {}
+        self._lock = asyncio.Lock()
+
+    async def connect(self, username: str, ws: WebSocket):
+        async with self._lock:
+            # Disconnect existing connection for same user
+            if username in self._connections:
+                try:
+                    await self._connections[username].close()
+                except Exception:
+                    pass
+            self._connections[username] = ws
+        logger.info(f"WS connected: {username} (total: {len(self._connections)})")
+
+    async def disconnect(self, username: str):
+        async with self._lock:
+            self._connections.pop(username, None)
+        logger.info(f"WS disconnected: {username} (total: {len(self._connections)})")
+
+    async def broadcast(self, message: dict):
+        """Broadcast a message to all connected clients."""
+        data = json.dumps(message)
+        async with self._lock:
+            stale = []
+            for username, ws in self._connections.items():
+                try:
+                    await ws.send_text(data)
+                except Exception:
+                    stale.append(username)
+            for username in stale:
+                self._connections.pop(username, None)
+
+    async def send_to(self, username: str, message: dict):
+        """Send a message to a specific user."""
+        async with self._lock:
+            ws = self._connections.get(username)
+        if ws:
+            try:
+                await ws.send_text(json.dumps(message))
+            except Exception:
+                await self.disconnect(username)
+
+    @property
+    def connection_count(self) -> int:
+        return len(self._connections)