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

{kryten_webqueue-0.6.6 → kryten_webqueue-0.7.1}/CHANGELOG.md

@@ -4,6 +4,24 @@ 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
+
+- **Category & tag search facets on the catalog listing.** The category dropdown is now populated with the distinct MediaCMS categories that actually have items, and a new **Tags** dropdown sits beside it. Selecting either narrows the listing; both are preserved across pagination. Catalog sync now fetches per-item `categories_info`/`tags_info` from the MediaCMS media-detail endpoint (the bulk `manage_media` list omits them) and maintains the `categories`/`tags` join tables. Facet dropdowns only surface categories/tags with at least one item, and tags are ordered by usage.
+- **"Hide Previous" toggle on the Queue page** — a switch in the Up Next header hides every item before the currently-playing one, for a cleaner view of what's still to come.
+
+### Fixed
+
+- **Queue page no longer overflows the viewport width.** The three-column queue grid now uses `minmax(0, …)` tracks (and `min-width: 0` on its columns) so long titles or the no-wrap Now Playing times can't blow the layout past 100% width. The queue column was also slimmed slightly.
+
 ## [0.6.6] - 2026-06-08
 
 ### Changed

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

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

@@ -1,8 +1,17 @@
 import aiosqlite
+import re
 from pathlib import Path
 from datetime import datetime, UTC
 
 
+def _slugify(text: str) -> str:
+    """Derive a URL-safe slug from a category title."""
+    s = (text or "").strip().lower()
+    s = re.sub(r"[^\w\s-]", "", s)
+    s = re.sub(r"[\s_-]+", "-", s)
+    return s.strip("-") or "untitled"
+
+
 MIGRATIONS = [
     # v1: Migration tracking table
     """
@@ -236,7 +245,7 @@ class Database:
 
     # --- Catalog ---
 
-    async def browse(self, *, category: str | None = None, page: int = 1, per_page: int = 24) -> list[dict]:
+    async def browse(self, *, category: str | None = None, tag: str | None = None, page: int = 1, per_page: int = 24) -> list[dict]:
         query = """
             SELECT c.friendly_token, c.title, c.duration_sec, c.cover_art_path, c.thumbnail_url, c.manifest_url
             FROM catalog c
@@ -256,6 +265,15 @@ class Database:
                 )
             """
             params.append(category)
+        if tag:
+            query += """
+                AND c.friendly_token IN (
+                    SELECT ct.friendly_token FROM catalog_tags ct
+                    JOIN tags t ON ct.tag_id = t.id
+                    WHERE t.name = ?
+                )
+            """
+            params.append(tag)
         # Quality-weighted ordering so the landing page leads with presentable
         # items instead of alphabetical junk. No curation required — every signal
         # is derived from existing data:
@@ -278,7 +296,7 @@ class Database:
         params.extend([per_page, (page - 1) * per_page])
         return await self._fetch_all(query, params)
 
-    async def browse_count(self, *, category: str | None = None) -> int:
+    async def browse_count(self, *, category: str | None = None, tag: str | None = None) -> int:
         query = """
             SELECT COUNT(*) as cnt FROM catalog c
             WHERE c.friendly_token NOT IN (
@@ -297,6 +315,15 @@ class Database:
                 )
             """
             params.append(category)
+        if tag:
+            query += """
+                AND c.friendly_token IN (
+                    SELECT ct.friendly_token FROM catalog_tags ct
+                    JOIN tags t ON ct.tag_id = t.id
+                    WHERE t.name = ?
+                )
+            """
+            params.append(tag)
         row = await self._fetch_one(query, params)
         return row["cnt"] if row else 0
 
@@ -347,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.
@@ -356,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,
@@ -383,7 +435,79 @@ class Database:
         return row is not None
 
     async def get_categories(self) -> list[dict]:
-        return await self._fetch_all("SELECT id, name, slug FROM categories ORDER BY name")
+        """Distinct categories that have at least one catalog item, for facets."""
+        return await self._fetch_all(
+            """
+            SELECT c.id, c.name, c.slug, COUNT(cc.friendly_token) AS cnt
+            FROM categories c
+            JOIN catalog_categories cc ON cc.category_id = c.id
+            GROUP BY c.id, c.name, c.slug
+            ORDER BY c.name
+            """
+        )
+
+    async def get_tags(self, *, limit: int = 100) -> list[dict]:
+        """Most-used tags that have at least one catalog item, for facets."""
+        return await self._fetch_all(
+            """
+            SELECT t.id, t.name, COUNT(ct.friendly_token) AS cnt
+            FROM tags t
+            JOIN catalog_tags ct ON ct.tag_id = t.id
+            GROUP BY t.id, t.name
+            ORDER BY cnt DESC, t.name ASC
+            LIMIT ?
+            """,
+            [limit],
+        )
+
+    async def upsert_category(self, name: str) -> int:
+        """Insert a category by name (deriving a unique slug) and return its id."""
+        existing = await self._fetch_one("SELECT id FROM categories WHERE name = ?", [name])
+        if existing:
+            return existing["id"]
+        base = _slugify(name)
+        slug, n = base, 1
+        while await self._fetch_one("SELECT 1 FROM categories WHERE slug = ?", [slug]):
+            n += 1
+            slug = f"{base}-{n}"
+        cursor = await self._db.execute(
+            "INSERT INTO categories (name, slug) VALUES (?, ?)", [name, slug]
+        )
+        await self._db.commit()
+        return cursor.lastrowid
+
+    async def upsert_tag(self, name: str) -> int:
+        """Insert a tag by name and return its id."""
+        existing = await self._fetch_one("SELECT id FROM tags WHERE name = ?", [name])
+        if existing:
+            return existing["id"]
+        cursor = await self._db.execute("INSERT INTO tags (name) VALUES (?)", [name])
+        await self._db.commit()
+        return cursor.lastrowid
+
+    async def set_catalog_categories(self, friendly_token: str, category_ids: list[int]):
+        """Replace the category memberships for a catalog item."""
+        await self._db.execute(
+            "DELETE FROM catalog_categories WHERE friendly_token = ?", [friendly_token]
+        )
+        for cid in category_ids:
+            await self._db.execute(
+                "INSERT OR IGNORE INTO catalog_categories (friendly_token, category_id) VALUES (?, ?)",
+                [friendly_token, cid],
+            )
+        await self._db.commit()
+
+    async def set_catalog_tags(self, friendly_token: str, tag_ids: list[int]):
+        """Replace the tag memberships for a catalog item."""
+        await self._db.execute(
+            "DELETE FROM catalog_tags WHERE friendly_token = ?", [friendly_token]
+        )
+        for tid in tag_ids:
+            await self._db.execute(
+                "INSERT OR IGNORE INTO catalog_tags (friendly_token, tag_id) VALUES (?, ?)",
+                [friendly_token, tid],
+            )
+        await self._db.commit()
 
     async def insert_catalog(self, row: dict):
         sql = """

