kryten-webqueue 0.6.0__tar.gz → 0.6.1__tar.gz

{kryten_webqueue-0.6.0 → kryten_webqueue-0.6.1}/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.6.1] - 2026-06-05
+
+### Added
+
+- **Receipt confirmation modal for Queue & Play Next** — Clicking **Queue** or **Play Next** now opens a receipt-style modal before spending. It calls `/queue/preview` and shows the item title, price, any rank discount, total cost, current balance, and balance after the transaction, then asks the user to confirm. Unavailable purchases (insufficient balance, cooldown, daily limit, blackout) disable the confirm button with an explanatory message.
+- **Enriched `/queue/preview` receipt data** — The preview endpoint now returns the catalog `title`, `base_cost`, `discount_amount`, current `balance`, and `balance_after` in addition to the existing cost/discount fields. `base_cost` comes from the economy service when available and is otherwise derived from the discount percentage.
+- **Shared modal styling** — Added CSS for `.modal-overlay`/`.modal-box`/`.modal-actions` (also styling the existing admin queue modal) plus a dedicated receipt table layout.
+
+[0.6.1]: https://github.com/grobertson/kryten-webqueue/releases/tag/v0.6.1
+
 ## [0.6.0] - 2026-06-05
 
 ### Added

{kryten_webqueue-0.6.0 → kryten_webqueue-0.6.1}/PKG-INFO

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

{kryten_webqueue-0.6.0 → kryten_webqueue-0.6.1}/kryten_webqueue/routes/queue.py

@@ -129,7 +129,12 @@ async def play_next(request: Request, user: dict = Depends(get_current_user)):
 @router.get("/preview")
 async def cost_preview(request: Request, friendly_token: str, tier: str = "queue",
                        user: dict = Depends(get_current_user)):
-    """Preview cost for queuing an item."""
+    """Preview the cost of queuing an item as a confirmation receipt.
+
+    Returns the catalog title, pricing breakdown (base cost, discount, total)
+    and the user's balance before/after the transaction so the UI can show a
+    receipt before the user confirms.
+    """
     db = request.app.state.db
     api_gate = request.app.state.api_gate
 
@@ -142,7 +147,38 @@ async def cost_preview(request: Request, friendly_token: str, tier: str = "queue
         duration_sec=item["duration_sec"],
         tier=tier,
     )
-    return preview
+
+    cost_z = preview.get("cost_z")
+    discount_pct = preview.get("discount_pct", 0) or 0
+    # base_cost is provided by newer economy builds; derive it as a fallback.
+    base_cost = preview.get("base_cost")
+    if base_cost is None and cost_z is not None:
+        if discount_pct and discount_pct < 100:
+            base_cost = round(cost_z / (1 - discount_pct / 100))
+        else:
+            base_cost = cost_z
+    discount_amount = (base_cost - cost_z) if (base_cost is not None and cost_z is not None) else 0
+
+    balance = None
+    try:
+        bal = await api_gate.get_balance(user["username"])
+        balance = bal.get("balance")
+    except Exception:
+        balance = None
+
+    balance_after = (balance - cost_z) if (balance is not None and cost_z is not None) else None
+
+    return {
+        **preview,
+        "friendly_token": friendly_token,
+        "title": item["title"],
+        "duration_sec": item["duration_sec"],
+        "tier": tier,
+        "base_cost": base_cost,
+        "discount_amount": discount_amount,
+        "balance": balance,
+        "balance_after": balance_after,
+    }
 
 
 @router.get("/history")

{kryten_webqueue-0.6.0 → kryten_webqueue-0.6.1}/kryten_webqueue/static/css/main.css

