From 81546cff69933c149b204a8158dac031cb58422b Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 15 Jun 2026 10:21:04 -0700
Subject: [PATCH] video: detail-page feedback fixes (Play button style, crew
 links, ep-sync UX)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Play button now matches the Trailer/Watchlist buttons exactly (same size/shape),
  just green — consistent hero buttons.
- Where to Watch: drop the duplicate streaming provider that matches your server
  (no more two 'Plex' entries). Providers still share TMDB's single JustWatch
  'where to watch' link (that's all TMDB gives).
- Director/Creator names (hero line + Cast & Crew section) are clickable → the
  in-app person page.
- Opening a show whose full episode list isn't cached yet now shows a 'Fetching
  the full episode list…' banner with a spinner, instead of a silent ~20s gap
  before missing episodes pop in.
---
 tests/test_video_side_shell.py     |  3 ++
 webui/index.html                   |  4 +++
 webui/static/video/video-detail.js | 57 ++++++++++++++++++++++--------
 webui/static/video/video-side.css  | 35 ++++++++++++++----
 4 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/tests/test_video_side_shell.py b/tests/test_video_side_shell.py
index 39ad2080..89cf0b7d 100644
--- a/tests/test_video_side_shell.py
+++ b/tests/test_video_side_shell.py
@@ -433,6 +433,9 @@ def test_detail_keeps_preview_items_in_app():
     assert "renderCrewLine" in src and "renderNextEpisode" in src
     assert "data-vd-collection" in _INDEX and "renderSeasonOverview" in src
     assert "ex.recommendations" in src
+    # Director/crew names link to the person page; episode-sync has a banner.
+    assert "personName" in src and "data-vd-person" in src
+    assert "data-vd-ep-syncing" in _INDEX and "showEpSyncing" in src
     # The old external 'similar' link (themoviedb.org/<kind>/<id>) is gone — the
     # only remaining themoviedb.org ref is the TMDB badge logo asset for owned items.
     assert "www.themoviedb.org/' + (s.kind" not in src
diff --git a/webui/index.html b/webui/index.html
index 76bc9727..6e0f8d36 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -916,6 +916,10 @@
                                  chosen by the toggle above; all drive the same selection. -->
                             <div class="vd-season-nav" data-vd-season-nav></div>
                             <p class="vd-season-overview" data-vd-season-overview hidden></p>
+                            <div class="vd-ep-syncing" data-vd-ep-syncing hidden>
+                                <span class="vd-ep-syncing-spin" aria-hidden="true"></span>
+                                <span>Fetching the full episode list from TMDB&hellip; missing episodes will fill in shortly.</span>
+                            </div>
                             <div class="vd-episodes" data-vd-episodes></div>
                             <!-- Cast & crew (TMDB) — populated by video-detail.js. -->
                             <div class="vd-cast-section" data-vd-cast-section hidden>
diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js
index b42873ee..fad43833 100644
--- a/webui/static/video/video-detail.js
+++ b/webui/static/video/video-detail.js
@@ -204,16 +204,23 @@
     }
 
     // "Directed by …" (movie) / "Created by …" (show) surfaced in the hero.
+    // A crew member's name, clickable → person page when we have a TMDB id.
+    function personName(c) {
+        return c.tmdb_id
+            ? '<a class="vd-person-link" href="/video-detail/tmdb/person/' + c.tmdb_id +
+              '" data-vd-person="' + c.tmdb_id + '">' + esc(c.name) + '</a>'
+            : esc(c.name);
+    }
+
     function renderCrewLine(d) {
         var el = q('[data-vd-crew-line]');
         if (!el) return;
         var key = d.kind === 'movie' ? 'Director' : 'Creator';
-        var names = (d.crew || []).filter(function (c) { return c.job === key; })
-            .map(function (c) { return c.name; });
-        if (!names.length) { el.hidden = true; el.innerHTML = ''; return; }
-        var label = (d.kind === 'movie' ? 'Director' : 'Creator') + (names.length > 1 ? 's' : '');
+        var people = (d.crew || []).filter(function (c) { return c.job === key; }).slice(0, 3);
+        if (!people.length) { el.hidden = true; el.innerHTML = ''; return; }
+        var label = (d.kind === 'movie' ? 'Director' : 'Creator') + (people.length > 1 ? 's' : '');
         el.innerHTML = '<span class="vd-crew-line-k">' + label + '</span> ' +
-            names.slice(0, 3).map(esc).join(', ');
+            people.map(personName).join(', ');
         el.hidden = false;
     }
 
@@ -270,12 +277,14 @@
 
         var crewHost = q('[data-vd-crew]');
         if (crewHost) {
-            // Group crew by job (Creator / Director / Writer …) → "Job: A, B".
+            // Group crew by job (Creator / Director / Writer …) → "Job: A, B" with
+            // each name clickable → person page.
             var byJob = {};
-            crew.forEach(function (c) { (byJob[c.job || 'Crew'] = byJob[c.job || 'Crew'] || []).push(c.name); });
+            crew.forEach(function (c) { (byJob[c.job || 'Crew'] = byJob[c.job || 'Crew'] || []).push(c); });
             crewHost.innerHTML = Object.keys(byJob).map(function (job) {
                 return '<span class="vd-crew-item"><span class="vd-crew-job">' + esc(job) +
-                    (byJob[job].length > 1 ? 's' : '') + '</span> ' + esc(byJob[job].join(', ')) + '</span>';
+                    (byJob[job].length > 1 ? 's' : '') + '</span> ' +
+                    byJob[job].map(personName).join(', ') + '</span>';
             }).join('');
         }
         var castHost = q('[data-vd-cast]');