{kryten_webqueue-0.6.6 → kryten_webqueue-0.7.1}/kryten_webqueue/catalog/sync.py

@@ -129,6 +129,13 @@ class CatalogSync:
             await self._db.insert_catalog(row)
             stats["new"] += 1
 
+        # Categories & tags require a per-item detail fetch — the manage_media
+        # list serializer omits them. Best-effort; never fail the item over this.
+        try:
+            await self._sync_item_facets(token)
+        except Exception as e:
+            logger.debug(f"Facet sync failed for {token}: {e}")
+
         # Fetch TMDB/OMDB cover art if not already cached
         if self._cover_art and not (existing and existing.get("cover_art_path")):
             try:
@@ -137,6 +144,34 @@ class CatalogSync:
                 logger.debug(f"Cover art resolve failed for {token}: {e}")
             await asyncio.sleep(0.25)
 
+    async def _sync_item_facets(self, token: str):
+        """Populate category/tag memberships from the media detail endpoint.
+
+        The list (manage_media) serializer omits categories/tags, so we fetch
+        the per-item detail (``/api/v1/media/{token}``) which exposes
+        ``categories_info`` and ``tags_info``.
+        """
+        resp = await self._client.get(f"{self._url}/api/v1/media/{token}")
+        if resp.status_code != 200:
+            return
+        data = resp.json()
+
+        cat_names = [
+            c.get("title")
+            for c in (data.get("categories_info") or [])
+            if isinstance(c, dict) and c.get("title")
+        ]
+        tag_names = []
+        for t in (data.get("tags_info") or []):
+            name = t.get("title") if isinstance(t, dict) else t
+            if name:
+                tag_names.append(name)
+
+        cat_ids = [await self._db.upsert_category(n) for n in cat_names]
+        tag_ids = [await self._db.upsert_tag(n) for n in tag_names]
+        await self._db.set_catalog_categories(token, cat_ids)
+        await self._db.set_catalog_tags(token, tag_ids)
+
     def _build_manifest_url(self, media: dict) -> str:
         # CyTube custom media ("cm") requires the manifest JSON URL, NOT the
         # human watch page (/view?m=TOKEN). MediaCMS exposes a CyTube manifest at

{kryten_webqueue-0.6.6 → 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.6.6 → kryten_webqueue-0.7.1}/kryten_webqueue/routes/catalog.py