@@ -637,3 +637,90 @@ a:hover {
     padding: 1rem;
     border-left: 3px solid var(--warning);
 }
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    padding: 1rem;
+    animation: fadeIn 0.15s ease;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.modal-box {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 1.5rem;
+    width: 100%;
+    max-width: 420px;
+}
+.modal-box h3 {
+    margin-bottom: 1rem;
+}
+.modal-actions {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin-top: 1.25rem;
+}
+.btn-secondary {
+    background: var(--bg-card);
+    color: var(--text-secondary);
+}
+
+/* Receipt modal */
+.receipt-loading {
+    color: var(--text-secondary);
+    padding: 1rem 0;
+    text-align: center;
+}
+.receipt-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+.receipt-table th,
+.receipt-table td {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border);
+}
+.receipt-table th {
+    text-align: left;
+    color: var(--text-secondary);
+    font-weight: 400;
+}
+.receipt-table td {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+.receipt-discount td {
+    color: var(--success);
+}
+.receipt-total th,
+.receipt-total td {
+    font-weight: 700;
+    color: var(--text-primary);
+}
+.receipt-negative td {
+    color: var(--danger);
+}
+.receipt-warning {
+    margin-top: 1rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: var(--radius);
+    background: rgba(225, 112, 85, 0.12);
+    border: 1px solid var(--danger);
+    color: var(--danger);
+    font-size: 0.85rem;
+}
+

kryten_webqueue-0.6.1/kryten_webqueue/static/js/main.js

@@ -0,0 +1,234 @@
+/* kryten-webqueue — Main JavaScript */
+
+// Toast notification system
+function showToast(message, type = 'success') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transition = 'opacity 0.3s';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// Logout handler
+document.addEventListener('DOMContentLoaded', () => {
+    const logoutBtn = document.getElementById('logout-btn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async (e) => {
+            e.preventDefault();
+            await fetch('/auth/logout', { method: 'POST' });
+            window.location.href = '/auth/login';
+        });
+    }
+});
+
+// --- Time formatting (always in the browser's local timezone) ---
+
+function formatLocalDateTime(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return iso;
+    return d.toLocaleString([], {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit'
+    });
+}
+
+function formatLocalTime(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return iso;
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+// --- Shared queue actions (used by catalog browse and item detail) ---
+
+function formatZ(amount) {
+    if (amount == null) return '—';
+    return Number(amount).toLocaleString() + ' Z';
+}
+
+// Queue / Play Next now open a receipt-style confirmation modal first.
+function queueItem(token) {
+    showReceiptModal(token, 'queue');
+}
+
+function playNext(token) {
+    showReceiptModal(token, 'playnext');
+}
+
+async function showReceiptModal(token, tier) {
+    closeReceiptModal();
+    const overlay = document.createElement('div');
+    overlay.id = 'receipt-modal';
+    overlay.className = 'modal-overlay';
+    overlay.innerHTML = `
+        <div class="modal-box receipt-box" role="dialog" aria-modal="true">
+            <h3>${tier === 'playnext' ? 'Play Next' : 'Add to Queue'}</h3>
+            <div class="receipt-body"><p class="receipt-loading">Calculating cost…</p></div>
+        </div>`;
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) closeReceiptModal();
+        const action = e.target.getAttribute('data-action');
+        if (action === 'cancel') closeReceiptModal();
+        if (action === 'confirm') confirmQueueAction(token, tier);
+    });
+    document.body.appendChild(overlay);
+
+    try {
+        const resp = await fetch(
+            `/queue/preview?friendly_token=${encodeURIComponent(token)}&tier=${encodeURIComponent(tier)}`,
+            { credentials: 'same-origin' }
+        );
+        const data = await resp.json();
+        if (!resp.ok) {
+            renderReceiptError(data.detail || `Could not load cost (${resp.status})`);
+            return;
+        }
+        renderReceipt(data, tier);
+    } catch (e) {
+        renderReceiptError(`Network error: ${e.message}`);
+    }
+}
+
+function renderReceipt(data, tier) {
+    const body = document.querySelector('#receipt-modal .receipt-body');
+    if (!body) return;
+
+    const unavailable = data.available === false;
+    const discount = data.discount_amount || 0;
+    const discountPct = data.discount_pct || 0;
+    const insufficient = data.balance != null && data.cost_z != null && data.balance < data.cost_z;
+
+    let warning = '';
+    if (unavailable) {
+        warning = `<p class="receipt-warning">${escapeHtml(receiptErrorText(data.error_code))}</p>`;
+    }
+
+    body.innerHTML = `
+        <table class="receipt-table">
+            <tr><th>Item</th><td>${escapeHtml(data.title || 'Unknown')}</td></tr>
+            <tr><th>Price</th><td>${formatZ(data.base_cost)}</td></tr>
+            ${discount > 0 ? `<tr class="receipt-discount"><th>Discount${discountPct ? ` (${discountPct}%)` : ''}</th><td>-${formatZ(discount)}</td></tr>` : ''}
+            <tr class="receipt-total"><th>Total</th><td>${formatZ(data.cost_z)}</td></tr>
+            <tr><th>Balance</th><td>${formatZ(data.balance)}</td></tr>
+            <tr class="${insufficient ? 'receipt-negative' : ''}"><th>Balance after</th><td>${formatZ(data.balance_after)}</td></tr>
+        </table>
+        ${warning}
+        <div class="modal-actions">
+            <button class="btn btn-secondary" data-action="cancel">Cancel</button>
+            <button class="btn btn-primary" data-action="confirm" ${unavailable ? 'disabled' : ''}>
+                ${tier === 'playnext' ? 'Confirm Play Next' : 'Confirm Queue'}
+            </button>
+        </div>`;
+}
+
+function renderReceiptError(message) {
+    const body = document.querySelector('#receipt-modal .receipt-body');
+    if (!body) return;
+    body.innerHTML = `
+        <p class="receipt-warning">${escapeHtml(message)}</p>
+        <div class="modal-actions">
+            <button class="btn btn-secondary" data-action="cancel">Close</button>
+        </div>`;
+}
+
+function receiptErrorText(code) {
+    switch (code) {
+        case 'insufficient_balance': return 'You do not have enough Z for this.';
+        case 'cooldown_active': return 'You are on cooldown. Try again shortly.';
+        case 'daily_limit_reached': return 'You have reached your daily queue limit.';
+        case 'blackout_active': return 'Queuing is temporarily disabled.';
+        default: return code ? `Unavailable: ${code}` : 'This item is currently unavailable.';
+    }
+}
+
+function closeReceiptModal() {
+    const existing = document.getElementById('receipt-modal');
+    if (existing) existing.remove();
+}
+
+async function confirmQueueAction(token, tier) {
+    closeReceiptModal();
+    const url = tier === 'playnext' ? '/queue/playnext' : '/queue/add';
+    const payload = tier === 'playnext'
+        ? { friendly_token: token }
+        : { friendly_token: token, tier: 'queue' };
+    try {
+        const resp = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify(payload)
+        });
+        const data = await resp.json();
+        const okMsg = tier === 'playnext' ? 'Playing next!' : 'Added to queue!';
+        showToast(resp.ok ? okMsg : (data.detail || `Failed (${resp.status})`), resp.ok ? 'success' : 'error');
+    } catch (e) {
+        showToast(`Network error: ${e.message}`, 'error');
+    }
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str == null ? '' : str;
+    return div.innerHTML;
+}
+
+// Admin queue: prompt for how to resolve position, then submit the chosen mode.
+function queueAsAdmin(token) {
+    showAdminQueueModal(token);
+}
+
+async function submitAdminQueue(token, mode) {
+    closeAdminQueueModal();
+    if (mode === 'cancel') return;
+    try {
+        const resp = await fetch('/admin/queue/add', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ friendly_token: token, mode })
+        });
+        const data = await resp.json();
+        if (resp.ok) {
+            const extra = data.refunded ? ` (${data.refunded} refunded)` : '';
+            showToast(`Queued as admin!${extra}`);
+        } else {
+            showToast(data.detail || `Failed (${resp.status})`, 'error');
+        }
+    } catch (e) {
+        showToast(`Network error: ${e.message}`, 'error');
+    }
+}
+
+function showAdminQueueModal(token) {
+    closeAdminQueueModal();
+    const overlay = document.createElement('div');
+    overlay.id = 'admin-queue-modal';
+    overlay.className = 'modal-overlay';
+    overlay.innerHTML = `
+        <div class="modal-box" role="dialog" aria-modal="true">
+            <h3>Queue as Admin</h3>
+            <p>How should this item be positioned?</p>
+            <div class="modal-actions">
+                <button class="btn btn-primary" data-mode="playnext_refund">Play next &amp; refund all pending</button>
+                <button class="btn" data-mode="after_purchased">Play after all purchased items</button>
+                <button class="btn btn-secondary" data-mode="cancel">Cancel</button>
+            </div>
+        </div>`;
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) closeAdminQueueModal();
+        const mode = e.target.getAttribute('data-mode');
+        if (mode) submitAdminQueue(token, mode);
+    });
+    document.body.appendChild(overlay);
+}
+
+function closeAdminQueueModal() {
+    const existing = document.getElementById('admin-queue-modal');
+    if (existing) existing.remove();
+}

