kryten-webqueue 0.6.2__tar.gz → 0.6.3__tar.gz

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/CHANGELOG.md

@@ -4,7 +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.6.3] - 2026-06-08
 
+### Fixed
+
+- **Queue items missing title/duration for externally-queued media** — CyTube playlist items nest their metadata under a `media` key (`{uid, temp, queueby, media: {id, title, seconds, type}}`), but the shadow reconciler read flat fields, so any item not added by the running webqueue instance showed "Unknown" with a `0:00` duration. The reconciler now reads the nested `media` object (with a flat-key fallback) and backfills title/duration/media-id onto known items. Externally-queued items now also show their CyTube `queueby` as the requester.
+- **Now Playing runtime showing `NaN:NaN`** — The now-playing total used the preformatted `duration` string instead of the numeric `seconds`, producing `NaN:NaN` for the total and remaining time. It now uses `seconds` (with a numeric fallback).
+- **Estimated start times** — Now derived from the numeric now-playing `seconds`/`currentTime`, so the queue ETAs are correct now that item durations are read properly.
+
+### Added
+
+- **Sticky, highlighted Now Playing card** — The Now Playing card is pinned below the navbar while scrolling a long queue, is highlighted with a subtle accent ring/glow, and the page auto-scrolls it into view on load.
+- **Case-sensitivity notice on login** — The OTP login view now warns that the CyTube username is case-sensitive and must match exactly (e.g. `TacoBelmont` ≠ `tacobelmont`); the username field no longer auto-capitalizes or autocorrects.
+
+### Changed
+
+- **Sticky navbar hardening** — Added `scroll-padding-top` (via a `--nav-height` variable) so scrolled-to content clears the sticky header.
+
+[0.6.3]: https://github.com/grobertson/kryten-webqueue/releases/tag/v0.6.3
 ## [0.6.2] - 2026-06-07
 
 ### Fixed

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/PKG-INFO

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

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/kryten_webqueue/queue/shadow.py

@@ -63,20 +63,40 @@ class QueueShadow:
 
             for pos, polled in enumerate(playlist_items):
                 uid = polled["uid"]
+                # CyTube playlist items nest the media metadata under a "media"
+                # key ({uid, temp, queueby, media: {id, title, seconds, type}}).
+                # Fall back to flat keys for forward/backward compatibility.
+                media = polled.get("media") if isinstance(polled.get("media"), dict) else polled
+                title = media.get("title") or polled.get("title") or ""
+                media_type = media.get("type") or polled.get("type") or "unknown"
+                media_id = media.get("id") or polled.get("id") or ""
+                duration_sec = _to_seconds(media.get("seconds", media.get("duration")))
+                queueby = polled.get("queueby") or None
+
                 if uid in local_map:
-                    # Preserve local metadata, update position
-                    merged = {**local_map[uid], **polled, "position": pos}
+                    # Preserve local metadata, update position; backfill any
+                    # fields we never captured locally (e.g. title/duration for
+                    # items first added by an external client or a prior run).
+                    merged = {**local_map[uid], "position": pos}
+                    if not merged.get("title"):
+                        merged["title"] = title
+                    if not merged.get("duration_sec"):
+                        merged["duration_sec"] = duration_sec
+                    if not merged.get("media_id"):
+                        merged["media_id"] = media_id
+                    if not merged.get("media_type") or merged.get("media_type") == "unknown":
+                        merged["media_type"] = media_type
                 else:
                     # New item from external source
                     merged = {
                         "uid": uid,
                         "position": pos,
-                        "title": polled.get("title", ""),
-                        "media_type": polled.get("type", "unknown"),
-                        "media_id": polled.get("id", ""),
-                        "duration_sec": _to_seconds(polled.get("duration")),
+                        "title": title,
+                        "media_type": media_type,
+                        "media_id": media_id,
+                        "duration_sec": duration_sec,
                         "is_pay": False,
-                        "paid_by": None,
+                        "paid_by": queueby,
                         "tier": None,
                         "z_cost": None,
                         "schedule_id": None,
@@ -97,7 +117,8 @@ class QueueShadow:
         # Start from now-playing elapsed or now
         start_cursor = datetime.now(UTC)
         if self._now_playing:
-            remaining = _to_seconds(self._now_playing.get("duration")) - _to_seconds(self._now_playing.get("currentTime"))
+            np_total = _to_seconds(self._now_playing.get("seconds", self._now_playing.get("duration")))
+            remaining = np_total - _to_seconds(self._now_playing.get("currentTime"))
             start_cursor += timedelta(seconds=max(0, remaining))
 
         for item in self._items:

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/kryten_webqueue/static/css/main.css

@@ -15,6 +15,7 @@
     --border: #33334a;
     --radius: 8px;
     --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    --nav-height: 4rem;
 }
 
 * {
@@ -23,6 +24,11 @@
     box-sizing: border-box;
 }
 