@@ -6,13 +6,14 @@ router = APIRouter(prefix="/catalog", tags=["catalog"])
 
 
 @router.get("/browse")
-async def browse(request: Request, category: str | None = None, page: int = 1,
-                 user: dict = Depends(get_current_user)):
-    """Browse catalog with optional category filter."""
+async def browse(request: Request, category: str | None = None, tag: str | None = None,
+                 page: int = 1, user: dict = Depends(get_current_user)):
+    """Browse catalog with optional category/tag filter."""
     db = request.app.state.db
-    items = await db.browse(category=category, page=page)
+    items = await db.browse(category=category, tag=tag, page=page)
     categories = await db.get_categories()
-    return {"items": items, "categories": categories, "page": page}
+    tags = await db.get_tags()
+    return {"items": items, "categories": categories, "tags": tags, "page": page}
 
 
 @router.get("/search")

{kryten_webqueue-0.6.6 → kryten_webqueue-0.7.1}/kryten_webqueue/routes/pages.py

@@ -40,22 +40,26 @@ async def login_page(request: Request):
 
 
 @router.get("/catalog/browse", response_class=HTMLResponse)
-async def catalog_browse_page(request: Request, category: str | None = None, page: int = 1):
+async def catalog_browse_page(request: Request, category: str | None = None,
+                              tag: str | None = None, page: int = 1):
     user = _get_user_or_none(request)
     if not user:
         return RedirectResponse("/auth/login")
     db = request.app.state.db