@@ -402,10 +411,17 @@
                     '" target="_blank" rel="noopener" title="Play on ' + sv + '">' +
                     sicon + '<span class="vd-prov-name">Play on ' + sv + '</span></a>';
             }
-            // Streaming providers (JustWatch via TMDB) link to the where-to-watch page.
+            // Streaming providers (JustWatch via TMDB) link to the where-to-watch
+            // page. (TMDB only gives one aggregate link, so they share it.) Drop a
+            // provider that's the same service as your server tile (e.g. Plex), so
+            // it isn't listed twice.
             var link = ex.providers_link || '';
-            if (ex.providers && ex.providers.length) {
-                html += ex.providers.map(function (p) {
+            var srvName = (ex.server && ex.server.server || '').toLowerCase();
+            var provs = (ex.providers || []).filter(function (p) {
+                return (p.name || '').toLowerCase() !== srvName;
+            });
+            if (provs.length) {
+                html += provs.map(function (p) {
                     var img = p.logo ? '<img src="' + esc(p.logo) + '" alt="' + esc(p.name) + '" loading="lazy">'
                         : '<span class="vd-prov-ph">' + esc((p.name || '?').charAt(0)) + '</span>';
                     var inner = img + '<span class="vd-prov-name">' + esc(p.name) + '</span>';
@@ -692,6 +708,7 @@
         currentId = id;
         showLoading(true);
         resetExtras();
+        showEpSyncing(false);
         ['[data-vd-episodes]', '[data-vd-season-nav]'].forEach(function (s) { var n = q(s); if (n) n.innerHTML = ''; });
         var r0 = root(); if (r0) r0.style.removeProperty('--vd-accent-rgb');
         fetch(detailURL('show', id, currentSource), { headers: { 'Accept': 'application/json' } })
@@ -730,17 +747,29 @@
             || (data.imdb_id && !data.imdb_rating);
         if (!needs) return;
         artAttemptedFor = id;
+        // The full episode list (owned + missing) is being pulled from TMDB — this
+        // can take a while, so show the user it's happening instead of a silent gap.
+        if (!data.episodes_synced) showEpSyncing(true);
         fetch(DETAIL_URL + 'show/' + id + '/refresh-art',
             { method: 'POST', headers: { 'Accept': 'application/json' } })
             .then(function (r) { return r.ok ? r.json() : null; })
-            .then(function (res) { if (res && res.ok && currentId === id) reloadDetail(id); })
-            .catch(function () { /* best-effort */ });
+            .then(function (res) {
+                if (res && res.ok && currentId === id) reloadDetail(id);
+                else showEpSyncing(false);
+            })
+            .catch(function () { showEpSyncing(false); });
+    }
+
+    function showEpSyncing(on) {
+        var el = q('[data-vd-ep-syncing]');
+        if (el) el.hidden = !on;
     }
 
     function reloadDetail(id) {
         fetch(DETAIL_URL + 'show/' + id, { headers: { 'Accept': 'application/json' } })
             .then(function (r) { return r.ok ? r.json() : null; })
             .then(function (d) {
+                showEpSyncing(false);
                 if (!d || d.error || currentId !== id) return;
                 data = d;
                 if (!seasonByNum(selectedSeason)) {
@@ -748,7 +777,7 @@
                 }
                 renderBillboard(d); renderSeasonNav(); renderEpisodes();
             })
-            .catch(function () { /* ignore */ });
+            .catch(function () { showEpSyncing(false); });
     }
 
     // ── events ────────────────────────────────────────────────────────────────
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index adfe45a5..160d5003 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -1174,15 +1174,18 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
 }
 
 /* ── billboard: Play CTA, crew line, next-episode, season overview ────────── */
+/* Matches .vd-trailer-btn exactly (consistent with the other hero buttons) —
+   just green to read as "owned / play". */
 .vd-play-btn {
-    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
-    padding: 11px 22px; border-radius: 10px; font-size: 15px; font-weight: 800;
-    background: #fff; color: #0b0b0f; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-    transition: transform 0.18s ease, box-shadow 0.18s ease;
+    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 8px;
+    font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
+    color: #fff; background: #22c55e; border: 1px solid transparent;
+    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4); transition: all 0.2s ease;
 }
-.vd-play-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
-.vd-play-logo { height: 17px; width: auto; }
-.vd-play-ic { font-size: 14px; }
+.vd-play-btn:hover { transform: translateY(-1px); filter: brightness(1.08);
+    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.55); }
+.vd-play-logo { height: 14px; width: auto; }
+.vd-play-ic { font-size: 13px; }
 
 .vd-crew-line { font-size: 14px; color: rgba(255, 255, 255, 0.84); margin: 2px 0 14px;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
@@ -1228,3 +1231,21 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
     .vd-skel-content { left: 22px; right: 22px; width: auto; bottom: 60px; }
 }
 @media (prefers-reduced-motion: reduce) { .skel-shine { animation: none; } }
+
+/* clickable crew / director names → person page */
+.vd-person-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
+.vd-person-link:hover { color: rgb(var(--vd-accent-rgb)); border-bottom-color: rgba(var(--vd-accent-rgb), 0.5); }
+
+/* "fetching full episode list" banner (shown while the TMDB cascade runs) */
+.vd-ep-syncing {
+    display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 16px;
+    border-radius: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78);
+    background: rgba(var(--vd-accent-rgb), 0.1); border: 1px solid rgba(var(--vd-accent-rgb), 0.26);
+}
+.vd-ep-syncing-spin {
+    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid rgba(var(--vd-accent-rgb), 0.3); border-top-color: rgb(var(--vd-accent-rgb));
+    animation: vd-ep-spin 0.8s linear infinite;
+}
+@keyframes vd-ep-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .vd-ep-syncing-spin { animation: none; } }