+html {
+    /* Keep anchored/scrolled-to content clear of the sticky navbar. */
+    scroll-padding-top: calc(var(--nav-height) + 1rem);
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: var(--bg-primary);
@@ -228,6 +234,18 @@ a:hover {
     }
 }
 
+/* Keep the now-playing card pinned while scrolling a long queue. */
+.now-playing-section {
+    position: sticky;
+    top: calc(var(--nav-height) + 1rem);
+    align-self: start;
+}
+@media (max-width: 900px) {
+    .now-playing-section {
+        position: static;
+    }
+}
+
 .now-playing-card {
     background: var(--bg-card);
     border-radius: var(--radius);
@@ -235,6 +253,9 @@ a:hover {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
+    /* 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;
@@ -432,6 +453,25 @@ a:hover {
 .otp-sent-msg {
     color: var(--success);
 }
+.auth-hint {
+    margin-top: 0.75rem;
+    padding: 0.6rem 0.85rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    background: rgba(253, 203, 110, 0.1);
+    border: 1px solid var(--warning);
+    border-radius: var(--radius);
+    text-align: left;
+}
+.auth-hint strong {
+    color: var(--warning);
+}
+.auth-hint code {
+    background: var(--bg-secondary);
+    padding: 0.05rem 0.3rem;
+    border-radius: 4px;
+    font-size: 0.85em;
+}
 
 /* User Dashboard */
 .user-header {

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/kryten_webqueue/templates/auth/login.html

@@ -6,9 +6,10 @@
 <div class="auth-container">
     <h1>Login</h1>
     <p>Enter your CyTube username to receive a one-time code via PM.</p>
+    <p class="auth-hint"><strong>Username is case-sensitive</strong> &mdash; it must match your CyTube username exactly. For example, <code>TacoBelmont</code> is not the same as <code>tacobelmont</code>.</p>
 
     <div id="otp-request" class="auth-form">
-        <input type="text" id="username" placeholder="CyTube username" autocomplete="username" maxlength="50">
+        <input type="text" id="username" placeholder="CyTube username (case-sensitive)" autocomplete="username" autocapitalize="none" autocorrect="off" spellcheck="false" maxlength="50">
         <button id="request-otp-btn" class="btn btn-primary">Send Code</button>
     </div>
 

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/kryten_webqueue/templates/queue/index.html

@@ -58,6 +58,7 @@ function connectWebSocket() {
         const msg = JSON.parse(event.data);
         if (msg.type === 'queue_state' || msg.type === 'queue_update') {
             renderQueue(msg.data);
+            maybeInitialScroll(msg.data);
         } else if (msg.type === 'pong') {
             // keepalive ack
         } else if (msg.type === 'schedule_fired') {
@@ -80,8 +81,10 @@ function renderQueue(state) {
 
     if (state.now_playing) {
         const np = state.now_playing;
-        const elapsed = np.currentTime || 0;
-        const total = np.duration || 0;
+        const elapsed = Number(np.currentTime) || 0;
+        // CyTube's now-playing payload uses numeric `seconds` for the total
+        // 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);
         npEl.innerHTML = `
             <div class="np-cover">${coverHtml(np)}</div>
@@ -131,6 +134,17 @@ function renderQueue(state) {
     }
 }
 
+// On first render with live data, bring the now-playing card into view.
+let didInitialScroll = false;
+function maybeInitialScroll(state) {
+    if (didInitialScroll || !state || !state.now_playing) return;
+    didInitialScroll = true;
+    const sec = document.querySelector('.now-playing-section');
+    if (sec) {
+        setTimeout(() => sec.scrollIntoView({behavior: 'smooth', block: 'start'}), 150);
+    }
+}
+
 function formatTime(sec) {
     sec = Math.floor(sec);
     const h = Math.floor(sec / 3600);
@@ -169,6 +183,7 @@ async function initialLoad() {
         if (resp.ok) {
             const state = await resp.json();
             renderQueue(state);
+            maybeInitialScroll(state);
         }
     } catch (e) { /* WS will take over */ }
 }

{kryten_webqueue-0.6.2 → kryten_webqueue-0.6.3}/pyproject.toml

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