kryten-webqueue 0.7.0__tar.gz → 0.7.2__tar.gz

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.7.2] - 2026-06-08
+
+### Changed
+
+- **Now Playing card redesigned for readability.** The card is now a vertical stack: the title spans the full width across the top (with a divider), then a row pairs a 2:3 poster with the time display, the progress bar, and the **Remaining** time directly under the bar. Below that, the item **description** and **category/tag chips** are shown when available. The now-playing state is enriched server-side with the catalog description and category/tag names for the playing item.
+- **"Hide Previous" now defaults to on** so the Queue page opens focused on what's still to come.
+
 ## [0.7.0] - 2026-06-08
 
 ### Added

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/PKG-INFO

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

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/kryten_webqueue/catalog/db.py

@@ -397,6 +397,35 @@ class Database:
                 lookup[data["manifest_url"]] = data
         return lookup
 
+    async def get_item_facets(self, friendly_token: str) -> dict:
+        """Return description + category/tag names for a single catalog item.
+
+        Used to enrich the now-playing card. Returns empty values when the
+        token is unknown.
+        """
+        if not friendly_token:
+            return {"description": None, "categories": [], "tags": []}
+        row = await self._fetch_one(
+            "SELECT description FROM catalog WHERE friendly_token = ?", [friendly_token]
+        )
+        cats = await self._fetch_all(
+            "SELECT cat.name FROM categories cat "
+            "JOIN catalog_categories cc ON cc.category_id = cat.id "
+            "WHERE cc.friendly_token = ? ORDER BY cat.name",
+            [friendly_token],
+        )
+        tags = await self._fetch_all(
+            "SELECT t.name FROM tags t "
+            "JOIN catalog_tags ct ON ct.tag_id = t.id "
+            "WHERE ct.friendly_token = ? ORDER BY t.name",
+            [friendly_token],
+        )
+        return {
+            "description": (row or {}).get("description"),
+            "categories": [c["name"] for c in cats],
+            "tags": [t["name"] for t in tags],
+        }
+
     async def is_restricted(self, friendly_token: str) -> bool:
         sql = """
             SELECT 1 FROM saved_playlist_items spi

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/kryten_webqueue/queue/shadow.py

@@ -217,6 +217,15 @@ class QueueShadow:
                         ):
                             np["uid"] = it.get("uid")
                             break
+            # Attach description + category/tag names for the now-playing card.
+            if np.get("friendly_token"):
+                try:
+                    facets = await db.get_item_facets(np["friendly_token"])
+                    np.setdefault("description", facets.get("description"))
+                    np["categories"] = facets.get("categories") or []
+                    np["tags"] = facets.get("tags") or []
+                except Exception:
+                    logger.debug("Failed to enrich now-playing facets", exc_info=True)
             state["now_playing"] = np
 
         return state

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/kryten_webqueue/static/css/main.css

@@ -317,30 +317,41 @@ a:hover {
 .now-playing-card {
     background: var(--bg-card);
     border-radius: var(--radius);
-    padding: 2rem;
+    padding: 1.5rem;
     display: flex;
-    gap: 1.5rem;
-    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
     /* Highlight the currently-playing item: subtle accent ring + glow. */
     border: 1px solid var(--accent);
     box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.25), 0 6px 18px rgba(108, 92, 231, 0.18);
 }
-.np-info {
-    flex: 1;
-    min-width: 0;
-}
-.np-info h3 {
-    margin-bottom: 0.5rem;
+/* Title spans the full width of the card. */
+.np-title {
+    margin: 0;
     font-size: 1.4rem;
     line-height: 1.25;
     overflow-wrap: anywhere;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--border);
+}
+/* Image + time display sit side by side. */
+.np-body {
+    display: flex;
+    gap: 1.25rem;
+    align-items: flex-start;
+}
+.np-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 .np-progress {
     height: 6px;
     background: var(--border);
     border-radius: 3px;
     overflow: hidden;
-    margin: 0.75rem 0;
 }
 .progress-bar {
     height: 100%;
@@ -348,8 +359,9 @@ a:hover {
     transition: width 1s linear;
 }
 .np-time {
-    font-size: 0.9rem;
-    color: var(--text-secondary);
+    font-size: 1rem;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
 }
 
 .queue-list {
@@ -412,8 +424,8 @@ a:hover {
     display: block;
 }
 .np-cover {
-    width: 128px;
-    height: 128px;
+    width: 120px;
+    aspect-ratio: 2 / 3;
     flex-shrink: 0;
     border-radius: 8px;
     overflow: hidden;
@@ -477,20 +489,44 @@ a:hover {
     color: var(--text-secondary);
 }
 .np-meta {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+.np-remaining {
     font-size: 0.9rem;
     color: var(--text-secondary);
-    margin: 0.25rem 0;
+    font-variant-numeric: tabular-nums;
 }
-.np-times {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
+/* Description + category/tag chips sit below the image / time row. */
+.np-description {
     font-size: 0.9rem;
-    margin-top: 0.5rem;
-    white-space: nowrap;
+    line-height: 1.5;
+    color: var(--text-secondary);
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
+    white-space: pre-line;
+    overflow-wrap: anywhere;
 }
-.np-remaining {
+.np-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+.np-chip {
+    font-size: 0.72rem;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    line-height: 1.3;
+}
+.np-chip-cat {
+    background: rgba(108, 92, 231, 0.22);
+    color: var(--text-primary);
+    border: 1px solid var(--accent);
+}
+.np-chip-tag {
+    background: var(--bg-elevated, #2a2a38);
     color: var(--text-secondary);
+    border: 1px solid var(--border);
 }
 
 /* WebSocket status */

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/kryten_webqueue/templates/queue/index.html

@@ -15,7 +15,7 @@
         <div class="queue-section-header">
             <h2>Up Next</h2>
             <label class="toggle-switch" title="Hide items before the currently playing one">
-                <input type="checkbox" id="hide-previous-toggle" onchange="toggleHidePrevious(this.checked)">
+                <input type="checkbox" id="hide-previous-toggle" onchange="toggleHidePrevious(this.checked)" checked>
                 <span class="toggle-slider"></span>
                 <span>Hide Previous</span>
             </label>
@@ -43,7 +43,7 @@
 <script>
 let ws = null;
 let reconnectTimer = null;
-let hidePrevious = false;
+let hidePrevious = true;
 let lastState = null;
 
 function toggleHidePrevious(checked) {
@@ -101,21 +101,28 @@ function renderQueue(state) {
         // runtime (`duration` is a preformatted "HH:MM:SS" string).
         const total = Number(np.seconds ?? np.duration_sec ?? 0) || 0;
         const remaining = Math.max(0, total - elapsed);
+        const pct = total > 0 ? (elapsed / total * 100) : 0;
+        const cats = Array.isArray(np.categories) ? np.categories : [];
+        const tags = Array.isArray(np.tags) ? np.tags : [];
+        const chips = [
+            ...cats.map(c => `<span class="np-chip np-chip-cat">${escapeHtml(c)}</span>`),
+            ...tags.map(t => `<span class="np-chip np-chip-tag">${escapeHtml(t)}</span>`),
+        ].join('');
         npEl.innerHTML = `
-            <div class="np-cover">${coverHtml(np)}</div>
-            <div class="np-info">
-                <h3>${escapeHtml(np.title || 'Unknown')}</h3>
-                <div class="np-meta">
-                    ${np.paid_by ? `<span class="np-user">Queued by ${escapeHtml(np.paid_by)}</span>` : ''}
-                </div>
-                <div class="np-progress">
-                    <div class="progress-bar" style="width: ${total > 0 ? (elapsed / total * 100) : 0}%"></div>
-                </div>
-                <div class="np-times">
-                    <span class="np-time">${formatTime(elapsed)} / ${formatTime(total)}</span>
-                    <span class="np-remaining">${formatTime(remaining)} remaining</span>
+            <h3 class="np-title">${escapeHtml(np.title || 'Unknown')}</h3>
+            <div class="np-body">
+                <div class="np-cover">${coverHtml(np)}</div>
+                <div class="np-info">
+                    ${np.paid_by ? `<div class="np-meta"><span class="np-user">Queued by ${escapeHtml(np.paid_by)}</span></div>` : ''}
+                    <div class="np-time">${formatTime(elapsed)} / ${formatTime(total)}</div>
+                    <div class="np-progress">
+                        <div class="progress-bar" style="width: ${pct}%"></div>
+                    </div>
+                    <div class="np-remaining">${formatTime(remaining)} remaining</div>
                 </div>
             </div>
+            ${np.description ? `<div class="np-description">${escapeHtml(np.description)}</div>` : ''}
+            ${chips ? `<div class="np-chips">${chips}</div>` : ''}
         `;
     } else {
         npEl.innerHTML = '<p class="empty-state">Nothing playing</p>';

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.2}/pyproject.toml

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