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

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.1}/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.1] - 2026-06-08
+
+### Changed
+
+- **Now Playing box redesign.** The title now spans the full card width, the cover renders as a 2:3 poster, the elapsed/total time and progress bar are stacked with **Remaining** shown as its own line under the bar, and a details section beneath the poster shows the item description plus category and tag chips. The now-playing payload is enriched with `description`, `categories`, and `tags` from the catalog.
+- **"Hide Previous" now defaults to ON** on the Queue page, so the view opens focused on what's still to come.
+
 ## [0.7.0] - 2026-06-08
 
 ### Added

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: kryten-webqueue
-Version: 0.7.0
+Version: 0.7.1
 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.1}/kryten_webqueue/catalog/db.py

@@ -374,6 +374,31 @@ class Database:
     async def get_item_admin(self, friendly_token: str) -> dict | None:
         return await self._fetch_one("SELECT * FROM catalog WHERE friendly_token = ?", [friendly_token])
 
+    async def get_item_facets(self, friendly_token: str) -> dict:
+        """Return category and tag names for a single catalog item."""
+        cats = await self._fetch_all(
+            """
+            SELECT cat.name FROM catalog_categories cc
+            JOIN categories cat 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 catalog_tags ct
+            JOIN tags t ON ct.tag_id = t.id
+            WHERE ct.friendly_token = ?
+            ORDER BY t.name
+            """,
+            [friendly_token],
+        )
+        return {
+            "categories": [c["name"] for c in cats],
+            "tags": [t["name"] for t in tags],
+        }
+
     async def get_catalog_brief(self, tokens: list[str], manifest_urls: list[str]) -> dict[str, dict]:
         """Return a lookup of catalog metadata keyed by BOTH friendly_token and
         manifest_url, for enriching queue-shadow items that may only carry one.
@@ -383,7 +408,7 @@ class Database:
             return {}
         placeholders = ",".join("?" * len(keys))
         rows = await self._fetch_all(
-            "SELECT friendly_token, manifest_url, title, duration_sec, "
+            "SELECT friendly_token, manifest_url, title, description, duration_sec, "
             "cover_art_path, thumbnail_url FROM catalog "
             f"WHERE friendly_token IN ({placeholders}) OR manifest_url IN ({placeholders})",
             keys + keys,

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

@@ -201,6 +201,8 @@ class QueueShadow:
             if meta:
                 np.setdefault("cover_art_path", meta.get("cover_art_path"))
                 np.setdefault("thumbnail_url", meta.get("thumbnail_url"))
+                if not np.get("description"):
+                    np["description"] = meta.get("description")
                 if not np.get("friendly_token"):
                     np["friendly_token"] = meta.get("friendly_token")
             # Ensure now-playing carries a playlist uid so the frontend can
@@ -217,6 +219,15 @@ class QueueShadow:
                         ):
                             np["uid"] = it.get("uid")
                             break
+            # Attach category/tag facets for the now-playing detail panel.
+            ft = np.get("friendly_token")
+            if ft:
+                try:
+                    facets = await db.get_item_facets(ft)
+                    np["categories"] = facets.get("categories") or []
+                    np["tags"] = facets.get("tags") or []
+                except Exception:
+                    logger.debug("Failed to load now-playing facets", exc_info=True)
             state["now_playing"] = np
 
         return state

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

@@ -317,30 +317,42 @@ 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 card width. */
+.np-title {
+    margin: 0;
     font-size: 1.4rem;
     line-height: 1.25;
     overflow-wrap: anywhere;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.75rem;
+}
+/* Poster (2:3) on the left, playback info on the right. */
+.np-body {
+    display: flex;
+    gap: 1.25rem;
+    align-items: stretch;
+}
+.np-playback {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    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 +360,43 @@ a:hover {
     transition: width 1s linear;
 }
 .np-time {
-    font-size: 0.9rem;
+    font-size: 0.95rem;
+    color: var(--text-primary);
+}
+/* Details below the poster/time row: category + tag chips, then description. */
+.np-details {
+    border-top: 1px solid var(--border);
+    padding-top: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.np-facets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+.np-chip {
+    font-size: 0.7rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    white-space: nowrap;
+}
+.np-chip-cat {
+    background: var(--accent);
+    color: #fff;
+}
+.np-chip-tag {
+    background: var(--bg-elevated, #2a2a38);
     color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+.np-description {
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+    margin: 0;
+    overflow-wrap: anywhere;
 }
 
 .queue-list {
@@ -412,8 +459,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;
@@ -482,15 +529,13 @@ a:hover {
     margin: 0.25rem 0;
 }
 .np-times {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
     font-size: 0.9rem;
-    margin-top: 0.5rem;
     white-space: nowrap;
 }
 .np-remaining {
+    font-size: 0.85rem;
     color: var(--text-secondary);
+    margin-top: 0.1rem;
 }
 
 /* WebSocket status */

{kryten_webqueue-0.7.0 → kryten_webqueue-0.7.1}/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" checked onchange="toggleHidePrevious(this.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,34 @@ 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 facetHtml = [
+            ...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('');
+        const desc = (np.description || '').trim();
         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>
+            ${np.paid_by ? `<div class="np-meta"><span class="np-user">Queued by ${escapeHtml(np.paid_by)}</span></div>` : ''}
+            <div class="np-body">
+                <div class="np-cover">${coverHtml(np)}</div>
+                <div class="np-playback">
+                    <div class="np-times">
+                        <span class="np-time">${formatTime(elapsed)} / ${formatTime(total)}</span>
+                    </div>
+                    <div class="np-progress">
+                        <div class="progress-bar" style="width: ${pct}%"></div>
+                    </div>
+                    <div class="np-remaining">${formatTime(remaining)} remaining</div>
                 </div>
             </div>
+            ${(desc || facetHtml) ? `
+            <div class="np-details">
+                ${facetHtml ? `<div class="np-facets">${facetHtml}</div>` : ''}
+                ${desc ? `<p class="np-description">${escapeHtml(desc)}</p>` : ''}
+            </div>` : ''}
         `;
     } else {
         npEl.innerHTML = '<p class="empty-state">Nothing playing</p>';

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

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