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

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

@@ -4,6 +4,23 @@ 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.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
+
+- **Queue view polish.** Three refinements to the Queue page: (1) **Predicted start times** now render reliably in the viewer's local timezone — the frontend defensively treats timezone-less timestamps as UTC before converting, so ETAs no longer risk being misread as server time. (2) **Now Playing card** is larger and easier to read — bigger cover art (128px), a larger title that wraps cleanly, and the elapsed/remaining times no longer wrap. (3) **The currently-playing item is now highlighted** in the queue list with an accent tint and ring. The now-playing playlist `uid` is resolved server-side (matching media id/type against the shadow playlist when CyTube's `changeMedia` payload omits it) so the matching queue item is identified reliably.
+
 ## [0.6.5] - 2026-06-08
 
 ### Changed

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

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

{kryten_webqueue-0.6.5 → kryten_webqueue-0.7.0}/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
 
@@ -383,7 +410,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.5 → kryten_webqueue-0.7.0}/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.5 → kryten_webqueue-0.7.0}/kryten_webqueue/queue/shadow.py

@@ -203,6 +203,20 @@ class QueueShadow:
                 np.setdefault("thumbnail_url", meta.get("thumbnail_url"))
                 if not np.get("friendly_token"):
                     np["friendly_token"] = meta.get("friendly_token")
+            # Ensure now-playing carries a playlist uid so the frontend can
+            # highlight the matching queue item. CyTube's changeMedia payload
+            # lacks a uid; recover it by matching media id/type against the
+            # shadow playlist (whose items do carry uids).
+            if np.get("uid") is None:
+                np_id = np.get("id")
+                np_type = np.get("type")
+                if np_id is not None:
+                    for it in enriched_items:
+                        if it.get("media_id") == np_id and (
+                            np_type is None or it.get("media_type") == np_type
+                        ):
+                            np["uid"] = it.get("uid")
+                            break
             state["now_playing"] = np
 
         return state

{kryten_webqueue-0.6.5 → kryten_webqueue-0.7.0}/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.5 → kryten_webqueue-0.7.0}/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.5 → kryten_webqueue-0.7.0}/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,10 +317,10 @@ a:hover {
 .now-playing-card {
     background: var(--bg-card);
     border-radius: var(--radius);
-    padding: 1.5rem;
+    padding: 2rem;
     display: flex;
-    gap: 1rem;
-    align-items: flex-start;
+    gap: 1.5rem;
+    align-items: center;
     /* 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);
@@ -263,13 +331,16 @@ a:hover {
 }
 .np-info h3 {
     margin-bottom: 0.5rem;
+    font-size: 1.4rem;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
 }
 .np-progress {
-    height: 4px;
+    height: 6px;
     background: var(--border);
-    border-radius: 2px;
+    border-radius: 3px;
     overflow: hidden;
-    margin: 0.5rem 0;
+    margin: 0.75rem 0;
 }
 .progress-bar {
     height: 100%;
@@ -277,7 +348,7 @@ a:hover {
     transition: width 1s linear;
 }
 .np-time {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     color: var(--text-secondary);
 }
 
@@ -304,6 +375,15 @@ a:hover {
 .queue-item-paid {
     border-left-color: var(--accent);
 }
+.queue-item-now-playing {
+    border-left-color: var(--accent);
+    background: linear-gradient(90deg, rgba(108, 92, 231, 0.18), var(--bg-card) 60%);
+    box-shadow: inset 0 0 0 1px rgba(108, 92, 231, 0.35);
+}
+.queue-item-now-playing .qi-title {
+    color: var(--accent);
+    font-weight: 600;
+}
 .qi-pos {
     font-size: 0.75rem;
     color: var(--text-secondary);
@@ -332,10 +412,10 @@ a:hover {
     display: block;
 }
 .np-cover {
-    width: 96px;
-    height: 96px;
+    width: 128px;
+    height: 128px;
     flex-shrink: 0;
-    border-radius: 6px;
+    border-radius: 8px;
     overflow: hidden;
     background: var(--bg-elevated, #222);
 }
@@ -397,15 +477,17 @@ a:hover {
     color: var(--text-secondary);
 }
 .np-meta {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     color: var(--text-secondary);
     margin: 0.25rem 0;
 }
 .np-times {
     display: flex;
     justify-content: space-between;
-    font-size: 0.8rem;
-    margin-top: 0.25rem;
+    gap: 1rem;
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+    white-space: nowrap;
 }
 .np-remaining {
     color: var(--text-secondary);

{kryten_webqueue-0.6.5 → kryten_webqueue-0.7.0}/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.5 → kryten_webqueue-0.7.0}/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" 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 = false;
+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');
@@ -110,8 +125,15 @@ function renderQueue(state) {
         const totalDuration = state.items.reduce((sum, i) => sum + (i.duration_sec || 0), 0);
         sumEl.innerHTML = `<span>${state.items.length} items · ${formatTime(totalDuration)} total</span>`;
 
-        qlEl.innerHTML = state.items.map((item, i) => `
-            <div class="queue-item ${item.is_pay ? 'queue-item-paid' : ''}" data-uid="${item.uid}">
+        const nowUid = state.now_playing && state.now_playing.uid != null
+            ? String(state.now_playing.uid) : null;
+        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>
                 <div class="qi-cover">${coverHtml(item)}</div>
@@ -166,7 +188,15 @@ function coverHtml(item) {
 }
 
 function formatEta(isoStr) {
-    const d = new Date(isoStr);
+    // Server emits UTC ISO timestamps. If a value arrives without an explicit
+    // timezone designator, treat it as UTC so the browser converts it to the
+    // viewer's local timezone rather than misreading it as local time.
+    let s = String(isoStr);
+    if (!/[zZ]|[+-]\d{2}:?\d{2}$/.test(s)) {
+        s += 'Z';
+    }
+    const d = new Date(s);
+    if (isNaN(d.getTime())) return '';
     return d.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
 }
 

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

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