{kryten_webqueue-0.6.0 → kryten_webqueue-0.6.1}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "kryten-webqueue"
-version = "0.6.0"
+version = "0.6.1"
 description = "Netflix/Tubi-style catalog browser and pay-to-play queue management for CyTube"
 readme = "README.md"
 license = "MIT"

kryten_webqueue-0.6.0/kryten_webqueue/static/js/main.js

@@ -1,132 +0,0 @@
-/* kryten-webqueue — Main JavaScript */
-
-// Toast notification system
-function showToast(message, type = 'success') {
-    const toast = document.createElement('div');
-    toast.className = `toast toast-${type}`;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-    setTimeout(() => {
-        toast.style.opacity = '0';
-        toast.style.transition = 'opacity 0.3s';
-        setTimeout(() => toast.remove(), 300);
-    }, 3000);
-}
-
-// Logout handler
-document.addEventListener('DOMContentLoaded', () => {
-    const logoutBtn = document.getElementById('logout-btn');
-    if (logoutBtn) {
-        logoutBtn.addEventListener('click', async (e) => {
-            e.preventDefault();
-            await fetch('/auth/logout', { method: 'POST' });
-            window.location.href = '/auth/login';
-        });
-    }
-});
-
-// --- Time formatting (always in the browser's local timezone) ---
-
-function formatLocalDateTime(iso) {
-    if (!iso) return '';
-    const d = new Date(iso);
-    if (isNaN(d.getTime())) return iso;
-    return d.toLocaleString([], {
-        year: 'numeric', month: 'short', day: 'numeric',
-        hour: '2-digit', minute: '2-digit'
-    });
-}
-
-function formatLocalTime(iso) {
-    if (!iso) return '';
-    const d = new Date(iso);
-    if (isNaN(d.getTime())) return iso;
-    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-}
-
-// --- Shared queue actions (used by catalog browse and item detail) ---
-
-async function queueItem(token) {
-    try {
-        const resp = await fetch('/queue/add', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'same-origin',
-            body: JSON.stringify({ friendly_token: token, tier: 'queue' })
-        });
-        const data = await resp.json();
-        showToast(resp.ok ? 'Added to queue!' : (data.detail || `Failed (${resp.status})`), resp.ok ? 'success' : 'error');
-    } catch (e) {
-        showToast(`Network error: ${e.message}`, 'error');
-    }
-}
-
-async function playNext(token) {
-    try {
-        const resp = await fetch('/queue/playnext', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'same-origin',
-            body: JSON.stringify({ friendly_token: token })
-        });
-        const data = await resp.json();
-        showToast(resp.ok ? 'Playing next!' : (data.detail || `Failed (${resp.status})`), resp.ok ? 'success' : 'error');
-    } catch (e) {
-        showToast(`Network error: ${e.message}`, 'error');
-    }
-}
-
-// Admin queue: prompt for how to resolve position, then submit the chosen mode.
-function queueAsAdmin(token) {
-    showAdminQueueModal(token);
-}
-
-async function submitAdminQueue(token, mode) {
-    closeAdminQueueModal();
-    if (mode === 'cancel') return;
-    try {
-        const resp = await fetch('/admin/queue/add', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'same-origin',
-            body: JSON.stringify({ friendly_token: token, mode })
-        });
-        const data = await resp.json();
-        if (resp.ok) {
-            const extra = data.refunded ? ` (${data.refunded} refunded)` : '';
-            showToast(`Queued as admin!${extra}`);
-        } else {
-            showToast(data.detail || `Failed (${resp.status})`, 'error');
-        }
-    } catch (e) {
-        showToast(`Network error: ${e.message}`, 'error');
-    }
-}
-
-function showAdminQueueModal(token) {
-    closeAdminQueueModal();
-    const overlay = document.createElement('div');
-    overlay.id = 'admin-queue-modal';
-    overlay.className = 'modal-overlay';
-    overlay.innerHTML = `
-        <div class="modal-box" role="dialog" aria-modal="true">
-            <h3>Queue as Admin</h3>
-            <p>How should this item be positioned?</p>
-            <div class="modal-actions">
-                <button class="btn btn-primary" data-mode="playnext_refund">Play next &amp; refund all pending</button>
-                <button class="btn" data-mode="after_purchased">Play after all purchased items</button>
-                <button class="btn btn-secondary" data-mode="cancel">Cancel</button>
-            </div>
-        </div>`;
-    overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) closeAdminQueueModal();
-        const mode = e.target.getAttribute('data-mode');
-        if (mode) submitAdminQueue(token, mode);
-    });
-    document.body.appendChild(overlay);
-}
-
-function closeAdminQueueModal() {
-    const existing = document.getElementById('admin-queue-modal');
-    if (existing) existing.remove();
-}