-    items = await db.browse(category=category, page=page)
-    total = await db.browse_count(category=category)
+    items = await db.browse(category=category, tag=tag, page=page)
+    total = await db.browse_count(category=category, tag=tag)
     total_pages = max(1, (total + 23) // 24)
     categories = await db.get_categories()
+    tags = await db.get_tags()
     return templates.TemplateResponse(request, "catalog/browse.html", {
         "user": user,
         "items": items,
         "categories": categories,
+        "tags": tags,
         "page": page,
         "total_pages": total_pages,
         "active_category": category,
+        "active_tag": tag,
         "query": None,
     })
 
@@ -72,13 +76,16 @@ async def catalog_search_page(request: Request, q: str = "", page: int = 1):
     total = await db.search_count(q)
     total_pages = max(1, (total + 23) // 24)
     categories = await db.get_categories()
+    tags = await db.get_tags()
     return templates.TemplateResponse(request, "catalog/browse.html", {
         "user": user,
         "items": items,
         "categories": categories,
+        "tags": tags,
         "page": page,
         "total_pages": total_pages,
         "active_category": None,
+        "active_tag": None,
         "query": q,
     })
 

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

@@ -139,12 +139,18 @@ a:hover {
     color: var(--text-primary);
     width: 300px;
 }
+.category-filter {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
 .category-filter select {
     padding: 0.5rem;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--bg-secondary);
     color: var(--text-primary);
+    max-width: 220px;
 }
 
 .catalog-grid {
@@ -225,15 +231,77 @@ a:hover {
 /* Queue Page */
 .queue-layout {
     display: grid;
-    grid-template-columns: 1fr 2fr 250px;
+    /* minmax(0, …) lets grid tracks shrink below their content's intrinsic
+       width, which prevents a long title or nowrap row from blowing the grid
+       (and the page) past 100% viewport width. */
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 220px;
     gap: 2rem;
 }
+/* Allow each column's flex/overflow children to shrink instead of overflowing. */
+.now-playing-section,
+.queue-section,
+.queue-info-sidebar {
+    min-width: 0;
+}
 @media (max-width: 900px) {
     .queue-layout {
         grid-template-columns: 1fr;
     }
 }
 
+/* Up Next header with the Hide Previous toggle */
+.queue-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+.toggle-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+.toggle-switch input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.toggle-slider {
+    position: relative;
+    width: 38px;
+    height: 20px;
+    background: var(--border);
+    border-radius: 10px;
+    transition: background 0.15s ease;
+    flex-shrink: 0;
+}
+.toggle-slider::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.15s ease;
+}
+.toggle-switch input:checked + .toggle-slider {
+    background: var(--accent);
+}
+.toggle-switch input:checked + .toggle-slider::before {
+    transform: translateX(18px);
+}
+.toggle-switch input:focus-visible + .toggle-slider {
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.5);
+}
+
 /* Keep the now-playing card pinned while scrolling a long queue. */
 .now-playing-section {
     position: sticky;
@@ -249,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%;
@@ -280,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 {
@@ -344,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;
@@ -414,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.6.6 → kryten_webqueue-0.7.1}/kryten_webqueue/templates/catalog/browse.html

@@ -11,12 +11,18 @@
             <button type="submit" class="btn btn-sm">Search</button>
         </form>
         <div class="category-filter">
-            <select id="category-select" onchange="filterCategory(this.value)">
+            <select id="category-select" onchange="applyFacets()">
                 <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>
+            <select id="tag-select" onchange="applyFacets()">
+                <option value="">All Tags</option>
+                {% for tag in tags %}
+                    <option value="{{ tag.name }}" {% if active_tag == tag.name %}selected{% endif %}>{{ tag.name }}</option>
+                {% endfor %}
+            </select>
         </div>
     </div>
 </div>
@@ -66,7 +72,7 @@
 
 <div class="pagination">
     {% if page > 1 %}
-        <a href="?page={{ page - 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}" class="btn btn-sm">&larr; Prev</a>
+        <a href="?page={{ page - 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}" class="btn btn-sm">&larr; Prev</a>
     {% endif %}
 
     {% set start_page = [1, page - 2] | max %}
@@ -75,23 +81,28 @@
         {% if p == page %}
             <span class="page-num page-current">{{ p }}</span>
         {% else %}
-            <a href="?page={{ p }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}" class="btn btn-sm btn-page">{{ p }}</a>
+            <a href="?page={{ p }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}" class="btn btn-sm btn-page">{{ p }}</a>
         {% endif %}
     {% endfor %}
 
     <span class="page-info">of {{ total_pages }}</span>
 
     {% if page < total_pages %}
-        <a href="?page={{ page + 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}" class="btn btn-sm">Next &rarr;</a>
+        <a href="?page={{ page + 1 }}{% if query %}&q={{ query }}{% endif %}{% if active_category %}&category={{ active_category }}{% endif %}{% if active_tag %}&tag={{ active_tag | urlencode }}{% endif %}" class="btn btn-sm">Next &rarr;</a>
     {% endif %}
 </div>
 {% endblock %}
 
 {% block scripts %}
 <script>
-function filterCategory(slug) {
-    const url = slug ? `/catalog/browse?category=${slug}` : '/catalog/browse';
-    window.location.href = url;
+function applyFacets() {
+    const cat = document.getElementById('category-select').value;
+    const tag = document.getElementById('tag-select').value;
+    const params = new URLSearchParams();
+    if (cat) params.set('category', cat);
+    if (tag) params.set('tag', tag);
+    const qs = params.toString();
+    window.location.href = '/catalog/browse' + (qs ? '?' + qs : '');
 }
 // queueItem / playNext / queueAsAdmin are provided by /static/js/main.js
 </script>

{kryten_webqueue-0.6.6 → kryten_webqueue-0.7.1}/kryten_webqueue/templates/queue/index.html

@@ -12,7 +12,14 @@
     </div>
 
     <div class="queue-section">
-        <h2>Up Next</h2>
+        <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" checked onchange="toggleHidePrevious(this.checked)">
+                <span class="toggle-slider"></span>
+                <span>Hide Previous</span>
+            </label>
+        </div>
         <div id="queue-list" class="queue-list">
             <p class="empty-state">Connecting...</p>
         </div>
@@ -36,6 +43,13 @@
 <script>
 let ws = null;
 let reconnectTimer = null;
+let hidePrevious = true;
+let lastState = null;
+
+function toggleHidePrevious(checked) {
+    hidePrevious = checked;
+    if (lastState) renderQueue(lastState);
+}
 
 function connectWebSocket() {
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -75,6 +89,7 @@ function connectWebSocket() {
 }
 
 function renderQueue(state) {
+    lastState = state;
     const npEl = document.getElementById('now-playing');
     const qlEl = document.getElementById('queue-list');
     const sumEl = document.getElementById('queue-summary');
@@ -86,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>';
@@ -112,7 +140,12 @@ function renderQueue(state) {
 
         const nowUid = state.now_playing && state.now_playing.uid != null
             ? String(state.now_playing.uid) : null;
-        qlEl.innerHTML = state.items.map((item, i) => `
+        const nowIndex = nowUid != null
+            ? state.items.findIndex(it => String(it.uid) === nowUid) : -1;
+        qlEl.innerHTML = state.items
+            .map((item, i) => ({ item, i }))
+            .filter(({ i }) => !(hidePrevious && nowIndex >= 0 && i < nowIndex))
+            .map(({ item, i }) => `
             <div class="queue-item ${item.is_pay ? 'queue-item-paid' : ''} ${nowUid != null && String(item.uid) === nowUid ? 'queue-item-now-playing' : ''}" data-uid="${item.uid}">
                 <span class="qi-drag" title="Drag to reorder">☰</span>
                 <span class="qi-pos">${i + 1}</span>

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

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